/*
	This is this JavaScript file for adding funcionality to the navigational
	menu for the pumasafc 2.0 website.
*/

// 	This section is for the configuration of your menu.
// 	The first item in each nested array is the text that will
// 	be visible, the second is the url to link to.
//	The arrays nested inside will form the nested links,
//  take care when editing them to ensure that all arrays
// 	are correctly nested. 

var mainMenu = [
					['Home', 'index.php'],
					['|', ''],
					['Adults', 'news.php',
						['News', 'news.php'],
						//['Scores', 'scores.php'],
						['Schedule', 'schedule.php'],
						['Standings', 'standings.php'],
						['Roster', 'roster.php'],
						['Stats', 'stats.php'],
						['Staff', 'roster.php']
					],
					['|', ''],
					['Junior', 'news.php',
						['News', 'news.php'],
					//	['Scores', 'scores.php'],
						['Schedule', 'schedule.php'],
						['Standings', 'standings.php'],
						['Roster', 'roster.php'],
						['Stats', 'stats.php'],
						['Staff', 'roster.php']
					],
					['|', ''],
					['Gallery', 'gallery.php'],
					['|', ''],
					['Contacts', 'contact.php']
				];
				
var caveMenu = [
					['Home', 'index.php'],
					['|', ''],
					['Notices', 'notices.php'],
					['|', ''],
					['Discussions', 'discuss.php'],
					['|', ''],
					['Documents', 'docs.php'],
					['|', ''],
					['My Profile', 'profile.php']
				];

// 	End of configration section, below are the functions to make it work.

// 	Here I will declare any global variables
var menuStr = '';

//	This function creates the event handlers.
//	The first argument is the list item to be checked,
//	the second is which level of the navigation it belongs to.
// 	Returns a string that contains the mouse event handlers.
function addEvents (menuItem, level) {
	if (menuItem[2]) {		// there is an embedded list (the third item in the array)
		var eyedee = menuItem[0] + '_' + level;		// generate a unique id using the parent name and the level of the embeded list
		var event =  'onmouseover="handleList(\'' + eyedee + '\', \'visible\', \'100%\');" onmouseout="handleList(\'' + eyedee + '\', \'hidden\', \'0\');"'; // mouse event string to be added.
	} else {
		var event = ''; // if there is no embeded list, do nothing.
	}
	return event; // return the string.
}

//	This function checks if the menu item has a hyperlink or
//	if it is non clickable text and outputs a string accordingly.
//	It takes the argument item which should be the array to check.
function menuItem (item) {
	if (item[1] != null) {		// The item has a link
		itemStr = '<a href="' + item[1] + '">' + item[0] + '</a>';	// Adds the item with an anchor
	} else {					// There is no link
		itemStr = item[0];		// Adds the item w/o anchor
	}
	return itemStr;
}

//	This function builds the XHTML menu as an unordered list.
// 	The first argument must be the name of CSS Class you wish to
//  use for the unordered list.
//	The second argument 'menuList' should be the name of the 
//  menu object you wish to use.
//	Returns the string 'menuStr' to be written in document.
function buildMenu(listClass, menuList) {

	menuStr += '<ul id="' + listClass + '">';	// initialises the unordered list
	for (var i = 0; i < menuList.length; i++) {				// loops through the menu array
	
		var anEvent = addEvents(menuList[i], 'level1');		// stores any relevant event handlers
		menuStr += '<li ' + anEvent + '>' + menuItem(menuList[i]);	// adds list item with or without event handler or anchor
		
		// check for level 1 embedded lists
		if (menuList[i][2])	{	// there is an embedded list (the third item in the array)
			menuStr += '<ul class="level1" id="' + menuList[i][0] + '_level1" style="visibility:hidden;height:0;"' + anEvent + '>';	// create level 1 list with event handler attached
			
			for (var j = 2; j < menuList[i].length; j++) {		// loop through embeded list
			
				anotherEvent = addEvents(menuList[i][j], 'level2');		// stores any relevant event handlers
				menuStr += '<li ' + anotherEvent + '>' + menuItem(menuList[i][j]);	// adds list item with or without event handler or anchor
				
				// check for level 2 embedded list
				if (menuList[i][j][2]) {	// there is an embedded list (the third item in the array)
					menuStr += '<ul class="level2" id="' + menuList[i][j][0] + '_level2" style="visibility:hidden;height:0;"' + anotherEvent + '>';	// create level 2 list
					
					for (var k = 2; k < menuList[i][j].length; k++) {		// loop through embeded list
						menuStr += '<li>' + menuItem(menuList[i][j][k]) + '</li>';		// adds list item with or without anchor
					}
					menuStr += '</ul>';		// closes level 2 ul
				}
				menuStr += '</li>';	// closes list item
			}
			menuStr += '</ul>';		// closes level 1 ul
		}
		menuStr += '</li>';	// closes list item
	}
	menuStr += '</ul>';		// closes navlist ul
	return menuStr;
}

// 	This function handles the events
// 	it takes 3 arguments, the first should be the id
//	of the <ul> of the embedded list. The 2nd should be
//	either 'hidden' or 'visible' to hide or show the list
//	and the 3rd is either 0 or 100% for the style height.
function handleList(parent, visibility, height) {
	document.getElementById(parent).style.visibility = visibility;		// alters the CSS visibility property of the embeded list
	document.getElementById(parent).style.height = height;				// alters the CSS height property of the embeded list
}