var containers = new Array();
containers[0] = 'nav';

function initHover(container) {
  if (!document.getElementById) return;
  else if (!document.getElementById(container)) return;
  else var x = document.getElementById(container).getElementsByTagName('li');
  var preloads = new Object();
  var i = 0;
  while(i < x.length) {
    //only activate the effect if this isn't the 'active' item
    var active = x[i].getElementsByTagName('img')[0].src.indexOf('-on');
    if (active == -1) {
      preloads['off'+x[i].id] = new Image;
      preloads['off'+x[i].id].src = 'tpl/img/'+ x[i].id + '.gif';
      preloads['on'+x[i].id] = new Image;
      preloads['on'+x[i].id].src = 'tpl/img/'+ x[i].id + '-on.gif';
      x[i].getElementsByTagName('img')[0].onmouseover = function () {
        // when referring to the image, the list item (which contains the id) is the grandparent (the link is the parent), hence parentNode twice
        var item = this.parentNode.parentNode;
        if ((item.id) && (preloads['on' + item.id])) this.src = preloads['on' + item.id].src;
      }
      x[i].getElementsByTagName('img')[0].onmouseout = function () {
        var item = this.parentNode.parentNode;
        if ((item.id) && (preloads['off' + item.id])) this.src = preloads['off' + item.id].src;
      }
    }
    //skip subitems (hence not just i++)
    i = i + x[i].getElementsByTagName('li').length + 1;
  }
}

function initMultipleHovers() {
  for (var j = 0; j < containers.length; j++) {
    initHover(containers[j]);
  }
}

addEvent(window,'load',initMultipleHovers);