// JavaScript Document

var opHigh = 100; // highest opacity level
var opLow  = 20;  // lowest opacity level (should be the same as initial opacity in the CSS)

// register onLoad event with anonymous function
window.onload = function (){
	//  collect menu items and attach onMouseOver and onMouseOut events
	var mi = document.getElementById('nav_bar').getElementsByTagName('a');
	
	for (var i=0; i<mi.length; i++){
		
		mi[i].onmouseover = function(e) {fade(this, opLow,  10)} // fade in  - positive step
		mi[i].onmouseout = function(e) {fade(this, opHigh, -10)} // fade out - negative step
	}
}

// fade in / fade out function (event handler)
function fade(mi, opacity, step){
	mi.parentNode.style.opacity = opacity / 100;                
	mi.parentNode.style.filter  = "alpha(opacity="+opacity+")"; // set opacity for IE
	opacity += step;                                            // update opacity level
	// recursive call if opacity is between 'low' and 'high' values (15ms pause between calls)
	if (opLow <= opacity && opacity <= opHigh) setTimeout(function(){fade(mi,opacity,step)}, 25);
}