// Create user extensions namespace (Ext.ux)
Ext.namespace('Ext.ux');

/**
 * Ext.ux.ColorPicker Extension Class for ExtJs 2.0
 *
 * @author Amon
 * @version 2.0
 *
 * Webpage: http://colorpicker.theba.hu
 *
 * @class Ext.ux.ColorPicker
 * @extends Ext.util.Observable
 * @constructor
 * Creates new ColorPicker
 * @param {Object} config Config Object
 * @cfg {Boolean} hidePanel true to hide the inputs (defaults to false)
 * @cfg {Boolean/Object} animate Moving pickers with this animate or false to no animation (defaults to false)
 * @cfg {Object} rgb (optional) Add initial color with rgb format eg.: { r:255, g:128, b:10 }
 * @cfg {Object} hsv (optional) Add initial color with hsv format eg.: { h:100, s:60, v:50 }
 * @cfg {String} color (optional) Add initial color with hexa format eg.: 'A3CF6D'
 * @cfg {Object} pickerHotPoint (optional) If you change the picker image, you can change the point of pick. ( defaults to { x:3, y:3 } )
 * @cfg {Object} captions labels of inputs (defaults to { red: 'R', green: 'G', blue: 'B', hue: 'H°', saturation: 'S%', brightness: 'V%', hexa: 'Color', websafe: 'Websafe' })
 */
