terom@80: $.fn.extend({
terom@80:     /*
terom@80:      * Set background to solid color
terom@80:      */
terom@80:     background_color: function (r, g, b, a) {
terom@80:         if (a == undefined)
terom@80:             a = 1.0;
terom@80: 
terom@80:         this.css('background', 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')');
terom@80:     },
terom@80: });
terom@80: 
terom@80: function color_slider_slide (event, ui) {
terom@80:     // $(this).css('background', 'rgba(0, 0, 0, ' + (ui.value / 255) + ')');
terom@80: 
terom@80:     $('#color').background_color(
terom@80:             $('#slider-r').slider('value'),
terom@80:             $('#slider-g').slider('value'),
terom@80:             $('#slider-b').slider('value')
terom@80:     );
terom@80:     
terom@80:     $(['r', 'g', 'b']).each(function (i, c) {
terom@80:         var value = $('#slider-' + c).slider('value');
terom@80:         var input = $('#' + c);
terom@80:         var color = {r: 0, g: 0, b: 0};
terom@80:         
terom@80:         color[c] = 255;
terom@80: 
terom@80:         input.val(value.toString(16));
terom@81:         input.background_color(color.r, color.g, color.b, value / 255);
terom@80:     });
terom@80: }
terom@80: 
terom@81: function color_slider_input (input, c) {
terom@81:     var value;
terom@81: 
terom@81:     if (input.val())
terom@81:         value = parseInt(input.val(), 16);
terom@81:     else
terom@81:         value = 0;
terom@81:     
terom@81:     $('#slider-' + c).slider('value', value);
terom@81: }
terom@81: 
terom@80: $(function () {
terom@80:     $('.color-slider').slider({
terom@80:         orientation:    'horizontal',
terom@80:         range:          'min',
terom@80:         min:            0,
terom@80:         max:            255,
terom@80: 
terom@80:         slide:          color_slider_slide,
terom@80:     });
terom@80:     
terom@80:     $(['r', 'g', 'b']).each(function (i, c) {
terom@80:         var input = $('#' + c);
terom@80: 
terom@81:         // bind
terom@81:         input.change(function () { color_slider_input($(this), this.id); });
terom@81: 
terom@81:         // initialize
terom@81:         color_slider_input(input, c);
terom@80:     });
terom@80: });