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('menu').getElementsByTagName('a');
    for (var i=0; i<mi.length; i++){
        // fade in  - positive step
        mi[i].onmouseout  = function(e) {fade(this, opHigh,-10)}
				fade(mi[i], opLow,  100); // fade out - negative step
				mi[i].onmouseover = function(e) {fade(this, opLow,  10)} 
    }
}
 
// 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 pause between calls)
    if (opLow <= opacity && opacity <= opHigh) setTimeout(function(){fade(mi,opacity,step)}, 25);
}// JavaScript Document