$.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);
    });
});