//Expanding Menu version 1.8
//Thrilling 2-level dynamic menu.
//Make sure you set display = none in style sheet.
//You put content in the HTML:
//Menu items in <a>s wrapped in a <div id="myMenu">
//Content goes in <div>s with ids.
//This obviates annoying escaped characters in dynamically written content.
//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("myATag"), 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;
}
MenuItem.prototype.setClasses = function(classObj) {//{unselected:"itemStyle", selected0:"itemPartlySelectedStyle", selected1:"itemFullySelectedStyle"}
	this.classUnselected = classObj.unselected;
	this.classSelected0 = classObj.selected0;
	this.classSelected1 = classObj.selected1;
	//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 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.
	this.children = new Array()
	for (var counter=0; counter<childrenArr.length; counter++) {
		this.children[this.children.length] = childrenArr[counter]
		this.children[counter].dad = this
	}
}
MenuItem.prototype.respond = function() {
	//"this" is the menuItem's html element, because you clicked on it.
	//*********************** DESELECT STYLES OF ALL ITEMS ********************* 
	//Set the selected style only for this item.
	for (var counter=0; counter < this.menu.itemManager.length; counter++) {
		this.menu.itemManager[counter].htmlElement.className = this.menu.itemManager[counter].classUnselected;
	}
	//*********************** SET DISPLAY OF CONTENT *********************** 
	//Display only the content of this item.
	this.menu.hideAllContent();
	this.content.style.display = "block";
	//*********************** SET DISPLAY AND STYLE OF CHILDREN *********************** 
	//If the item is a superlink, reset the style and/or display of all children.
	if (this.menuItem.children) {
		//Check to see if one of the superlink's children is already open.
		var childrenOpen = (this.menuItem.children[0].htmlElement.style.display == "block")? true : false;
		//If the superlink's children are not already open, display them and set them to medium selectedness.
		if (!childrenOpen) {
			for (var counter=0; counter < this.menuItem.children.length; counter++) {
				this.menuItem.children[counter].htmlElement.style.display = "block";
				this.menuItem.children[counter].htmlElement.className = this.menuItem.children[counter].classSelected0;
			}
		}
		//Else toggle the display of children.
		else {
			for (var counter=0; counter < this.menuItem.children.length; counter++) {
				this.menuItem.children[counter].htmlElement.style.display = "none";
			}		
		}
	}
	//If the item has no children...
	else {
		//If it's a sublink, reset the style of the sibling sublinks and the superlink.
		if (this.menuItem.dad) {
			//Set the superlink to medium selectedness.
			this.menuItem.dad.htmlElement.className = this.menuItem.dad.classSelected0;
			//Set the siblings to medium selectedness.
			for (var counter=0; counter < this.menuItem.dad.children.length; counter++) {
				this.menuItem.dad.children[counter].htmlElement.className = this.menuItem.dad.children[counter].classSelected0;
			}
		}
		//If the item is a childless parent, ignore.
	}
	//*********************** SELECT STYLE OF THIS ITEM ********************* 
	//Give it maximum selectedness.
	this.className = this.menuItem.classSelected1;
	//*********************** HANDLE OTHER FUNCTIONS *********************** 
	if (this.menuItem.responseFun) eval(this.menuItem.responseFun);
	return false;
}
MenuItem.prototype.associateResponse = function(responseObj) {
	this.responseFun = responseObj.responseFun;
}
function ExpandingMenu(argsObj) { // Use different names for div id and js obj. Sample: {menuId: "navMenuBlock"}
	//Grab item divs dynamically.
	this.itemArr = document.getElementById(argsObj.menuId).getElementsByTagName("a");
	this.itemManager = new Array();
	for (var counter=0; counter < this.itemArr.length; counter++) {
		this.itemManager[counter] = new MenuItem({htmlElement:this.itemArr[counter]});
		this.itemManager[this.itemArr[counter].id] = this.itemManager[counter];
		this.itemManager[counter].htmlElement.menu = this;
	}
}
ExpandingMenu.prototype.hideAllContent = function() {
	for (var counter=0; counter < this.itemManager.length; counter++) {
		this.itemManager[counter].content.style.display = "none";
	}
}
ExpandingMenu.prototype.hideAllChildren = function() { 
	//Hides and deselects all child items.
	//UPGRADE: Keith wants to change this to hideChild and call repeatedly.
	//"this" means the menu.
	for (var counter=0; counter < this.itemManager.length; counter++) {
		//Collapse child items.
		if (this.itemManager[counter].children) {
			for (var subcounter=0; subcounter < this.itemManager[counter].children.length; subcounter++) {
				this.itemManager[counter].children[subcounter].htmlElement.style.display = "none";
			}
		}
		//Deselect all child items.
		this.itemManager[counter].htmlElement.className = this.itemManager[counter].classUnselected;
	}
	return false;
}
//********************************* 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.