// bit of a misnomer this as it does more than just navigation and miles wrote most of it

/*
BUGS:
- if page has not finished loading you can get errors with MENUS e.g. mouse over menu box
- can end up with endless fades, maybe when link is followed and fade is not finished?
- should also preload the menu box images for slow connections
- mouseover menu box should grey out selected menu box

When mouse is over menu box the menu pops up.
When mouse leaves menu box the menu popup timeout is initiated

Should only apply fade in and out when showing menu is selected menu, i.e. not when popup

Begins fade of project menu then redraws it, then fades it

*/

// Vary the values here to fine tune the behaviour of the fading menus.
// Also note grey, grey1-grey7 styles in stylesheet; use these to specify colour changes
// from grey darkest to grey7 lightest
var FADEOUT_MILLISECONDS = 200;	// number of ms between each fadeout colour chage
var FADEIN_MILLISECONDS = 50;	// number of ms between each fadein colour chage
var FADEOUT_PAUSE = 5;	// number of intervals to pause before beginning to fade out
var FADEIN_PAUSE = 0;	// number of intervals to pause before beginning to fade in

var SELECTEDMENU = -1;	// gets set by page
var SELECTEDITEM = -1;	// gets set by page
var MENU_MILLISECONDS = 1000;

var MENUS = "";	// declare here so can tell if not set; gets redeclared at foot of page
var MenuTimeoutId = 0;
var foi = 0;
var fii = 0;

var ShowingSelectedMenuItems = true;

function beginFadeOut()
{
//trace("beginFadeOut");
	endFadeIn();
	foi = setInterval("fadeOut()", FADEOUT_MILLISECONDS);
}
function beginFadeIn()
{
//trace("beginFadeIn");
	endFadeOut();
	fii = setInterval("fadeIn()", FADEIN_MILLISECONDS);
}
function endFadeOut()
{
//trace("endFadeOut");
	FadeOutPauseCount = 0;
	clearInterval(foi);
}
function endFadeIn()
{
//trace("endFadeIn");
	FadeInPauseCount = 0;
	clearInterval(fii);
}
function Menu(index, name, imageSrc, selectedItemClass) 
{
	this.index = index;
	this.name = name;
	this.image = new Image(12, 18);
	this.image.src = "pics/" + imageSrc;
	this.selectedItemClass = selectedItemClass;
	this.selected = false;
	this.menuItem = new Array(arguments.length-4);
	for (var i = 4; i < arguments.length; i++)
		this.menuItem[i-4] = arguments[i];
	this.mouseOver = MenuMouseOver;
	this.mouseOut = MenuMouseOut;
	this.show = MenuShow;
	this.hide = MenuHide;
	this.itemHTML = MenuItemHTML;
}

function MenuMouseOver()
{
	this.show();
}
function MenuMouseOut()
{
//trace("MenuMouseOut");
	if (!ShowingSelectedMenuItems)
		MenuTimeoutId = setTimeout("restoreSelectedMenu()", MENU_MILLISECONDS);
	else
		beginFadeOut();
}
function MenuShow()
{
//trace("show " + this.name + " menu");
	if (MenuTimeoutId != 0) clearTimeout(MenuTimeoutId);
	// hide any already popped up menu
	hideAllMenus();
	var obj = getObject("menu_" + this.index);
	if (obj)
	{
		var block = obj.childNodes[0];
		block.setAttribute("src", this.image.src);
	}
	window.status = this.name;	
	var obj = getObject("menuTitle");
	if (obj) 
	{
		var txt = document.createTextNode(this.name.toUpperCase());
		obj.appendChild(txt);
	}
	var obj = getObject("menuItems");
	if (obj) 
	{
		obj.innerHTML = this.itemHTML();
	}
	ShowingSelectedMenuItems = SELECTEDMENU < 0 ? false : this.name == MENUS[SELECTEDMENU].name;
	//trace("ShowingSelectedMenuItems: " + ShowingSelectedMenuItems);
	endFadeOut();	// in case one is in progress
}

function MenuHide()
{
//trace("MenuHide for " + this.name);
	if (MenuTimeoutId != 0) clearTimeout(MenuTimeoutId);
	var obj = getObject("menuTitle");
	if (obj) obj.innerHTML = "";
	var obj = getObject("menu_" + this.index);
	if (obj)
	{
		var block = obj.childNodes[0];
		block.setAttribute("src", "pics/navAll.jpg");
	}
	var obj = getObject("menuItems");
	if (obj) 
	{
		obj.innerHTML = "";
	}
	window.status = "";	
}
function MenuItemHTML()
{
	var html = "";
	for (var i=0; i<this.menuItem.length; i++)
	{
		var item = this.menuItem[i];
		if (item.gapBefore > 0)
			html += "<img src='pics/clear.gif' height='" + item.gapBefore + "' width='1'>";
		if (item.selected)
		{
			// don't link to page we are already on
			var here = document.URL.toLowerCase();
			var there = item.url.toLowerCase();
			if (here.indexOf(there) < 0)
				html += "<a class='" + this.selectedItemClass + "' href='" + item.url + "' onMouseOver=\"return true;\" onMouseOut=\"return true;\">" + item.name.toUpperCase() + "</a><br>";
			else
				html += "<span class='" + this.selectedItemClass + "'>" + item.name.toUpperCase() + "</span><br>";
		}
		else if (item.url.length > 0)
			html += "<a class='grey' href='" + item.url + "' onMouseOver=\"return true;\" onMouseOut=\"return true;\">" + item.name.toUpperCase() + "</a><br>";
		else 
			html += item.name.toUpperCase() + "<br>";
	}
	return html;
}
function MenuItem(name, url, gapBefore) 
{
	this.name = name;
	this.url = url;
	this.gapBefore = gapBefore;
	this.selected = false;
}