Ext.ux.ColorPicker = function( config ) {
    config.bodyStyle = {'padding':'3px'};
    Ext.ux.ColorPicker.superclass.constructor.call( this, config );
    this.initialize( config );
}
// extend Ext.ux.ColorPicker with Ext.util.Observable
Ext.extend(Ext.ux.ColorPicker, Ext.util.Observable, {

    // help for convert hexa
    HCHARS: '0123456789ABCDEF',

    // initialization
    initialize: function( config ) {
        this.events = {};
        this.config = this.config || config;
        this.config.captions = this.config.captions || {};
        this.config.pickerHotPoint = this.config.pickerHotPoint || { x:3, y:3 };
        this._HSV = { h: 0, s: 100, v: 100 };
        this._RGB = { r: 255, g: 255, b: 255 };
        this._HEX = '000000';
        this.lastXYRgb = { x: 0, y: 0 };
        this.lastYHue = 0;
        this.domElement = this.config.renderTo || Ext.DomHelper.append( document.body, {}, true );
        this.domElement.addClass( 'x-cp-panel' );
        this.cpCreateDomObjects();
        if( this.config.hidePanel ) { this.formContainer.hide(); }
        // init internal events
        this.rgbPicker.on( 'mousedown', this.rgbPickerClick.createDelegate( this ), this );
        this.huePicker.on( 'mousedown', this.huePickerClick.createDelegate( this ), this );
        this.wsColorContainer.on( 'mousedown', this.setColorFromWebsafe.createDelegate( this ), this );
        this.inColorContainer.on( 'mousedown', this.setColorFromInvert.createDelegate( this ), this );
        this.colorContainer.on( 'mousedown', this.colorSelected.createDelegate( this ), this );
        Ext.getCmp( 'redValue' + this.domElement.id ).on( 'change', this.changeRGBField.createDelegate( this ) );
        Ext.getCmp( 'greenValue' + this.domElement.id ).on( 'change', this.changeRGBField.createDelegate( this ) );
        Ext.getCmp( 'blueValue' + this.domElement.id ).on( 'change', this.changeRGBField.createDelegate( this ) );
        Ext.getCmp( 'hueValue' + this.domElement.id ).on( 'change', this.changeHSVField.createDelegate( this ) );
        Ext.getCmp( 'saturationValue' + this.domElement.id ).on( 'change', this.changeHSVField.createDelegate( this ) );
        Ext.getCmp( 'brightnessValue' + this.domElement.id ).on( 'change', this.changeHSVField.createDelegate( this ) );
        Ext.getCmp( 'colorValue' + this.domElement.id ).on( 'change', this.changeHexaField.createDelegate( this ) );

        Ext.getCmp( 'redValue' + this.domElement.id ).on( 'specialkey', this.changeRGBField.createDelegate( this ) );
        Ext.getCmp( 'greenValue' + this.domElement.id ).on( 'specialkey', this.changeRGBField.createDelegate( this ) );
        Ext.getCmp( 'blueValue' + this.domElement.id ).on( 'specialkey', this.changeRGBField.createDelegate( this ) );
        Ext.getCmp( 'hueValue' + this.domElement.id ).on( 'specialkey', this.changeHSVField.createDelegate( this ) );
        Ext.getCmp( 'saturationValue' + this.domElement.id ).on( 'specialkey', this.changeHSVField.createDelegate( this ) );
        Ext.getCmp( 'brightnessValue' + this.domElement.id ).on( 'specialkey', this.changeHSVField.createDelegate( this ) );
        Ext.getCmp( 'colorValue' + this.domElement.id ).on( 'specialkey', this.changeHexaField.createDelegate( this ) );
        // initial color check
        this.checkConfig();
        // register events
        this.addEvents({
            /**
             * @event pickcolor
             * Fires when a new color selected
             * @param {Ext.util.ColorPicker} this
             * @param {String} color
             */
            pickcolor: true,
            /**
             * @event selectcolor
             * Fires when a new color selected
             * @param {Ext.util.ColorPicker} this
             * @param {String} color
             */
            selectcolor: true,
            /**
             * @event colorSelected
             * Fires when a new color selected
             * @param {Ext.util.ColorPicker} this
             * @param {String} color
             */
            colorSelected: true,
            /**
             * @event changergb
             * Fires when change rgb input
             * @param {Ext.util.ColorPicker} this
             * @param {Object} color ({ r: redvalue, g: greenvalue, b: bluevalue })
             */
            changergb: true,
            /**
             * @event changehsv
             * Fires when change hsv input
             * @param {Ext.util.ColorPicker} this
             * @param {Object} color ({ h: huevalue, s: saturationvalue, v: brightnessvalue })
             */
            changehsv: true,
            /**
             * @event changehexa
             * Fires when change hexa input
             * @param {Ext.util.ColorPicker} this
             * @param {String} color
             */
            changehexa: true
        });
    },
    // create internal DOM objects
    cpCreateDomObjects: function() {
        this.rgbPicker = Ext.DomHelper.append( this.domElement, {
            tag: 'div',
            cls: 'x-cp-rgb-msk'
        }, true );
        this.rgbPointer = Ext.DomHelper.append( this.rgbPicker, {
            tag: 'div',
            cls: 'x-cp-rgb-picker'
        }, true );
        this.rgbPointer.setXY( [ this.rgbPicker.getLeft()-this.config.pickerHotPoint.x, this.rgbPicker.getTop()-this.config.pickerHotPoint.y ] );
        this.huePicker = Ext.DomHelper.append( this.domElement, {
            tag: 'div',
            cls: 'x-cp-hue-msk'
        }, true );
        this.huePointer = Ext.DomHelper.append( this.huePicker, {
            tag: 'div',
            cls: 'x-cp-hue-picker'
        }, true );
        this.huePointer.setXY( [ this.huePicker.getLeft()+(this.huePointer.getWidth() / 2)+1, this.huePicker.getTop()-this.config.pickerHotPoint.y ] );
        this.formContainer = Ext.DomHelper.append( Ext.DomHelper.append( this.domElement, {
            tag: 'div',
            cls: 'x-cp-control-container x-unselectable'
        }, true ), {
            tag: 'div',
            cls: 'x-cp-rgb-container x-unselectable',
            style: 'clear:both'
        }, true );
        this.form = new Ext.FormPanel({
            hidden:false,
            frame:true,
            width: '130',
            height: 500,
            //height: 'auto',
            //autoHeight: true,
            labelWidth: 20,
            labelAlign: 'right',
            cls: 'x-cp-form',
            items: [{
                    xtype: 'fieldset',
                    title: 'RGB',
                    autoHeight: true,
                    defaultType: 'numberfield',
                    'labelWidth': 20,
                    labelAlign: 'right',
                    items :[{
                            fieldLabel: 'Red',
                            width: 50,
                            id: 'redValue' + this.domElement.id
                        },{
                            fieldLabel: 'Green',
                            width: 50,
                            id: 'greenValue' + this.domElement.id
                        },{
                            fieldLabel: 'Blue',
                            width: 50,
                            id: 'blueValue' + this.domElement.id
                        }
                    ]
                },{
                    xtype: 'fieldset',
                    hidden: false,
                    title: 'HSV',
                    autoHeight:true,
                    defaultType: 'numberfield',
                    'labelWidth': 20,
                    labelAlign: 'right',
                    items :[{
                            fieldLabel: 'Hue',
                            width: 50,
                            id: 'hueValue' + this.domElement.id
                        },{
                            fieldLabel: 'Satur.',
                            width: 50,
                            id: 'saturationValue' + this.domElement.id
                        },{
                            fieldLabel: 'Bright.',
                            width: 50,
                            id: 'brightnessValue' + this.domElement.id
                        }
                    ]
                },{
                    xtype: 'fieldset',
                    title: 'Color',
                    autoHeight: true,
                    defaultType: 'textfield',
                    'labelWidth': 20,
                    labelAlign: 'right',
                    items :[{
                            fieldLabel: 'Color',
                            width: 60,
                            id: 'colorValue' + this.domElement.id
                        }
                    ]
                }
            ]
        });

        this.form.render(this.formContainer);
        var temp = Ext.DomHelper.append( this.form.body, {
            cls: 'x-cp-colors-container x-unselectable'
        }, true);


        this.wsColorContainer = Ext.DomHelper.append( temp, {
            cls: 'x-cp-color-container x-unselectable'
        }, true ).update( this.config.captions.websafe || 'Websafe' );
        
        this.inColorContainer = Ext.DomHelper.append( temp, {
            cls: 'x-cp-color-container x-unselectable'
        }, true ).update( this.config.captions.inverse || 'Inverse' );
        
        this.colorContainer = Ext.DomHelper.append( temp, {
            cls: 'x-cp-color-container x-unselectable'
        }, true ).update( this.config.captions.color || 'Click to select' );
        
        Ext.DomHelper.append( temp, { tag: 'div', style: 'height:0px;border:none;clear:both;font-size:1px;' });
        this.form.render( this.formContainer );
        Ext.DomHelper.append( this.domElement, { tag: 'div', style: 'height:0px;border:none;clear:both;font-size:1px;' });
    },
    /**
     * Convert a float to decimal
     * @param {Float} n
     * @return {Integer}
     */
    realToDec: function( n ) {
        return Math.min( 255, Math.round( n * 256 ) );
    },
    /**
     * Convert HSV color format to RGB color format
     * @param {Integer/Array( h, s, v )} h
     * @param {Integer} s (optional)
     * @param {Integer} v (optional)
     * @return {Array}
     */
    hsvToRgb: function( h, s, v ) {
        if( h instanceof Array ) { return this.hsvToRgb.call( this, h[0], h[1], h[2] ); }
        var r, g, b, i, f, p, q, t;
        i = Math.floor( ( h / 60 ) % 6 );
        f = ( h / 60 ) - i;
        p = v * ( 1 - s );
        q = v * ( 1 - f * s );
        t = v * ( 1 - ( 1 - f ) * s );
        switch(i) {
            case 0: r=v; g=t; b=p; break;
            case 1: r=q; g=v; b=p; break;
            case 2: r=p; g=v; b=t; break;
            case 3: r=p; g=q; b=v; break;
            case 4: r=t; g=p; b=v; break;
            case 5: r=v; g=p; b=q; break;
        }
        return [this.realToDec( r ), this.realToDec( g ), this.realToDec( b )];
    },
    /**
     * Convert RGB color format to HSV color format
     * @param {Integer/Array( r, g, b )} r
     * @param {Integer} g (optional)
     * @param {Integer} b (optional)
     * @return {Array}
     */
    rgbToHsv: function( r, g, b ) {
        if( r instanceof Array ) { return this.rgbToHsv.call( this, r[0], r[1], r[2] ); }
        r = r / 255;
        g = g / 255;
        b = b / 255;
        var min, max, delta, h, s, v;
        min = Math.min( Math.min( r, g ), b );
        max = Math.max( Math.max( r, g ), b );
        delta = max - min;
        switch (max) {
            case min: h = 0; break;
            case r:   h = 60 * ( g - b ) / delta;
                if ( g < b ) { h += 360; }
                break;
            case g:   h = ( 60 * ( b - r ) / delta ) + 120; break;
            case b:   h = ( 60 * ( r - g ) / delta ) + 240; break;
        }
        s = ( max === 0 ) ? 0 : 1 - ( min / max );
        return [Math.round( h ), s, max];
    },
    /**
     * Convert RGB color format to Hexa color format
     * @param {Integer/Array( r, g, b )} r
     * @param {Integer} g (optional)
     * @param {Integer} b (optional)
     * @return {String}
     */
    rgbToHex: function( r, g, b ) {
        if( r instanceof Array ) { return this.rgbToHex.call( this, r[0], r[1], r[2] ); }
        return this.decToHex( r ) + this.decToHex( g ) + this.decToHex( b );
    },
    /**
     * Convert an integer to hexa
     * @param {Integer} n
     * @return {String}
     */
    decToHex: function( n ) {
        n = parseInt(n, 10);
        n = ( !isNaN( n )) ? n : 0;
        n = (n > 255 || n < 0) ? 0 : n;
        return this.HCHARS.charAt( ( n - n % 16 ) / 16 ) + this.HCHARS.charAt( n % 16 );
    },
    /**
     * Return with position of a character in this.HCHARS string
     * @private
     * @param {Char} c
     * @return {Integer}
     */
    getHCharPos: function( c ) {
        return this.HCHARS.indexOf( c.toUpperCase() );
    },
    /**
     * Convert a hexa string to decimal
     * @param {String} hex
     * @return {Integer}
     */
    hexToDec: function( hex ) {
        var s = hex.split('');
        return ( ( this.getHCharPos( s[0] ) * 16 ) + this.getHCharPos( s[1] ) );
    },
    /**
     * Convert a hexa string to RGB color format
     * @param {String} hex
     * @return {Array}
     */
    hexToRgb: function( hex ) {
        return [ this.hexToDec( hex.substr(0, 2) ), this.hexToDec( hex.substr(2, 2) ), this.hexToDec( hex.substr(4, 2) ) ];
    },
    /**
     * Not documented yet
     */
    checkSafeNumber: function( v ) {
        if ( !isNaN( v ) ) {
            v = Math.min( Math.max( 0, v ), 255 );
            var i, next;
            for( i=0; i<256; i=i+51 ) {
                next = i + 51;
                if ( v>=i && v<=next ) { return ( v - i > 25 ) ? next : i; }
            }
        }
        return v;
    },
    /**
     * Not documented yet
     */
    websafe: function( r, g, b ) {
        if( r instanceof Array ) { return this.websafe.call( this, r[0], r[1], r[2] ); }
        return [this.checkSafeNumber( r ), this.checkSafeNumber( g ), this.checkSafeNumber( b )];
    },
    /**
     * Not documented yet
     */
    invert: function( r, g, b ) {
        if( r instanceof Array ) { return this.invert.call( this, r[0], r[1], r[2] ); }
        return [255-r,255-g,255-b];
    },
    /**
     * Convert Y coordinate to HUE value
     * @private
     * @param {Integer} y
     * @return {Integer}
     */
    getHue: function( y ) {
        var hue = 360 - Math.round( ( ( this.huePicker.getHeight() - y ) / this.huePicker.getHeight() ) * 360 );
        return hue === 360 ? 0 : hue;
    },
    /**
     * Convert HUE value to Y coordinate
     * @private
     * @param {Integer} hue
     * @return {Integer}
     */
    getHPos: function( hue ) {
        //return this.huePicker.getHeight() - ( ( hue * this.huePicker.getHeight() ) / 360 );
        return hue * ( this.huePicker.getHeight() / 360 );
    },
    /**
     * Convert X coordinate to Saturation value
     * @private
     * @param {Integer} x
     * @return {Integer}
     */
    getSaturation: function( x ) {
        return x / this.rgbPicker.getWidth();
    },
    /**
     * Convert Saturation value to Y coordinate
     * @private
     * @param {Integer} saturation
     * @return {Integer}
     */
    getSPos: function( saturation ) {
        return saturation * this.rgbPicker.getWidth();
    },
    /**
     * Convert Y coordinate to Brightness value
     * @private
     * @param {Integer} y
     * @return {Integer}
     */
    getValue: function( y ) {
        return ( this.rgbPicker.getHeight() - y ) / this.rgbPicker.getHeight();
    },
    /**
     * Convert Brightness value to Y coordinate
     * @private
     * @param {Integer} value
     * @return {Integer}
     */
    getVPos: function( value ) {
        return this.rgbPicker.getHeight() - ( value * this.rgbPicker.getHeight() );
    },
    /**
     * Update colors from the position of picker
     */
    updateColorsFromRGBPicker: function() {
        this._HSV = { h: this._HSV.h, s: this.getSaturation( this.lastXYRgb.x ), v: this.getValue( this.lastXYRgb.y ) };
    },
    /**
     * Update colors from the position of HUE picker
     */
    updateColorsFromHUEPicker: function() {
        this._HSV.h = this.getHue( this.lastYHue );
        var temp = this.hsvToRgb( this._HSV.h, 1, 1 );
        temp =  this.rgbToHex( temp[0], temp[1], temp[2] );
        this.rgbPicker.setStyle( { backgroundColor: '#' + temp } );
    },
    /**
     * Update colors from RGB input fields
     */
    updateColorsFromRGBFields: function() {
        var temp = this.rgbToHsv( Ext.getCmp( 'redValue' + this.domElement.id ).getValue(), Ext.getCmp( 'greenValue' + this.domElement.id ).getValue(), Ext.getCmp( 'blueValue' + this.domElement.id ).getValue() );
        this._HSV = { h: temp[0], s: temp[1], v: temp[2] };
    },
    /**
     * Update colors from HEXA input fields
     */
    updateColorsFromHexaField: function() {
        var temp = this.hexToRgb( this._HEX );
        this._RGB = { r: temp[0], g: temp[1], b: temp[2] };
        temp = this.rgbToHsv( temp[0], temp[1], temp[2] );
        this._HSV = { h: temp[0], s: temp[1], v: temp[2] };
    },
    /**
     * Update colors from HSV input fields
     */
    updateColorsFromHSVFields: function() {
        var temp = this.hsvToRgb( this._HSV.h, this._HSV.s, this._HSV.v );
        this._RGB = { r: temp[0], g: temp[1], b: temp[2] };
    },
    /**
     * Update RGB color from HSV color
     */
    updateRGBFromHSV: function() {
        var temp = this.hsvToRgb( this._HSV.h, this._HSV.s, this._HSV.v );
        this._RGB = { r: temp[0], g: temp[1], b: temp[2] };
    },
    /**
     * Update all inputs from internal color
     */
    updateInputFields: function() {
        Ext.getCmp( 'redValue' + this.domElement.id ).setValue( this._RGB.r );
        Ext.getCmp( 'greenValue' + this.domElement.id ).setValue( this._RGB.g );
        Ext.getCmp( 'blueValue' + this.domElement.id ).setValue( this._RGB.b );
        Ext.getCmp( 'hueValue' + this.domElement.id ).setValue( this._HSV.h );
        Ext.getCmp( 'saturationValue' + this.domElement.id ).setValue( Math.round( this._HSV.s * 100 ) );
        Ext.getCmp( 'brightnessValue' + this.domElement.id ).setValue( Math.round( this._HSV.v * 100 ) );
        Ext.getCmp( 'colorValue' + this.domElement.id ).setValue( this._HEX );
    },
    /**
     * Update color container
     */
    updateColor: function() {
        // update hexa
        this._HEX = this.rgbToHex( this._RGB.r, this._RGB.g, this._RGB.b );
        // update color container
        this.colorContainer.setStyle( { backgroundColor: '#'+this._HEX } );
        this.colorContainer.set({ title: 'Select this color' });
        // update websafe color
        var temp = this.rgbToHex( this.websafe( this._RGB.r, this._RGB.g, this._RGB.b ) );
        this.wsColorContainer.setStyle( { backgroundColor: '#'+temp } );
        this.wsColorContainer.set({ title: '#'+temp });
        this.wsColorContainer.setStyle( { color: '#'+this.rgbToHex( this.invert( this.websafe( this._RGB.r, this._RGB.g, this._RGB.b ) ) ) } );
        // update invert color
        var temp = this.rgbToHex( this.invert( this._RGB.r, this._RGB.g, this._RGB.b ) );
        this.inColorContainer.setStyle( { backgroundColor: '#'+temp } );
        this.inColorContainer.setStyle( { color: '#'+this._HEX } );
        this.inColorContainer.set({ title: '#'+temp });
        this.colorContainer.setStyle( { color: '#'+temp } );
        // update input boxes
        this.updateInputFields();
        // fire the pickcolor event
        this.fireEvent( 'pickcolor', this, this._HEX );
    },
    /**
     * Update position of both picker from the internal color
     */
    updatePickers: function() {
        this.lastXYRgb = { x: this.getSPos( this._HSV.s ), y: this.getVPos( this._HSV.v ) };
        this.rgbPointer.setXY( [this.lastXYRgb.x-this.config.pickerHotPoint.x + this.rgbPicker.getLeft(), this.lastXYRgb.y-this.config.pickerHotPoint.y+this.rgbPicker.getTop()], this.config.animate );
        this.lastYHue = this.getHPos( this._HSV.h );
        this.huePointer.setXY( [this.huePicker.getLeft()+(this.huePointer.getWidth() / 2)+1, this.lastYHue + this.huePicker.getTop()-this.config.pickerHotPoint.y ], this.config.animate );
        var temp = this.hsvToRgb( this._HSV.h, 1, 1 );
        temp =  this.rgbToHex( temp[0], temp[1], temp[2] );
        this.rgbPicker.setStyle( { backgroundColor: '#' + temp } );
    },
    /**
     * Internal event
     * Catch the RGB picker click
     */
    rgbPickerClick: function( event, cp ) {
        this.lastXYRgb = { x: event.getPageX() - this.rgbPicker.getLeft(), y: event.getPageY() - this.rgbPicker.getTop() };
        this.rgbPointer.setXY( [event.getPageX()-this.config.pickerHotPoint.x, event.getPageY()-this.config.pickerHotPoint.y], this.config.animate );
        this.updateColorsFromRGBPicker();
        this.updateRGBFromHSV();
        this.updateColor();
    },
    /**
     * Internal event
     * Catch the HUE picker click
     */
    huePickerClick: function( event, cp ) {
        this.lastYHue = event.getPageY() - this.huePicker.getTop();
        this.huePointer.setY( [event.getPageY()-3], this.config.animate );
        this.updateColorsFromHUEPicker();
        this.updateRGBFromHSV();
        this.updateColor();
    },
    /**
     * Internal event
     * Catch the change event of RGB input fields
     */
    changeRGBField: function( element, newValue, oldValue ) {
        if( !(newValue instanceof String) ) { newValue = element.getValue(); }
        if( newValue < 0 ) { newValue = 0; }
        if( newValue > 255 ) { newValue = 255; }

        if( element == Ext.getCmp( 'redValue' + this.domElement.id ) ) { this._RGB.r = newValue; }
        else if( element == Ext.getCmp( 'greenValue' + this.domElement.id ) ) { this._RGB.g = newValue; }
        else if( element == Ext.getCmp( 'blueValue' + this.domElement.id ) ) { this._RGB.b = newValue; }
        this.updateColorsFromRGBFields();
        this.updateColor();
        this.updatePickers();
        // fire the changergb event
        this.fireEvent( 'changergb', this, this._RGB );
    },
    /**
     * Internal event
     * Catch the change event of HSV input fields
     */
    changeHSVField: function( element, newValue, oldValue ) {
        if( !(newValue instanceof String) ) { newValue = element.getValue(); }
        if( element == Ext.getCmp( 'hueValue' + this.domElement.id ) ) {
            if( newValue < 0 ) { newValue = 0; }
            if( newValue > 360 ) { newValue = 360; }
            this._HSV.h = newValue;
        } else {
            if( newValue < 0 ) { newValue = 0; }
            if( newValue > 100 ) { newValue = 100; }
            if( element == Ext.getCmp( 'saturationValue' + this.domElement.id ) ) { this._HSV.s = ( newValue / 100 ); }
            else if( element == Ext.getCmp( 'brightnessValue' + this.domElement.id ) ) { this._HSV.v = ( newValue / 100 ); }
        }
        this.updateColorsFromHSVFields();
        this.updateColor();
        this.updatePickers();
        // fire the changehsv event
        this.fireEvent( 'changehsv', this, this._HSV );
    },
    /**
     * Internal event
     * Catch the change event of HEXA input field
     */
    changeHexaField: function( element, newValue, oldValue ) {
        if( !(newValue instanceof String) ) { newValue = element.getValue(); }
        if( element == Ext.getCmp( 'colorValue' + this.domElement.id ) ) {
            if( newValue.length > 9 ) { newValue = newValue.substr(0,5); }
            if( !newValue.match( /^[0-9a-f]{6}$/i ) ) { newValue = '000000'; }
            this._HEX = newValue;
            this.updateColorsFromHexaField();
            this.updateColor();
            this.updatePickers();
            // fire the changehexa event
            this.fireEvent( 'changehexa', this, this._HEX );
        }
    },
    /**
     *
     */
    setColorFromWebsafe: function() {
        this.setColor( this.wsColorContainer.getColor( 'backgroundColor','','' ) );
    },
    /**
     *
     */
    setColorFromInvert: function() {
        this.setColor( this.inColorContainer.getColor( 'backgroundColor','','' ) );
    },
    
    selectColor: function() {
        this.fireEvent( 'selectColor', this, this._HEX );
    },
    colorSelected: function() {
        //alert(this._HEX);
        this.fireEvent( 'colorSelected', this, this._HEX );
    },
    /**
     * Set initial color if config contains
     * @private
     */
    checkConfig: function() {
        if( this.config ) {
            if( this.config.color ) { this.setColor( this.config.color ); }
            else if( this.config.hsv ) { this.setHSV( this.config.hsv ); }
            else if( this.config.rgb ) { this.setRGB( this.config.rgb ); }
        }
    },

    // PUBLIC methods

    /**
     * Change color with hexa value
     * @param {String} hexa (eg.: 9A4D5F )
     */
    setColor: function( hexa ) {
        var temp = this.hexToRgb( hexa );
        this._RGB = { r:temp[0], g:temp[1], b:temp[2] }
        var temp = this.rgbToHsv( temp );
        this._HSV = { h:temp[0], s:temp[1], v:temp[2] };
        this.updateColor();
        this.updatePickers();
    },
    /**
     * Change color with a RGB Object
     * @param {Object} rgb (eg.: { r:255, g:200, b:111 })
     */
    setRGB: function( rgb ) {
        this._RGB = rgb;
        var temp = this.rgbToHsv( rgb.r, rgb.g, rgb.b );
        this._HSV = { h: temp[0], s: temp[1], v: temp[2] };
        this.updateColor();
        this.updatePickers();
    },
    /**
     * Change color with a HSV Object
     * @param {Object} hsv (eg.: { h:359, s:10, v:100 })
     */
    setHSV: function( hsv ) {
        this._HSV = { h: hsv.h, s: ( hsv.s / 100 ), v: ( hsv.v / 100 ) };
        var temp = this.hsvToRgb( hsv.h, ( hsv.s / 100 ), ( hsv.v / 100 ) );
        this._RGB = { r: temp[0], g: temp[1], b: temp[2] };
        this.updateColor();
        this.updatePickers();
    },
    /**
     * Get the color from the internal store
     * @param {Boolean} hash If it is true, the color prepended with '#'
     * @return {String} hexa color format
     */
    getColor: function( hash ) {
        return ( hash ? '' : '#' ) + this._HEX;
    },
    /**
     * Get the color from the internal store in RGB object format
     * @return {Object} format: { r: redvalue, g: greenvalue, b: bluevalue }
     */
    getRGB: function() {
        return this._RGB;
    },
    /**
     * Get the color from the internal store in HSV object format
     * @return {Object} format: { h: huevalue, s: saturationvalue, v: brightnessvalue }
     */
    getHSV: function() {
        return this._HSV;
    },
    /**
     * Make input panel visible/hidden
     * @param {Boolean} show Turns panel hidden or visible
     * @param {Boolean/Object} animate Show/hide with animation or not
     */
    setPanelVisible: function( show, animate ) {
        return this.formContainer.setVisible( show, animate );
    },
    /**
     * Returns with boolean, input panel is visible or not
     * @return {Boolean}
     */
    isPanelVisible: function() {
        return this.formContainer.isDisplayed();
    },
    /**
     * Make ColorPicker visible if it is not
     * note: in ColorDialog it changed to the show method of BasicDialog
     */
    showPicker: function() {
        this.domElement.show();
    },
    /**
     * Make ColorPicker hidden if it is visible
     * note: in ColorDialog it changed to the hide method of BasicDialog
     */
    hidePicker: function() {
        this.domElement.hide();
    }
});
/**
 * @class Ext.ux.ColorPanel
 * @extends Ext.util.ColorPicker,
 * @constructor
 * Creates new ColorPanel
 * @param {Object} config Config Object (see the Ext.Panel config too!)
 * @cfg {Boolean} hidePanel true to hide the inputs (defaults to false)
 * @cfg {Boolean/Object} animate Moving pickers with this animate or false to no animation (defaults to false)
 * @cfg {Object} rgb (optional) Add initial color with rgb format eg.: { r:255, g:128, b:10 }
 * @cfg {Object} hsv (optional) Add initial color with hsv format eg.: { h:100, s:60, v:50 }
 * @cfg {String} color (optional) Add initial color with hexa format eg.: 'A3CF6D'
 * @cfg {Object} pickerHotPoint (optional) If you change the picker image, you can change the point of pick. ( defaults to { x:3, y:3 } )
 * @cfg {Object} captions labels of inputs (defaults to { red: 'R', green: 'G', blue: 'B', hue: 'H°', saturation: 'S%', brightness: 'V%', hexa: 'Color', websafe: 'Websafe' })
 */

