<!-- Begin
var isDOM = (document.getElementById ? true : false); 
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
var isMAC = ((navigator.userAgent.toLowerCase().indexOf('mac')!=-1) ? true : false);

// Default colours passed to most menu constructors (just passed to functions, not
// a global variable - makes things easier to change later in bulk).
// Defover = Textcolor when mouse is over menu, defback = Menu background color
// var defOverText = '#ffffff', defBack = '#3399cc';
var defOverText = '#000000', defBack = '#CCCCCC';


var defOver = '#CCCCCC';//'#333399';
var defOverPop = '#CCCCCC';
var defBaseTextColor = '#000000';
var defPopTextColor = '#000000';

function getRef(id) {
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}
function getSty(id) {
return (isNS4 ? getRef(id) : getRef(id).style);
} 

// Hide timeout.
var popTimer = 5;

// Array showing highlighted menu items.
var litNow = new Array();

function popOver(menuNum, itemNum) {

clearTimeout(popTimer);
hideAllBut(menuNum);
litNow = getTree(menuNum, itemNum);
changeCol(litNow, true);
targetNum = menu[menuNum][itemNum].target;
if (targetNum > 0) {
	thisX = parseInt(menu[menuNum][0].ref.left) + parseInt(menu[menuNum][itemNum].ref.left);
	thisY = parseInt(menu[menuNum][0].ref.top) + parseInt(menu[menuNum][itemNum].ref.top);
	with (menu[targetNum][0].ref) {
		left = parseInt(thisX + menu[targetNum][0].x);
		top = parseInt(thisY + menu[targetNum][0].y);
		visibility = 'visible';
      }
      document.all.menuIFrame.style.top = menu[targetNum][0].ref.top;
	  document.all.menuIFrame.style.left = menu[targetNum][0].ref.left;
	  document.all.menuIFrame.style.width = menu[targetNum][0].width;
	  // Calculate menu height
	  var intHeight;
	  intHeight = 0;
	  for (var i=1; i<menu[targetNum].length; i++)
		intHeight = intHeight + menu[targetNum][i].height;
	  document.all.menuIFrame.style.height = intHeight;
	  if (
		(navigator.userAgent.indexOf("MSIE") > -1) &&
		((navigator.userAgent.indexOf("5.5") > -1) || (navigator.userAgent.indexOf("6") > -1))
		){
        if (!isMAC){
		  document.all.menuIFrame.style.visibility = 'visible';
	    }
	  }
   }
}

function popOut(menuNum, itemNum) {
	
	if ((menuNum == 0) && !menu[menuNum][itemNum].target)
	{		
		hideAllBut(0)
	}
	else
	{		
		popTimer = setTimeout('hideAllBut(0)', 50);
	}
}

function getTree(menuNum, itemNum) {

// Array index is the menu number. The contents are null (if that menu is not a parent)
// or the item number in that menu that is an ancestor (to light it up).
itemArray = new Array(menu.length);

while(1) {
	itemArray[menuNum] = itemNum;

	// If we've reached the top of the hierarchy, return.
	if (menuNum == 0) return itemArray;
	itemNum = menu[menuNum][0].parentItem;
	menuNum = menu[menuNum][0].parentMenu;
	}
}

