/*
   Author:   Ann Airey
   Date:     May 21, 2010

   Filename: wpsfmenu.js


   Function List:

   addEvent(object, evName, fnName, cap)
      Adds an event hander to object where evName is the name of the event,
      fnName is the function assigned to the event, and cap indicates whether
      event handler occurs during the capture phase (true) or bubbling
      phase (false)

	setUp()
		Creates arrays of the dropdowns for menu items and adds mouseover event

   openMenu()
      Opens a menu after closing any previously opened one

   closeOldMenu()
      Closes the active menu

   rollDown()
      Applies a roll-down effect to the opening of the active menu 

   -------------------------------------------------------------
   Global Variable List:

   activeMenu
      An object variable pointing to the currently active and open menu
   
*/

/*  variables used in dropdown menu code  */

var activeMenu = null;
var clipHgt = 0;
var timeID;


function addEvent(object, evName, fnName, cap) {
   if (object.attachEvent)
       object.attachEvent("on" + evName, fnName);
   else if (object.addEventListener)
       object.addEventListener(evName, fnName, cap);
}

addEvent(window, "load", setUp, false);

function setUp()   {

	/*  set up arrays of dropdown menus  */

	var menus = new Array();

	var allElems = document.getElementsByTagName("*");

	/*  put all upper level menu items in an array  */

	for (var i = 0; i < allElems.length; i++)  {
		if (allElems[i].className == "mainmenu")  {
			menus.push(allElems[i]);
		}
	}

	/* add Events to mouseover for menu items */

	for (var i = 0; i < menus.length; i++)  {
		menus[i].onmouseover = openMenu;
	}

	/*  if user clicks anywhere else, close any open menu  */

	addEvent(document.getElementById("header"), "mouseover", closeOldMenu, false);
	addEvent(document.getElementById("header"), "onclick", closeOldMenu, false);
	addEvent(document.getElementById("content"), "mouseover", closeOldMenu, false);
	addEvent(document.getElementById("content"), "onclick", closeOldMenu, false);
	addEvent(document.getElementById("extras"), "mouseover", closeOldMenu, false);
	addEvent(document.getElementById("extras"), "onclick", closeOldMenu, false);

/*	document.getElementById("header").onmouseover = closeOldMenu;
	document.getElementById("header").onclick = closeOldMenu;
	document.getElementById("announce").onmouseover = closeOldMenu;
	document.getElementById("announce").onclick = closeOldMenu;
	document.getElementById("extras").onmouseover = closeOldMenu;
	document.getElementById("extras").onclick = closeOldMenu;    
	document.getElementById("content").onmouseover = closeOldMenu;
	document.getElementById("content").onclick = closeOldMenu;      */

}


function openMenu()  {

	// this function moves the pull-down menu from one title to another

	if (activeMenu)  
		closeOldMenu();

	if (this.id)  {   /*  it has a sub-menu  */

		/*  set border and color to black   */

		var paraID = "para" + extractMenuNum(this.id);    /*  number of mainmenu div ID is same for 	
														 	corresponding paragraph ID  */
		var paraObject=document.getElementById(paraID);
		paraObject.style.borderColor = "black"; 
		paraObject.style.color = "black";      

		/*  roll out submenu  */

		var subMenuID = "sub" + this.id;
		activeMenu = document.getElementById(subMenuID);
		activeMenu.style.clip = "rect(0px, 200px, 0px, 0px)";
		activeMenu.style.display = "block";
		timeID = setInterval("rollDown()", 1);  
	} 
	

}

function closeOldMenu()  {

	if (activeMenu) { 

		/*  find main menu ID number, then get corresponding paragraph element   */

		var paraID = "para" + extractMenuNum(activeMenu.id);  /*  find menu item number   */
		var paraObject = document.getElementById(paraID);

		/*   put border and color back to gray     */

		paraObject.style.borderColor = "#cccccc";
		paraObject.style.color = "#cccccc";   
		
		clearInterval(timeID);
		activeMenu.style.display = "none";
		activeMenu = null;  
	}   
}  

function extractMenuNum(idString)   {
		return idString.charAt(idString.length-1);

}

function rollDown()  {

	clipHgt = clipHgt + 10;
	if (clipHgt < 400) {
		activeMenu.style.clip = "rect(0px, 200px," + clipHgt + "px, 0px)";
	}
	else {
		clearInterval(timeID);
		clipHgt = 0;
	}  
}