/*ALL MENU DIVS FOLLOW THE BELOW ID NAMING SCHEME:

Parent div: Menu_0: child div: Menu_0_0, Menu_0_1 etc.
Table in div: Menu_0 contains a table called Menut0, containing TDs with specified heights, containing menu entries with id tags corresponding to the child div that must be shown: Menua0a0, Menua0a1 etc.
Menu entries with no child div to activate: Menua0aEnd.

Flyout parent menu divs are statically positioned, either in static html code, or script generated code. This allows for drop down, side, and bottom menus.
The width of each div is also pre-determined or script generated.
The height of individual TD's containing the menu entries are totalled up statically or by script and put as a style attribute in the div that contains them. This total height is the same as the total height of the menu entries contained in said TD's plus the borders controlled by the stylesheet.

The container divs can have style sheet allocated borders, etc. which are stored as global variables: shadowBot, shadowRight etc. Netscape adds border widths to the width of the div, whereas IE & Opera contain the widths inside the div width, so have to handle them separately 

This menu system is Netscape 6 upwards compliant, Mozilla 1.0 upwards compliant, Opera 6 upwards compliant, and IE 5.5 upwards compliant
Netscape 4.x is outdated.


global variables*/
var arb=100;
var oldTree='blah';
var oldId='blah';
var delayed;
var delay=200;
var gap=0; /*vertical gap between parent & child div*/
var shadowBot=0;
var shadowRight=1;
var borderLeft=1;
var Netscape=false;
var Opera=false;
arrowArray=new Array();
divArray=new Array();/*array of all the divs to be positioned by posMenu*/
showdivArray=new Array();/*keeps history of divs that have been shown in showMenu*/

function returnInt(name){/*returns the integer equivalent of a passed string of pixel height: eg '20px'*/
	name=name.split('p');
	name=parseInt(name);
	return name;
}

function init(images){/*preloads the arrow image to swap*/
	myImage = new Image();
	myImage.src=images;
	if(navigator.appName == "Netscape"){
		Netscape=true;
	}
	if(navigator.userAgent.indexOf('Opera') != -1){
		Opera=true;
	}
}

function flipArrows(){/*Determines if a div will extend below the bottom of the browser window, and re-positions it accordingly*/
	var myDocument=document;
	for (i=0;  i<arrowArray.length; i++){
		Arrow=arrowArray[i];
		myDocument.getElementById(Arrow).childNodes[0].setAttribute("src","/images/arrow_right.gif");
	}
	arrowArray.length=0;/*Otherwise it gets huge over time*/
}

function rePosition(){/*Creates an array of all the Menu divs, to be repositioned by posMenu, when the browser detects onLoad & onResize events*/
	var myDocument=document;
	if(Netscape||Opera){
		j=0;
		i=1;
		do{
			divArray[j]=myDocument.getElementById('Menu').childNodes[i];
			j++;
			i+=2
		}
		while(divArray[j-1]!=myDocument.getElementById('Menu').lastChild.previousSibling);												
	}
	else{
		i=0;
		do{
			divArray[i]=myDocument.getElementById('Menu').childNodes[i];
			i++;
		}		
		while(myDocument.getElementById('Menu').childNodes[i-1]!=myDocument.getElementById('Menu').lastChild);
	}
	flipArrows();/*Restore flipped arrows back to normal*/
	for(i=0; i<divArray.length; i++){
		posMenu(divArray[i]);
	}
}

function bottomEdgeDecide(layer){/*checks if a div is extending beyond the bottom of the browser and repositions if necessary*/
	var myDocument=document;
	testheight = myDocument.body.clientHeight;
	height=returnInt(layer.style.height);
	mytop=returnInt(layer.style.top);
	if(height+mytop+shadowBot>testheight){
		shifter=(mytop+height+shadowBot)-testheight;
		layer.style.top = mytop-(shifter+10);
	}
}
	
function edgeDecide(layer,parentxpos,parentypos,target_anchor){/*checks if a div is extending beyond the side of the browser window, and flips it to the other side of that div's parent*/
	var myDocument=document;
	testwidth = myDocument.body.clientWidth;
	rePosWidth=returnInt(layer.style.width);
	left=returnInt(layer.style.left);
	if(rePosWidth+left+shadowRight>testwidth){
		if(Netscape){
			layer.style.left=parentxpos-(rePosWidth+gap+shadowRight+borderLeft);
		}
		else{
			layer.style.left=parentxpos-(rePosWidth+gap);
		}
		arrowArray.push(target_anchor);/*keeps a history of all the elements whose arrows got flipped*/
		myDocument.getElementById(target_anchor).childNodes[0].setAttribute("src", "arrow_left.gif");		
	}
}

