--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/static/color-slider.js	Sun Apr 20 23:51:57 2014 +0300
@@ -0,0 +1,55 @@
+$.fn.extend({
+    /*
+     * Set background to solid color
+     */
+    background_color: function (r, g, b, a) {
+        if (a == undefined)
+            a = 1.0;
+
+        this.css('background', 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')');
+    },
+});
+
+function color_slider_slide (event, ui) {
+    // $(this).css('background', 'rgba(0, 0, 0, ' + (ui.value / 255) + ')');
+
+    $('#color').background_color(
+            $('#slider-r').slider('value'),
+            $('#slider-g').slider('value'),
+            $('#slider-b').slider('value')
+    );
+    
+    $(['r', 'g', 'b']).each(function (i, c) {
+        var value = $('#slider-' + c).slider('value');
+        var input = $('#' + c);
+        var color = {r: 0, g: 0, b: 0};
+        
+        color[c] = 255;
+
+        input.val(value.toString(16));
+        input.background_color(color.r, color.b, color.g, value / 255);
+    });
+}
+
+$(function () {
+    $('.color-slider').slider({
+        orientation:    'horizontal',
+        range:          'min',
+        min:            0,
+        max:            255,
+
+        slide:          color_slider_slide,
+    });
+    
+    $(['r', 'g', 'b']).each(function (i, c) {
+        var input = $('#' + c);
+        var value;
+
+        if (input.val())
+            value = parseInt(input.val(), 16);
+        else
+            value = 0;
+        
+        $('#slider-' + c).slider('value', value);
+    });
+});