var debug = false;
var counter = 1;
document.debugWrite = function debugWrite(text) {
	var debugElement = document.getElementById('debug');
	if(debugElement != null) {
		debugElement.innerHTML += 
			text
			.replace(/&/g, '&')
			.replace(/>/g, '>')
			.replace(/</g, '&lt;')
			+ '<br/>';
	}
}

var openMenu = null;
var openMainMenu = null;
var arrow = null;
var hideTimer;

function showMainMenu(id) {
	document.debugWrite('showMainMenu('+id+')');
	hideMainMenu();
	var element = document.getElementById(id);
	if(element!=undefined) {
		element.style.display = 'block';		
		openMainMenu = element;
	} else {
		document.debugWrite('Couldn\'t find '+id);
	}
}

function hideMainMenuDelayed() {
	document.debugWrite('hideMainMenuDelayed()');
	stopTimer();
	hideTimer = setTimeout('hideMainMenu()', 500);
	return hideTimer;
}

function hideMainMenu() {
	document.debugWrite('hideMainMenu()');
	stopTimer();
	if(openMainMenu != null) {
		openMainMenu.style.display = 'none';
		openMainMenu = null;
	}	
}

function showMenu(id) {
	document.debugWrite('showMenu('+id+')');
	if(openMenu != null) {
		openMenu.className = 'sub_menu';
	}
	// Show this one
	var element = document.getElementById(id);
	if(element!=undefined) {
		element.className = 'parent_hover';		
		openMenu = element;
	}
}

function stopTimer() {
	document.debugWrite('stopTimer()');
	if(hideTimer!=null) {
		clearTimeout(hideTimer);
	}
}


function hideMenu(id) {
	var element = document.getElementById(id);
	if(element!=undefined) {
		element.className = 'sub_menu';	
	}
	openMenu = null;	
}

function showArrow(id) {
	hideArrow();
	var element = document.getElementById(id);
	if(element!=undefined) {
		element.setAttribute('className', 'menu_menu arrow');
		element.setAttribute('class', 'menu_menu arrow');
		arrow = element;
	}
}

function hideArrow() {
	if(arrow != null) {
		arrow.setAttribute('className', 'menu_menu');
		arrow.setAttribute('class', 'menu_menu');
		arrow = null;
	}
}

function Item(heading, url) {
	if(debug) document.write('new Item('+heading+', '+url+')<br/>');
	this.heading = heading;
	this.url = url;
	this.parent;
	this.cssClass = 'menu_item';
	this.index = counter;
	counter = counter + 1;
	this.html = function() {
		if(debug)document.write('Item.html(): parent= '+this.parent.heading+'<br/>');
		var li = '<li onmouseover="stopTimer(); showMenu(\''+this.id()+'_sub\'); hideArrow()" onmouseout="hideMainMenuDelayed(); hideMenu(\''+this.id()+'_sub\');">'+this.a()+'</li>';
		document.write(li);
		document.debugWrite(li);
	};
	this.id = function() {
		return this.cssClass+'_'+this.index;
	};
	this.a = function() {
		return '<a id="'+this.id()+'" class="'+this.cssClass+'" href="'+this.url+'">'+this.heading+'</a>';
	};
	this.element = function() {
		return document.getElementById(this.id());
	};
}

function Menu(heading, url, id) {
	if(debug) document.write('new Menu('+heading+')<br/>');
	this.inherit = Item;
	this.inherit(heading, url);
	this.items = new Array();
	this.cssClass = 'menu_menu';
	this.add = function(item) {
		item.parent = this;
		this.items.push(item);
		if(debug)document.write('Menu.add('+item.heading+')<br/>');
	};
	this.html = function() {
		if(debug)document.write('Menu.html()<br/>');
		if(this.parent == null) {
			var div = '<div class="menu" id="'+id+'" onmouseover="stopTimer()"><ul>';
			document.write(div);
			document.debugWrite(div);
		} else {
			var li = '<li onmouseover="stopTimer(); showMenu(\''+this.id()+'_sub\'); showArrow(\''+this.id()+'\')" onmouseout="hideMainMenuDelayed(); hideArrow();  hideMenu(\''+this.id()+'_sub\');">'+this.span()+'<ul id="'+this.id()+'_sub" class="sub_menu">';
			document.write(li);
			document.debugWrite(li);
		}
		if(debug)document.write('Menu.html(): heading='+this.heading+'<br/>');
		for ( var i = 0; i < this.items.length; i++) {
			if(debug)document.write('Menu.html(): items['+i+']='+this.items[i].heading+'<br/>');
			this.items[i].html();
		}
		if(this.parent == null) {
			document.write('</ul></div>');
			document.debugWrite('</ul></div>');
		} else {
			document.write('</ul></li>');
			document.debugWrite('</ul></li>');
		}
	};
	
	this.span = function() {
		return '<span id="'+this.id()+'" class="'+this.cssClass+'">'+this.heading+'</span>';
	};
}