terom@85: /*
terom@85:  * Get current value for given head/attr.
terom@85:  *
terom@85:  * Returns undefined if no such attr.
terom@85:  */
terom@83: function dmx_input (head, attr) {
terom@83:     var value = $('.dmx-input#' + head + '-' + attr).val();
terom@83:     
terom@83:     if (value == undefined )
terom@83:         return undefined;
terom@83: 
terom@83:     if (value == "")
terom@83:         return 0; // default
terom@83:     
terom@83:     return parseInt(value);
terom@83: }
terom@83: 
terom@83: /*
terom@85:  * Update current output value.
terom@85:  */
terom@85: function dmx_update (input) {
terom@85:     var name = input.attr('name');
terom@85:     var value = input.val();
terom@85: 
terom@85:     console.log("dmx_update: " + name + ": " + value);
terom@85: 
terom@85:     var data = { }; data[name] = value;
terom@85: 
terom@85:     $.ajax({
terom@85:             type:   'POST',
terom@85:             data:   data,
terom@85:     });
terom@85: }
terom@85: 
terom@85: /*
terom@83:  * Update color for head.
terom@83:  */
terom@83: function dmx_color (head) {
terom@83:     var alpha = dmx_input(head, 'alpha');
terom@83: 
terom@83:     if (alpha) 
terom@83:         alpha = alpha / 255;
terom@83: 
terom@83:     $('.dmx-color#' + head + '-color').background_color(
terom@83:             dmx_input(head, 'red') / 255,
terom@83:             dmx_input(head, 'green') / 255,
terom@83:             dmx_input(head, 'blue') / 255,
terom@83:             alpha
terom@83:     );
terom@83: }
terom@83: 
terom@83: /*
terom@83:  * Update slider from <input>.
terom@83:  */
terom@83: function _slider_input (input, slider) {
terom@83:     var value;
terom@83: 
terom@83:     if (input.val())
terom@83:         value = parseInt(input.val());
terom@83:     else
terom@83:         value = 0;
terom@83:     
terom@83:     slider.slider('value', value);
terom@83: }
terom@83: 
terom@83: /*
terom@83:  * Bind given <input> to given slider.
terom@83:  */
terom@83: function slider_input (input, slider) {
terom@83:     // bind
terom@85:     input.change(function () {
terom@85:         dmx_update(input);
terom@85:         _slider_input(input, slider);
terom@85:     });
terom@83: 
terom@83:     // initialize
terom@83:     _slider_input(input, slider);
terom@83: }
terom@83: 
terom@83: $(function () {
terom@83:     $('.dmx-input').each(function () {
terom@83:         var attr = this.id;
terom@83:         var head = attr.split('-', 1)[0];
terom@83:         var input = $(this);
terom@83:         var slider = $('.dmx-slider#' + attr + '-slider');
terom@83:         var color = $('.dmx-color#' + head + '-color');
terom@83:         
terom@83:         // slider control
terom@83:         slider.slider({
terom@83:             orientation:    'horizontal',
terom@83:             range:          'min',
terom@83:             min:            0,
terom@83:             max:            255,
terom@83: 
terom@83:             slide:          function () {
terom@83:                 var value = slider.slider('value');
terom@83:                 
terom@83:                 // update input
terom@83:                 input.val(value.toString());
terom@83: 
terom@83:                 if (color) {
terom@83:                     // update color value
terom@83:                     dmx_color(head);
terom@83:                 }
terom@83: 
terom@85:                 // send output
terom@85:                 dmx_update(input);
terom@83:             },
terom@83:         });
terom@83: 
terom@83:         // update slider from <input>
terom@83:         slider_input(input, slider);
terom@83: 
terom@83:         // init
terom@83:         if (color) {
terom@83:             dmx_color(head);
terom@83:         }
terom@83:     });
terom@83: });