/**
 * View Model that holds the "selectedColor" of the color picker container.
 */
Ext.define('Ext.ux.colorpick.SelectorModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.colorpick-selectormodel',
 
    requires: [
        'Ext.ux.colorpick.ColorUtils'
    ],
 
    data: {
        selectedColor: {
            r: 255,  // red
            g: 255,  // green
            b: 255,  // blue
            h: 0,    // hue,
            s: 1,    // saturation
            v: 1,    // value
            a: 1     // alpha (opacity)
        },
        previousColor: {
            r: 0,    // red
            g: 0,    // green
            b: 0,    // blue
            h: 0,    // hue,
            s: 1,    // saturation
            v: 1,    // value
            a: 1     // alpha (opacity)
        }
    },
 
    formulas: {
        // Hexadecimal representation of the color
        hex: {
            get: function(get) {
                var r = get('selectedColor.r') === null
                        ? get('selectedColor.r')
                        : get('selectedColor.r').toString(16),
                    g = get('selectedColor.g') === null
                        ? get('selectedColor.g')
                        : get('selectedColor.g').toString(16),
                    b = get('selectedColor.b') === null
                        ? get('selectedColor.b')
                        : get('selectedColor.b').toString(16),
                    result;
 
                result = Ext.ux.colorpick.ColorUtils.rgb2hex(r, g, b);
 
                return '#' + result;
            },
 
            set: function(hex) {
                var rgb;
 
                if (!Ext.isEmpty(hex)) {
                    rgb = Ext.ux.colorpick.ColorUtils.parseColor(hex);
 
                    this.changeRGB(rgb);
                }
            }
        },
 
        // "R" in "RGB"
        red: {
            get: function(get) {
                return get('selectedColor.r');
            },
 
            set: function(r) {
                this.changeRGB({ r: r });
            }
        },
 
        // "G" in "RGB"
        green: {
            get: function(get) {
                return get('selectedColor.g');
            },
 
            set: function(g) {
                this.changeRGB({ g: g });
            }
        },
 
        // "B" in "RGB"
        blue: {
            get: function(get) {
                return get('selectedColor.b');
            },
 
            set: function(b) {
                this.changeRGB({ b: b });
            }
        },
 
        // "H" in HSV
        hue: {
            get: function(get) {
                return get('selectedColor.h') * 360;
            },
 
            set: function(hue) {
                this.changeHSV({ h: hue && hue / 360 });
            }
        },
 
        // "S" in HSV
        saturation: {
            get: function(get) {
                return get('selectedColor.s') * 100;
            },
 
            set: function(saturation) {
                this.changeHSV({ s: saturation && saturation / 100 });
            }
        },
 
        // "V" in HSV
        value: {
            get: function(get) {
                var v = get('selectedColor.v');
 
                return v * 100;
            },
 
            set: function(value) {
                this.changeHSV({ v: value && value / 100 });
            }
        },
 
        alpha: {
            get: function(data) {
                var a = data('selectedColor.a');
 
                return a * 100;
            },
 
            set: function(alpha) {
                if (alpha !== null) {
                    this.set('selectedColor', Ext.applyIf({
                        a: alpha / 100
                    }, this.data.selectedColor));
                }
            }
        }
    }, // formulas
 
    changeHSV: function(hsv) {
        var rgb;
 
        if (hsv.h !== null && hsv.s !== null && hsv.v !== null) {
 
            Ext.applyIf(hsv, this.data.selectedColor);
 
            rgb = Ext.ux.colorpick.ColorUtils.hsv2rgb(hsv.h, hsv.s, hsv.v);
 
            hsv.r = rgb.r;
            hsv.g = rgb.g;
            hsv.b = rgb.b;
 
            this.set('selectedColor', hsv);
        }
    },
 
    changeRGB: function(rgb) {
        var hsv;
 
        Ext.applyIf(rgb, this.data.selectedColor);
 
        if (rgb) {
            if (rgb.r !== null && rgb.g !== null && rgb.b !== null) {
 
                hsv = Ext.ux.colorpick.ColorUtils.rgb2hsv(rgb.r, rgb.g, rgb.b);
 
                rgb.h = hsv.h;
                rgb.s = hsv.s;
                rgb.v = hsv.v;
 
                this.set('selectedColor', rgb);
            }
        }
    }
});