/*-----------------------------------------------------------------------------------------------
 * Unobtrusive image rollovers
 *
 *      Usage:  Add this script to the head of your HTML file.  Then, add class="rollover"
 *              to any images you want to be rollovers.  Alternatively, you can add
 *              class="selected" class to the image tag and that image will be replaced with
 *              the selected image version.  This script will look for a file as the same name
 *              as the original, appending _over for the rollover image and _sel to the
 *              selected image.  This script also preloads the rollover images.
 *
 * Example filenames:
 *      Regular: /images/myImage.jpg
 *     Rollover: /images/myImage_over.jpg
 *     Selected: /images/myImage_sel.jpg
 *
 *   Requires:  prototype.js version 1.6+
 * Created by:  Mark Adams
 *-----------------------------------------------------------------------------------------------*/

var Rollover = Class.create({
    /*
     * Function: initialize()
     *
     * Initializes our class.  This binds an Ajax responder to catch
     * AJAX introduced rollovers.  This also calls the necessary functions
     * to start the rollovers running.
     */
    initialize: function(options) {
        this.setOptions(options);

        // Global Variables
        Rollover.imageLookup = new Hash();

        // When an ajax call is complete, re-register the rollovers (in case one was loaded by ajax)
        var ajaxRolloverHandler = {
            onComplete: function() {
                this.replaceSelected();
                this.activateRollovers();
            }.bind(this)
        };
        Ajax.Responders.register(ajaxRolloverHandler);

        // Run the rollovers
        this.replaceSelected();
        this.activateRollovers();
    },

    setOptions: function(options) {
        this.options = {
            rolloverSuffix: 'over',
            selectedSuffix: 'sel',
            suffixSeperator: '_'
        };
        Object.extend(this.options, options || {});
    },

    /*
     * Function: replaceSelected()
     *
     * Find all of the selected images and replace the original
     * image with the _sel version of the file. 
     */
    replaceSelected: function() {
        var selected = $$('img.selected');
        for (var i=0, il=selected.length; i<il; i++) {
            var extIndex = selected[i].src.lastIndexOf('.');
            var ext = selected[i].src.substr(extIndex);
            var filename = selected[i].src.substr(0, extIndex);
            selected[i].src = filename + this.options.suffixSeperator + this.options.selectedSuffix + "." + ext;
        }
    },

    /*
     * Function: findRollovers()
     *
     * Find all of the rollover images.  Load preparsed filenames of
     * the rollovers into an array to keep track of them for future use.
     */
    findRollovers: function() {
        var imageObj = new Image();
        var rollovers = $$('img.rollover');

        for (var i=0, il=rollovers.length; i<il; i++) {
            //Parse the filename and get the original
            var extIndex = rollovers[i].src.lastIndexOf('.');
            var ext = rollovers[i].src.substr(extIndex);
            var filename = rollovers[i].src.substr(0, extIndex);
            var overImage = filename + this.options.suffixSeperator + this.options.rolloverSuffix + ext;

            //Store the values
            Rollover.imageLookup.set(overImage, rollovers[i].src);
            Rollover.imageLookup.set(rollovers[i].src, overImage);

            //Preload the images
            imageObj.src = overImage;
        }
        return rollovers;
    },

    /*
     * Function: activateRollovers()
     *
     * This function adds the event listeners to the images we've identified
     * as being rollovers.
     */
    activateRollovers: function() {
        var rollovers = this.findRollovers();
        for (var i=0, il=rollovers.length; i<il; i++) {
            // Don't rollover "selected" images.
            if ( !rollovers[i].hasClassName("selected") ) {
                rollovers[i].observe('mouseover', this.respondToMouseOver);
                rollovers[i].observe('mouseout', this.respondToMouseOut);
            }
        }
    },

    /*
     * Function: respondToMouseOver(event)
     *
     * This is the function that is bound to our rollover.  This does
     * the actual rollover functionality.
     *
     * Input: event - the javascript event
     */
    respondToMouseOver: function(event) {
        var image = event.element();
        image.src = Rollover.imageLookup.get(image.src);
    },

    /*
     * Function: respondToMouseOut(event)
     *
     * This is the function that is bound to our rollover.  This does
     * the actual rollout functionality.
     *
     * Input: event - the javascript event
     */
    respondToMouseOut: function(event) {
        var image = event.element();
        image.src = Rollover.imageLookup.get(image.src);
    }

});

// Initialization
function initRollover(){
    var myRollover = new Rollover();
}
Event.observe(window, 'load', initRollover, false);