/*
  CROSS-BROWSER DHTML POP-UP MENUS
  by Kevin Yank (kevin@sitepoint.com)
  Version 1.0 (26/02/2001)

  Visit http://www.sitepoint.com/newsletter/ to subscribe
  to the SitePoint Tech Times for more free scripts, tips,
  and tutorials like this one!

  TERMS OF USE: 
  SitePoint hereby grants permission for anyone to make
  use of the scripts contained in this page, on the
  condition that this notice appears before the first
  relevant <script> in any page that makes use of this
  code, either in its original or modified form. That's
  not much to ask, is it?
*/

	// Some variables governing the apperarance of menu
	// items. Note that these values also appear in the CSS
	// code below, so if you change these values, be sure
	// to change them in both places!

	//  -> The width of menu items in pixels. This does not
	//     include its 1-pixel border, so the menu will
	//     actually be 2 pixels wider than this value.
	var menuItemWidth = 168;

	//  -> The height of menu items in pixels. This does
	//     not include the 1-pixel border between menu
	//     items, above the first menu item, and below the
	//     last menu item. Thus, the menu's height will
	//     actually be: ((menuItemHeight+1)*numMenuItems)+1
	var menuItemHeight = 14;

	if (document.images) { // Browser supports image swaps (most do)

	    // This section preloads the images to be used for the
	    // button at the base of each menu (not the menu items
	    // themselves; they're done using pure DHTML).

	    //  -> The menuOutButtons array contains the images for
	    //     the menu buttons' default appearance.
	    var menuOutButtons = new Array();
	    menuOutButtons[0] = new Image();
	    menuOutButtons[1] = new Image();
	    menuOutButtons[2] = new Image();
	    menuOutButtons[3] = new Image();
	    menuOutButtons[4] = new Image();
		menuOutButtons[0].src = "images/navigation/nav_service_0.gif";
		menuOutButtons[1].src = "images/navigation/nav_installing_0.gif";
		menuOutButtons[2].src = "images/navigation/nav_guaranteed_0.gif";
		menuOutButtons[3].src = "images/navigation/nav_questions_0.gif";
		menuOutButtons[4].src = "images/navigation/nav_about_0.gif";

		if (whichSection == "service")
		{
			menuOutButtons[0].src = "images/navigation/nav_service_1.gif";
		}
		else if (whichSection == "install")
		{
			menuOutButtons[1].src = "images/navigation/nav_installing_1.gif";
		}
		else if (whichSection == "guarantee")
		{
			menuOutButtons[2].src = "images/navigation/nav_guaranteed_1.gif";
		}
		else if (whichSection == "questions")
		{
			menuOutButtons[3].src = "images/navigation/nav_questions_1.gif";
		}
		else if (whichSection == "about")
		{
			menuOutButtons[4].src = "images/navigation/nav_about_1.gif";
		}


	    //  -> The menuOverButtons array contains the images for
	    //     the menu buttons' active appearance.
	    var menuOverButtons = new Array();
	    menuOverButtons[0] = new Image();
	    menuOverButtons[0].src = "images/navigation/nav_service_3.gif";
	    menuOverButtons[1] = new Image();
	    menuOverButtons[1].src = "images/navigation/nav_installing_3.gif";
	    menuOverButtons[2] = new Image();
	    menuOverButtons[2].src = "images/navigation/nav_guaranteed_3.gif";
	    menuOverButtons[3] = new Image();
	    menuOverButtons[3].src = "images/navigation/nav_questions_3.gif";
	    menuOverButtons[4] = new Image();
	    menuOverButtons[4].src = "images/navigation/nav_about_3.gif";

	}

	// The menuURLs array should contain the number of items
	// in each menu. For example, if you have two menus with
	// 1 menu item and 4 menu items respectively, this would
	// be:
	//     var menuLengths = new Array(1,4);
	//
	// NOTE: If you only need a single menu, you can't
	// use this syntax. Instead, do
	//     var menuLengths = new Array();
	//     menuLengths[0] = x;
	// where x is the number of menu items.
	var menuLengths = new Array(9,5,3,3,6);

	// The menuURLs 2D array should contain the URL's to be
	// loaded by each menu item. Leave the following lines alone
	// (they set up the empty array).
	var menuURLs = new Array(menuLengths.length);
	for (i=0;i<menuLengths.length;i++) 
	    menuURLs[i] = new Array(menuLengths[i]);

	// Enter your menu URLs here, according to the following
	// format:
	//     menuURLs[x][y] = "http://url.goes.here/";
	// where 'x' is the menu minus one and 'y' is the menu
	// item minus one. Thus, to set the 3rd item of 'menu5'
	// to load mydocument.html, you'd use the following line:
	//     menuURLs[4][2] = "test.html";
	// Any menu items that you don't list here will do nothing
	// when clicked on.
	// NOTE: For NSN4 compatibility, these URL's are repeated
	// in the >A HREF> tags that appear in the HTML code for
	// the menu items. Be sure to keep your URLs in sync.
	menuURLs[0][0] = "content/service/choosing.aspx";         // URL for "menu1item1"
	menuURLs[0][1] = "apps/locationsearch/search.aspx";        // URL for "menu1item2"
	menuURLs[0][2] = "content/service/mobile_service.aspx";     // URL for "menu1item3"
	menuURLs[0][3] = "content/service/windshield_replacement.aspx";        // URL for "menu1item4"
	menuURLs[0][4] = "content/service/windshield_repair.aspx";        // URL for "menu1item5"
	menuURLs[0][5] = "content/service/vin_tracking.aspx";        // URL for "menu1item6"
	menuURLs[0][6] = "content/service/insurance_partners.aspx";     // URL for "menu1item7"
	menuURLs[0][7] = "apps/locationsearch/search.aspx";        // URL for "menu1item8"
	menuURLs[0][8] = "apps/locationsearch/search.aspx";        // URL for "menu1item9"

	menuURLs[1][0] = "content/install/installation_specialists.aspx";         // URL for "menu2item1"
	menuURLs[1][1] = "content/install/best_glass_practices.aspx";        // URL for "menu2item2"
	menuURLs[1][2] = "content/install/vehicle_structure.aspx";       // URL for "menu2item3"
	menuURLs[1][3] = "content/install/bonding_glass_to_metal.aspx";        // URL for "menu2item2"
	menuURLs[1][4] = "content/install/safest_glass.aspx";       // URL for "menu2item3"

	menuURLs[2][0] = "content/guarantee/service_protection_plan.aspx";     // URL for "menu3item1"
	menuURLs[2][1] = "content/guarantee/checklist.aspx";    // URL for "menu3item2"
	menuURLs[2][2] = "content/guarantee/warranty_information.aspx"; // URL for "menu3item3"
	// menuURLs[2][2] = "content/guarantee/friends_of_harmon.aspx";    // URL for "menu3item2"

	menuURLs[3][0] = "content/questions/glossary.aspx";    // URL for "menu4item1"
	menuURLs[3][1] = "content/questions/frequently_asked_questions.aspx";       // URL for "menu4item2"
	menuURLs[3][2] = "apps/forms/contactus.aspx";       // URL for "menu4item2"

	menuURLs[4][0] = "content/about/history.aspx";    // URL for "menu4item1"
	menuURLs[4][1] = "content/about/community.aspx";       // URL for "menu4item2"
	menuURLs[4][2] = "apps/jobpostings/joblist.aspx";      // URL for "menu4item3"
	menuURLs[4][3] = "content/about/harmon_family.aspx";       // URL for "menu4item4"
	menuURLs[4][4] = "apps/forms/contactus.aspx";       // URL for "menu4item2"
	menuURLs[4][5] = "apps/PressReleases/PRList.aspx";       // URL for "menu4item6"


	// Pop-up menus close after a brief delay when the user's
	// mouse passes out of them. If the user's mouse returns to
	// the menu before that delay expires, however, the menu
	// should no longer be closed. The menuTimers array stores
	// these timers for menus that are in the process of closing.
	// You don't have to set anything here; the array is
	// created based on the menuLengths variable you defined
	// above.
	var menuTimers = new Array(menuLengths.length);

	/**
	 * This function is used throughout the script to obtain
	 * a reference to a page element's style given its ID.
	 * This reference can then be used to set style properties
	 * like position and visibility.
	 */
	function getStyleObj(id) {
	    if (document.getElementById || // DOM-compliant browsers (MSIE5, NSN6, O5)
	        document.all) {            // or MSIE 4
	        return getObj(id).style;
	    } else return getObj(id); // NSN4
	}

	/**
	 * This function is used throughout the script to obtain
	 * a reference to a page element given its ID. This
	 * reference can then be used to set variables, event
	 * handlers, etc.
	 */
	function getObj(id) {
	    if (document.getElementById) { // DOM-compliant browsers (MSIE5, NSN6, O5)
	        return document.getElementById(id);
	    } else if (document.all) { // MSIE4
	        return document.all[id];
	    } else if (document.layers) { // NSN4
	        return document.layers[id];
	    } else { // Trap DHTML-impaired browsers 
	        //alert("Your browser does not support DHTML!");
	        return false;
	    }
	}

	/**
	 * This function displays a menu given its 1-based index.
	 * For example, showMenu(6) will display the menu that is
	 * defined by <DIV ID="menu6"> in the document.
	 */
	function showMenu(index) {
	    // Make sure this menu is not marked to be closed. This
	    // cancels any previous request to close this menu.
	    if (menuTimers[index-1]) clearTimeout(menuTimers[index-1]);

	    // Immediately close any other menus so as to avoid
	    // having more than one menu open at once (which is
	    // quite ugly).
	    for (i=1;i<=menuLengths.length;i++)
	        if (i!=index) closeMenu(i);

	    // Get a reference to the style of the menu to be displayed.
	    var menu = getStyleObj("menu"+index);

	    // Make sure we got a valid reference, and make the menu visible.
	    if (menu) menu.visibility = "visible";

	    // Display the 'active' version of the menu button.
	    if (document.images) document.images["menubutton"+index].src =
	                            menuOverButtons[index-1].src;
	}

	/**
	 * This function sets a menu to be closed after a brief
	 * delay given its index. For example, hideMenu(3) will
	 * cause the menu that is defined by <DIV ID="menu3"> to
	 * be hidden after a brief delay.
	 */
	function hideMenu(index) {
	    // Cancel any previous closing timer for this menu
	    if (menuTimers[index-1]) clearTimeout(menuTimers[index-1]);

	    // Close the menu after a delay of 500ms (1/2 second).
	    menuTimers[index-1] = setTimeout("closeMenu('"+index+"');",500);
	}

	/**
	 * This function closes a popup menu immediately if it
	 * has been marked to be closed in the menuClosingFlags array.
	 */
	function closeMenu(index) {
	    // Get a reference to the style of the menu to be closed.
	    var menu = getStyleObj("menu"+index);

	    // Make sure we got a valid reference, and hide the menu.
	    if (menu) menu.visibility = "hidden";

	    // Display the 'inactive' version of the menu button.
	    if (document.images) document.images["menubutton"+index].src =
	                            menuOutButtons[index-1].src;
	}

	/**
	 * This function is called every time the user's mouse
	 * is over a menu item, hilighting that menu item and
	 * holding the menu that contains it open.
	 */
	function overMenuItem() {
	    // Each menu item has a 'hilightitem' variable that
	    // contains a reference to the <DIV> that contains
	    // the hilighted version of the menu item. We use that
	    // reference here to make that hilighted menu item
	    // visibile.
	    this.hilightitem.visibility='visible';

	    // Each menu item has a 'menuid' variable that contains
	    // the integer ID of the menu that it belongs to
	    // (e.g. 2 if it belongs to "menu2"). By calling the
	    // showMenu() function for that menu, we ensure that that
	    // menu stays open.
	    showMenu(this.menuid);
	}

	/**
	 * This function is called every time the user's mouse
	 * leaves a menu item, un-hilighting that menu item and
	 * closing the menu that contains it after a delay.
	 */
	function outMenuItem() {
	    // Each menu item has a 'hilightitem' variable that
	    // contains a reference to the <DIV> that contains
	    // the hilighted version of the menu item. We use that
	    // reference here to hide that hilighted menu item.
	    this.hilightitem.visibility='hidden';

	    // Each menu item has a 'menuid' variable that contains
	    // the integer ID of the menu that it belongs to
	    // (e.g. 8 if it belongs to "menu8"). By calling the
	    // hideMenu() function for that menu, we indicate that
	    // the menu closes after a delay if the mouse doesn't
	    // move to another menu item that will keep it open.
	    hideMenu(this.menuid);
	}

	/**
	 * This function is called when the user clicks on a
	 * menu item. The URL associated with that menu item is
	 * then loaded.
	 */
	function clickMenuItem() {
	    if (this.url) { // There is a URL associated with this item
	        window.location = this.url;
	    }
	}

	/**
	 * This function finishes setting up the menus once the rest
	 * of the page has loaded. It performs the following adjustments:
	 *
	 *    -> Sets the dimensions and positions of the menus and each of the
	 *       menu items. Some of these attributes have been set already
	 *       using CSS, but some browsers (especially NSN4) have a habit
	 *       of ignoring them.
	 *    -> Sets up the event handlers for the menu items, which detect and
	 *       react to the user's mouse passing over menu items by hilighting
	 *       them and closing the menu when the user's mouse leaves it, and
	 *       load the correct URL when a menu item is clicked on. This method
	 *       allows NSN4 to have onMouseOver/onMouseOut/onClick event handlers
	 *       on page elements that are not links.
	 *
	 * This function is called by the onLoad event handler for this window
	 * as soon as the document has finished loading.
	 */
	function setupMenus() {
	    if (document.layers) { // This section is for Netscape 4 only
	        for (menuid=1;menuid<=menuLengths.length;menuid++) { // For each menu
	            // Get the menu object
	            var menu = getObj("menu"+menuid);

	            // Set its 'clip' width and height. This forces NSN4 to fill in
	            // the background color behind the whole menu area.
	            menu.clip.width = menuItemWidth + 2;
			  menu.clip.height = (menuItemHeight+1) * menuLengths[menuid-1] + 1;

	            // Set the background color of the menu to force NSN4 to fill it
	            // using the new 'clip' dimensions we just specified.
	            menu.document.bgColor="#000000";
			  
			  var topOffset = 0;

	            for (i=1;i<=menuLengths[menuid-1];i++) { // For each menu item

	                // Each menu item is actually composed of two <DIV> tags:
	                // one for the menu item's regular appearance, and one for
	                // what the menu item should look like when the user's mouse
	                // passes over it. We start by obtaining references to each
	                // of these page elements. Since they are nested inside the
	                // menu DIV, we can't use the getObj function, so we use
	                // eval() to grab them directly:
	                var item = eval("menu.document.menu"+menuid+"item"+i);
	                var onitem = eval("menu.document.menu"+menuid+"item"+i+"on");

	                // Dynamically set the vertical position of each menu item,
	                // leaving a 1-pixel gap between each (NSN4 ignores any
	                // attempt to do this using CSS).
	                //item.top = (menuItemHeight + 1) * (i-1) + 1;
	                //onitem.top = (menuItemHeight + 1) * (i-1) + 1;
				 item.top = topOffset + 1;
				 onitem.top = topOffset + 1;
				 topOffset += menuItemHeight + 1;


	                // When the user's mouse is over a menu item, we want to display
	                // the highlighted version of the menu item (which is hidden by
	                // default). The functions overMenuItem() and outMenuItem() are
	                // responsible for showing and hiding the highlighted versions of
	                // the menu items. Since these 'mouseover' and 'mouseout' events
	                // can come from both the normal and hilighted menu item
	                // under different conditions, we need a way for these functions
	                // to access the hilighted menu item no matter which of the two
	                // versions of the menu item ('item' and 'onitem') triggers them.
	                // What we do is attach a variable called 'hilightitem' to both
	                // of them containing a reference to the highlighted menu item
	                // ('onitem'). The functions can then use this reference to show
	                // and hide the hilighted item as appropriate.
	                item.hilightitem = onitem;
	                onitem.hilightitem = onitem;

	                // The onverMenuItem() and outMenuItem() functions also need to
	                // know what menu the menu item that triggered them belongs to,
	                // so that they can close or keep open that menu as appropriate.
	                // So we store the menu ID in a variable called 'menid'
	                // attached to each menu item (and its highlighted version).
	                item.menuid = menuid;
	                onitem.menuid = menuid;

	                // We also record the URL associated with each menu item, which
	                // will be used by the clickMenuItem() function to load the URL
	                // when the menu item is clicked on. The URL is fetched from the
	                // menuURLs array created above.
	                var url = menuURLs[menuid-1][i-1];
	                item.url = url;
	                onitem.url = url;

	                // Finally, we set the onMouseOver/onMouseOut/onClick event
	                // handlers for each menu item (and its highlighted version) so
	                // that they call the overMenuItem(), outMenuItem(), and 
	                // clickMenuItem() functions. We also set the types of events
	                // that the menu items should react to. This is the only way to
	                // get NSN4 to attach onMouseOver/onMouseOut/onClick event
	                // handlers to anything but links.
	                var eTypes = Event.MOUSEOVER | Event.MOUSEOUT | Event.CLICK;
	                item.captureEvents(eTypes);
	                onitem.captureEvents(eTypes);
	                item.onmouseover = overMenuItem;
	                onitem.onmouseover = overMenuItem;
	                item.onmouseout = outMenuItem;
	                onitem.onmouseout = outMenuItem;
	                item.onclick = clickMenuItem;
	                onitem.onclick = clickMenuItem;
	            }
	        }
	    } else { // This section is for all other browsers
	        for (menuid=1;menuid<=menuLengths.length;menuid++) { // For each menu

	            // The menus' sizes and background colors are already set using CSS,
	            // since Opera doesn't like dynamically setting page element sizes
	            // with JavaScript.
				 var topOffset = 0;
	                for (i=1;i<=menuLengths[menuid-1];i++) { // For each menu item

	                // Each menu item is actually composed of two <DIV> tags:
	                // one for the menu item's regular appearance, and one for
	                // what the menu item should look like when the user's mouse
	                // passes over it. We start by obtaining references to each
	                // of these page elements and their styles.
	                var item = getObj("menu"+menuid+"item"+i);
	                var onitem = getObj("menu"+menuid+"item"+i+"on");
	                var itemstyle = getStyleObj("menu"+menuid+"item"+i);
	                var onitemstyle = getStyleObj("menu"+menuid+"item"+i+"on");

	                // Dynamically set the vertical position of each menu item,
	                // leaving a 1-pixel gap between each. All other style attributes
	                // are set using CSS for compatibility with Opera.
	                //itemstyle.top = (menuItemHeight + 1) * (i-1) + 1;
	                //onitemstyle.top = (menuItemHeight + 1) * (i-1) + 1;
	                
   					itemstyle.top = topOffset + 1;
					onitemstyle.top = topOffset + 1;
				  	topOffset += menuItemHeight + 1
				  	
				  	// Set the mouse cursor for the menu items to look like a
	                // hand. This is for MSIE only. DOM-compliant browsers like
	                // NSN6 will use the cursor:pointer setting in the CSS.
	                if (navigator.appName=="Microsoft Internet Explorer") {
	                    itemstyle.cursor = "hand";
	                    onitemstyle.cursor = "hand";
	                }

	                // When the user's mouse is over a menu item, we want to display
	                // the highlighted version of the menu item (which is hidden by
	                // default). The functions overMenuItem() and outMenuItem() are
	                // responsible for showing and hiding the highlighted versions of
	                // the menu items. Since these 'mouseover' and 'mouseout' events
	                // can come from both the normal and hilighted menu item
	                // under different conditions, we need a way for these functions
	                // to access the hilighted menu item no matter which of the two
	                // versions of the menu item ('item' and 'onitem') triggers them.
	                // What we do is attach a variable called 'hilightitem' to both
	                // of them containing a reference to the highlighted menu item
	                // ('onitem'). The functions can then use this reference to show
	                // and hide the hilighted item as appropriate.
	                item.hilightitem = onitemstyle;
	                onitem.hilightitem = onitemstyle;

	                // The onverMenuItem() and outMenuItem() functions also need to
	                // know what menu the menu item that triggered them belongs to,
	                // so that they can close or keep open that menu as appropriate.
	                // So we store the menu ID in a variable called 'menid'
	                // attached to each menu item (and its highlighted version).
	                item.menuid = menuid;
	                onitem.menuid = menuid;

	                // We also record the URL associated with each menu item, which
	                // will be used by the clickMenuItem() function to load the URL
	                // when the menu item is clicked on. The URL is fetched from the
	                // menuURLs array created above.
	                var url = menuURLs[menuid-1][i-1];
	                item.url = url;
	                onitem.url = url;

	                // Finally, we set the onMouseOver/onMouseOut event handlers for
	                // each menu item (and its highlighted version) so that they
	                // call the overMenuItem() and outMenuItem() functions. We could
	                // have just set these as attributes in the <DIV> tags, but since
	                // NSN4 doesn't support that we'll keep things tidy and do it the
	                // same way as we did above for that browser.
	                item.onmouseover = overMenuItem;
	                onitem.onmouseover = overMenuItem;
	                item.onmouseout = outMenuItem;
	                onitem.onmouseout = outMenuItem;
	                item.onclick = clickMenuItem;
	                onitem.onclick = clickMenuItem;
	            }
	        }
	    }
	}

	/**
	 * Compensate for the NSN4 resize bug by reloading the page
	 * whenever the window is resized.
	 */
	function handleResize() {
	  location.reload();
	  return false;
	}
	if (document.layers) {
	  window.onresize = handleResize;
	}

	var homeOff = new Image();
	homeOff.src = "images/navigation/nav_home_0.gif";
	var homeOn = new Image();
	homeOn.src = "images/navigation/nav_home_1.gif";

	function liteHome()
	{
		if (document.images)
		{
			document.navHome.src = homeOn.src;
		}
	}

	function deliteHome()
	{
		if (document.images)
		{
			document.navHome.src = homeOff.src;
		}
	}

	function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i>d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}