// to prevent bubbling after setList and setSingle functions
function stopEvent(e) {
  if (!e) e = window.event;
  if (e.stopPropagation) {
    e.stopPropagation();
  } else {
    e.cancelBubble = true;
  }
}

// setting nav bg and single elemets to appropriate position 
function setListBg(e) {
list.style.backgroundPosition = "0 0";
for (var i = 0; i < single.length; i++){
  single[i].style.backgroundPosition = "0 -15px";
  }
stopEvent(e);
}

// for mouseover on single nav elements (background and all other nav elements stay where they were)
function setSingleBg(e) {
list.style.backgroundPosition = "0 0";
for (var i = 0; i < single.length; i++){
  single[i].style.backgroundPosition = "0 -15px";
var targ;
	if (!e) var e = window.event;
	if (e.target) targ = e.target;
	else if (e.srcElement) targ = e.srcElement;
	if (targ.nodeType == 3) // defeat Safari bug
		targ = targ.parentNode;
  }
targ.style.backgroundPosition = '0 -30px';
stopEvent(e);
}

// clearing all
function clearListBg(e) {
list.style.backgroundPosition = "0 -26px";
for (var i = 0; i < single.length; i++){
  single[i].style.backgroundPosition = "0 0";
  }
stopEvent(e);
}

// defining elements and events
function init(){
list = document.getElementById('mainnav');
single = list.getElementsByTagName('a');
list.onmouseover = setListBg;
list.onmouseout = clearListBg;
for (var i = 0; i < single.length; i++){
  single[i].onmouseover = setSingleBg;
  }
}

window.onload = init;