// menuFunctions.js - version 0.3
//
// Author - James Farrow 22-01-2010

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

 menuFunctions.js
 This file handles the JavaScript for entering items into a list for a Spry Menu Bar. 
 It includes rollover functionality and background images with centred text overlay.
 
 v 0.2 - Link from top sections. Allows empty top sections
 v 0.3 - No drop down backgrounds

 *******************************************************************************/
 
 /* Use "/acatalog/" for web upload to allow image to display properly, but for local testing use a blank "" */
var prefix = "/acatalog/";
//prefix = "";
//prefix = "/acatalog/test/";

/* Alters the filename to allow for rollover images to be displayed on mouse over by taking a string and adding "roll" before the file extension.
Example createRollover("quik.png") = "quikRoll.png"
*/
function createRollover(imgName) {
	var temp = [];
	temp = imgName.split('.');
	
	return(temp[0] + "Roll." + temp[1]);
}

/* Strips ther file extension off of the image to get the id to use for the rollover effects. Uses whatever is before the full stop (".") as the button unique identifier
	e.g. getBtnId("btnContact.png") = btnContact 
	imgName		image name to get ID from. Will often include the path aswell*/
function getBtnId(imgName) {
	var temp = [];
	temp = imgName.split('.');
	return(temp[0]);
}

/* Changes image to it's rollover version 
	id		 id of div to perform rollover functionality
	imgName	 name of image to base rollover swap on */
function hover(id, imgName) {
	document.getElementById(id).style.backgroundImage = "url('" + createRollover(imgName) + "')";
}

/* Changes imaqge back to the original when mouse moves off of it 
	id		 id of div to perform rollover functionality
	imgName	 name of image to base rollover swap on */
function hoverOff(id, imgName) {
	document.getElementById(id).style.backgroundImage = "url('" + imgName + "')";
}

/* Ouput subcategory (child of index1 and grandchild of menu) at a given index */
function outputSubCategory2(menu, index1, index2) 
{
	var links = '';
	if(section_tree[menu].pChild[index1].pChild[index2].pChild != null && typeof section_tree[menu].pChild[index1].pChild[index2].pChild != 'undefined' && window.section_tree[menu].pChild[index1].pChild[index2].pChild) {
		for(var k = 1; k<= section_tree[menu].pChild[index1].pChild[index2].pChild.length; k++) {
			// Uses '....' instead of "...." here otherwise the links break when coming from a perl page such as the login or cart page
			links = links + '<li><a href=' + section_tree[menu].pChild[index1].pChild[index2].pChild[k].sURL + '>';
			
			// Need if statement to separate side nav from top nav for different sized buttons in each menu - brands may be bigger?
			var name = section_tree[menu].pChild[index1].pChild[index2].pChild[k].sName;
			
			var imgName = "BtnBack";
			var width = "140";
			var height = "24";
			var idInner = "inner";
			// If it is in the categories menu then it uses a smaller blank for the background than the brands menu
			//if(menu == 1) {
			//	imgName = imgName + "150";
			//	width = "150";
			//	height = "60";
			//	idInner= idInner + "150";
			//}
			//else {
			//	width = "156";
			//	height = "59";
			//}
			
			imgName = imgName + ".png";
			
			var id = getBtnId(imgName) + menu + index1 + index2 + k;
			
			links = links + "<div class=\"submenu\" id=\"" + id + "\" style=\"width:" + width + "px; height:" + height + "px; background-image:url('" + prefix + imgName + "')\"  overflow:hidden; ";
			//links = links + "<div class=\"submenu\"";
			
			//links = links + "class=\"outer\" title=\"" + name + "\">";
			links = links + " title=\"" + name + "\">";
			
			//the 2 below are to center the contents of the button both horizontally and vertically in most browers - see: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
			//links = links + "<div id=\"middle\">";
			//links = links + "<div id=\"" + id + "\">";
			
			//links = links + name + "</div></div></div></a>";
			links = links + name + "</div></a>";
			links = links + "</li>";
		}
	}
	return(links);
}

