// JavaScript Document
/////////////////////////////////////////////////////////////////////////////////
// Copyright 2007 Rockford J. Ross
//
// This script contains the code for alternately revealing a dropdown menu when
//   the mouse is over the div contaiing its menu title in the menu bar and
//   hiding that menu when any one of four events occurs:
//   1.  the mouse leaves the dropdown menu
//   2.  the mouse is rolled over a different menu title in the menu bar
//   3.  a new page is visited (causing a window.onunload event)
//   4.  a call is made to function clearMenu
////////////////////////////////////////////////////////////////////////////////

// The following event declaration is needed to ensure that any active menu is 
//   cleared when the containing page is left (so that when a return to the
//   containing page is made, the menu has been cleared). Function clearMenu
//   is defined in this file.

// window.onunload=clearMenu;	
window.onunload=menuHide;	

// Variable activeMenu is a global variable that keeps track of the most recently 
// activated menu so that this menu can be hidden when a new menu is activated.

var activeMenu = 1;

//  toggleBox is defined to be the the size of the entire book page. It is unseen 
//    and is used to detect a mouseover event onto the toggleBox from a dropdown
//    menu in order to clear the menu when the mouse leaves that menu and enters 
//    the toggleBox area. The next two lines set up the event listener for toggleBox.
//    toggleBox is written in writeMenu.js.

var oldMenuLinkColor;
var toggleBox = document.getElementById("toggleBox");
toggleBox.onmouseover = menuHide;

// Function menuReveal reveals the menu identified by parameter i.  It does this by:
//   1. clearing the currently active menu (if any);
//   2. setting the global variable active menu to the number of the menu to be made active
//   3. identifying the div containing the original menu title (whose id, by construction,
//      is menuTitleI, where I is the parameter i--activeMenu)
//   4. hiding that div
//   5. identifying the div containing the replacement menu title and all dropdown
//      menu titls and links as sub divs
//   6. making that div visible
//   7. positioning that div at a higher level than the underlying text so that
//      mouse events are noted there
//   8. setting div toggleBox at a higher level than the underlying text so that
//      it can detecct a mouseover event when the mouse leaves the menu into the
//      surrounding area
//   9. making each link item in the dropdown menu visible.

function menuReveal(i) {
    menuHide();
	activeMenu = i;
	menuLink = document.getElementById("menuTitle" + activeMenu);
	// menuLink.style.visibility="visible";
        oldMenuLinkColor = menuLink.style.color;
        menuLink.style.color="#FF0000";
	menuBox = document.getElementById("menuTitleMouseOver" + activeMenu);
    menuBox.style.visibility="visible";
	menuBox.style.zIndex="102";
        // menuBox.onmouseover = menuHide;
    toggleBox.style.zIndex="101";//zIndex for toggleBox must be less than menuBox
	
	// applets always stay on top, hiding the dropdown menus, unless hidden
	var applet=document.getElementsByTagName("applet");
	var i=0;
	while (i<applet.length){ 
	    applet[i].style.visibility="hidden";
		i=i+1;
	}
   	
    // The flash player we use wants to stay on top of menus, so we must hide them
	// during menu dropdown.
	// Create an array 
    var allPageTags = new Array(); 

    //Populate the array with all the page tags
    var allPageTags=document.getElementsByTagName("*");
    //Cycle through the tags using a for loop
    for (i=0; i<allPageTags.length; i++) {
       //Pick out the tags with our class name
     if (allPageTags[i].className=="movieBox") {
         //Manipulate this in whatever way you want
         allPageTags[i].style.visibility="hidden";
         }
      } 

	var link=menuBox.getElementsByTagName("div");
	i=0;
	while (i<link.length){
		link[i].style.visibility="visible";
		i=i+1;
	}
}
	

// Function menuHide hides the active menu.  It does this by:
//   1. identyfying the currently active menu div by way of its id, which
//      is menuTitleMouseOverI, where I is the value in global variable
//      activeMenu
//   2. Hiding that div and all of its dropdown menu sub divs
//   3. identifying the original menu title to appear in the menu bar,
//      once the active menu is hidden, by way of its div, which is
//      menuTitleI, where I is the value in the global variable activeMenu
//   4. setting that div visible
//   5. setting div toggleBox to be at a layer lower than the content,
//      so that a mouseover event is not detected by toggleBox

function menuHide(){
    menuBox = document.getElementById("menuTitleMouseOver" + activeMenu);
	menuBox.style.visibility="hidden";
	
    // reveal the applets when menus are hidden
	var applet=document.getElementsByTagName("applet");
	i=0;
	while (i<applet.length){ 
	    applet[i].style.visibility="visible";
		i=i+1;
	}


    // Unhide any hidden Flash movieBox divs
	// Create an array 
    var allPageTags = new Array(); 

    //Populate the array with all the page tags
    var allPageTags=document.getElementsByTagName("*");
    //Cycle through the tags using a for loop
    for (i=0; i<allPageTags.length; i++) {
  
       //Pick out the tags with our class name
       if (allPageTags[i].className=="movieBox") {
         //Manipulate this in whatever way you want
         allPageTags[i].style.visibility="visible";
         }
      } 


	var link=menuBox.getElementsByTagName("div");
	i=0;
	while (i<link.length){
		link[i].style.visibility="hidden";
		i=i+1;
	}
	menuLink = document.getElementById("menuTitle" + activeMenu);
	// menuLink.style.visibility="visible";
        menuLink.style.color = oldMenuLinkColor;
	toggleBox.style.zIndex="1";
}