/*
 * Get current value for given head/attr.
 *
 * Returns undefined if no such attr.
 */
function dmx_input (head, attr) {
    var value = $('.dmx-input#' + head + '-' + attr).val();
    
    if (value == undefined )
        return undefined;

    if (value == "")
        return 0; // default
    
    return parseInt(value);
}

/*
 * Update current output value.
 */
function dmx_update (input) {
    var name = input.attr('name');
    var value = input.val();

    console.log("dmx_update: " + name + ": " + value);

    var data = { }; data[name] = value;

    $.ajax({
            type:   'POST',
            data:   data,
    });
}

/*
 * Update color for head.
 */
function dmx_color (head) {
    var alpha = dmx_input(head, 'alpha');

    if (alpha) 
        alpha = alpha / 255;

    $('.dmx-color#' + head + '-color').background_color(
            dmx_input(head, 'red') / 255,
            dmx_input(head, 'green') / 255,
            dmx_input(head, 'blue') / 255,
            alpha
    );
}

/*
 * Update slider from <input>.
 */
function _slider_input (input, slider) {
    var value;

    if (input.val())
        value = parseInt(input.val());
    else
        value = 0;
    
    slider.slider('value', value);
}

/*
 * Bind given <input> to given slider.
 */
function slider_input (input, slider) {
    // bind
    input.change(function () {
        dmx_update(input);
        _slider_input(input, slider);
    });

    // initialize
    _slider_input(input, slider);
}

$(function () {
    $('.dmx-input').each(function () {
        var attr = this.id;
        var head = attr.split('-', 1)[0];
        var input = $(this);
        var slider = $('.dmx-slider#' + attr + '-slider');
        var color = $('.dmx-color#' + head + '-color');
        
        // slider control
        slider.slider({
            orientation:    'horizontal',
            range:          'min',
            min:            0,
            max:            255,

            slide:          function () {
                var value = slider.slider('value');
                
                // update input
                input.val(value.toString());

                if (color) {
                    // update color value
                    dmx_color(head);
                }

                // send output
                dmx_update(input);
            },
        });

        // update slider from <input>
        slider_input(input, slider);

        // init
        if (color) {
            dmx_color(head);
        }
    });
});