function posMenu(layername){/*takes in object: 'layername', goes throught the anchor tags in that object, positioning any divs that are triggered by said anchor tags*/
	var myDocument=document;
	re = /_/gi;
	str = layername.id;
	tableName = str.replace(re,'t');/*gets name of table residing in 'layernname'*/
	width=layername.style.width;/*gets properties of 'layername' to assign to child div, root divs are statically positioned so this gets passed on to child div, which then gets inherited by successive children*/
	width=returnInt(width);
	xpos=layername.style.left;
	xpos=returnInt(xpos);
	ypos=layername.style.top;
	ypos=returnInt(ypos);
	if(Netscape){/*damn thing puts spurious text nodes into DOM at runtime...*/
		j=0;
		height=0;
		do{
			element=myDocument.getElementById(tableName).childNodes[1].childNodes[j].childNodes[1].childNodes[0];
			re = /End/gi;
			str = element.id;
			if (str.search(re) == -1){
				re = /a/gi;
				str = element.id;
				newstr = str.replace(re,"_");
				divToPos=myDocument.getElementById(newstr);/*child element is now positioned*/
				divToPos.style.top=ypos+height;
				divToPos.style.left=xpos+width+gap+shadowRight+borderLeft;
				edgeDecide(divToPos,xpos,ypos,element.id);
			}
			height+=returnInt(element.parentNode.style.height);
			j+=2;/*have to increase by 2 for Netscape...because of in-between text node...*/
		}
		while(myDocument.getElementById(tableName).childNodes[1].childNodes[j-2].childNodes[1].childNodes[0]!=myDocument.getElementById(tableName).childNodes[1].lastChild.previousSibling.lastChild.previousSibling.childNodes[0]);
		layername.style.height=height;
	}
	else{/*Opera & IE*/
		j=0;
		height=0;
		do{
			element=myDocument.getElementById(tableName).childNodes[0].childNodes[j].childNodes[0].childNodes[0];
			re = /End/gi;
			str = element.id;
			if (str.search(re) == -1){
				re = /a/gi;
				str = element.id;
				newstr = str.replace(re,"_");
				divToPos=myDocument.getElementById(newstr);/*child element is now positioned*/
				divToPos.style.top=ypos+height;
				divToPos.style.left=xpos+width+gap;
				edgeDecide(divToPos,xpos,ypos,element.id);
			}
			height+=returnInt(element.parentNode.style.height);
			j+=1;
		}
		while (element=myDocument.getElementById(tableName).childNodes[0].childNodes[j-1].childNodes[0].childNodes[0]!=myDocument.getElementById(tableName).childNodes[0].lastChild.childNodes[0].childNodes[0]);
		layername.style.height=height;
	}
}

function showMenu(layername,top,left){
	var myDocument=document;
	clearTimeout(delayed); 
	var theDocument, id;
	var id=layername.id;
	var theDocument=document;
	if (id!=oldId){/*no need to change anything if it's the same as before, ie. another link on the same div that also ends in 'End'*/
		restoreStyles();
		layershow=id.split('a');
		mylength=layershow.length;
		prevname='_';
		tempArray=new Array();
		for (i=1; i<mylength; i++){
			name='Menu'+prevname+layershow[i];
			if(layershow[i]!='End'){
				element=myDocument.getElementById(name);
				bottomEdgeDecide(element);
				element.style.visibility="visible";
				if(showdivArray[i-1]){
					if(showdivArray[i-1]!=name){/*compares element in showdivArray to current one, if not the same, make the correspondingly indexed showdivArray element invisible*/	
						element=myDocument.getElementById(showdivArray[i-1]);
						element.style.visibility="hidden";
					}
				}
				tempArray.push(name);
				prevname+=layershow[i]+'_';
			}
			else{
				break;/*Need 'i' to be an accurate representation of what index in showdivArray the comparisons stopped */
			}
		}
		if(showdivArray[i-1]){/*if there are more elements in showdivArray than have just been shown, set these excess elements to 'invisible'*/
			for(j=i-1;j<showdivArray.length;j++){
				element=myDocument.getElementById(showdivArray[j]);
				element.style.visibility="hidden";
			}
		}
		showdivArray=tempArray;
		oldTree=name;
		if(layershow[i-1]=='End'){/*if the link has 'End' in it, give the oldId the current id, for testing whether or not to change anything the next time the user activates showMenu*/
			oldId=id;
		}
		else{
			oldId='blah';/*Sets oldId to something else, in case the user goes off the link onto another one which doesn't have 'End' in its id, and then straight back onto it, in which case the old id will be equal to the new id, and the old tree won't collapse ;)*/
		}
		//apply hover style to active menu tree elements:
		if (mylength>2){
			mylength=mylength-1;
			prevname='a';
			for (i=1; i<mylength; i++){
				name='Menu'+prevname+layershow[i];
				element=myDocument.getElementById(name);
				if(element.className=='nolink'){
					element.className='nolink_active';
					prevname+=layershow[i]+'a';
				}
				else{
					element.className='subnav_active';
					prevname+=layershow[i]+'a';
				}
			}
		}
	}
}

function styleRestore(){/*restore old styles to now de-activeted tree elements:*/
	var myDocument=document;
	if (mylength>2){/*if it's just the 1st level of the tree showing, then the style was never change*/
		mylength=mylength-1;/*exlcludes elements that have 'End' at the end, which never had their style changed in the first place*/
		prevname='a';
		for (i=1; i<mylength; i++){
			name='Menu'+prevname+layershow[i];
			element=myDocument.getElementById(name);
			if(element.className=='nolink_active'){
				element.className='nolink';
				prevname+=layershow[i]+'a';
			}
			else{
				if(element.className!='nolink'){
					element.className='';
					prevname+=layershow[i]+'a';
				}
			}
		}
	}
}

function restoreStyles(){/*for the showMenu function, restores all styles to rheir previous state, before showing the new tree*/
	layershow = oldTree.split('_');
	mylength = layershow.length;
	styleRestore();
}

function HideMenu(){/*hides all elements recorded in oldTree*/
	var myDocument=document;
	layershow = oldTree.split('_');
	mylength = layershow.length;
	prevname='_';
	for (i=1; i<mylength; i++){
		if(layershow[i]!='End'){
			name='Menu'+prevname+layershow[i]
			element=myDocument.getElementById(name);
			element.style.visibility="hidden";
			prevname+=layershow[i]+'_';
		}
	}	
	styleRestore();
}