/* Output subcategory (child of menu) at a given index */
function outputSubCategory(menu, index) 
{
	var links = "";
	if(section_tree[menu].pChild[index].pChild != null && typeof section_tree[menu].pChild[index].pChild != 'undefined' && window.section_tree[menu].pChild[index].pChild) {
		for(var j = 1; j<= section_tree[menu].pChild[index].pChild.length; j++) {
			// Uses '....' instead of "...." here otherwise the links break when coming from a perl page such as the login or cart page
			links = links + '<li><a href=' + section_tree[menu].pChild[index].pChild[j].sURL + '>';
			
			// Need if statement to separate side nav from top nav for different sized buttons in each menu - brands may be bigger?
			var name = section_tree[menu].pChild[index].pChild[j].sName;
			
			var imgName = "BtnBack";
			var width = "140";
			var height = "24";
			var idInner = "inner";
			// If it is in the categories menu then it uses a smaller blank for the background than the brands menu
			//if(menu == 1) {
			//	imgName = imgName + "150";
			//	width = "150";
			//	height = "60";
			//	idInner = idInner + "150";
			//}
			//else {
			//	width = "156";
			//	height = "59";
			//}
			
			imgName = imgName + ".png";
				
			var id = getBtnId(imgName) + menu + index + j;
			
			links = links + "<div class=\"submenu\" id=\"" + id + "\" style=\"width:" + width + "px; height:" + height + "px; background-image:url('" + prefix + imgName + "');\" display:table; #position:relative; overflow:hidden; ";
			//links = links + "<div class=\"submenu\"";
			// Commented out to take out rollover effect on second tier
			//links = links + "onmouseover=\"hover('" + id + "', '" + imgName + "');\" onmouseout=\"hoverOff('" + id + "', '" + imgName + "');\"";
			links = links + " title=\"" + name + "\">";
			
			//the 2 below are to center the contents of the button both horizontally and vertically in most browers - see: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
			//links = links + "<div id=\"middle\">";
			//links = links + "<div id=\"" + id + "\">";
			
			links = links + name;
			//links = links + "</div></div>";
			links = links + "</div>";
			links = links + "</a>";
			// If brands menu then there is another level of menu to display
			if(menu == 2) {
				links = links + "<ul>" + outputSubCategory2(menu, index, j) + "</ul>";
			}
			links = links + "</li>";
		}
	}
	return(links);
}

/*	Returns the text with any whitespace stripped from it

*/
function stripWhitespace(text) {
	var stripped = "";
	
	stripped = text.replace(/\s/g, "");
	
	return(stripped);
}

/* Ouputs the top menu items and their sub-sections
	menu:	1 categories
			2 brands
*/
function outputMenu(menu)
{
	var out = "";
	// Outputs top level of menu
	for(var i=1; i <= section_tree[menu].pChild.length; i++) {
		// Rollover try
		var name = section_tree[menu].pChild[i].sName;
		// Because Top2Toe doesn't allow top-level sections to be associated with images the image name is based on the name of the section
		var imgName = "Btn" + (stripWhitespace(name)).toLowerCase() + ".png";
		//var imgName = section_tree[menu].pChild[i].sImage;
		var id = getBtnId(imgName);
		//var width = section_tree[menu].pChild[i].nImageWidth;
		//var height = section_tree[menu].pChild[i].nImageHeight;
		var width = "";
		var height = "";
		// If it is in the categories menu then it uses a smaller blank for the background than the brands menu
		if(menu == 1) {
			width = "140"; //"112";
			height = "41";
		}
		else {
			width = "156";
			height = "59";
		}
		var url = section_tree[menu].pChild[i].sURL;
		
		// if we are at the 5th item and going through the categories then start a new row of items for output
		if(i == 5 && menu == 1) {
			out = out + "</ul><div id=\"secondRow\"><ul id=\"MenuBar3\" class=\"MenuBarHorizontal\">";
		}
		
		out = out + "<li>"
		out = out + '<a class=\"MenuBarItemSubmenu\" href=' + url +'>';
		out = out + "<div id=\"" + id + "\" style=\"width:" + width + 
		"px; height:" + height + "px; background-image:url('" + prefix + imgName + "'); background-repeat:no-repeat; background-position:center;\"";
		// Only use mouseover replacement for categories and not brands
		if(menu == 1) {
			out = out + " onmouseover=\"hover('" + id + "', '" + prefix + imgName + "');\" onmouseout=\"hoverOff('" + id + "', '" + prefix + imgName + "');\"";
		}
		out = out + " title=\"" + name + "\">";
		// End of rollover if statement
		
		
		out = out + "</div></a>";
		out = out + "<ul class=\"firstSubSection\">" + outputSubCategory(menu, i) + "</ul></li>";
		
		// If at the seventh item and outputting categories then this is a special case as end of second row
		if(i == 7 && menu == 1) {
			// This double <ul> part is due to IE displaying the second row dropdowns incorrectly without this
			out = out + "</ul></div><ul>";
			// Is this break statement required?
			break;
		}
	}
	return(out);
}