// Mouseovers. This script is based on a similar mouseover script from http://www.quirksmode.org/.

var images = new Array();
window.onload = init;

function init() {
  // preload images
  images[0] = new Image();
  images[0].src = "images/menuitem_over.png";
  images[1] = new Image();
  images[1].src = "images/menuitem_separator.png";
  images[2] = new Image();
  images[2].src = "images/submenuitem_out.png";
  images[3] = new Image();
  images[3].src = "images/submenuitem_down.png";

  var menu = document.getElementById('menu');
  var menuitems = menu.getElementsByTagName('td'); // get the items to be mouseover-ed in bulk
  // activate the mouseovers
  do_mouseovers_for(menuitems);

  var submenu = document.getElementById('hidden');
  var submenuitems = submenu.getElementsByTagName('div'); // get the items to be mouseover-ed in bulk
  // activate the mouseovers
  do_mouseovers_for(submenuitems);
}

// the functions that actually swap the images
function do_mouseovers_for(items) {
  for ( var i=0; i < items.length; i++ ) {
      items[i].onmouseover  = mouseGoesOver;
      items[i].onmouseout   = mouseGoesOut;
      items[i].onmousedown  = mouseGoesDown;
      items[i].onmouseup    = mouseGoesUp;
  }
}
function mouseGoesOver()  {
  this.className = this.className.slice(0, -3);
  this.className += '_ov';
}
function mouseGoesDown()  {
  this.className = this.className.slice(0, -3);
  this.className += '_dn';
}
function mouseGoesUp()    {
  this.className = this.className.slice(0, -3);
  this.className += '_up';
}
function mouseGoesOut()   {
  this.className = this.className.slice(0, -3);
  this.className += '_ou';
}