/**
 * 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').toString(16),
                    g = get('selectedColor.g').toString(16),
                    b = get('selectedColor.b').toString(16),
                    result;
 
                result = Ext.ux.colorpick.ColorUtils.rgb2hex(r, g, b);
                return '#' + result;
            },
 
            set: function (hex) {
                var rgb = Ext.ux.colorpick.ColorUtils.hex2rgb(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 / 360 });
            }
        },
 
        // "S" in HSV
        saturation: {
            get : function(get) {
                return get('selectedColor.s') * 100;
            },
 
            set: function(saturation) {
                this.changeHSV({ s: saturation / 100 });
            }
        },
 
        // "V" in HSV
        value: {
            get: function(get) {
                var v = get('selectedColor.v');
                return v * 100;
            },
 
            set: function(value) {
                this.changeHSV({ v: value / 100 });
            }
        },
 
        alpha: {
            get: function(data) {
                var a = data('selectedColor.a');
                return a * 100;
            },
 
            set: function(alpha) {
                this.set('selectedColor', Ext.applyIf({
                    a: alpha / 100
                }, this.data.selectedColor));
            }
        }
    }, // formulas
 
    changeHSV: function (hsv) {
        Ext.applyIf(hsv, this.data.selectedColor);
 
        var 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) {
        Ext.applyIf(rgb, this.data.selectedColor);
 
        var 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);
    }
});