/* mouseover effect on an image, toggles visibility of two images depending
on if mouse is over or not over the images. images should have the same
position. optionally another element may be toggled visibile on mouseover.
visibility is toggled via adding or removing the class 'hidden', assuming
that in css this class is defined to 'visibility: hidden'.

parameters:

outImage, overImage: the images to be shown when mouse is over the images
or out of the images.

overHeader: optionally, will be toggled to be shown if mouse is over the images.

*/
function mouseOverImage (outImage, overImage, overHeader) {
   var self = this;
   var outImage = $(outImage);
   var overImage = $(overImage);
   if (overHeader) var overHeader = $(overHeader)

   this.over = function () {
      Element.addClassName(outImage, 'hidden');
      Element.removeClassName(overImage, 'hidden');
      if (overHeader)
         Element.removeClassName(overHeader, 'hidden');
   }
   this.out = function () {
      Element.addClassName(overImage, 'hidden');
      Element.removeClassName(outImage, 'hidden');
      if (overHeader)
         Element.addClassName(overHeader, 'hidden');
   }

   outImage.onmouseover = this.over;
   overImage.onmouseover = this.over;
   outImage.onmouseout = this.out;
   overImage.onmouseout = this.out;

   empty = function () {}
   this.remove = function () {
      outImage.onmouseover = empty;
      overImage.onmouseout = empty;
   }
}