Multi level menu generation controls

/************************************************************************************************************
             Automatic multi level menu generation script written by Mark Wilton-Jones - 2002
 Version 1.3 updated to comply better with standards and use correct font size in Mozilla 1.4 / Netscape 7.1
 Version 1.3.1 updated 17-7-2004 to remove ugly padding bug in Escape and Netscape 4.x on Linux/Unix and Mac
*************************************************************************************************************
Please see http://www.howtocreate.co.uk/jslibs/ for details and a demo of this script
Please see http://www.howtocreate.co.uk/jslibs/termsOfUse.html for terms of use
_________________________________________________________________________
You can put as many menus on the page as you like, each menu may have a different format
This script also requires my 'DHTML Show/Hide multi level' script
To use:
_________________________________________________________________________
Inbetween the <head> tags, put:
	<script src="PATH TO SCRIPT/showhidelevels.js" type="text/javascript" language="javascript1.2"></script>
	<script src="PATH TO SCRIPT/menuarray.js" type="text/javascript" language="javascript1.2"></script>
	<script type="text/javascript" language="javascript1.2"><!--
//this is optional and therefore does not need to be defined if unwanted
var myalternative = "LOCATION OF ALTERNATIVE PAGE, JUST IN CASE THEIR BROWSER DOESN'T GET IT RIGHT";
//The following is an example of a menu which I have decided to call 'menuTree'
//create the menu object
var menuTree = new autoMenu(
	160,                      //width of menu items (remember not to use up too much screen width!)
	[15,15,"arrowright.gif","arrowrhigh.gif"], //dimensions and location of right arrow (width,height,normal src,highlight src)
	[15,15,"arrowdown.gif","arrowdnhigh.gif"], //dimensions and location of down arrow (width,height,normal src,highlight src)
	                          //(just put [] for down arrows if menu is vertically orientated)
	'#bfbfbf',                //normal background colour of menu
	'#7f7f7f',                //highlight background colour of menu
	'#006600',                //normal link colour of menu
	'#000000',                //highlight link colour of menu
	'#000000',                //border colour of menu
	1,                        //border thickness of menu
	'font-weight: bold;text-decoration: none;', //stylesheet for the links - do not define colours here
	500,                      //length of time (ms) to keep menu open when mouse is not over it
	0,                        //initial left position
	0,                        //initial top position
	false,                    //orientation: true for vertical, false for horizontal
	false                     //scroll: true for scroll with page, false for not
);

//define the menu structure and links.
//if a 'menuBox' has other 'menuBoxes' attached to it's 'sub' collection,
//the children will will be made into their own menu item.
//no link url is required in that case
//for plain text
//new menuBox( "text" )
//for a link to a sub-menu
//new menuBox( "text" )
//you must add child items to its 'sub' collection
//for a normal link (opens in current window)
//new menuBox( "text", "link url" )
//for a normal link with a target
//new menuBox( "text", "link url", "target" )
//create parents before children
//PUT THE EXTERNAL SCRIPT TAGS FIRST!!
menuTree.sub[0] = new menuBox( "Search" );
menuTree.sub[0].sub[0] = new menuBox( "Google", "http://www.google.com/" );
menuTree.sub[0].sub[1] = new menuBox( "Lycos", "http://www.lycos.com/" );
menuTree.sub[0].sub[2] = new menuBox( "Alta Vista", "http://www.altavista.com/", "_blank" );
menuTree.sub[1] = new menuBox( "Insane Links" );
menuTree.sub[1].sub[0] = new menuBox( "Fudge", "fudge.html" );
menuTree.sub[1].sub[1] = new menuBox( "Baby food", "babfood.html" );
menuTree.sub[1].sub[2] = new menuBox( "Cat stew", "cantonese.html" );
menuTree.sub[1].sub[3] = new menuBox( "Maps to stars' homes", "starmaps.html", "mytarget" );
menuTree.sub[1].sub[4] = new menuBox( "An extra level" );
menuTree.sub[1].sub[4].sub[0] = new menuBox( "This one is not a link" );
menuTree.sub[1].sub[4].sub[1] = new menuBox( "A third level" );
menuTree.sub[1].sub[4].sub[1].sub[0] = new menuBox( "This is an extra level (third level)" );
menuTree.sub[1].sub[4].sub[2] = new menuBox( "Another third level" );
menuTree.sub[1].sub[4].sub[2].sub[0] = new menuBox( "This is also an extra level (third level)" );
menuTree.sub[1].sub[5] = new menuBox( "Another extra level" );
menuTree.sub[1].sub[5].sub[0] = new menuBox( "This is an extra level (second level)" );
menuTree.sub[2] = new menuBox( "Camel Poem" );
menuTree.sub[2].sub[0] = new menuBox( "Bomp Bomp Bomp<br>The Camel Lost His Hump<br>He Sat On A Peg<br>After He Broke His Leg<br>And He Lost His Handbag Too<br>The Wuss!" );
menuTree.sub[3] = new menuBox( "Home", "../../../" );
	//--></script>
_________________________________________________________________________
Finally, just before the end <body> tag, put:
	<script type="text/javascript" language="javascript1.2"><!--
menuTree.buildMenu();
	//--></script>
*******************************************************************************************************
                               And here's the actual code
******************************************************************************************************/
var meDisDelay, meDisLev = [0], meDisNum = 0, meDisArray = [];
function autoMenu(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o) {
	//create the menu object. This just holds the variables together so I can find them
	this.oWidth = a; this.rightimg = b; this.downimg = c; this.oNormCol = d; this.oHighCol = e;
	this.oNormColF = f; this.oHighColF = g; this.oBordCol = h; this.oBordWid = i; this.linkStyle = j;
	this.oDelay = k; this.lPos = l; this.tPos = m; this.oOrient = n; this.oScroll = o;
	this.sub = new Array(); this.buildMenu = buildMenu; return this;
}
function menuBox( oTxt, oLnk, oTgt ) {
	//create a menu item
	this.text = oTxt;
	this.link = oLnk;
	this.target = oTgt;
	this.sub = new Array();
	return this;
}
function buildMenu() {
	//prepare to draw a menu. Set up so that the same menu object can be used more than once
	this.oName = meDisNum; meDisNum++;
	var firstName = 'display:block;'+(document.layers?'':'width:100%;font-size:16px;line-height:19px;')+this.linkStyle+((this.linkStyle.charAt(this.linkStyle.length-1)==';')?'':';')+'color:'+this.oNormColF+';';
	var lastName = this.linkStyle+((this.linkStyle.charAt(this.linkStyle.length-1)==';')?'':';')+'color:'+this.oHighColF+';';
	if( document.layers && navigator.mimeTypes['*'] ) {
		//inline styles in layers in NS4 causes the browser to hang, so I will use stylesheets not in the head (non-standard)
		document.write('<style type="text/css">\ntd.removeNS4BugPad { line-height: 0px; }\ntd.removeNS4BugPad ilayer { line-height: 1em; }\n.meDisA'+this.oName+'{'+firstName+'}\n.meDisB'+this.oName+'{'+lastName+'}\n</style>\n');
		firstName = 'class="meDisA'+this.oName+'"'; lastName = 'class="meDisB'+this.oName+'"';
	} else { firstName = 'style="'+firstName+'"'; lastName = 'style="'+lastName+'"'; }
	buildTree(this.sub,0,this.tPos,this.lPos,this,'',firstName,lastName);
}
function buildTree(oOb,oLev,oVOffset,oOffset,oBase,oI,firstName,lastName) {
	//draw a set of menu boxes
	if( oBase.oScroll ) { meDisArray[meDisArray.length] = ['meDi'+oBase.oName+oI,oVOffset,oOffset]; }
	var oLineOut = ( document.layers ? '		<layer onmouseover="window.clearTimeout(meDisDelay);" onmouseout="meDisDelay = window.setTimeout(\'hideAll(1);\','+oBase.oDelay+');" left="'+oOffset+'" top="'+oVOffset+'" width="'+(oBase.oBordWid+((oBase.oBordWid+oBase.oWidth)*((oLev||oBase.oOrient)?1:oOb.length)))+'" visibility="'+(oLev?'hide':'show')+'" id="meDi'+oBase.oName+oI+'">\n' : '		<div onmouseover="window.clearTimeout(meDisDelay);" onmouseout="meDisDelay = window.setTimeout(\'hideAll(1);\','+oBase.oDelay+');" style="width:'+(oBase.oBordWid+((oBase.oBordWid+oBase.oWidth)*((oLev||oBase.oOrient)?1:oOb.length)))+'px;position: absolute;left: '+oOffset+'px;top: '+oVOffset+'px;visibility: '+(oLev?'hidden':'visible')+';" id="meDi'+oBase.oName+oI+'">\n' )+
		'			<table border="0" cellpadding="0" cellspacing="0"><tr><td bgcolor="'+oBase.oBordCol+'">\n'+
		'				<table border="0" cellpadding="0" cellspacing="'+oBase.oBordWid+'">\n'+
		((oLev||oBase.oOrient)?'':'					<tr>\n');
	for( var i = 0; i < oOb.length; i++ ) {
		//if there are child elements, draw them first
		if( oOb[i].sub.length ) { buildTree(oOb[i].sub,oLev+1,(((oLev||oBase.oOrient)?i:1)*(19+oBase.oBordWid))+oVOffset,(((oLev||oBase.oOrient)?1:i)*(oBase.oWidth+oBase.oBordWid))+oOffset,oBase,oI+'_'+i,firstName,lastName); }
		if( oOb[i].sub.length && document.images && !window['meDisImgH'+oBase.oName+((oLev||oBase.oOrient)?'r':'d')] ) {
			//cache images if not already cached
			window['meDisImgH'+oBase.oName+((oLev||oBase.oOrient)?'r':'d')] = new Image();
			window['meDisImgN'+oBase.oName+((oLev||oBase.oOrient)?'r':'d')] = new Image();
			window['meDisImgH'+oBase.oName+((oLev||oBase.oOrient)?'r':'d')].src = oBase[((oLev||oBase.oOrient)?'rightimg':'downimg')][3];
			window['meDisImgN'+oBase.oName+((oLev||oBase.oOrient)?'r':'d')].src = oBase[((oLev||oBase.oOrient)?'rightimg':'downimg')][2];
		}
		//boxes can be: a parent, a link, plain text.
		//I use style for non-layers background so I don't suffer from the gecko engine mousout bug
		oLineOut +=
			((oLev||oBase.oOrient)?'					<tr>\n':'')+
			( oOb[i].sub.length ?
			'						<td '+(document.layers?'class="removeNS4BugPad"':'style="background-color:'+oBase.oNormCol+';"')+' width="'+oBase.oWidth+'" height="19" onmouseover="if(document.layers){return;} this.oNormCol=\''+oBase.oNormCol+'\';this.oHighCol=\''+oBase.oHighCol+'\';this.oNormColF=\''+oBase.oNormColF+'\';this.oHighColF=\''+oBase.oHighColF+'\';this.toChange=getRefToDivNest(\'meDiA'+oBase.oName+oI+'_'+i+'\');if(!document.images){document.images=[];}this.toImg=document.images[\'meDiI'+oBase.oName+oI+'_'+i+'\'];this.imgIden=\''+oBase.oName+((oLev||oBase.oOrient)?'r':'d')+'\';showdivCol(\'meDi'+oBase.oName+oI+'_'+i+'\','+(oLev+1)+');giveCol(this);meDisLev['+(oLev+1)+']=this;">\n'+
			( document.layers ? '							<ilayer><layer width="'+(oBase.oWidth-3)+'" onmouseover="this.oNormCol=\''+oBase.oNormCol+'\';this.oHighCol=\''+oBase.oHighCol+'\';this.toChange=document.layers[0];showdivCol(\'meDi'+oBase.oName+oI+'_'+i+'\','+(oLev+1)+');giveCol(this);meDisLev['+(oLev+1)+']=this;" bgcolor="'+oBase.oNormCol+'" top="0" left="0">\n' : '' )+
			'								<a '+firstName+' href="javascript:showdivCol(\'meDi'+oBase.oName+oI+'_'+i+'\','+(oLev+1)+');" onclick="return tryToFindParent(this,'+i+',\'meDi'+oBase.oName+oI+'\','+(oLev+1)+',\'meDi'+oBase.oName+oI+'_'+i+'\');" id="meDiA'+oBase.oName+oI+'_'+i+'"><img src="'+((oLev||oBase.oOrient)?oBase.rightimg[2]:oBase.downimg[2])+'" height="'+((oLev||oBase.oOrient)?oBase.rightimg[1]:oBase.downimg[1])+'" width="'+((oLev||oBase.oOrient)?oBase.rightimg[0]:oBase.downimg[0])+'" border="0" align="right" alt="" name="meDiI'+oBase.oName+oI+'_'+i+'">'+oOb[i].text+'</a>\n'+
			( document.layers ? '								<layer width="'+(oBase.oWidth-3)+'" top="0" left="0" visibility="hide">\n'+
			'									<a '+lastName+' href="javascript:showdivCol(\'meDi'+oBase.oName+oI+'_'+i+'\','+(oLev+1)+');" onclick="return tryToFindParent(this,'+i+',\'meDi'+oBase.oName+oI+'\','+(oLev+1)+',\'meDi'+oBase.oName+oI+'_'+i+'\');"><img src="'+((oLev||oBase.oOrient)?oBase.rightimg[3]:oBase.downimg[3])+'" height="'+((oLev||oBase.oOrient)?oBase.rightimg[1]:oBase.downimg[1])+'" width="'+((oLev||oBase.oOrient)?oBase.rightimg[0]:oBase.downimg[0])+'" border="0" align="right" alt="">'+oOb[i].text+'</a>\n'+
			'								</layer>\n' : '' )
			: ( oOb[i].link ?
			'						<td '+(document.layers?'':'style="background-color:'+oBase.oNormCol+';" ')+'width="'+oBase.oWidth+'" height="19" onmouseover="if(document.layers){return;} this.oNormCol=\''+oBase.oNormCol+'\';this.oHighCol=\''+oBase.oHighCol+'\';this.oNormColF=\''+oBase.oNormColF+'\';this.oHighColF=\''+oBase.oHighColF+'\';this.toChange=getRefToDivNest(\'meDiA'+oBase.oName+oI+'_'+i+'\');hideAll('+(oLev+1)+');giveCol(this);" onmouseout="if(document.layers){return;} takeCol(this);">\n'+
			( document.layers ? '							<ilayer><layer width="100%" onmouseover="this.oNormCol=\''+oBase.oNormCol+'\';this.oHighCol=\''+oBase.oHighCol+'\';this.toChange=document.layers[0];hideAll('+(oLev+1)+');giveCol(this);" onmouseout="takeCol(this);" bgcolor="'+oBase.oNormCol+'" top="0" left="0">\n' : '' )+
			'								<a '+firstName+' href="'+oOb[i].link+'" id="meDiA'+oBase.oName+oI+'_'+i+'" target="'+(oOb[i].target?oOb[i].target:'_self')+'">'+oOb[i].text+'</a>\n'+
			( document.layers ? '								<layer width="100%" top="0" left="0" visibility="hide">\n'+
			'									<a '+lastName+'" href="'+oOb[i].link+'" target="'+(oOb[i].target?oOb[i].target:'_self')+'">'+oOb[i].text+'</a>\n'+
			'								</layer>\n' : '' )
			:
			'						<td bgcolor="'+oBase.oNormCol+'" width="'+oBase.oWidth+'" height="19" onmouseover="hideAll('+(oLev+1)+');">\n'+
			( document.layers ? '							<ilayer><layer width="100%" onmouseover="hideAll('+(oLev+1)+');" bgcolor="'+oBase.oNormCol+'">\n' : '' )+
			'								'+oOb[i].text+'\n'
			) )+
			( document.layers ? '							</layer>'+((oOb[i].sub.length||oOb[i].link)?'<span class="meDisA'+oBase.oName+'">':'')+oOb[i].text+((oOb[i].sub.length||oOb[i].link)?'</span>':'')+'</ilayer>\n' : '' )+
			'						</td>'+((oLev||oBase.oOrient)?'\n					</tr>':'')+'\n';
	}
	oLineOut += ((oLev||oBase.oOrient)?'':'					</tr>\n')+
		'				</table>\n			</td></tr></table>\n'+
		( document.layers ? '		</layer>\n' : '		</div>\n' );
	document.write( oLineOut );
}
function tryToFindParent(oOb,oInd,oStr,oLev,toShow){
	//if they click a link, try to reference the container to highlight it
	//if they use keys without ever mouseovering, there will be no effect
	//once they mouseover, there will always be an effect
	oOb = document.layers ? document.layers[oStr].document.layers[oInd].document.layers[0] : oOb = oOb.offsetParent;
	if( oOb && oOb.oNormCol ) { showdivCol(toShow,oLev); giveCol(oOb); meDisLev[oLev] = oOb; return false; } return true;
}
function hideAll( oNum ) { //return highlighted (parent) cells to normal colour
	for( var x = oNum; x < meDisLev.length; x++ ) { takeCol( meDisLev[x] ); }
	meDisLev.length = oNum;
	hideDivsToLevel(oNum); //now do the normal hide div
}
function showdivCol(oName,oNum) { //return highlighted (child) cells to normal colour
	for( var x = oNum; x < meDisLev.length; x++ ) { takeCol( meDisLev[x] ); }
	meDisLev.length = oNum;
	showdiv(oName,oNum); //now do normal show div
}
//perform standard highlight
function giveCol( oOb ) { if( oOb.style ) { if( oOb.style.backgroundColor ) {
			oOb.style.backgroundColor = oOb.oHighCol; //IE, NS6+, Opera 6
		} else { oOb.style.background = oOb.oHighCol; //Opera 5
	} } else { oOb.bgColor = oOb.oHighCol; } if( oOb.toChange.visibility ) {
		oOb.toChange.visibility = 'show'; } else { if( oOb.toChange && oOb.toChange.style ) {
			oOb.toChange.style.color = oOb.oHighColF; } } if( oOb.toImg ) {
				oOb.toImg.src = window['meDisImgH'+oOb.imgIden].src; } }
