/********************************************************************

	FOREX.COM - CONTENT TOGGLE
	
	=========================================
	Author: Chris Erwin (chris@teehanlax.com)
	Agency: teehan+lax
	Date: July 6, 2008
	=========================================
		
	Description
	-------------------------------------------------------------
	This class sets up a group of links that toggle between content.
	
	Each link has a matching content item that gets displayed when the link is clicked. The content that was previously visible becomes hidden.
	
	There is a content container that gets animated each time there is a change
		- the container fades out 
		- the container animates height to the height of the new content
		- the container fades in
	
	Public Methods
	-------------------------------------------------------------
	initialize (constructor)
		Arguments:
			- toggleID (string) : the ID of the main toggle container that contains both the toggle nav and toggle content items
			- defaultContentLinkID (string, null) : the id of the link associated to the content you want to display on load
		
	change
		Arguments:
			- contentLinkID (string) : the id of the link associated to the content you want to change to.
		Returns:
			- null
	
	
	Dependencies
	-------------------------------------------------------------
	- MooTools 1.2
	
	HTML Markup Sample
	-------------------------------------------------------------
	_widget_samples/content_toggle.html
	
*********************************************************************/

var ContentToggle = new Class({
    initialize: function(toggleID, defaultContentLinkID){
		// SET THE PROPERTIES
		this.toggleID = toggleID;
        this.defaultContentLinkID = defaultContentLinkID;
		this.currContentLinkID = null;
		this.currAnimating = false;
		
		// GRAB THE ELEMENTS
		this.arrToggleLinks = $(this.toggleID).getElements('.toggle_link');
		this.contentContainer = $(this.toggleID).getElement('.toggle_content_container');
	
		// SET UP THE ANIMATION
		this.animation = new Fx.Tween(this.contentContainer, {duration: 350, transition: Fx.Transitions.Quad.easeOut});
		this.animation.addEvent('doneAnimating', function(){ this.currAnimating = false; }.bind(this));

		// SET THE DEFAULT ACTIVE CONTENT
		if (this.defaultContentLinkID != null) {
			var defaultContentLink = $(this.defaultContentLinkID);
		}
		else {
			var defaultContentLink = this.arrToggleLinks[0];
		}

		var defaultContent = $(defaultContentLink.id + '_content');		
		defaultContentLink.getParent().addClass('active');
		defaultContent.setStyle('display', 'block');		
		this.currContentLinkID = defaultContentLink.id;
		// ---
		
		// ADD THE LINK EVENTS
		
		this.arrToggleLinks.addEvent('click', this.clickChange.bind(this));	
    },
	
	clickChange : function(e) {
		var clickedID = null;
		var clickedElement = $(e.target);

		if(clickedElement.hasClass('toggle_link')){
			clickedID = clickedElement.id;	
		}
		else {
			clickedID = clickedElement.getParent().id;	
		}
		
		this.change(clickedID);
		return false;
	},
	
	change : function(contentLinkID) {
		if (!this.currAnimating && this.currContentLinkID != contentLinkID){
			
			this.currAnimating = true;
			var newContentLink = $(contentLinkID);
			var	newContent = $(contentLinkID + '_content');
			
			var currContentLink = $(this.currContentLinkID);
			var currContent = $(this.currContentLinkID + '_content');
			
			contentContainerRef = this.contentContainer;
						
			currContentLink.getParent().removeClass('active');
			newContentLink.getParent().addClass('active');		
			
			this.animation.start('opacity', 0).chain(		
				function(){ contentContainerRef.setStyle('height', currContent.getSize().y); this.callChain(); },
				function(){ currContent.setStyle('display', 'none'); this.callChain(); },
				function(){ newContent.setStyle('display', 'block'); this.callChain(); },		
				function(){ this.start('height', newContent.getSize().y); },
				function(){ this.start('opacity', 1); this.callChain(); },
				function(){ this.fireEvent('doneAnimating'); }
			)
	
			this.currContentLinkID = contentLinkID;
		}
	}	
});