var hl_images = new Array() ;
var hl_parents = new Array() ;
var hl_images_hover = new Array() ;

var highlighted_img = -1 ;

function highlight(index)
{
  if (!hl_parents[index].highlighted)
  {
    hl_parents[index].removeChild(hl_images[index]) ;
    hl_parents[index].appendChild(hl_images_hover[index]) ;  
    hl_parents[index].highlighted = true ;
  }

  // not sure why, but if you move the mouse too fast in firefox
  // the mouseout event won't fire. The following doesn't prevent
  // this, but it will at least prevent
  // more than one button from being highlighted:
  for (var i=0 ; i < hl_parents.length ; i++)
    if (i != index)
      unhighlight(i) ;
}

function unhighlight(index)
{
  if (hl_parents[index].highlighted)
  {
    hl_parents[index].removeChild(hl_images_hover[index]) ;
    hl_parents[index].appendChild(hl_images[index]) ;  
    hl_parents[index].highlighted = false ;
  }
}