added color picker support

I'm not too hapy with it

lib/plugins/styler/admin.php

@@ -84,7 +84,7 @@ class admin_plugin_styler extends DokuWiki_Admin_Plugin {
             foreach($replacements as $key => $value) {
                 echo '<tr>';
                 echo '<td>'.$key.'</td>';
-                echo '<td><input name="tpl['.hsc($key).']" value="'.hsc($value).'" />';
+                echo '<td><input name="tpl['.hsc($key).']" value="'.hsc($value).'" '.$this->colorClass($key).' />';
                 echo '</tr>';
             }
             echo '</table>';
@@ -107,6 +107,32 @@ class admin_plugin_styler extends DokuWiki_Admin_Plugin {
         }
     }
 
+    /**
+     * set the color class attribute
+     */
+    protected function colorClass($key) {
+        static $colors = array(
+            'text',
+            'background',
+            'text_alt',
+            'background_alt',
+            'text_neu',
+            'background_neu',
+            'border',
+            'highlight',
+            'background_site',
+            'link',
+            'existing',
+            'missing',
+        );
+
+        if(preg_match('/colou?r/', $key) || in_array(trim($key,'_'), $colors)) {
+            return 'class="color"';
+        } else {
+            return '';
+        }
+    }
+
     /**
      * saves the preview.ini
      */

lib/plugins/styler/script.js

+/* DOKUWIKI:include_once iris.js */
+
 jQuery(function () {
     // user openend the admin page, set cookie and redirect
-    if(jQuery('#plugin__styler').length) {
+    if (jQuery('#plugin__styler').length) {
         DokuCookie.setValue('styler_plugin', 1);
         document.location.href = DOKU_BASE;
     }
@@ -22,11 +24,12 @@ jQuery(function () {
                 $style.attr('href', DOKU_BASE + 'lib/exe/css.php?preview=1&tseed=' + now);
 
                 // open the dialog
-                $dialog.dialog({
+                var $dlg = $dialog.dialog({
                     'title':    LANG.plugins.styler.menu,
                     'width':    500,
                     'top':      50,
-                    'position': { 'my': 'left top', 'at': 'left top', 'of': window },
+                    'maxHeight': 500,
+                    'position': { 'my': 'left bottom', 'at': 'left bottom', 'of': window },
                     // bring everything back to normal
                     'close':    function (event, ui) {
                         // disable the styler plugin again
@@ -35,6 +38,10 @@ jQuery(function () {
                         document.location.reload()
                     }
                 });
+
+                jQuery('.styler .color').iris({
+                });
+
             }
         );
     }