<!--
/**
 *	MenuControl.js
 *	Manage the state (src) of menu button <img>s
 *	Manage the corrisponding visibility of product selector <div>s, 
 *	showing the active products, hidding all others.
 */
 
function menuControl (e)
{
	if (document.getElementById)
	{		
		toggleMenu (e);
	}
	
	return false;
}

function toggleMenu (menuReference)
{
	if (menuReference.style.display == 'inline') return;

	var MENU_CLASS = "productSelector";
	var IMG_STATE_ON = "_on.gif";
	var IMG_STATE_OFF = "_of.gif";
	var	TARGET_DIV_PREFIX = "our";

	//	1. Get the current <img> src
	//	2. Find the last index of _. This delimitates our image state (_on or _of).
	//	3. Strip off the image state (_on or _of) and extention (to be replaced below).
	var targetString = menuReference.src;
	var underscoreIndex = targetString.lastIndexOf('_');
	var targetRoot = targetString.substring(-1, underscoreIndex);


	//	REQUIRES Utilities.js
	var menuItems = getElementsByClass(MENU_CLASS, null, 'img');

	for (i=0;i<menuItems.length;i++)
	{
		var srcOld = menuItems[i].src;
		var srcDelim = srcOld.lastIndexOf('_');
		var srcRoot = srcOld.substring(-1, srcDelim);
		
		menuItems[i].src = srcRoot + IMG_STATE_OFF;
		
		//	The value of menuItems[i].id will be either "Brands" or "Styles"
		//	The <div> we want to target will have the corrisponding id of
		//	either ourBrands or ourStyles.
		//	We get the target <div> id by concatenating "our" with the
		//	value of menuItems[i].id
		var targDiv = TARGET_DIV_PREFIX + menuItems[i].id;	// ex. "our" + "Brands"
		document.getElementById(targDiv).style.display = 'none';
	}
	
	menuReference.src = targetRoot + IMG_STATE_ON;

	//	The value of menuItems[i].id will be either "Brands" or "Styles"
	//	The <div> we want to target will have the corrisponding id of
	//	either ourBrands or ourStyles.
	//	We get the target <div> id by concatenating "our" with the
	//	value of menuItems[i].id	
	var menuDiv = TARGET_DIV_PREFIX + menuReference.id;	// ex. "our" + "Styles"
	document.getElementById(menuDiv).style.display = 'inline';
}

function initMenuControl()
{	
	var TARGET_TAG = "img";
	var TARGET_CLASS = "productSelector";

	if(!document.getElementsByTagName) return;
	

	var images = document.getElementsByTagName(TARGET_TAG);

	// loop through all image tags
	for (var i=0; i<images.length; i++)
	{
		var image = images[i];
		
		if (image.getAttribute("class") == TARGET_CLASS || image.getAttribute("className") == TARGET_CLASS)
		{
			image.onclick = function() { menuControl(this); return false; }
		}
	}
}