Ext.ux.ColorPanel = function( config ) {
    this.config = config;
    this.config.renderTo = this.config.renderTo || Ext.DomHelper.append( document.body, {}, true );
    Ext.ux.ColorPanel.superclass.constructor.call( this, config );
    this.domElement = Ext.get( this.config.renderTo );
    this.render( this.domElement );
    this.config.renderTo = this.body;
    this.initialize( this.config );
    this.getEl().addClass( 'x-cp-panel' );
    this.domElement.removeClass( 'x-cp-panel' )
    this.body.setStyle({ 'padding': '5px' });
}
Ext.extend( Ext.ux.ColorPanel, Ext.Panel );
Ext.applyIf( Ext.ux.ColorPanel.prototype, Ext.ux.ColorPicker.prototype );
/**
 * @class Ext.ux.ColorDialog
 * @extends Ext.util.ColorPicker,
 * @constructor
 * Creates new ColorDialog
 * @param {Object} config Config Object (see the Ext.Window config too!)
 * @cfg {Boolean} hidePanel true to hide the inputs (defaults to false)
 * @cfg {Boolean/Object} animate Moving pickers with this animate or false to no animation (defaults to false)
 * @cfg {Object} rgb (optional) Add initial color with rgb format eg.: { r:255, g:128, b:10 }
 * @cfg {Object} hsv (optional) Add initial color with hsv format eg.: { h:100, s:60, v:50 }
 * @cfg {String} color (optional) Add initial color with hexa format eg.: 'A3CF6D'
 * @cfg {Object} pickerHotPoint (optional) If you change the picker image, you can change the point of pick. ( defaults to { x:3, y:3 } )
 * @cfg {Object} captions labels of inputs (defaults to { red: 'R', green: 'G', blue: 'B', hue: 'H°', saturation: 'S%', brightness: 'V%', hexa: 'Color', websafe: 'Websafe' })
 */
Ext.ux.ColorDialog = function( config ) {
    this.config = config;
    //this.config.resizable = true;
    this.config.renderTo = this.config.renderTo || Ext.DomHelper.append( document.body, {}, true );
    Ext.ux.ColorDialog.superclass.constructor.call( this, config );
    this.domElement = Ext.get( this.config.renderTo );
    this.render( this.domElement );
    this.config.renderTo = this.body;
    this.initialize( this.config );
    this.body.addClass( 'x-cp-panel' )
    this.body.setStyle({ padding: '5px' });
    if(this.config.width && this.config.height){
        this.setSize(this.config.width, this.config.height);
    }else{
        this.setSize( 430, 350 );
    }
}

Ext.extend( Ext.ux.ColorDialog, Ext.Window );
Ext.applyIf( Ext.ux.ColorDialog.prototype, Ext.ux.ColorPicker.prototype );