Ext.namespace("App.components");

App.components.featuredSections=function(config){
	Ext.apply(this, config);
	this.init();
};

App.components.featuredSections.prototype={
	init : function(config){
		config=config||this.config;
		currentObject=this;
		
		var aFeature = new Array(1);/* changed for max of 3 elements */	
		
		for( var i = 0; i < this.features.length; i++)
		{
			if( i == 0){
				aFeature[i] = new Ext.Panel({					
			        id:'f'+(i+1),
					title: this.features[i].title, 
			        html: this.features[i].content,
			        collapsed:false,
					 cls:'featured_section_item',
					 bodyStyle:'padding:0px;'
				});
			}
			else {
				aFeature[i] = new Ext.Panel({
			        id:'f'+(i+1),
					title: this.features[i].title, 
			        html: this.features[i].content,
					cls:'featured_section_item',
			        collapsed:true
				});
			}
		}
		
		this.accordion = new Ext.Panel({
		    //title: 'Accordion Layout',
			id:this.id,
		    layout:'accordion',
		    defaults: {
		        // applied to each contained panel
		        //bodyStyle: 'padding:15px'
		    },
		    layoutConfig: {
		        // layout-specific configs go here
		        titleCollapse: true,
				hideCollapseTool:true,
		        animate: true,
		        activeOnTop: false,
				collapseFirst:false
		    },
		    items: aFeature,
			bodyStyle:"margin-top:5px; margin-bottom:5px;border:none;padding-left:0px;padding-right:0px;padding-bottom:0px;padding-top:0px"
		});
		
		/**************************************************************/
		/**************************************************************/
		/**************************************************************/
		/**************************************************************/
		/**************************************************************/						
		/**/
		/**/
		var firstTimeCount = 1;
		var totalPanels = this.accordion.items.length;
		this.expandedItem = this.feature1;
		/* Functions written by AlexisO*/
		/* events below work correctly to ensure one panel is always expanded*/
		this.accordion.items.each(function(oItem){
			if(!oItem.collapsed){this.accordion.expandedItem=oItem}
			oItem.addListener("expand",function(a){
				this.expandedItem=a;
			},this.accordion)
			oItem.addListener("beforeexpand",function(a){
				this.expandedItem=null;
			},this.accordion)
			oItem.addListener("beforecollapse",function(a){
				if(this.expandedItem) {
					if(this.expandedItem.id==a.id){
						return false
					}else{
						if (firstTimeCount > totalPanels-1) {
							this.expandedItem = null;
						}
						else {
							firstTimeCount++;
						}
					}	
				}
			},this.accordion)

		},this)

		aFeature[0].addListener('render', function(){
			//this.headerBackground(this.features[0].colorTheme);
		}, this);
				
		this.accordion.render('featuredSectionBox');		
	},
	
	headerBackground: function(colorTheme)
	{		
		var elemBox = document.getElementById("featuredSectionBox");
		var elemItem = document.getElementById("featured_"+colorTheme);
		
		switch(colorTheme)
		{
			case "colour_theme_orange":
				elemBox.style.backgroundColor="#c23c00"
				break;
			case "colour_theme_green":
				elemBox.style.backgroundColor="#50592f"
				break;
			case "colour_theme_yellow":
				elemBox.style.backgroundColor="#a79223"
				break;
		}
	}	
}

Ext.extend(App.components.featuredSections, Ext.util.Observable, App.components.featuredSections.prototype);