(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);