put controls in their own div element and hide/show it with action links.

now to do: css styling!

js/uhr.js

@@ -125,6 +125,9 @@
         }
     };
     // private helper methods (not exported)
+    var showConfigScreen = function showConfigScreen() {
+        $('#uhr-controlpanel' + this.id).show();
+    };
     // set up
     var setupHTML = function setupHTML() {
         var e = this.element;
@@ -144,6 +147,12 @@
         e.css('font-size', (realWidth / 40) + 'px');
 
         if (this.options.controls) {
+            var configlink = $('<a id="uhr-configlink' + this.id + '">Configure</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>');
             // 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" />');
@@ -151,7 +160,7 @@
                 + '<div class="onoffswitch-inner"></div>'
                 + '<div class="onoffswitch-switch"></div>'
                 + '</label>');
-            e.after(toggleSwitch);
+            controlpanel.append(toggleSwitch);
 
             // language chooser
             if (uhrGlobals.languages.length > 1) {
@@ -159,7 +168,7 @@
                 uhrGlobals.languages.forEach(function (item) {
                     languageChooser.append('<option value="' + item.code + '">' + item.language + '</option>');
                 });
-                e.after(languageChooser);
+                controlpanel.append(languageChooser);
             }
 
             // theme chooser
@@ -168,8 +177,15 @@
                 uhrGlobals.themes.forEach(function (item) {
                     themeChooser.append('<option value="' + item.styleClass + '">' + item.name + '</option>');
                 });
-                e.after(themeChooser);
+                controlpanel.append(themeChooser);
             }
+            var closebutton = $('<a class="uhr-closecontrolpanel" id="uhr-closecontrolpanel' + this.id + '">close</a>');
+            closebutton.on('click', function () {
+                $('#uhr-controlpanel' + this.id).hide();
+            }.bind(this));
+            controlpanel.append(closebutton);
+            e.after(controlpanel);
+            controlpanel.hide();
         }
     };
     var wireFunctionality = function wireFunctionality() {
@@ -192,7 +208,8 @@
         // language chooser
         var languageChooser = $('#uhr-languagechooser' + this.id);
         languageChooser.on('change', function () {
-            this.language(this.value);
+            var languageKey = $('#uhr-languagechooser' + this.id).val();
+            this.language(languageKey);
         }.bind(this));
         var selectedLanguage = $.cookie('uhr-language' + this.id);
         if (selectedLanguage === undefined || this.options.force) {
@@ -218,7 +235,8 @@
         // theme chooser
         var themeChooser = $('#uhr-themechooser' + this.id);
         themeChooser.on('change', function () {
-            this.theme(this.value);
+            var themeKey = $('#uhr-themechooser' + this.id).val();
+            this.theme(themeKey);
         }.bind(this));
         var selectedTheme = $.cookie('uhr-theme' + this.id);
         if (selectedTheme === undefined || this.options.force) {