/* 
   CSS and DOM image rollovers 
   Simon Willison, 19th January 2003
   http://simon.incutio.com/
   
   This script is in the public domain.
   
   This script uses the DOM to apply a classic rollover effect to images in a 
   structurally marked up document. Images to which the effect will be applied
   must have a background image specified in CSS - it is this  background 
   image that will be displayed when the mouse is rolled over the image. The 
   image must also have its class set to "rollover". For example:
   
   <img src="state1.gif" id="stateimg" alt="Alt Text" class="rollover" 
        width="120" height="20" />
   
   Then in the CSS:
   
   img#stateimg {
     background-image: url(state2.gif);
   }
   
   The width and height attributes must be included on the img tag.
   
   The script works by swapping the visible image for a transparent gif (thus 
   making the background image visible). A single pixel transparent gif image
   called 'pix.gif' must be placed in the same directory as the HTML page.
   
   This script has been tested successfully in IE6, Mozilla 1.2 and Phoenix 
   0.5. It does not work in Opera 7 Beta 1, which I think is due to the 
   addEvent function failing for some reason.
*/

imageRollovers = new Array();

// Preload the transparent gif image
pixImage = new Image();
pixImage.src = '/img/spacer.gif';

function initImages() {
  imgs = document.getElementsByTagName('img');
  for (i = 0; i < imgs.length; i++) {
    img = imgs[i];
    // We only care about images with class="rollover"
    if (img.className == 'rollover') {
      // Make sure the image has an ID
      if (!img.id) {
        img.id = 'autoGeneratedImgId'+i;
      }
      // Record the default image src, height and width
      imageRollovers[img.id] = new Image();
      imageRollovers[img.id].src = img.src;
      // Add width and height attributes to the image, if they do not already exist
      // This is important as otherwise the image will reduce to a 1x1 pixel when
      // the user mouses over it.
      if (!img.getAttribute('width')) {
        img.setAttribute('width', imageRollovers[img.id].width);
        img.setAttribute('height', imageRollovers[img.id].height);
      }
      addEvent(img, 'mouseover', makeImgTransparent, true);
      addEvent(img, 'mouseout', makeImgNormal, true);
    }
  }
}

function makeImgTransparent(event) {
  /* Object detection due to differences between IE and Mozilla */
  if (event.srcElement) {
    img = event.srcElement;
  } else if (event.target) {
    img = event.target;
  } else {
    return;
  }
  img.src = '/img/spacer.gif';
}

function makeImgNormal(event) {
  /* Object detection due to differences between IE and Mozilla */
  if (event.srcElement) {
    img = event.srcElement;
  } else if (event.target) {
    img = event.target;
  } else {
    return;
  }
  img.src = imageRollovers[img.id].src;
}

/* From scottandrew.com: */
function addEvent(obj, evType, fn, useCapture){
  if (obj.addEventListener) {
    obj.addEventListener(evType, fn, useCapture);
    return true;
  } else if (obj.attachEvent){
    var r = obj.attachEvent("on"+evType, fn);
    return r;
  } else {
    // alert('Handler could not be attached');
    return false;
  }
}

addEvent(window, 'load', initImages, false);