/*
 * Accordion widget
 */
(function(){
	
	var Dom = YAHOO.util.Dom,
		Event = YAHOO.util.Event,
		Lang = YAHOO.lang;
	
	/**
	 * Constructor
	 * 
	 * @param	HTML element|id		el			An HTML element or an ID thereof to render the Accordion into
	 * @param	object				oConfigs	Configuration object:
	 * 											deleteItemDlg		The URL where the data for the list is to be retrieved
	 */
	var Accordion = function( el, oConfigs ) {
		
		// Force the calling code to supply us with an HTML element
		if ( el === undefined ) {
			
			alert( "You have to specify the element that the Accordion will be rendered into." );
			return;
		}
		
		oConfigs = oConfigs || {};
		
		// Properties
		this.elView = Dom.get( el );
		
		// Call the parent constructor
		Accordion.superclass.constructor.call( this, el, oConfigs );
	}
	
	// Accordion is not publicly available; copy it to our namespace
	YAHOO.CamelFW.FW.Accordion = Accordion;
	
	
	/**
	 * NewsList object definition
	 */
	Lang.extend( Accordion, YAHOO.util.Element, {
		
		// Property defaults
		useAnimation: true,
		animationSpeed: 0.7,
		initialItemExpanded: 1,
		
		panelIDBase: "cam-acc-pan-",
		panelIDs: [],
		panelHeights: [],
		activeID: "",
		
		// Events
		onAfterPanelChange: null,
		
		
		/**
		 * Initialize the object
		 */
		initAttributes: function( oConfigs ) {
			
			// Call parent
			Accordion.superclass.initAttributes.call( this, oConfigs );
			
			// Set properties
			this.useAnimation = oConfigs.useAnimation != undefined ? oConfigs.useAnimation : this.useAnimation;
			this.animationSpeed = oConfigs.animationSpeed != undefined ? oConfigs.animationSpeed : this.animationSpeed;
			this.initialItemExpanded = oConfigs.initialItemExpanded != undefined ? oConfigs.initialItemExpanded : this.initialItemExpanded;
			
			// initialItemExpanded is zero based
			this.initialItemExpanded--;
			
			// Initialize the structure of the accordion
			this.initStructure();
			
			// Define events
			this.onAfterPanelChange = new YAHOO.util.CustomEvent( "onAfterPanelChange" );
		},
		
		initStructure: function() {
			
			var viewChildren = Dom.getChildren( this.elView );
			
			for ( var i in viewChildren ) {
				
				this.initPanel( viewChildren[i] );
			}
		},
		
		initPanel: function( panelEl ) {
			
			var elID = "",
				panelIndex = 0,
				children = Dom.getChildren( panelEl );
			
			for ( var i in children ) {
				
				if ( Dom.hasClass( children[i], "camel-accordion-toggle" )) {
					
					// Register the ID of this panel
					panelIndex = this.panelIDs.length;
					elID = this.panelIDBase + panelIndex;
					this.panelIDs.push( elID );
					
					// Add the onclick event handler
					//panelEl.on( "click", this.togglePanel, {id: elID}, this );
					Event.addListener( panelEl, "click", this.togglePanel, {id: elID, index: panelIndex, me: this}, false );
				}
				else if ( Dom.hasClass( children[i], "camel-accordion-content" )) {
					
					// Set the id for this panel
					elID = this.panelIDs.length - 1;
					Dom.setAttribute( children[i], "id", this.panelIDs[panelIndex] );
					
					// Register the height of the content
					this.panelHeights.push( children[i].offsetHeight );
					
					// Hide the panel if we need to, else mark this panel as active
					if ( this.initialItemExpanded != panelIndex ) {
						
						Dom.setStyle( children[i], "display", "none" );
					}
					else {
						
						this.activeID = this.panelIDs[panelIndex];
					}
				}
			}
		},
		
		togglePanel: function( e, oArgs ) {
			
			/*
			 * oArgs.me			Accordion object
			 * oArgs.id			Element id of the panel to open
			 * oArgs.index		Index of the panel to open in this.panelIDs
			 * oArgs.activeID	Element id of the panel to close
			 */
			
			var animIn = null,
				animOut = null,
				overOld = "",
				overNew = "",
				oldID = "";
			
			if ( oArgs.me.activeID != oArgs.id ) {
				
				oldID = oArgs.me.activeID;
				
				if ( oArgs.me.useAnimation ) {
					
					overOld = Dom.getStyle( oArgs.me.activeID, "overflow" );
					Dom.setStyle( oArgs.me.activeID, "overflow", "hidden" );
					
					overNew = Dom.getStyle( oArgs.id, "overflow" );
					Dom.setStyle( oArgs.id, "overflow", "hidden" );
					Dom.setStyle( oArgs.id, "display", "block" );
					
					animOut = new YAHOO.util.Anim( oArgs.me.activeID );
					animOut.attributes.height = { to: 0 };
					animOut.duration = oArgs.me.animationSpeed;
					animOut.method = YAHOO.util.Easing.easeOut;
					animOut.onComplete.subscribe( function( e, oAnim, b ){
						
						Dom.setStyle( oldID, "overflow", overOld );
						Dom.setStyle( oldID, "display", "none" );
					});
					
					animIn = new YAHOO.util.Anim( oArgs.id );
					animIn.attributes.height = { from: 0, to: oArgs.me.panelHeights[oArgs.index] };
					animIn.duration = oArgs.me.animationSpeed;
					animIn.method = YAHOO.util.Easing.easeOut;
					animIn.onComplete.subscribe( function( e, oAnim, b ){
						
						Dom.setStyle( oArgs.id, "overflow", overNew );
						oArgs.me.onAfterPanelChange.fire({ oldPanelId: oldID, newPanelId: oArgs.id });
					});
					
					animOut.animate();
					animIn.animate();
				}
				else {
					
					Dom.setStyle( oArgs.me.activeID, "display", "none" );
					Dom.setStyle( oArgs.id, "display", "block" );
					oArgs.me.onAfterPanelChange.fire({ oldPanelId: oldID, newPanelId: oArgs.id });
				}
				
				oArgs.me.activeID = oArgs.id;
			}
		}
	});
	
	// Copy static members
	Lang.augmentObject( YAHOO.CamelFW.FW.Accordion, YAHOO.util.Element );
})();