sfHover = function() {
	var navList = document.getElementById("MainNav");
	navList.onmouseover = displayMask;
	navList.onmouseout = hideMask;
	
	var sfEls =navList.getElementsByTagName("LI");
	
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}

function displayMask()
{
	var mask = document.getElementById('mask');
	if (!mask)
	{
		var maskWrapper = document.getElementById('Header');	
		var newMask = document.createElement('div');	
		newMask.style.position = 'absolute';
		newMask.style.left = '0px';
		newMask.style.top = '0px';
		newMask.style.zIndex = '9';
		
		newMask.style.width = '100%';
		newMask.style.height = '400px';
		newMask.style.background = '#FFF';
		newMask.style.filter = 'alpha(opacity=0)';
		
		newMask.id = 'mask';
		
		maskWrapper.appendChild(newMask);
	}
}

function hideMask(){
	var mask = document.getElementById('mask');
	if (mask)
		{
			var maskWrapper = document.getElementById('Header');	
			maskWrapper.removeChild(mask);
		}
}

if (window.attachEvent) window.attachEvent("onload", sfHover);