// Expanding Menu version 2.3 by Jon.
// Thrilling 2-level dynamic menu.
// This version hides menu content until setInitialCondition is called.
// You put content in the HTML:
// Menu items in <div>s wrapped in a <div id="myMenu">
// Content goes in <div>s with ids.
// This obviates annoying escaped characters in dynamically written content.
// Make sure you set display = none in style sheet.
// Include this script in the body in onload OR
// immediately after the <divs> in the HTML body.
//
//This version toggles superlink display of sublinks, with specialized styles.
//It also attempts to pass individualized responses to menu items.
function MenuItem(argsObj) { // {htmlElement:document.getElementById("myListElement"), responseFunction:myFunction}
	this.htmlElement = argsObj.htmlElement;
	this.responseFunction = (argsObj.responseFunction)? argsObj.responseFunction : "none"
	this.htmlElement.style.display = "block";
	this.htmlElement.onclick = this.respond;
	this.htmlElement.menuItem = this;
	this.linkType = "bachelor" ; // Default--to be modified later based on associateChildren calls.
	this.htmlElement.onmouseover = actOnMouseover;
	this.htmlElement.onmouseout = actOnMouseout;
}
function actOnMouseover(e) {
    return eval( this.menuItem.funMouseover ) ;
}
function actOnMouseout(e) {
    return eval( this.menuItem.funMouseout ) ;
}
MenuItem.prototype.setClasses = function(classObj) {
    this.funMouseover = classObj.argMouseover;
    this.funMouseout = classObj.argMouseout;
	this.classBachelorUnselected = classObj.argBachelorUnselected ;
	this.classBachelorSelected = classObj.argBachelorSelected ;
	if (this.htmlElement.menu.isTwoLevelMenu) { // This argument can be omitted for 1-level menus.
        this.classParentCollapsedUnselected = classObj.argParentCollapsedUnselected ;
        this.classParentCollapsedSelected = classObj.argParentCollapsedSelected ;
        this.classParentExpandedUnselected = classObj.argParentExpandedUnselected ;
        this.classParentExpandedSelected = classObj.argParentExpandedSelected ;
        this.classChildUnselected = classObj.argChildUnselected ;
        this.classChildSelected = classObj.argChildSelected ;
    }
	/* UPGRADE: DO FOLLOWING LATER...MAYBE.
	//You only have to set the selections you want; otherwise they default to the last defined one.
	if (classObj.selected0) {
		this.classSelected0 = classObj.selected0;
		this.classSelected1 = classObj.selected0;
		if (classObj.selected1) {
			this.classSelected1 = classObj.selected1;
		}
	}
	*/
}
MenuItem.prototype.associateContent = function(contentObj){
	this.content = contentObj;
	this.htmlElement.content = this.content;
	this.content.htmlElement = this.htmlElement;
}
MenuItem.prototype.associateChildren = function(childrenArr) { //[petMenu.itemManager.itemDante , petMenu.itemManager.itemCritter]
    this.linkType = "parent" ;
	// .children is an array of  JS menuItem objects.
	// You cannot simply assign one array to be equal to another--you must write it out in a loop.
	// I'm trying to write this so you can call associateChildren more than once for the same parent.
	if (!this.children) this.children = new Array() ;
	for (var childNum=0; childNum<childrenArr.length; childNum++) {
		this.children.push( childrenArr[childNum] ) ;
		this.children[this.children.length-1].dad = this ;
		this.children[this.children.length-1].linkType = "child" ;
	}
}
MenuItem.prototype.areChildrenOpen = function() {
    return (this.children[0].htmlElement.style.display != "none")? true : false ;
}
MenuItem.prototype.respond = function() {
	//"this" is the menuItem's html element, because you clicked on it.
	// DESELECT ALL STYLES
	this.menu.deselectAllItems(); // This does not hide children, just deselects them.
	//*********************** SET DISPLAY OF CONTENT *********************** 
	if (this.menu.useDefaultContentManagement) {
        //Display only the content of this item.
        this.menuItem.menu.hideAllContent();
        this.menuItem.content.style.display = "block";
	}
	//*********************** SET DISPLAY AND STYLE OF THIS ITEM'S CHILDREN *********************** 
	//If the item is a superlink, reset the style and/or display of all children.
	// __________ YOU CLICKED ON A PARENT _________
	if ( this.menuItem.linkType == "parent" ) {
		if ( !this.menuItem.areChildrenOpen() ) {		//If the superlink's children are not already open.
            // Display the children and give them unselected style.
			for (var itemNum=0; itemNum < this.menuItem.children.length; itemNum++) {
				this.menuItem.children[itemNum].htmlElement.style.display = "block";
				this.menuItem.children[itemNum].htmlElement.className = this.menuItem.children[itemNum].classChildUnselected;
			}
			// Set the style of this parent link to expanded and selected.
			this.menuItem.htmlElement.className = this.menuItem.classParentExpandedSelected ;
		}
		else { // If the children are already displayed.
            // Hide the children.
			for (var itemNum=0; itemNum < this.menuItem.children.length; itemNum++) {
				this.menuItem.children[itemNum].htmlElement.style.display = "none";
			}
			//Set the style of this parent link to collapsed and selected.
			this.menuItem.htmlElement.className = this.menuItem.classParentCollapsedSelected ;
		}
	}
    // __________ YOU CLICKED ON A CHILD _________
	else if (this.menuItem.linkType == "child") {
		//If it's a sublink, reset the style of the sibling sublinks and the superlink.
        // Set the superlink to medium selectedness. UPGRADE: I THINK FOLLOWING DESELECTS ARE REDUNDANT.
        this.menuItem.dad.htmlElement.className = this.menuItem.dad.classParentExpandedUnselected;
        //Set the siblings to medium selectedness.
        for (var itemNum=0; itemNum < this.menuItem.dad.children.length; itemNum++) {
            this.menuItem.dad.children[itemNum].htmlElement.className = this.menuItem.dad.children[itemNum].classChildUnselected;
        }
        // Set this child to selected.
        this.menuItem.htmlElement.className = this.menuItem.classChildSelected;        
    }
    // __________ YOU CLICKED ON A BACHELOR _________    
    else {
		//If the item is a childless parent.
        this.menuItem.htmlElement.className = this.menuItem.classBachelorSelected ;	
	}
	//*********************** HANDLE OTHER FUNCTIONS *********************** 
	if (this.menuItem.responseFun) eval(this.menuItem.responseFun);
	return false;
}
MenuItem.prototype.changeToRolloverStyle = function() {
    this.htmlElement.className = this.classRollover ;
}
MenuItem.prototype.associateResponse = function(responseObj) {
	this.responseFun = responseObj.responseFun;
}
function ExpandingMenu(argsObj) { // Use different names for div id and js obj. Sample: {menuId: "navMenuBlock"}
    // Hide menu until you call setInitialCondition later.
    // You probably want to hide it in the css too.
    // This prevents ugly page load.
    this.htmlElement = document.getElementById(argsObj.menuId) ;
    // this.htmlElement.style.display="none";
    // Grab item anchors dynamically.
	this.itemArr = document.getElementById(argsObj.menuId).getElementsByTagName("div"); // Was "a".
	this.itemManager = new Array();
	for (var itemNum=0; itemNum < this.itemArr.length; itemNum++) {
		this.itemManager[itemNum] = new MenuItem({ htmlElement:this.itemArr[itemNum] });
		this.itemManager[this.itemArr[itemNum].id] = this.itemManager[itemNum];
		this.itemManager[itemNum].htmlElement.menu = this;
	}
	// Is this a two-level menu?
	this.isTwoLevelMenu = argsObj.isTwoLevelMenu ;
	// Does user want default content divs, or customized content management?
	this.useDefaultContentManagement = argsObj.useDefaultContentManagement; // Boolean.
}
ExpandingMenu.prototype.hideAllContent = function() {
	for (var itemNum=0; itemNum < this.itemManager.length; itemNum++) {
		this.itemManager[itemNum].content.style.display = "none";
	}
}
ExpandingMenu.prototype.setInitialCondition = function(itemObj) { 
	// UPGRADE: Keith wants me to change this to hideChild and call repeatedly.
	// "this" means the menu.
	// Hide all child items.
	for (var itemNum=0; itemNum < this.itemManager.length; itemNum++) {
		if ( this.itemManager[itemNum].linkType == "parent" ) {
			for (var childNum=0; childNum < this.itemManager[itemNum].children.length; childNum++) {
				this.itemManager[itemNum].children[childNum].htmlElement.style.display = "none";
			}
		}
    }
    //Deselect all items.
    this.deselectAllItems() ;
    // Set a selected item if user requests one.
    if (itemObj) {
        if ( itemObj.linkType == "bachelor" ) {
            itemObj.htmlElement.className = itemObj.classBachelorSelected ;
        }
        else if ( itemObj.linkType == "parent" ) {
            itemObj.htmlElement.className = itemObj.classParentCollapsedSelected ;
        }
        else { // Must be a child.
            // Set this item's style.
            itemObj.htmlElement.className = itemObj.classChildSelected ;
            // Show the child's siblings, but leave their style unselected.
			for (var childNum=0; childNum < itemObj.dad.children.length; childNum++) {
				itemObj.dad.children[childNum].htmlElement.style.display = "block";
			}
			// Change the parent's style.
            itemObj.dad.htmlElement.className = itemObj.dad.classParentExpandedSelected ;			
        }
    }
    // Turn on display of the menu (initially hidden by ExpandingMenu constructor).
    this.htmlElement.style.display="block";    
	return false;
}
ExpandingMenu.prototype.deselectAllItems = function() {
    // Deselects styles of all menu items, without affecting whether children are hidden or shown. 
	for (var itemNum=0; itemNum < this.itemManager.length; itemNum++) {
        if ( this.itemManager[itemNum].linkType == "bachelor" ) {
            this.itemManager[itemNum].htmlElement.className = this.itemManager[itemNum].classBachelorUnselected;
        }
        if ( this.itemManager[itemNum].linkType == "parent" ) {
            if ( this.itemManager[itemNum].areChildrenOpen() ) {
                this.itemManager[itemNum].htmlElement.className = this.itemManager[itemNum].classParentExpandedUnselected ;
            }
            else { // No children open for this parent.
                this.itemManager[itemNum].htmlElement.className = this.itemManager[itemNum].classParentCollapsedUnselected ;
            }
        }
        if ( this.itemManager[itemNum].linkType == "child" ) {
            this.itemManager[itemNum].htmlElement.className = this.itemManager[itemNum].classChildUnselected;
        }
	}
}
//********************************* DIRECTIONS FOR USE **************************//
// Following are some of the steps you may take to implement this.
// See demo for more details.
//
// Instantiate a menu
// You can automate these assignments for each particular application.
// Create an artist array to enable a formulaic approach to that material.
// Associate all the content using a formulaic approach.
// Set all items to style of children first, then add select style to the dads.
// Associate superlinks with sublinks.
// Create special response functions, associate them with different menu items, and initialize their states.
// Initialize the menu and choose an initial item to select.
// Hide all content and choose an initial content to display.