/*
 * Functions to hide/reveal the submenus based on mouseover events etc
 * Author: Andrew Masri
 * Copyright 2010. All rights reserved 
 */

	
/*	THESE VARS ARE SITE SPECIFIC - be sure to load the config file for this menu: config.js
	//you can change these parameters in order to modify the look and feel of the cascading menu - these values should correcpond to the stylesheet
	var collapseToPaths = true;		//if this is 'true' then (after a period of inactivity) the menu you will collapse to a path for the current page  

	var syncTimerInterval = 40; 	//affects the smoothness and speed of menu transitions (small values => smoother and faster)
	var inactivityDelay = 1500; 	//period of inactivity after which the menu returns to it's default state (in miliSeconds)
	var collapseToPathsDelay = 1000;	//additional period of inactivity after which the menu collapses to default path state (in miliSeconds)

	var fontSizeDefault = 18;		//pixels
	var fontSizeMax = 24;			//pixels
	var fontSizeIncrement = 1;		//pixels

	var lineHeightDefault = 30;		//pixels
	var lineHeightMax = 36;			//pixels
	var lineHeightIncrement = 1;	//pixels

	var letterSpacingDefault = 2;	//pixels
	var letterSpacingMax = 4;		//pixels
	var letterSpacingIncrement = 1;	//pixels

	var opacityMin = 0	;			//0.0-1.0
	var opacityMax = 1;				//0.0-1.0
	var opacityIncrement = 0.1;		//0.1-1.0
	var opacityDecrement = 1;		//0.1-1.0
	
	var fontColorDefault = '#c88';
	var fontColorSelected = '#fff';
*/
	
	//Don't change any system variables below this line (unless you really know what you're doing)
	var syncTimerId = 0;		//used to create slow fade/expand/slide effects
	var expiryTimerId = 0;		//inactivity timer for reseting to the default menu after last mouseout event
	var expireMenu = false;		//when this is set to true the menu will be returned to it's default state
	var collapseMenu = false;	//when this is set to true the menu will be collapse to paths (optional feature)
	var maxClockCycles = 100;	//this is the number of clock cycles needed to complete each mouseover/mouseout/inactivity event
	var clockCycles = 0;		//this is the clock cycle countdown to sleep mode
	
	var selectedMenuItems = new Array();
	var allMenuItems = new Array();
	var allSubMenus = new Array();
	



	//a menu-item has been mouseovered - mark it's entire hierarchy of menus and menu-items for selection (ie menu fade-up and menu-item expansion)
	function selectMenuItems(genealogy, hoverItem) {
		expireMenu = false;						//cancel any menu expiry
		clearTimeout ( expiryTimerId );			//postpone any return to the default menu state

		//if the clock isn't running then start it  
		if (clockCycles == 0) {
			syncTimerId = setTimeout ( "doEffects()", syncTimerInterval );	//start the run cycle timer which is used for transition effects
		}
		clockCycles = maxClockCycles;										//this is the number of clock cycles to complete this event transition 
	
	
		//create an array of all menu items and re-define their default values to make them readable by javascript - first time only
		if  (allMenuItems.length == 0) {
			var j = 0;
			for (var i = 0; i < 1000; i++) {
				if (menuItem = document.getElementById('menuItem' + i)) {
					allMenuItems[j++] = i;		//menu-item exists - add it to the list

					//initiallly menuItem styles are unknown because they are set by css stylesheet - re-define them in order to make their values known
					if (menuItem.className == 'selected') {
						//selected by default - re-define 'selected' css values
						menuItem.style.fontSize = fontSizeMax + 'px';
						menuItem.style.letterSpacing = letterSpacingMax + 'px';
						menuItem.style.lineHeight = lineHeightMax + 'px';
					} else {
						//not selected by default - re-define css default values
						menuItem.style.fontSize = fontSizeDefault + 'px';
						menuItem.style.letterSpacing = letterSpacingDefault + 'px';
						menuItem.style.lineHeight = lineHeightDefault + 'px';
					}
				}
			}
		}

		//create an array of all submenu boxes and define their 'display' property (the stylesheet assignment is not accessible to javascript) - first time only
		if  (allSubMenus.length == 0) {
			var j = 0;
			for (var i = 0; i < 1000; i++) {
				if (submenu = document.getElementById('submenu' + i)) {
					allSubMenus[j++] = i;		//submenu exists - add it to the list

					//submenu boxes 'display' property is inaccessible when it is defined by css stylesheet - re-define the display property for all submenus here
					if (submenu.className.indexOf('default') != -1) {
						//selected by default - re-define 'selected' css values
						submenu.style.display = 'block';
					} else {
						//not selected by default - re-define css default values
						submenu.style.display = 'none';
					}
					
				}
			}
		}

		selectedMenuItems.length = 0; 	//clear out any existing selection
		selectedMenuItems = genealogy.split('-');	//this is our new array of selected menu-items
	}





	//this function is called repeatedly at a fixed interval and advances transition effects by one step
	function doEffects() {
		//the clock stops running when the clockCycles countdown hits zero (until a new event restarts it)
		if (clockCycles) {
			clockCycles--;
			if (expireMenu) 
				syncTimerId = setTimeout("doEffects()", syncTimerInterval * 2); //setup next timer event - menu expiry runs slower
			else {
				syncTimerId = setTimeout("doEffects()", syncTimerInterval); //setup next timer event
			}
		} 

		if (collapseMenu) {
		}
		

      ////////// Selected Menu-Item Effects //////////
		//expand the selected menu-items (fontSize and lineHeight and display properties) 
		for (var i = 1; i < selectedMenuItems.length; i++) {
			if (menuItem = document.getElementById('menuItem' + selectedMenuItems[i])) {
			
				//expand fontSize
				currentFontSize = parseInt(menuItem.style.fontSize.replace('px', ''));
				if (currentFontSize < fontSizeMax) {
					menuItem.style.fontSize = currentFontSize + fontSizeIncrement + 'px';
				}
				
				//expand letterSpacing
				var currentLetterSpacing = parseInt(menuItem.style.letterSpacing.replace('px', ''));
				if (currentLetterSpacing < letterSpacingMax) {
					menuItem.style.letterSpacing = currentLetterSpacing + letterSpacingIncrement + 'px';
				}
				
				//expand lineHeight
				var currentLineHeight = parseInt(menuItem.style.lineHeight.replace('px', ''));
				if (currentLineHeight < lineHeightMax) {
					menuItem.style.lineHeight = currentLineHeight + lineHeightIncrement + 'px';
				}
				
				menuItem.style.display = 'inline';
			}
		}		
		
	    ////////// Un-Selected Menu-Item Effects //////////

		for (var i = 0; i < allMenuItems.length; i++) {
			if (!isSelected(allMenuItems[i])) {
				if (menuItem = document.getElementById('menuItem' + allMenuItems[i])) {
				
					//reduce fontSize
					currentFontSize = parseInt(menuItem.style.fontSize.replace('px', ''));
					if (currentFontSize > fontSizeDefault) {
						menuItem.style.fontSize = currentFontSize - fontSizeIncrement + 'px';
					}
					
					//reduce letterSpacing
					var currentLetterSpacing = parseInt(menuItem.style.letterSpacing.replace('px', ''));
					if (currentLetterSpacing > letterSpacingDefault) {
						menuItem.style.letterSpacing = currentLetterSpacing - letterSpacingIncrement + 'px';
					}
					
					//reduce lineHeight
					var currentLineHeight = parseInt(menuItem.style.lineHeight.replace('px', ''));
					if (currentLineHeight > lineHeightDefault) {
						menuItem.style.lineHeight = currentLineHeight - lineHeightIncrement + 'px';
					}
					
					menuItem.style.display = 'inline';
				}
			}
		}		
		
      ////////// Selected submenu Box Effects //////////
		//reveal the selected submenu boxes (width and display properties) 
		for (var i = 1; i <= selectedMenuItems.length; i++) {
			if (submenu = document.getElementById('submenu' + selectedMenuItems[i])) {
			
				if (submenu.style.display != 'block') {
					//internet explorer doesn't handle opacity changes on transparent pngs
					if (jQuery.support.opacity) {
						setOpacity(submenu, opacityMin); //start the menu off transparent
					}
					  
					submenu.style.display = 'block'; //then reveal it
				}
				else {
					//increase opacity of submenu box
					var currentOpacity = getOpacity(submenu);
					if (currentOpacity < opacityMax) {
						setOpacity(submenu, currentOpacity + opacityIncrement);
					}
				}
			}
		}

      ////////// Un-Selected submenu Box Effects //////////
		//hide the selected submenu boxes (width and display properties) 
		for (var i = 0; i < allSubMenus.length; i++) {
			if (!isSelected(allSubMenus[i])) {
				if (submenu = document.getElementById('submenu' + allSubMenus[i])) {
				
					//decrease opacity of submenu box
					var currentOpacity = getOpacity(submenu);
					if (currentOpacity > opacityMin) {
						setOpacity(submenu, currentOpacity - opacityDecrement);
					}
					else {
						submenu.style.display = 'none'; //completely hide submenu
					}
				}
			}
		}
		
	}

	

	//if it's not in the selectedMenuItems array then it's not selected
	function isSelected(menuItem) {
		for (var i = 0; i < selectedMenuItems.length; i++) {
			if (menuItem == selectedMenuItems[i]) {
				return true;
			}
		}
		return false;
	}



	/* set the opacity of the element (between 0.0 and 1.0) */
	function setOpacity(element, level) {
	 	element.style.opacity = level;
	  	element.style.MozOpacity = level;
	  	element.style.KhtmlOpacity = level;
	  	element.style.filter = "alpha(opacity=" + (level * 100) + ");"		//internet explorer
	}

	/* set the opacity of the element (between 0.0 and 1.0) */
	function getOpacity(element) {
	 	if (level = element.style.opacity) {return level * 1;}
		//internet explorer
	 	if (level = element.style.filter) {
			level = level.replace('alpha(opacity=', '');
			level = level.replace(');', '');
			return level / 100;	//multiplier forces the javascript compiler to treat this as a number 
		}
	 	if (level = element.style.MozOpacity) {return level * 1;}
	 	if (level = element.style.KhtmlOpacity) {return level * 1;}
	}




	//this function is called on the 'mouseout' event of a submenu item - after a delay return the menu to it's default state
	function expireMenuItems() {
		expireMenu = false;					//cancel any menu expiry
		clearTimeout ( expiryTimerId );		//reset the return to default delay timer
		
		expiryTimerId = setTimeout ( "showDefaultMenus()", inactivityDelay );
	}
	
	
	
	

	function showDefaultMenus() {
		//if the clock isn't running then start it  
		if (clockCycles == 0) {
			syncTimerId = setTimeout ( "doEffects()", syncTimerInterval );	//start the run cycle timer which is used for transition effects
		}
		clockCycles = maxClockCycles;										//this is the number of clock cycles to complete this event transition 


		expireMenu = true;					//menu has been inactive - slowly return it to it's default state
		collapseMenu = false;
		
		//if the collapse to paths option is set then do that after another delay
		if (collapseToPaths) {
			expiryTimerId = setTimeout ( "collapseMenu = true;", collapseToPathsDelay );
		}


		//make a list of the default menu-item selection
		selectedMenuItems.length = 0; 		//clear out any existing selection
		var j = 0;

		//first add the root menu box to the default menu-item selection
		for (var i = 0; i < 1000; i++) {
			if (rootMenu = document.getElementById('submenu' + i)) {
				selectedMenuItems[j++] = i;		//this is a selected menu-item - add it to the array of selected items
				break;	//there's only one root menu	
			}
		}

		for (var i = 0; i < 1000; i++) {
			if (menuItem = document.getElementById('menuItem' + i)) {
				if (menuItem.className.indexOf('selected') != -1) {
					selectedMenuItems[j++] = i;		//this is a selected menu-item - add it to the array of selected items
				}
			}
		}
	}