// Creates an image that changes when the user mouses over it.
// new HoverImage("someImage", "http://example.org/someImageUrl.jpg");
var HoverImage = Class.create({
    initialize: function(imageTag, mouseOverImage) {
        this.image = $(imageTag);

        this.offImage = new Image();
        this.offImage.src = this.image.src;

        this.onImage = new Image();
        this.onImage.src = mouseOverImage.replace(/&/g, '&');

        this.image.observe("mouseover", this.onMouseOver.bindAsEventListener(this));
        this.image.observe("mouseout", this.onMouseOut.bindAsEventListener(this));
    },

    onMouseOver: function(evt) {
        this.image.src = this.onImage.src;
    },

    onMouseOut: function(evt) {
        this.image.src = this.offImage.src;
    }
});

// Look through the document for images with an attribute "hover" and create a hover image object for each of them.
HoverImage.parseDocument = function() {
    var imgTags = document.getElementsByTagName("img");
    var images = $A(imgTags);
    images.each(function(image) {
        var hover = image.getAttribute("hover");
        if (hover)
            new HoverImage(image, hover);
    });
}

Event.observe(window, "load", HoverImage.parseDocument);