// http://www.redips.net/javascript/fade-menu/

var opHigh = 100; // highest opacity level
var opLow  = 50;  // 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('fademenu').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;                // set opacity for FF
	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 (-> 35ms sjr) pause between calls)
	if (opLow <= opacity && opacity <= opHigh) setTimeout(function(){fade(mi,opacity,step)}, 35);
}