# HG changeset patch
# User hertzhaft
# Date 1333200440 -7200
# Node ID c7fd2f23995362c0a72de38735c17d42017ba61f
# Parent  95d28c6ad0188b6a8e6b12fe40770c0977842010
rgb slider: color labels, first step to color indicator

diff -r 95d28c6ad018 -r c7fd2f239953 webapp/src/main/webapp/jquery/jquery.digilib.css
--- a/webapp/src/main/webapp/jquery/jquery.digilib.css	Sat Mar 31 12:10:34 2012 +0200
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.css	Sat Mar 31 15:27:20 2012 +0200
@@ -178,7 +178,34 @@
 	border: 2px solid lightcyan;
 	background-color: lightgrey;
 	width: 400px;
-	padding: 10px;	
+	padding: 10px;
+	position: absolute;
+    top: 0px;	
+    }
+
+div.dl-digilib div.dl-rgbslidergrey span,
+div.dl-digilib div.dl-rgbsliderindicator span {
+    padding: 0px 20px;
+    }
+
+div.dl-digilib td.dl-color div {
+    color: lightcyan;
+    border: 2px solid lightcyan;
+    text-align: center;
+    padding: 20px 0px;
+    margin: 10px;
+    }
+
+div.dl-digilib td.dl-r div {
+    background-color: #800000;
+    }
+
+div.dl-digilib td.dl-g div {
+    background-color: #008000;
+    }
+
+div.dl-digilib td.dl-b div {
+    background-color: #000080;
     }
 
 div.dl-digilib div.dl-singleslider {
@@ -186,7 +213,9 @@
 	border: 2px solid lightcyan;
 	background-color: lightgrey;
 	width: 300px;
-	padding: 10px;	
+	padding: 10px;
+	position: absolute;
+    top: 0px;	
     }
 
 div.dl-digilib div.dl-slider {
@@ -262,9 +291,9 @@
     width: 100%;
 }
 
-div.dl-digilib table.dl-rgbslider td.rgb {
+div.dl-digilib table.dl-rgbslider td.dl-rgb {
     width: 40%;
-    padding: 10px;
+    padding: 6px;
     border: 2px solid lightcyan;
 }
 
diff -r 95d28c6ad018 -r c7fd2f239953 webapp/src/main/webapp/jquery/jquery.digilib.sliders.js
--- a/webapp/src/main/webapp/jquery/jquery.digilib.sliders.js	Sat Mar 31 12:10:34 2012 +0200
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.sliders.js	Sat Mar 31 15:27:20 2012 +0200
@@ -140,8 +140,8 @@
         var data = this;
         setStartValues(data, 'a');
         setStartValues(data, 'm');
-        var idSlider = '#'+ data.settings.cssPrefix + 'slider';
-        fn.centerOnScreen(data, fn.find(data, idSlider));
+        var sliderSelector = '#'+ data.settings.cssPrefix + 'slider';
+        fn.centerOnScreen(data, fn.find(data, sliderSelector));
     };
 
     // set m/a start values for sliders
@@ -251,21 +251,43 @@
         the new values are passed to the "callback" function.
      */
     var rgbSlider = function (data, callback) {
-        var cls = data.settings.cssPrefix + 'rgbslider';
-        var $table = $('<table class="'+cls+'" />');
+        var css = data.settings.cssPrefix;
+        var cls = css + 'rgbslider';
+        var html = '\
+            <div>\
+                <table class="'+cls+'" />\
+                <div class="'+cls+'grey">\
+                    <span/><span/><span/><span/><span/><span/><span/><span/><span/>\
+                </div>\
+                <div class="'+cls+'indicator">\
+                    <span/><span/><span/><span/><span/><span/><span/><span/><span/>\
+                </div>\
+            </div>';
+        var $div = $(html);
+        var $table = $div.find('table');
         var setupTableRow = function(index, value) {
             var color = rgb[value];
             // start values are set in "handleSetup"
+            var $tr = $('<tr/>').appendTo($table);
+            var html = '\
+                <td class="'+css+'color '+css+value+'">\
+                    <div>'+color.label+'</div>\
+                </td>';
+            $(html).appendTo($tr);
             var $brgt = tinySlider(data, 'brgt', color.a);
             var $cont = tinySlider(data, 'cont', color.m);
             $table.data(value+'a', $brgt.data('$text'));
             $table.data(value+'m', $cont.data('$text'));
-            var $tr = $('<tr/>').appendTo($table);
-            var $td = $('<td class="color">'+color.label+'</td>').appendTo($tr);
-            var $td = $('<td class="rgb"/>').append($brgt).appendTo($tr);
-            var $td = $('<td class="rgb"/>').append($cont).appendTo($tr);
+            $('<td class="'+css+'rgb"/>').append($brgt).appendTo($tr);
+            $('<td class="'+css+'rgb"/>').append($cont).appendTo($tr);
             }
         $.each(primaryColors, setupTableRow);
+        var greyValues = function (index) {
+            var val = index * 32;
+            $(this).css('background-color', 'rgb('+val+','+val+','+val+')');
+            };
+        $div.find('div.'+cls+'grey span').each(greyValues);
+        $div.find('div.'+cls+'indicator span').each(greyValues);
         var getValues = function () {
             // get values from sliders
             var input = $table.data();
@@ -273,7 +295,7 @@
             var rgbm = input['rm'].val() + '/' + input['gm'].val() + '/' + input['bm'].val();
             callback(rgbm, rgba);
             };
-        setupFormDiv(data, $table, 'rgbslider', getValues);
+        setupFormDiv(data, $div, 'rgbslider', getValues);
     };
 
     // plugin object with name and init