// 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 = 218;

//  -> 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 = 18;

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[0].src = "/html/images/quick_links.gif";

    //  -> The menuOverButtons array contains the images for the menu buttons' active appearance.
    var menuOverButtons = new Array();
    menuOverButtons[0] = new Image();
    menuOverButtons[0].src = "/html/images/quick_links.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(20,3,3,4);

   var menuLengths = new Array();       
   menuLengths[0] = 21;

// 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] = "understanding/index.asp";       // URL for "menu1item1"
menuURLs[0][1] = "understanding/who.asp";        	// URL for "menu1item2"
menuURLs[0][2] = "understanding/where.asp";       // URL for "menu1item3"
menuURLs[0][3] = "understanding/primary.asp";     // URL for "menu1item4"
menuURLs[0][4] = "understanding/bacterial.asp";   // URL for "menu1item5"
menuURLs[0][6] = "symptoms/index.asp";   					// URL for "menu1item7"
menuURLs[0][7] = "symptoms/do_you.asp";   				// URL for "menu1item8"
menuURLs[0][8] = "symptoms/complications.asp";   	// URL for "menu1item9"
menuURLs[0][10] = "treatments/index.asp";   			// URL for "menu1item11"
menuURLs[0][11] = "treatments/antibiotics.asp";   // URL for "menu1item12"
menuURLs[0][12] = "treatments/home.asp";   				// URL for "menu1item13"
menuURLs[0][13] = "treatments/preventing.asp";   	// URL for "menu1item14"
menuURLs[0][14] = "treatments/about_ciproxr.asp";  				// URL for "menu1item15"
menuURLs[0][16] = "doctor/index.asp";   					// URL for "menu1item16"
menuURLs[0][17] = "doctor/preparing.asp";   			// URL for "menu1item17"
menuURLs[0][18] = "doctor/how.asp";   						// URL for "menu1item18"
menuURLs[0][20] = "javascript:leaveSite('http://www.ciproxr.com');";  // URL for "menu1item20"
// 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 50ms (1/2 second).
    menuTimers[index-1] = setTimeout("closeMenu('"+index+"');",50);
}

/**  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.
 */
window.onload=setupMenus; // Assign to onLoad event handler
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="#8DA400";

            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;

                // Dynamically set the 'clip' dimensions and background colors of each of the menu items. Again, we're forcing NSN4 to fill the full width and height of each menu item.
                item.clip.width = menuItemWidth;
                item.clip.height = menuItemHeight;
                item.document.bgColor="#ffffff";
                onitem.clip.width = menuItemWidth;
                onitem.clip.height = menuItemHeight;
                onitem.document.bgColor="#ffffff";

                // 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.
                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) + "px";
                onitemstyle.top = ((menuItemHeight + 1) * (i-1) + 1) + "px";
                
                // 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;
            }
        }
    }
}