// Pass an array and a boolean to specify colour change, true = over colour.
// Add arrow to show current selection
function changeCol(changeArray, isOver) {

var offset = 0;


// Scroll through all the menus that should be changed.
// and change color and display or remove arrow.
for (menuCount = 0; menuCount < changeArray.length; menuCount++) {
	if (changeArray[menuCount]) {
			
		// Decide new color for the text
		if(menuCount == 0 ) newCol = isOver ? defOverText : '#000033';
		else newCol = defOverText;
		// Decide new color for the background
		overCol = isOver ? menu[menuCount][0].overCol : menu[menuCount][0].backCol;
		
		// Decide new textclass
		newClass = isOver ? 'leftmenuover' : menu[menuCount][0].textClass;
		
		// Concatenate menuid
		menuIDlocl = ('menu' + menuCount + 'item' + changeArray[menuCount]);
		
		// Concatenate item ID
		itemID = ('menu' + menuCount + 'item' + changeArray[menuCount] + 'item');
		
		// Concatenate picture ID
		itemIDpic = ('menu' + menuCount + 'item' + changeArray[menuCount] + 'cellimg');
		
		// Decide which picture to show
		if (menuCount == 0) pic = isOver ? '../images/Checked_box.gif' : '../images/unchecked_box.gif';
		else pic = isOver ? '../images/arrow.gif' : '../images/noarrow.gif';
				
		// Change Image DOM/IE4
		if (isDOM) {
			if (menu[menuCount][changeArray[menuCount]].isLinkDescription == false){
				// Only show image if we're on a main menu (not a popup menu)
				if (menuCount == 0)
				{
					// document.all.item(itemIDpic).innerHTML = '<IMG SRC="'+ pic + '">';
				}
				document.getElementById(itemID).style.color = newCol;
				document.getElementById(menuIDlocl).style.backgroundColor = overCol;
				if (menu[menuCount][0].containsLinkDescription == true){
					if(isOver){
						document.getElementById('menu' + menuCount + 'description').innerText = menu[menuCount][changeArray[menuCount]].linkDescription;
						}
						else 
						{
						document.getElementById('menu' + menuCount + 'description').innerText = '';
						}
					}
				}
			}
		}
	}
}

function hideAllBut(menuNum) {
	var keepMenus = getTree(menuNum, 1);
	for (count = 0; count < menu.length; count++)
	if (!keepMenus[count])
	{
		menu[count][0].ref.visibility = 'hidden';
		if (document.all.menuIFrame.style.top == menu[count][0].ref.top)
			document.all.menuIFrame.style.visibility = 'hidden';
	}
	changeCol(litNow, false);
	
}

// *** MENU CONSTRUCTION FUNCTIONS ***

function Menu(isVert, popInd, x, y, width, overCol, backCol, borderClass, textClass, containsLinkDescription) {
// True or false - a vertical menu?
this.isVert = isVert;
// The popout indicator used (if any) for this menu.
this.popInd = popInd
// Position and size settings.
this.x = x;
this.y = y;
this.width = width;
// Colours of menu and items.
this.overCol = overCol;
this.backCol = backCol;
// The stylesheet class used for item borders and the text within items.
this.borderClass = borderClass;
this.textClass = textClass;
// Parent menu and item numbers, indexed later.
this.parentMenu = null;
this.parentItem = null;
// Reference to the object's style properties (set later).
this.ref = null;
this.innertext = null;
this.containsLinkDescription = containsLinkDescription;
}

function Item(text, href, frame, length, spacing, target, hasHR, height, isLinkDescription,linkDescription) {
this.text = text;
this.href = href;
this.frame = frame;
this.length = length;
this.spacing = spacing;
this.target = target;
this.hasHR = hasHR;
this.height = height;
this.isLinkDescription = isLinkDescription;
this.linkDescription = linkDescription;

// Reference to the object's style properties (set later).
this.ref = null;

}

