(function($) {

    //There are a few different ways to configure the rollover.
    //you can specified values using attributes on the triggering elemement.
    //e.g.
    //<img rolltarget="#changingimage" rollsrc="imagetochangeto.jpg">
    //
    //rolltarget (defaults to same element if not specified)
    //(using css selectors (passed in to jQuery() function as a selector).
    //specifies which element(s) to change the src of
    //
    //
    //rollsrc specifies what image to change to. (note only one rollsrc can be specified so
    //if rolltarget matches multiple elements they all change to the same image.
    //
    //
    //You have more controll by passing options into the rollover plugin.
    //e.g
    //
    //	$('#introductionLabel').rollover({
    //		targets: {
    //			1: {el: '#introductionLabel' ,src: 'introduction2.png'},
    //			2: {el: '#introductionRedBox', src: 'introduction2.jpg'}	
    //		}
    //	});
    //
    //	//	the above tells the plugin that rolling over $('#introductionLabel') will trigger 2 elements to
    //	change #introductionLabel (itself) will change to introduction2.png and
    //  #introductionRedBox will change to introduction2.jpg
    //  so when we rollover the image it can change many others to other src's.
    //
    //
    //	$('#introductionLabel, #introductionRedBox').rollover({
    //		targets: {
    //			1: {el: '#introductionLabel' ,src: 'introduction2.png'},
    //			2: {el: '#introductionRedBox', src: 'introduction2.jpg'}	
    //		}
    //	});
    //
    // //same as the first example but the two elements work in concert.
    //
    //
    //
    $.fn.rollover = function(options) {

        var opts = $.extend({}, $.fn.rollover.defaults, options);

        return this.each(function() {
            //  do something with $(this).
            //  this is where all of the core plug in code belongs

            //Preload the rollovers (I think this works :) )	
            var preloaded;
            preloaded = $('<img src=' + $(this).attr('rollsrc') + '>');


            var target;

            //If rollover configured by element attributes, then set it up
            if (!opts.targets) {

                $(this).hover(
					function() {

					    if (typeof ($(this).attr('rolltarget')) == 'undefined') {
					        target = $(this);
					    } else {
					        target = $($(this).attr('rolltarget'));
					    }

					    $(this).attr('originalSrc', $(this).attr('src'));
					    target.attr('src', $(this).attr('rollsrc'));
					},
					function() {
					    target.attr('src', $(this).attr('originalSrc'));
					}

				);

                //If rollover configured by passed in options, then set those up 
            } else {

                $(this).hover(

					function() {
					    for (var propertyName in opts.targets) {
					        if (opts.targets[propertyName].src) {
					            $(propertyName).attr('originalSrc', $(propertyName).attr('src'));
					            $(propertyName).attr('src', opts.targets[propertyName].src);
					        } else {
					            if (typeof (opts.targets[propertyName].inFunction) == 'function') {
					                opts.targets[propertyName].inFunction($(propertyName));
					            }
					        }
					    }
					},
					function() {
					    for (var propertyName in opts.targets) {
					        if (opts.targets[propertyName].src) {
					            $(propertyName).attr('src', $(propertyName).attr('originalSrc'));
					        } else {
					            if (typeof (opts.targets[propertyName].outFunction) == 'function') {
					                opts.targets[propertyName].outFunction($(propertyName));
					            }
					        }
					    }
					}

				);


            }

        });
    };

    // default options - these are used of none others are specified
    $.fn.rollover.defaults = {
};


//  invoke the function we just created passing it
//  the jQuery object
})(jQuery);