function restoreSelectedMenu()
{
	hideAllMenus();
	if (SELECTEDMENU >= 0) 
	{
		MENUS[SELECTEDMENU].show();
		beginFadeOut();
	}
}

function hideAllMenus()
{
//trace("hideAllMenus");
	for (var i=0; i < MENUS.length; i++)
	{
		var o = MENUS[i];
		o.hide();
	}
}

// event handlers

function menuMouseOver(i) {
//trace("menuMouseOver " + i);
	var menu = MENUS[i];
	menu.mouseOver();
	return true;
}

function menuMouseOut(i) {
//trace("menuMouseOut " + i);
	var menu = MENUS[i];
	menu.mouseOut();
	return true;
}

function menuItemListMouseOver() 
{
//trace("menuItemListMouseOver");
	if (MenuTimeoutId != 0) clearTimeout(MenuTimeoutId);
	if (ShowingSelectedMenuItems) beginFadeIn();
}

function menuItemListMouseOut() 
{
//trace("menuItemListMouseOut");
	if (ShowingSelectedMenuItems) 
		beginFadeOut();
	else
		MenuTimeoutId = setTimeout("restoreSelectedMenu()", MENU_MILLISECONDS);
}

var FadeOutPauseCount = 0;
function fadeOut()
{
//trace("fadeOut");
	if (FadeOutPauseCount++ < FADEOUT_PAUSE) return;
	var obj = getObject("menuItems");
	if (obj)
	{
		var className = "className";
		if (navigator.userAgent.indexOf("MSIE ") == -1)
		{
			className = "class"; // IE calls class attribute className, others call it class
		}
		//do not use alert here or will have to ctrl-alt-del ie
		//trace(obj.childNodes.length + " child nodes of which first is " + obj.childNodes[0].outerHTML + " with class = " + obj.childNodes[0].getAttribute("className"));
		for (var i=0; i<obj.childNodes.length; i++)
		{
			var child = obj.childNodes[i];
			switch (child.getAttribute(className))
			{
			case "grey":
				child.setAttribute(className, "grey1");
				break;
			case "grey1":
				child.setAttribute(className, "grey2");
				break;
			case "grey2":
				child.setAttribute(className, "grey3");
				break;
			case "grey3":
				child.setAttribute(className, "grey4");
				break;
			case "grey4":
				child.setAttribute(className, "grey5");
				break;
			case "grey5":
/*				child.setAttribute(className, "grey6");
				break;
			case "grey6":
				child.setAttribute(className, "grey7");
				break;
			case "grey7":*/
				endFadeOut();
				return;
			}
		}
	}
}
var FadeInPauseCount = 0;
function fadeIn()
{
//trace("fadeIn");
	if (FadeInPauseCount++ < FADEIN_PAUSE) return;
	var obj = getObject("menuItems");
	if (obj)
	{
		var className = "className";
		if (navigator.userAgent.indexOf("MSIE ") == -1)
		{
			className = "class"; // IE calls class attribute className, others call it class
		}
		// don't use alert, loops!
		//trace(obj.childNodes.length + " child nodes of which first is " + obj.childNodes[0].outerHTML + " with class = " + obj.childNodes[0].getAttribute("className"));
		for (var i=0; i<obj.childNodes.length; i++)
		{
			child = obj.childNodes[i];
			switch (child.getAttribute(className))
			{
			case "grey7":
				child.setAttribute(className, "grey6");
				break;
			case "grey6":
				child.setAttribute(className, "grey5");
				break;
			case "grey5":
				child.setAttribute(className, "grey4");
				break;
			case "grey4":
				child.setAttribute(className, "grey3");
				break;
			case "grey3":
				child.setAttribute(className, "grey2");
				break;
			case "grey2":
				child.setAttribute(className, "grey1");
				break;
			case "grey1":
				child.setAttribute(className, "grey");
				break;
			case "grey":
				endFadeIn();
				return;
			}
		}
	}
}
// add this to page to view trace
/*
		<div class="projText">
			<textarea id="trace" cols=35 rows=15></textarea>
		</div>
*/

function trace(s)
{
	textarea = getObject("trace");
	if (textarea)
		textarea.value = s + (ShowingSelectedMenuItems?"+":"-") + '\n' + textarea.value;
}