var mod_eshop_zero = function(){

    // shorthands
   	var dc = new Ext.data.Connection;
	var dt = new Ext.util.DelayedTask();
	var dh = Ext.DomHelper;
	
	return {

		// private vars
		json: {},
		
		cWin: {},
		colorFieldExtTrigger: {},
		
		changeColor: true,
		
		// constructor
		init : function()
		{
			// just get first uid (singleton)
			for(var uid in Ext.inCMS.eshop)
			{
				this.json = Ext.inCMS.eshop[uid];
				break;
			}
			
			this.buildZero();
		},
		
		buildZero: function()
		{
			// the data store (date, value pairs)
			this.cWin = new Ext.ux.ColorPicker({
				renderTo: Ext.get('colorpicker'),
				//hidePanel: false,
				title: 'Pick Color',
				collapsible: true,
				autoHeight: true,
				shadow: true,
				captions: {
					red: 'red',
					green: 'grn',
					blue: 'blue',
					hue: 'hue',
					saturation: 'sat',
					brightness: 'val',
					hexa: 'col.',
					websafe: 'Safe'
				},
				rgb: { r:141, g:196, b:239 },
				animate: true
			});
			
			this.cWin.on('pickcolor', this.changeColor);
			
			var colorField = Ext.get('var_color');
			
			Ext.get('var_color_dd').update('');
			
			var colorFieldExt = new Ext.form.TextField({
				id: 'colorfieldext',
				cls: 'x-form-text-hex',
				name: colorField.dom.name,
				hideLabel: true,
				minLength: 6,
				maxLength: 6,
				value: colorField.dom.value,
				renderTo: 'var_color_dd',
				width: 157
			});
			
			this.colorFieldExtTrigger = new Ext.form.TriggerField({
				listeners: {
					valid: this.updateColor
				},
				triggerClass: 'x-reset-trigger',
				allowBlank: false,
				regex: new RegExp('^#?([0-9a-fA-F]{1,2}){6}$'),
				standardValue: colorField.dom.value
			});
			
			this.colorFieldExtTrigger.onTriggerClick = this.resetColor;
			this.colorFieldExtTrigger.applyToMarkup('colorfieldext');
		},
		
		changeColor: function()
		{
			var browser = Ext.get('zero_browser');
			
			//console.debug(this._HEX, browser);
			
			browser.setStyle('background-color', '#'+this._HEX);
			
			if(mod_eshop_zerochangeColor)
			{
				mod_eshop_zero.colorFieldExtTrigger.setValue(this._HEX);
			}
			else
			{
				mod_eshop_zerochangeColor = true;
			}
		},
		
		resetColor: function()
		{
			mod_eshop_zero.cWin.setColor(this.standardValue);
		},
		
		updateColor: function()
		{
			mod_eshop_zerochangeColor = false;
			mod_eshop_zero.cWin.setColor(this.getValue());
		}
	};
}();

Ext.onReady(mod_eshop_zero.init, mod_eshop_zero);