converted controls into an overlay

css/uhr.css

@@ -164,7 +164,43 @@ body {
 }
 
 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
-	right: 0px; 
+	right: 0;
+}
+
+a.uhr-configlink {
+    cursor: pointer;
+    background: url("../resources/settings.png") no-repeat;
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+    margin: 2px;
+}
+.uhr-controlpanel {
+    background-color: rgba(0,0,0,0.5);
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+.uhr-controlpanel .content {
+    background-color: #fff;
+    margin-left: auto;
+    margin-right: auto;
+    width: 10em;
+    padding: 2em;
+    border-radius: 0.5em;
+    position: relative;
+}
+a.uhr-closecontrolpanel {
+    cursor: pointer;
+    display: inline-block;
+    position: absolute;
+    right: 3px;
+    top: 3px;
+    width: 24px;
+    height: 24px;
+    background: url("../resources/close.png") no-repeat;
 }
 #disclaimer {
 	font-size: 0.5em;

js/uhr.js

@@ -147,12 +147,14 @@
         e.css('font-size', (realWidth / 40) + 'px');
 
         if (this.options.controls) {
-            var configlink = $('<a id="uhr-configlink' + this.id + '">Configure</a>');
+            var configlink = $('<a class="uhr-configlink" id="uhr-configlink' + this.id + '"></a>');
             configlink.on('click', function () {
                 showConfigScreen.bind(this)();
             }.bind(this));
             e.after(configlink);
             var controlpanel = $('<div class="uhr-controlpanel" id="uhr-controlpanel' + this.id + '"></div>');
+            var content = $('<div class="content"></div>');
+            controlpanel.append(content);
             // on/off switch
             var toggleSwitch = $('<div class="onoffswitch" id="uhr-onoffswitch' + this.id + '"></div>');
             toggleSwitch.append('<input type="checkbox" class="onoffswitch-checkbox" id="uhr-onoffswitch-checkbox' + this.id + '" checked="checked" />');
@@ -160,7 +162,7 @@
                 + '<div class="onoffswitch-inner"></div>'
                 + '<div class="onoffswitch-switch"></div>'
                 + '</label>');
-            controlpanel.append(toggleSwitch);
+            content.append(toggleSwitch);
 
             // language chooser
             if (uhrGlobals.languages.length > 1) {
@@ -168,7 +170,7 @@
                 uhrGlobals.languages.forEach(function (item) {
                     languageChooser.append('<option value="' + item.code + '">' + item.language + '</option>');
                 });
-                controlpanel.append(languageChooser);
+                content.append(languageChooser);
             }
 
             // theme chooser
@@ -177,13 +179,13 @@
                 uhrGlobals.themes.forEach(function (item) {
                     themeChooser.append('<option value="' + item.styleClass + '">' + item.name + '</option>');
                 });
-                controlpanel.append(themeChooser);
+                content.append(themeChooser);
             }
-            var closebutton = $('<a class="uhr-closecontrolpanel" id="uhr-closecontrolpanel' + this.id + '">close</a>');
+            var closebutton = $('<a class="uhr-closecontrolpanel" id="uhr-closecontrolpanel' + this.id + '"></a>');
             closebutton.on('click', function () {
                 $('#uhr-controlpanel' + this.id).hide();
             }.bind(this));
-            controlpanel.append(closebutton);
+            content.append(closebutton);
             e.after(controlpanel);
             controlpanel.hide();
         }