// JavaScript Document

var menu = document.getElementById('menu').getElementsByTagName('ul')[0];
var menuitems = menu.getElementsByTagName('li');
var menuimgs = menu.getElementsByTagName('img');
var submenus = menu.getElementsByTagName('ul');

function getEvtTarget(e) {
  e = e || window.event; //e is for non-IE browsers, window.event is for IE
  return e.target || e.srcElement; //e.target is for non-IE, srcElement is for IE
}


//Hide submenus
for (i=0;i<submenus.length;i++) {
	submenus[i].style.display = 'none';
}

//Make images change color on mouseover
for (i=0;i<menuimgs.length;i++) {
	var me = menuimgs[i];
	me.myname = me.src.substr(0,me.src.length-4);
	me.myext = me.src.substr(me.src.length-4,4);
	me.onmouseover = godark;
	me.onmouseout = restoresrc;
	if (me.parentNode.tagName == 'a' || 'A') {
		me.parentNode.onfocus  = godark;
		me.parentNode.onblur  = restoresrc;
	}
}

//Make submenus appear on click
for (i=0;i<menuitems.length;i++) {
	if (menuitems[i].getElementsByTagName('ul').length > 0 && menuitems[i].getElementsByTagName('a').length > 0) {
		menuitems[i].getElementsByTagName('a')[0].onclick = togglesubmenu;		
	}
}
	
function godark() {
	var darkener = this.tagName.toLowerCase() == 'img' ? this : this.getElementsByTagName('img')[0];
	this.style.outline = 0; this.style.border = 0;
	//"this" should always be either the menu item which is an image or its parent element, an A
	//targ = getEvtTarget(event);
	//targ.src = targ.myname+'-dk'+targ.myext;
	darkener.src = darkener.myname + '-dk' + darkener.myext;
}

function restoresrc(event) {
		//getEvtTarget(event).src = getEvtTarget(event).myname+getEvtTarget(event).myext;
	var darkener = this.tagName.toLowerCase() == 'img' ? this : this.getElementsByTagName('img')[0];
	darkener.src = darkener.myname+darkener.myext;
}

function togglesubmenu(event) {
	//alert(event.target.tagName);
	var parentItem = getEvtTarget(event);
	while (parentItem.tagName.toLowerCase() != 'li') { parentItem = parentItem.parentNode;}
	if (parentItem.getElementsByTagName('ul')[0].style.display == 'block') {
		parentItem.getElementsByTagName('ul')[0].style.display = 'none'
		}
	else { 
		for(i=0;i<submenus.length;i++) {submenus[i].style.display = 'none';}
		parentItem.getElementsByTagName('ul')[0].style.display = 'block'
		}
	return false; //Prevents any links attached to the clicked image from being activated. 
}