var menuItemWidth = 157;

function getMenuItemIndex(menuItem) {
	var sfEls = document.getElementById("mainMenu").childNodes;
	var cnt = 0;
	for (var i=0; i<sfEls.length; i++) {
		  if (sfEls[i].nodeName == "LI") {
			  cnt++;
			  if (menuItem == sfEls[i])
				  return cnt;
		  }
	}
	return -1;
}

function menuFix() {
 //var sfEls = document.getElementById("mainMenu").getElementsByTagName("li");
	var sfEls = document.getElementById("mainMenu").childNodes;
 //alert(sfEls.length);
 for (var i=0; i<sfEls.length; i++) {
  if (sfEls[i].nodeName == "LI") {
	  sfEls[i].onmouseover=function() {
	  this.className+=(this.className.length>0? " ": "") + "sfhover";
	  var index = getMenuItemIndex(this);
	  var posX = -(index-1) * menuItemWidth;
	  var aEle = this.childNodes[0];
	  aEle.style.backgroundPosition = posX + "px -70px";
	  }
	  sfEls[i].onmousedown=function() {
	  this.className+=(this.className.length>0? " ": "") + "sfclick";
	  var index = getMenuItemIndex(this);
	  var posX = -(index-1) * menuItemWidth;
	  var aEle = this.childNodes[0];
	  aEle.style.backgroundPosition = posX + "px -35px";
	  }
	  sfEls[i].onmouseup=function() {
	  this.className+=(this.className.length>0? " ": "") + "sfhover";
	  }
	  sfEls[i].onmouseout=function() {
	  this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
	  this.className=this.className.replace(new RegExp("( ?|^)sfclick\\b"), "");
	  
	  }
  }
 }
 //alert(cnt);
}
window.onload=menuFix;