/*
	This file handles tab functionatlity.  
	Please note that a naming convention must be followed in order for this file to work. 		
	A tab consists of 3 parts.  The container div which holds the tabs and their content which needs to have an id of tab_container.
	The tab div that holdes the tab and it's name, which must have a class of tabbed_menu_item
	Finally the tab content div, which displays content and must have a class of tabbed_menu_content.	
*/
	var menuItems = new Array();
	var tabContent = new Array();
	var tabContainer;
/*
	This functions acts as the entry point.  It should be call onLoad of the body.
*/	

function init()
{
	if(document.getElementById('tab_container')){
		tabContainer = document.getElementById('tab_container');
		/*
			Grab all tab items and tab content and store these elements in an array.
		*/		
		for(var index = 0; index < tabContainer.childNodes.length; index++)
		{		
			var target = tabContainer.childNodes[index].className;	
			//alert(target);
			if(target){		
				if(target.indexOf('tabbed_menu_content') > -1)		
					tabContent.push(tabContainer.childNodes[index]);
					
				if(tabContainer.childNodes[index].className == 'tabbed_menu_item')
					menuItems.push(tabContainer.childNodes[index]);
			}
		}	
		
		for(var index = 1; index < tabContent.length; index++)
			{ 
				if(tabContent[index].style.display != 'inline')
					tabContent[index].style.display = 'none'; 
			}	
		/*
			Add event listeners to each tab.
		*/

		for(var j = 0; j < menuItems.length; j++)
		{	
			var elem = document.getElementById(menuItems[j].id);	
			/*
				addListener is located in the global.js folder.
			*/
			addListener(elem, 'click', preformClickAction, false);
			addListener(elem, 'mouseover', preformMouseOverAction, false);
			addListener(elem, 'mouseout', preformMouseOutAction, false);
		}
	}
}

/*
	This function handles on click action events.	
*/
function preformClickAction(e)
{		
	if(e.srcElement == null)
		toggleTab(e.target);
	
	else
		toggleTab(e.srcElement);		
}

/*
	This function handles mouseover events.
*/
function preformMouseOverAction(e)
{	
	var element;

	if(e.srcElement == null)
		element = e.target;		
	else
		element = e.srcElement;
		

	if(findSelectedTab().id == element.id + '_content')
		;
	else
	{
		element.style.backgroundColor = 'Black';
		element.style.color = 'White';
	}
}

/*
	This function handles mouseOutEvents
*/
function preformMouseOutAction(e)
{
	var element;
	
	if(e.srcElement == null)
		element = e.target;		
	else
		element = e.srcElement;	
	
	if(findSelectedTab().id == element.id + '_content')	
		;	
	else
	{
		element.style.backgroundColor = '#EFF0F2';
		element.style.color = '#979799';
	}
}

/*
	Find out which tab is selected.
*/
function findSelectedTab()
{	
	for(var i = 0; i < tabContent.length; i++)
	{
		if(tabContent[i].style.display != 'none' && tabContent[i].style.display != "")
			return tabContent[i]
	}
}

/*
	Toggles tab based on incoming ID string.  This function MUST have an array that is filled with
	ID names defined on the page that this function is being called from.  Please see template/product_template.asp and search for
	a variables named tabArray.
*/
function toggleTab(elem)
{
	var contentSpot = document.getElementById(elem.id + '_content');

	/*
		Hide all tab content areas, and reset all tab colors
	*/
	for(var i = 0; i < tabContent.length; i++)
	{
		tabContent[i].style.display = 'none';
		menuItems[i].style.backgroundColor = '#F1F1F3';
		menuItems[i].style.borderStyle = 'none';		
		menuItems[i].style.color = '#979799';
		menuItems[i].style.zIndex = 0;	
		menuItems[i].style.borderBottom = 'solid 1px #DDD';
	}
	
	if (contentSpot.style.display == 'inline')
		contentSpot.style.display = 'none';
	else
		contentSpot.style.display = 'inline';
		
	elem.style.backgroundColor = 'White';
	elem.style.color = 'Black';
	elem.style.border = 'solid 1px #DDD';
	elem.style.borderBottom = 'none';
	elem.style.zIndex = 2;	
	elem.blur();
}