// This javascript builds in automatic mouseover image toggling for any images
// in the document whose name ends in '-off.'
//
// The script expects images to be suffixed with -off and -on. For example,
//
// 1. <img src="my-image-off.gif">
//                                       
// On mouseover, 'my-image-on.gif' will be shown. On mouseout, 'my-image-off.gif' will be
// shown.
//
// 2. <img src="my-image.gif">
//
// This image name does not end in '-off.', so it is ignored.
//
// --
//
// To use, include this file into your HTML. Call xImageInit() after document has loaded 
// (i.e. at the foot of your HTML).

xImageSetOnLoad();

function xImageSetOnLoad() {
    // Set the init function to fire after page has loaded
    var oldOnload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = xImageInit;
    }
    else {
        window.onload = function() {
            oldOnload();
            xImageInit();
        }
    }
}

function xImageInit(){
    var imgNodes  = new Array();

    if (!document.getElementById) {
        return;
    }

    // Collect list of all images, set events for each, and save off and on 
    // versions of the images.
    imgNodes = document.getElementsByTagName('img'); 
    for (i = 0; i < imgNodes.length; i++) { 
        if (imgNodes[i].src.match('-off.')) {
            // Save on and off states of this image
            imgNodes[i].xImageSrcOff = imgNodes[i].src;
            imgNodes[i].xImageSrcOn  = imgNodes[i].src.replace('-off.','-on.');

            // Set current image to show 'off' mode
            imgNodes[i].src = imgNodes[i].xImageSrcOff;

            // Set onMouseOver event to show 'on' mode, and onMouseOut event to show 'off' mode
            imgNodes[i].onmouseover = function () {this.src = this.xImageSrcOn;};
            imgNodes[i].onmouseout  = function () {this.src = this.xImageSrcOff;};
        };
    }
}