SE.SavingPanelBase = 
{
	prepareData:function()
	{
		var co2 = "6,633.62";
		var CO2EmissionSaved = co2 + " lb";		
		var treesEquivalentSaved ="50.12";		
        		var powerSavedInLightBulbs = "12,981.88";						
		
		return {
          CO2EmissionSaved:CO2EmissionSaved,
          treesEquivalentSaved:treesEquivalentSaved,
          powerSavedInLightBulbs:powerSavedInLightBulbs
        };		
	},
		co2IconCSS:SE.css('.se-co2-icon',
					  [
					   SE.util.CSS.bgi('se-co2-icon.png'),
					   SE.util.CSS.bgnr(),
					   'width:64px',
					   'height:64px',
					   'background-size: 64px 64px'
					  ]),
	treeIconCSS:SE.css('.se-tree-icon',
					   [
						SE.util.CSS.bgi('se-tree-icon.png'),
						SE.util.CSS.bgnr(),
						'width:64px',
						'height:64px',
						'background-size: 64px 64px'
					   ]),
	powerIconCSS:SE.css('.se-power-icon',
						[
						 SE.util.CSS.bgi('se-power-icon.png'),
						 SE.util.CSS.bgnr(),
						 'width:64px',
						 'height:64px',
						 'background-size: 64px 64px'
						])
	};
	
Ext4.define('SE.AbsSavingPanel', 
{
	extend:'Ext.panel.Panel',
	labels:SE.labels.SavingPanel,
	headerCls:'se-saving-panel-title-background',
	id:'se-site-saving-panel',
    cls:'se-site-saving-panel',
	height:180,
	statics: 
	{
		create:function(params)
		{
			return SE.createCmp('SE.SavingPanel',params);
		}
	},
	initComponent:function() 
	{
				Ext4.apply(this,SE.SavingPanelBase);
		this.savingData = this.prepareData();
		this.data = this.savingData || {CO2EmissionSaved:'',treesEquivalentSaved:''};
		var powerSaved;
        if(this.data.powerSavedInLightBulbs)
			powerSaved = this.data.powerSavedInLightBulbs+' '+this.labels.forDay;
		else
			powerSaved = '';

		if(this.addTitle) this.title = this.labels.title;
		this.createCSS();
		
		this.CO2Cell = SE.createCmp('SE.SavingPanelCell', {width:this.width,
														   height:76,
														   imgCls:'se-co2-icon',
														   text:this.labels.CO2EmissionSaved,
														   _data:this.data.CO2EmissionSaved,
														   style:'border-bottom: solid #cccccc 1px'
														  });
        this.TreesCell = SE.createCmp('SE.SavingPanelCell', {width:this.width,
        													 height:76,
        													 imgCls:'se-tree-icon',
        													 text:this.labels.treesEquivalentSaved,
        													 _data:this.data.treesEquivalentSaved,
        													 style:'border-bottom: solid #cccccc 1px'
        													});
		
				this.items = [this.CO2Cell,this.TreesCell];						
		this.callParent(arguments);
	},
	afterRender:function() {
		this.callParent(arguments);
		if(Ext.get('se-site-saving-panel_header-targetEl') && Ext.get('se-site-saving-panel_header-targetEl').dom &&
		   Ext.get('se-site-saving-panel_header-targetEl').dom.children[0] && Ext.get('se-site-saving-panel_header-targetEl').dom.children[0].children[0]){
			Ext.get('se-site-saving-panel_header-targetEl').dom.children[0].children[0].id = 'se-site-saving-panel-title';	
		}
	},
	createCSS:function()
    {
		var rules = [
					 SE.SavingPanelBase.co2IconCSS,
					 SE.SavingPanelBase.treeIconCSS,
					 SE.SavingPanelBase.powerIconCSS,
					 SE.css('.se-site-saving-panel .x4-panel-header-default',
							[
							 'background-color: #35a559',
							 'top:-1px !important'
							]),
					 SE.css('.se-site-saving-panel .x4-title-item',
							[
							 'color: #fff'
							])
                    ];	

		SE.util.CSS.addCmpRules('se-site-saving-panel-css',rules);
    },
	update:function(data)
	{
		this.CO2Cell.dataPanel._data.setHtml(data.CO2EmissionSaved);
        this.TreesCell.dataPanel._data.setHtml(data.treesEquivalentSaved);
        	}
});	


	SE.SavingPanel = Ext.extend(Ext.Container,
{
	cls:'se-site-saving-panel se-border se-border-shdw se-panel-border-color se-panel-white-background',
	width:window.innerWidth - 22,
	height:100,
	labels:SE.labels.SavingPanel,
	activePanelIndx:0,
	createCSS:function()
    {
		var rules = [
					 SE.SavingPanelBase.co2IconCSS,
					 SE.SavingPanelBase.treeIconCSS,
					 SE.SavingPanelBase.powerIconCSS,
					 SE.css('.se-site-saving-panel .x4-panel-header-default',
							[
							 'background-color: #35a559',
							 'top:-1px !important'
							]),
					 SE.css('.se-site-saving-panel .x4-title-item',
							[
							 'color: #fff'
							])
                    ];	
		SE.util.CSS.addCmpRules('se-site-saving-panel-css',rules);
    },
	initComponent:function()
    {
				Ext4.apply(this,SE.SavingPanelBase);
		this.savingData = this.prepareData();
		this.data = this.savingData || {CO2EmissionSaved:'',treesEquivalentSaved:''};
		var powerSaved;
        if(this.data.powerSavedInLightBulbs)
			powerSaved = this.data.powerSavedInLightBulbs+' '+this.labels.forDay;
		else
			powerSaved = '';

		this.createCSS();
		this.items = [];	
		this.panels = [];
		this.CO2Cell = SE.SavingPanelNavigationCell.create({
												  			data:this.data.CO2EmissionSaved,
											      			imgCls:'se-co2-icon',
											      			text:this.labels.CO2EmissionSaved,
											      			width:this.width,
															controller:this
												 		   });
		this.items.push(this.CO2Cell);
		this.panels.push(this.CO2Cell);

        this.TreesCell = SE.SavingPanelNavigationCell.create({
        													  data:this.data.treesEquivalentSaved,
															  imgCls:'se-tree-icon',
        													  text:this.labels.treesEquivalentSaved,
															  width:this.width,
															  controller:this,
															  hidden:true
        										   			 });
		this.items.push(this.TreesCell);
		this.panels.push(this.TreesCell);
		
		SE.SavingPanel.superclass.initComponent.apply(this,arguments);
    },
	togglePanels:function()
	{
		llog('@@ SE.SavingPanel.togglePanels @@');	
		Ext.each(this.panels, function(panel)
		{
			panel.hide();
		}, this);
		this.panels[++this.activePanelIndx%2].show();
	}
});
Ext.apply(SE.SavingPanel, 
{
	create:function(params)
    {
		var config = {};
		Ext.apply(config,params);
		return new SE.SavingPanel(config);
    }
});

