var imgDir = "../pics/";  // common directory for buttons and similar stuff

/* emphasis on this header element */
function header_over() { 
	this.firstChild.src = this.firstChild.src.replace(/\.gif/, '_over.gif');
}

/* no more emphasis on this header element */
function header_out() { 
	this.firstChild.src = this.firstChild.src.replace(/_over\.gif/, '.gif');
}

/* emphasis on this nav element */
function nav_over() { 
    var srcString = this.id.split("_");
    var x = document.getElementById(srcString[0]); 
	x.src = imgDir + this.id + ".gif";
	var y = document.getElementById(this.id);
	y.style.color = "#FFFFFF";
	y.style.textDecoration = "underline";
    
	// hide other subnav's, open the subnav for this nav element
    sub_hide();
    if (document.getElementById(this.id + "_sub")) {
    	var s = document.getElementById(this.id + "_sub");
    	s.style.visibility = "visible";
    }
}

/* no more emphasis on this nav element */
function nav_out() { 
	var srcString = this.id.split("_");
	var x = document.getElementById(srcString[0]); 
	x.src = imgDir + srcString[0] + ".gif";
	var y = document.getElementById(this.id);
	y.style.color = "#CCCCCC";
	y.style.textDecoration = "none";
}

/* open or close subnav list */
function sub_openclose() {
    for (var i=0;i<this.parentNode.parentNode.parentNode.getElementsByTagName('ul').length;i++) {
        this.parentNode.parentNode.parentNode.getElementsByTagName('ul')[i].style.display = 'none';
    }
    if (this.parentNode.parentNode.getElementsByTagName('ul')[0]) {
        this.parentNode.parentNode.getElementsByTagName('ul')[0].style.display = 'block';
    }
}

/* hide all submenus */
function sub_hide() {
    var submenus = document.getElementById('subnav').getElementsByTagName('div');
    for (var i=0;i<submenus.length;i++) {
        submenus[i].style.visibility = 'hidden';
        // also hide subs of current submenu if any present
        if (submenus[i].getElementsByTagName('ul').length > 1) {
        	var nestedsubs = submenus[i].getElementsByTagName('ul');
        	for (var j=1;j<nestedsubs.length;j++) {
        		nestedsubs[j].style.display = 'none';
        	}
        }
    }
}

/* initialize event handlers and preload images */
function init() {
    document.body.onclick = sub_hide;
    var headerlinks = document.getElementById('header').getElementsByTagName('a');
    var navareas = document.getElementById('nav').getElementsByTagName('area');
    var navlinks = document.getElementById('nav').getElementsByTagName('a');
    var sublinks = document.getElementById('subnav').getElementsByTagName('nobr');
	
	// init header
	for (var i=0;i<headerlinks.length;i++) {
        headerlinks[i].onmouseover = header_over;
        headerlinks[i].onmouseout = header_out;
    }
    	
	// init nav
	for (var i=0;i<navareas.length;i++) {
        navareas[i].onmouseover = nav_over;
        navareas[i].onmouseout = nav_out;
    }
    for (var i=0;i<navlinks.length;i++) {
        navlinks[i].onmouseover = nav_over;	
        navlinks[i].onmouseout = nav_out;
    }
    
    // init subnav
    for (var i=0;i<sublinks.length;i++) {
        sublinks[i].onmouseover = sub_openclose;
    }
    
    // preload images
    if (document.images) {
    	if (!imgPre) {
	    	var imgs = new Array('sopran_up.gif','sopran_down.gif','alt_up.gif','alt_down.gif','tenor_up.gif','tenor_down.gif','bass_up.gif','bass_down.gif','list_subnav_1.gif','list_subnav_2.gif');
  			var imgPre = new Array();
  			for (var i=0; i<imgs.length; i++) {
  				imgPre[i] = new Image;
  				imgPre[i].src = imgDir + imgs[i];
    		}
    	}
    }
}