$.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.g, color.b, value / 255);
    });
}

function color_slider_input (input, c) {
    var value;

    if (input.val())
        value = parseInt(input.val(), 16);
    else
        value = 0;
    
    $('#slider-' + c).slider('value', value);
}

$(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);

        // bind
        input.change(function () { color_slider_input($(this), this.id); });

        // initialize
        color_slider_input(input, c);
    });
});