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

	CONTENT TOGGLE - CLASS
	-------------------------------------------------------------------------------------------
		
	DEPENDECIES
	- mootools 1.11 (element.event, elements.selectors, fx.elements, fx.style)

******************************************************************************************************/
var contentToggle = new Class({
	initialize : function(options) {
		this.options = options;
		
		this.toggleContainerID = this.options.toggleContainerID;
		this.orientation = this.options.orientation;
		
		this.toggleContainer = $(this.toggleContainerID);																										// the toggle container element
		this.toggleContentWrap = $$('#'+ this.toggleContainerID + ' .toggle_content_wrap')[0];																// the toggle content wrapper element
		this.toggleNavContainer = $$('#'+ this.toggleContainerID + ' .toggle_nav')[0];																		// the toggle nav element
		this.toggleNavOffset = (this.orientation == 'horizontal') ? this.toggleNavContainer.getPosition().x : this.toggleNavContainer.getPosition().y ;		// the position of the nav element used for animating the arrow indicator
		this.arrow = $$('#'+ this.toggleContainerID + ' .arrow_indicator')[0];																				// the arrow indicator element
		this.arrToggleLinks =  $$('#'+ this.toggleContainerID + ' .toggle_link');																				// array of toggle links
		this.arrActiveToggleLinks = $$('#'+ this.toggleContainerID + ' .toggle_nav .active');																	// array of 'active' toggle link, ie links with an active class applied by default
		this.arrToggleContents = $$('#'+ this.toggleContainerID + ' .toggle_content');																			// arry of toggle content items
		
		this.currLink = null;					// the currently active link
		this.currContent = null;				// the currently active content
		this.contentAnimation = null;			// the content animation effect
		this.arrowAnimationProperty = null;	// the property we change when animating the arrow indicator
		this.arrowAnimation = null;			// the arrow indicator animation effect
		this.animating = false;				// animation flag
		
		// set the arrow animation property based on the orientation
		this.arrowAnimationProperty = (this.orientation == "horizontal") ? "margin-left" : "margin-top";			
		
		// arrow animation
		this.arrowAnimation = new Fx.Style(this.arrow, this.arrowAnimationProperty, {
			duration: 500, 
			transition: Fx.Transitions.Quart.easeInOut
		});
		
		// content animation
		this.contentAnimation = new Fx.Style(this.toggleContentWrap, 'opacity', {
			duration: 500, 
			transition: Fx.Transitions.Quart.easeInOut
		});
		
		// add event listeners
		this.arrToggleLinks.addEvent('click', this.handleClick.bind(this));
		
		// set the default content if it isn't already set via HTML
		if (this.arrActiveToggleLinks.length == 0) {			
			this.switchContent(this.arrToggleLinks[0].id);
		}
		else {			
			this.currLink = $(this.arrActiveToggleLinks[0]);
			this.currContent = $(this.arrActiveToggleLinks[0].id + '_content');
			this.positionArrow(this.arrActiveToggleLinks[0], false);	
		}
		
	},
	handleClick : function(e) {		
		var clickLink = (e.srcElement) ? e.srcElement : e.target ;
		
		this.switchContent(clickLink.id);
	},
	switchContent : function(newLinkID) {	
		if(! this.animating && this.currLink != $(newLinkID)) {
				this.animating = true;
				this.contentAnimation.start(0);
				this.setActiveLink(newLinkID);
				this.hideContent.delay(540, this);
				this.showContent.delay(540, this, newLinkID);
		}		
	},
	hideContent : function() {
		if(this.currContent != null) {			
			this.currContent.removeClass('active');
		}
	},
	setActiveLink : function(newLinkID) {
		var linkElement = $(newLinkID);
		
		linkElement.addClass('active');
		this.positionArrow(linkElement, true);
		
		if(this.currLink != null) {
			this.currLink.removeClass('active');	
		}
	},
	showContent : function(newLinkID) {
		var linkElement = $(newLinkID);
		var contentElement = $(newLinkID + '_content');
		
		contentElement.addClass('active');		
		
		this.currLink = linkElement;
		this.currContent = contentElement;
		
		this.contentAnimation.start(1);		// fade in content
		this.doneAnimation.delay(520, this);	// reset or animation flag	
	},
	positionArrow : function(linkElement, animate) {		
		this.toggleNavOffset = (this.orientation == 'horizontal') ? this.toggleNavContainer.getPosition().x : this.toggleNavContainer.getPosition().y ;		// the position of the nav element used for animating the arrow indicator
		linkPosition = (this.orientation == 'horizontal') ? (linkElement.getPosition().x - this.toggleNavOffset + (linkElement.getCoordinates().width / 2) - 13) : (linkElement.getPosition().y - this.toggleNavOffset - 4);
		
		if (animate) {
			this.arrowAnimation.start(linkPosition);
		}
		else {
			this.arrow.setStyle(this.arrowAnimationProperty, linkPosition);	
		}		
	},
	doneAnimation : function() {
		this.animating = false;
	}
});