function writeMenus() {
if (!isDOM && !isIE4 && !isNS4) return;
for (currMenu = 0; currMenu < menu.length; currMenu++) with (menu[currMenu][0]) {
	// Variable for holding HTML for items and positions of next item.
	var str = '', itemX = 0, itemY = 0;
	var totalHeight=0;
	var menuImage = '';
	
	// Calculate the total height of the pop out menu.Used later when adding borders
	if (isNS4){
		if (currMenu > 0){
			for (currItem = 1; currItem < menu[currMenu].length; currItem++) with (menu[currMenu][currItem]) {
			
				totalHeight=totalHeight+length;
			}
		}
	}
	
	// Remember, items start from 1 in the array (0 is menu object itself, above).
	// Also use properties of each item nested in the other with() for construction.
	for (currItem = 1; currItem < menu[currMenu].length; currItem++) with (menu[currMenu][currItem]) {
		var itemID = 'menu' + currMenu + 'item' + currItem;
		
		// The width and height of the menu item - dependent on orientation!
		var w = (isVert ? width : length);
		var h = (isVert ? length : width);
		var divBorder = '';
		
				
		// Add border to popout menus
		if (currMenu > 0) {
			if(isDOM || isIE4) {
				divBorder = 'BORDER-RIGHT: slategray thin solid; BORDER-LEFT: whitesmoke thin solid; ';
			
				//If this is the first Item, add top Border
				if(currItem == 1){
					divBorder += 'BORDER-TOP: whitesmoke thin solid; ';
				}			
			
				// If this is the last item, add bottom border
				if(currItem + 1 == menu[currMenu].length) {
					divBorder += 'BORDER-BOTTOM: slategray thin solid; ';
				}
			}
		}
	
		if (isDOM || isIE4) {
			str += '<div id="' + itemID + '" style="' + divBorder + 'position: absolute; left: ' + itemX + '; top: ' + itemY + '; width: ' + w + '; height: ' + h + '; visibility: inherit; ';
			
			if (backCol) str += 'background: ' + backCol + '; ';
			
			str += '" ';
		}
			
		if (borderClass) str += 'class="' + borderClass + '" ';
		
		// Add mouseover handlers and finish div/layer.
		if(isLinkDescription == false){
			str += 'onMouseOver="popOver(' + currMenu + ',' + currItem + ')" onMouseOut="popOut(' + currMenu + ',' + currItem + ')">';
		}
		else
		{
			str += '>';
		}
		// Add contents of item (default: table with link inside).
		// In IE/NS6+, add padding if there's a border to emulate NS4's layer padding.
		// If a target frame is specified, also add that to the <a> tag.
		
		
		if(currMenu == 0) menuImage = "../images/unchecked_box.gif";
		else menuImage = "../images/noarrow.gif";
		
		// Should clicking the menu item open a new window?
		var targetString;		
		if (href.indexOf("newwindow=true") > -1)
		{
			targetString = ' TARGET="_BLANK"';
		}
		else
		{
			targetString = '';
		}
	
		if (isNS4){
			str += '<table width="' + (w - 8) + '" border="0" cellspacing="0" cellpadding="' + (!isNS4 && borderClass ? 0 : 2) + '"><tr><td width= "5"><LAYER ID ='+itemID+'cellimg WIDTH=5 LEFT = 2 TOP='+ (h/2-5) + '><IMG SRC="images/noarrow.gif"></LAYER></td><td td class="' + textClass + '" width = '+(w-5) +' align="left" height="' + (h - 7) + '">' + '<LAYER ID ='+itemID+'item LEFT = 15 TOP ='+ (h/2-10) + '><a ' + targetString + ' class="' + textClass + '" href="' + href + '">'+ text + '</a><LAYER></td>';
		}
		if (isDOM){
			if(isLinkDescription) {
				str += '<table width="' + (w - 8) + '" border="0" cellspacing="0" cellpadding="2"><tr><td td class="' + textClass + '" align="left" height="' + (h - 7) + '"><p class="' + textClass + '"><DIV ID =menu' + currMenu + 'description>' + text + '</p></td>';
				}
				else {
				str += '<table width="' + (w - 8) + '" border="0" cellspacing="0" cellpadding="' + (!isNS4 && borderClass ? 0 : 2) + '"><tr><td width= "5"><DIV ID ='+itemID+'cellimg>' + '<IMG SRC="'+menuImage+'"></td><td td class="' + textClass + '" align="left" height="' + (h - 7) + '">' + ' <a ' + targetString + ' class="' + textClass + '" href="' + href + '"<DIV ID ='+itemID+'item>'+ text + '</a></td>';
			}
		}

		if (target > 0) {
	
			// Set target's parents to this menu item.
			menu[target][0].parentMenu = currMenu;
			menu[target][0].parentItem = currItem;
			
		}
	
		// Terminate HTML section
		str += '</tr></table>' + (isNS4 ? '</layer>' : '</div>');
	
		
		
		if (isVert) itemY += length + spacing;
		else itemX += length + spacing;
	} //Continue with next item in loop
	
	
	if (isDOM) {
		var newDiv = document.createElement('div');
		document.getElementsByTagName('body').item(0).appendChild(newDiv);
		if (isMAC && currMenu==0){
			str += "<DIV ID=Line></DIV>";
		}
		newDiv.innerHTML = str;
		ref = newDiv.style;
		ref.position = 'absolute';
		ref.visibility = 'hidden';
	}

// Insert a div tag to the end of the BODY with menu HTML in place for IE4.
if (isIE4) {
	document.body.insertAdjacentHTML('beforeEnd', '<div id="menu' + currMenu + 'div" ' + 'style="position: absolute; visibility: hidden; Z-INDEX: 10;">' + str + '</div>');
	
	ref = getSty('menu' + currMenu + 'div');
	innertext = getSty('menu' + currMenu + 'td');
}
// In NS4, create a reference to a new layer and write the items to it.
if (isNS4) {
	ref = new Layer(0);
	ref.document.write(str);
	ref.document.close();
}
for (currItem = 1; currItem < menu[currMenu].length; currItem++) {
	itemName = 'menu' + currMenu + 'item' + currItem;
	if (isDOM || isIE4) menu[currMenu][currItem].ref = getSty(itemName);
	if (isNS4) menu[currMenu][currItem].ref = ref.document[itemName];
	
   }
}
for (currMenu = 0; currMenu < menu.length; currMenu++){
	for (currItem = 1; currItem < menu[currMenu].length; currItem++){
	//Adjust textcolor on links
	// Concatenate item ID
		
		if (menu[currMenu][currItem].isLinkDescription == false){
			itemID = ('menu' + currMenu + 'item' + currItem + 'item');
		
			if(currMenu == 0){
					document.getElementById(itemID).style.color = defBaseTextColor;
					}
			else
			{
				document.getElementById(itemID).style.color = defPopTextColor;
			}
		}	
	}
}

// Create the vertical line between items
currMenu = 0
var lineHeight = 0	
for (currItem = 0; currItem < (menu[currMenu].length); currItem++){
//Calculate how high the line should be.

// If this is not a link description field
	
		// If this is the menu itself, get its position on screen
		if(currItem == 0) {
			lineHeight = -menu[0][0].x;
			}
		else
			{
			if(menu[0][currItem].isLinkDescription == false){
				// add height of each item as well as spacing between them
				lineHeight = menu[0][currItem].spacing + menu[0][currItem].length + lineHeight;	
			}
			else 
			{
				lineHeight = lineHeight - (menu[0][(currItem) -1].spacing) - (menu[0][(currItem) -1].length/2);
			}
		}
} // Calculate height of line

if (isMAC){
	str = '<IMG style="WIDTH: 1px;" height='+(lineHeight)+' alt="" hspace=6 vspace='+((menu[0][1].height)/2) +' src="../images/VerticalLine.jpg" width=1 align=left useMap="" border=0 >';
	document.getElementById('Line').innerHTML = str;
} else {
	var currentstr

	str = '<DIV ID=Line><IMG style="WIDTH: 1px;" height='+(lineHeight)+' alt="" hspace=6 vspace='+((menu[0][1].height)/2) +' src="../images/VerticalLine.jpg" width=1 align=left useMap="" border=0 ></DIV>';

	currentstr = document.getElementById('menu0item1').outerHTML;

	str += ' ' + currentstr;

	document.getElementById('menu0item1').outerHTML = str;
}

with(menu[0][0]) {
	ref.left = x;
	ref.top = y;
	ref.visibility = 'visible'
   }
   
}

// *** OPTIONAL CODE FROM HERE DOWN ***

// These two lines handle the window resize bug in NS4. See <body onResize="...">.
// I recommend you leave this here as otherwise when you resize NS4's width menus are hidden.

var popOldWidth = window.innerWidth;
nsResizeHandler = new Function('if (popOldWidth != window.innerWidth) location.reload()');


// This is a quick snippet that captures all clicks on the document and hides the menus
// every time you click. Use if you want.

if (isNS4) document.captureEvents(Event.CLICK);
document.onclick = clickHandle;

function clickHandle(evt)
{
 if (isNS4) document.routeEvent(evt);
 hideAllBut(0);
}


// This is just the moving command for the example.

function moveRoot()
{
 with(menu[0][0].ref) left = ((parseInt(left) < 100) ? 100 : 5);
}
//  End -->