/****
*
*	Navigation tabs code
*
* REQUIRES:	Mootools 1.1x, tested with 1.11
****/

//highlight the image on mouseover. meant to be loaded via an onmouseover event on the image
//  simply replaces the image src from *_off* to *_on*
function highlightImage(node) {
	node.src = node.src.replace('_off', '_on'); 
}

//restore the image to the default. meant to be loaded via an onmouseout event on the image
//  simply replaces the image src from *_on* to *_off*
function restoreImage(node) {
	node.src = node.src.replace('_on', '_off'); 
}

//set the specified tab node to on and all others to off
//	tabContainer (str/obj)	- The id of or reference to the node containing the tabs
//	e (obj)			- The mootools event object
function setTabOn(tabContainer, e) {
	//fetch the child items (tab elements) of the tab container
	var tabNodes = $(tabContainer).getChildren();

	for(var i=0; i<tabNodes.length; i++) {
		//if this was the clicked tab, set it and the surounding nodes to on
		if(tabNodes[i] == e.target) {
			if(tabNodes[i].getPrevious().className.indexOf('tabFade') != -1) { //the node before the clicked node is a fade
				tabNodes[i].getPrevious().addClass('tabFadeLeftOn');
				tabNodes[i].getPrevious().removeClass('tabFadeLeftOff');
			} else { //the node before the tab is a separator
				tabNodes[i].getPrevious().addClass('tabSeparateRightOn');
				tabNodes[i].getPrevious().removeClass('tabSeparateOff');
				tabNodes[i].getPrevious().removeClass('tabSeparateRightOff');
			}

			tabNodes[i].addClass('tabDivOn');
			tabNodes[i].removeClass('tabDivOff');

			if(tabNodes[i].getNext().className.indexOf('tabFade') != -1) { //the node after the clicked node is a fade
				tabNodes[i].getNext().addClass('tabFadeRightOn');
				tabNodes[i].getNext().removeClass('tabFadeRightOff');
			} else { //the node after the tab is a separator
				tabNodes[i].getNext().addClass('tabSeparateLeftOn');
				tabNodes[i].getNext().removeClass('tabSeparateOff');
				tabNodes[i].getNext().removeClass('tabSeparateLeftOff');
			}
			
			i++; //prevent the node to the right from being re-defined

		//if not the clicked tab, set it to off
		} else {
			if(tabNodes[i].className.indexOf('tabFade') != -1) { //this is a fade node
				if(i == 0) { //this is the first node
					tabNodes[i].addClass('tabFadeLeftOff');
					tabNodes[i].removeClass('tabFadeLeftOn');
				} else {
					tabNodes[i].addClass('tabFadeRightOff');
					tabNodes[i].removeClass('tabFadeRightOn');
				}
			} else if(tabNodes[i].className.indexOf('tabSeparate') != -1) { //this is a separation tab
				tabNodes[i].addClass('tabSeparateOff');
				tabNodes[i].removeClass('tabSeparateRightOn');
				tabNodes[i].removeClass('tabSeparateLeftOn');
			} else { //this is just a normal text tab
				tabNodes[i].addClass('tabDivOff');
				tabNodes[i].removeClass('tabDivOn');
			}
		}
	}
}

//pre-load all of the tab images to they appear fluid when in use
window.addEvent('domready', function() {
	new Asset.image('/images/tabs/tab_design_on_repeat.jpg');
	new Asset.image('/images/tabs/tab_design_off_repeat.jpg');
	new Asset.image('/images/tabs/tab_design_right_on_fade.jpg');
	new Asset.image('/images/tabs/tab_design_right_off_fade.jpg');
	new Asset.image('/images/tabs/tab_design_left_on_fade.jpg');
	new Asset.image('/images/tabs/tab_design_left_off_fade.jpg');
	new Asset.image('/images/tabs/tab_design_right_curl.jpg');
	new Asset.image('/images/tabs/tab_design_left_curl.jpg');
	new Asset.image('/images/tabs/tab_design_off_curl.jpg');
});

/****
*	End navigation tabs
****/