function takeCol( oOb ) { if( !oOb ) { return; } if( oOb.style ) { if( oOb.style.backgroundColor ) {
			oOb.style.backgroundColor = oOb.oNormCol; //IE, NS6+, Opera 6
		} else { oOb.style.background = oOb.oNormCol; //Opera 5
	} } else { oOb.bgColor = oOb.oNormCol; } if( oOb.toChange.visibility ) {
		oOb.toChange.visibility = 'hide'; } else { if( oOb.toChange && oOb.toChange.style ) {
			oOb.toChange.style.color = oOb.oNormColF; } } if( oOb.toImg ) {
				oOb.toImg.src = window['meDisImgN'+oOb.imgIden].src; } }
function checkScroll() {
	//check how much the page has scrolled. for each element in the array, offset it by the amount of scroll
	var meDiX = 0, meDiY = 0;
	if( typeof( window.pageYOffset ) == 'number' ) { meDiY = pageYOffset; meDiX = pageXOffset; } else {
		if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) { meDiY = document.body.scrollTop; meDiX = document.body.scrollLeft; } else {
			if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) { meDiY = document.documentElement.scrollTop; meDiX = document.documentElement.scrollLeft; } }
	}
	for( var y = 0; y < meDisArray.length; y++ ) {
		var myRefToTheDiv = getRefToDivNest(meDisArray[y][0]);
		if( !myRefToTheDiv ) { return; }
		if(myRefToTheDiv.style) { myRefToTheDiv = myRefToTheDiv.style; }
		myRefToTheDiv.left = meDisArray[y][2] + meDiX;
		myRefToTheDiv.top = meDisArray[y][1] + meDiY;
	}
}
window.setInterval('checkScroll();',75);