Qii.js

App.Views.Qii = App.Views.BaseWidget.extend({
    tagName: 'div', 
    className: 'Widget GreyFrame LightWidget', 
    template: window.Templates.Qii, 

    bindMod: function() {
        this.onoffmod = new window.Modules.OnOff( '#' + this.$el.attr( 'id' ) + ' div.OnOffMod' );
        this.slider = new window.Modules.Slider( '#' + this.$el.attr( 'id' ) + ' div.GreyScaleMod' );
        this.qii = new window.Modules.Light( '#' + this.$el.attr( 'id' ) + ' div.LightMod' );
        
        this.slider.setPercentage( 100 );
        
        this.whiteValue = 0;
        this.colorValue = 0;

        var el0 = this.model.attributes.elements[0]; // On/Off
        var el1 = this.model.attributes.elements[1]; // Intensity
        var el2 = this.model.attributes.elements[2]; // White/Color

        // Set starting states from database
        if ( el0 != null && el0.currentData.on ) {
            this.onoffmod.setOn( true );
        }
        if ( el1 != null && el1.currentData.percentage ) {
            this.slider.setPercentage( el1.currentData.percentage );      
        }
        if ( el2 != null && el2.currentData.white && el2.currentData.white.percentage ) {
            this.whiteValue = el2.currentData.white.percentage;        
        }
        if ( el2 != null && el2.currentData.color && el2.currentData.color.percentage ) {
            this.colorValue = el2.currentData.color.percentage;
        }

        this.qii.slider.setPercentage( this.whiteValue );

        this.qii.slider.events.bind('drag:start', function() {
          this.sliding = true;
        }.bind(this));
        this.qii.slider.events.bind('drag:stop', function() {
          this.sliding = false;
        }.bind(this));

        this.slider.events.bind('drag:start', function() {
          this.sliding = true;
        }.bind(this));

        this.qii.events.bind( 'activate:white', function() {
            this.qii.slider.setPercentage( this.whiteValue );
        }.bind( this ));

        this.qii.events.bind( 'activate:color', function() {
            this.qii.slider.setPercentage( this.colorValue );
        }.bind( this ));


        this.onoffmod.events.bind( 'set:on set:off', function ( value ) {
            var onOffValue = value.localeCompare( 'on' ) ? 0 : 1;

            if ( el0 ) {
                var data = {
                    onoff: onOffValue, 
                    slider1_val: -1, 
                    slider2_val: -1, 
                    slider3_val: -1, 
                    slider4_val: -1, 
                    slider5_val: -1
                }
                SendNextIcdValuesAction( el0, data );          
                this.SendData( el0, { on: onOffValue });
            } else { console.log( 'WARNING - No element 0 found for QII Widget.' ); }
        }.bind( this ));

        this.slider.events.bind( 'drag:stop', function() {
          if(el1 && el2) {
            var intensity = this.slider.getPercentage();
            intensity = this.applyScale({slider1_val: intensity / 100}, 0, 65535).slider1_val;
            this.SendData( el1, { percentage: intensity / 655.35 } );
            SendNextIcdValuesAction(el2, {onoff: -1, slider1_val: intensity, slider2_val: -1, slider3_val: -1, slider4_val: -1, slider5_val: -1});
          } else {
            console.error("WARNING - No element 1 found for QII Widget.");
          }
        }.bind( this ));

        this.qii.slider.events.bind( 'drag:stop', function () {
            var intensity = this.slider.getPercentage() / 100;

            if ( el2.actions.length > 0 ) {
                var light = App.LightSettings.get( el2.actions[0].icdValue ), 
                    l = light.attributes;

                var data;

                if ( this.qii.isWhiteType() ) {
                    var temp = App.LightTemps.get( this.$el.attr( 'data-white' ) ), 
                        t = temp.attributes;

                    data = {
                        onoff: 1,
                        slider1_val: intensity,
                        slider2_val: t.x,
                        slider3_val: t.y,
                        slider4_val: 255, 
                        slider5_val: -1
                    };
                }

                if ( this.qii.isColorType() ) {
                    var xyY = this.$el.attr( 'data-xyY' ).split( ',' );
                    data = {
                        onoff: 1,
                        slider1_val: intensity,
                        slider2_val: xyY[0],
                        slider3_val: xyY[1],
                        slider4_val: 255,
                        slider5_val: -1
                    };
                }

                SendNextIcdValuesAction( el2, this.applyScale( data, 0, 65535 ));

            }
            
            this.SendData( el1, { percentage: intensity * 100 });

            // White/Color Slider         
            if ( this.qii.isColorType() ) {
                this.colorValue = this.qii.slider.getPercentage();
            } else {
                this.whiteValue = this.qii.slider.getPercentage();
            }

            this.SendData( el2, { white: { percentage: this.whiteValue }, color: { percentage: this.colorValue } });

        }.bind( this ));

        this.qii.slider.events.bind( 'drag:move', function () {
            var percentage = this.qii.slider.getPercentage();
            console.log(result);
            this.qii.isColorType() && this.setxyY( percentage );
            this.qii.isWhiteType() && this.setWhiteStep( percentage );

        }.bind( this ));

        window.socket.on( 'widget' + this.model.attributes.id, function( result ) {
            if(result.weak && this.sliding) return;
            if ( result.id.element == 0 ) {
                if ( result.data && result.data.value.on )  {
                    this.onoffmod.setOn( true );
                } else {
                    this.onoffmod.setOff( true );
                }

            } else if ( result.id.element == 1 ) {
                if ( result.data && result.data.value && result.data.value.percentage != undefined ) {
                    this.slider.setPercentage( result.data.value.percentage );
                }
            } else if ( result.id.element == 2 ) {                
                if ( result.data && result.data.value && result.data.value.white && result.data.value.white.percentage != undefined ) {
                    this.whiteValue = result.data.value.white.percentage;
                    this.qii.isWhiteType() && this.qii.slider.setPercentage( this.whiteValue );
                }
                if ( result.data && result.data.value && result.data.value.color && result.data.value.color.percentage != undefined ) {
                    this.colorValue = result.data.value.color.percentage;
                    this.qii.isColorType() && this.qii.slider.setPercentage( this.colorValue );
                }
            }
        }.bind( this ));
    },

    setxyY:function( percentage ) {
        var rgb = hsl2rgb( ( percentage * 3.60 ), 100, 50 );
        var xyY = rgb2xyY(rgb[0], rgb[1], rgb[2]);

        this.$el.attr( 'data-xyY', xyY );
    },

    setWhiteStep:function( percentage ) {
        var numberOfSteps = App.LightTemps.length - 1;
        var step = Math.round( percentage * ( numberOfSteps / 100 ) ) + 1;
        this.$el.attr( 'data-white', step );
    },

    applyScale:function( attrs, min, max ) {
        var keys = [ 'slider1_val', 'slider2_val', 'slider3_val' ];

        _.each( keys, function( k ) {attrs[k] = Math.round( ( max-min )*( attrs[k]) - min );}, this );
        return attrs;
     }
});