Ext.ux.ThemeCycleButton = Ext.extend(Ext.CycleButton, {
									 
	cssItems: this.cssItems || [
		{file: 'ext-all.css', type: 'original', text: 'Azul ', iconCls: Ext.ux.iconMgr.getIcon('resources/ux/Ext.ux.iconMgr/themes/', 'blue'), head: 'cabecera-Azul.jpg'},
		{file: 'xtheme-gray.css', type: 'original', text: 'Gris ', iconCls: Ext.ux.iconMgr.getIcon('resources/ux/Ext.ux.iconMgr/themes/', 'gray'), head: 'cabecera-Gris.jpg'},
		{file: 'xtheme-gray-extend.css', type: 'ux', text: 'Gris extendido ', checked: true, iconCls: Ext.ux.iconMgr.getIcon('resources/ux/Ext.ux.iconMgr/themes/', 'gray'), head: 'cabecera-Gris.jpg'},
		{file: 'xtheme-light-gray.css', type: 'ux', text: 'Light Gray ', iconCls: Ext.ux.iconMgr.getIcon('resources/ux/Ext.ux.iconMgr/themes/', 'gray'), head: 'cabecera-light-gray.jpg'},
		{file: 'xtheme-light-wine.css', type: 'ux', text: 'Light Wine ', iconCls: Ext.ux.iconMgr.getIcon('resources/ux/Ext.ux.iconMgr/themes/', 'wine'),  head: 'cabecera-Rosa.jpg'},
		{file: 'xtheme-light-orange.css', type: 'ux', text: 'Light Orange ', iconCls: Ext.ux.iconMgr.getIcon('resources/ux/Ext.ux.iconMgr/themes/', 'orange'), head: 'cabecera-Naranja.jpg'},
		{file: 'xtheme-light-brown.css', type: 'ux', text: 'Light Brown ', iconCls: Ext.ux.iconMgr.getIcon('resources/ux/Ext.ux.iconMgr/themes/', 'brown'), head: 'cabecera-Brown.jpg'},
		{file: 'xtheme-light-green.css', type: 'ux', text: 'Light Green ', iconCls: Ext.ux.iconMgr.getIcon('resources/ux/Ext.ux.iconMgr/themes/', 'green'), head: 'cabecera-Verde.jpg'}
	],
	themeVar: this.themeVar || 'style',
	headVar: this.headVar || 'head',
	originalCSSPath: this.originalCSSPath || 'extjs/resources/css/',
	uxCSSPath: this.uxCSSPath || 'resources/css/',
	headsPath: this.headsPath || 'resources/img/',
	
	initComponent: function() {
		Ext.apply(this, {
		    showText: true,
			prependText: ' ',
   			items: this.cssItems
		});
		if(Ext.state.Manager){ 
        	var selectedTheme = Ext.state.Manager.get(this.themeVar); 
            if(selectedTheme){ 
				for(var i=0; i<this.items.length;i++){
					if (this.items[i].file == selectedTheme){
						this.items[i].checked = true;
						//this.setActiveItem.defer(2000, [this.items[i], true]); //error ??
						this.changeHandler(this, this.items[i]);
						//this.changeHandler.defer(1000, this, [this, this.items[i]]);
						break;
					}
				}
            } 
        }
		Ext.ux.ThemeCycleButton.superclass.initComponent.apply(this, arguments);
	},
	
	changeHandler: function(o, i){
        if(Ext.state.Manager.getProvider()) {
            Ext.state.Manager.set(this.themeVar, i.file);
			Ext.state.Manager.set(this.headVar, i.head);
        }
		i.type == 'ux' ? Ext.util.CSS.swapStyleSheet(this.themeVar, this.uxCSSPath + i.file) : Ext.util.CSS.swapStyleSheet(this.themeVar, this.originalCSSPath + i.file);
		Ext.util.CSS.getRule('.header .x-panel-body', true).style.background = 'url(' + this.headsPath + i.head + ')';
		if(Ext.getCmp('viewport')){
   	    	Ext.getCmp('viewport').layout.center.panel.setSize(Ext.getCmp('viewport').layout.center.getSize().width + 1);
			Ext.getCmp('viewport').doLayout();
			Ext.getCmp('viewport').layout.center.panel.setSize(Ext.getCmp('viewport').layout.center.getSize().width - 1);
			Ext.getCmp('viewport').doLayout();
		}
	}
	        
});

Ext.reg('themecyclebutton', Ext.ux.ThemeCycleButton);