SE.SavingPanelNavigationCell = Ext.extend(Ext.Container,
{
	cls:'se-saving-panel-navigation-cell',
	createCSS:function()
    {
		var rules = [

                    ];	
		SE.util.CSS.addCmpRules('se-site-saving-panel-navigation-cell-css',rules);
    },
	initComponent:function()
    {
		this.createCSS();
		this.items = [];

		this.leftNav = new Ext.ux.Image({
										 src:SE.contex_url + '/common/img/se-nav-left.svg',
										 width:25,
										 height:93,
										 domListeners:{click:{fn:this.controller.togglePanels,scope:this.controller}},
										 style:'float:left;'
									    });	
		this.items.push(this.leftNav);

		this.cell = SE.SavingPanelCell.create({
											   data:this.data,
										       imgCls:this.imgCls,
										       text:this.text,
										       width:this.width - 50,
										       style:'margin-left:25px;margin-top:5px;'
											 });
		this.items.push(this.cell);

		this.rightNav = new Ext.ux.Image({
										  src:SE.contex_url + '/common/img/se-nav-right.svg',
										  width:25,
										  height:93,
										  domListeners:{click:{fn:this.controller.togglePanels,scope:this.controller}},
										  style:'float:right;position:relative;top:-74px;'
									     });	
		this.items.push(this.rightNav);
		
	    SE.SavingPanelNavigationCell.superclass.initComponent.apply(this,arguments);
	}	
});
Ext.apply(SE.SavingPanelNavigationCell, 
{
	create:function(params)
    {
		var config = {};
		Ext.apply(config,params);
		return new SE.SavingPanelNavigationCell(config);
    },
});

SE.SavingPanelCell = Ext.extend(Ext.Container,
{
	createCSS:function()
    {
		var textWidth = this.width - 90;
		var rules = [
					 SE.css('.se-site-saving-data-box',
					 		[
					  		 'text-align:left',
					  		 'white-space:nowrap',
					  		 'width:' + textWidth + 'px',
					  		  'font-size:12px', 					  		 'font-weight:bold',
					  		 'overflow:hidden',
					  		  'padding-Left:60px' 					  		])
                    ];	
		SE.util.CSS.addCmpRules('se-site-saving-panel-cell-css',rules);
    },
	initComponent:function()
    {
		this.createCSS();
		this.cls = 'se-site-saving-panel-cell se-panel-white-background ' + this.imgCls;
		this.items = [];	
		this.items.push(SE.util.display.space(200,18));

		this.textCell = new Ext.BoxComponent({html:this.text,cls:'se-site-saving-data-box'});    
		this.items.push(this.textCell);
		
		this.dataCell = new Ext.BoxComponent({html:this.data,cls:'se-site-saving-data-box se-green-color'});    
		this.items.push(this.dataCell);

	    SE.SavingPanelCell.superclass.initComponent.apply(this,arguments);
    }
});
Ext.apply(SE.SavingPanelCell, 
{
	create:function(params)
    {
		var config = {};
		Ext.apply(config,params);
		return new SE.SavingPanelCell(config);
    },
});