/*--------------------------------------------------------------------------------

	rollovers.js: Rollovers class unobtrusively adds rollover effects images in 
	the document.
	
	Author: Clifton Karnes
	
	Constructor: Rollovers({ options }). Rollovers should be instantiated after 
	the page is loaded. There is no need to save a reference to the object.

	Options:

		selector: The class for images that have rollover states. "rollover" is 
		the default
		
		overImageSuffix: File suffix for over-state images. "-over" is the 
		default
		
		downImageSuffix: File suffix for down-state images. "-down" is the 
		default
		
		down: Boolean that determines whether images have a down state. false is 
		the default
		
		blur: Boolean to determine whether or not to blur the focus rectangle 
		onmousedown. true is the default

	HTML: The images in the document that you want to have rollover effects use 
	a specific classname, which is "rollover" by default. The over and down 
	images (if down images are used) need to have suffixes that identify their 
	states. These are "-over" and "- down" by default. As an example of the 
	default behavior: if the image name is "myImage.png", the over- state image 
	would be named 	"myImage-over.png" and the down-state image would be named 
	"myImage-down.png". Here's an example img tag: <img src="images/myImage.png" 
	class="rollover" />
	
	Requires: prototype.js
	
--------------------------------------------------------------------------------*/

var Rollovers = Class.create
({
	// Get any parameters that override the defaults and call makeRollovers.
	initialize: function(options)
	{
		this.options = Object.extend({ selector: "rollover", overImageSuffix: "-over", downImageSuffix: "-down", down: false, blur: true }, options || {});
		this.makeRollovers();
	},
	
	makeRollovers: function()
	{
		var rolloverClassname	= this.options.selector;
		var overSuffix			= this.options.overImageSuffix;
		var downSuffix 			= this.options.downImageSuffix;
		var isDown				= this.options.down;
		var isBlur				= this.options.blur
			
		var overStateImages = [];
		var downStateImages = [];
		
		// Get all the images in the file with a class name of "rollover".
		$$("img." + rolloverClassname).each
		(
			function(imageElement, i)
			{
				// Get this image's src string.
				var imageSource = imageElement.readAttribute("src");
				
				// Get this image's extension (.gif, .jpg, .png, and so on).
				var filetype = imageSource.substring(imageSource.lastIndexOf("."));
				
				// Preload the image by adding it to the over-state images array and extend it.
				overStateImages[i] = Element.extend(new Image());
				overStateImages[i].writeAttribute({ src: imageSource.replace(filetype, overSuffix + filetype) });

				if (isDown)
				{
					// Preload the image by adding it to the down-state images array and extend it.
					downStateImages[i] = Element.extend(new Image());
					downStateImages[i].writeAttribute({ src: imageSource.replace(filetype, downSuffix + filetype) });
				}

				// Note that all the event handlers defined below will run in the context of the image object
				// and all references to "this" inside those handler methods refer to that object.
			
				// If isBlur = true (the default) the anchor elements holding each image get the code below to remove 
				// the browser rectangles when the image is clicked.
				if (isBlur)
				{
					imageElement.up("a").onfocus = function()
					{
						if (this.blur) this.blur();	
					}
				}
				
				// Add the onmouseover event handler to the image object.
				imageElement.onmouseover = function()
				{
					this.writeAttribute({ src: this.readAttribute("src").replace(filetype, overSuffix + filetype) });
				};
			
				// Add the onmouseout event handler to the image object.
				imageElement.onmouseout = function()
				{
					var source = this.readAttribute("src");
					
					if (source.search(downSuffix) != -1)
					{
						this.writeAttribute({ src: source.replace(downSuffix + filetype, filetype) });
					}
					else
					{
						this.writeAttribute({ src: source.replace(overSuffix + filetype, filetype) });
					}
				};

				// If the images have a down state, add the down-state handlers.
				if (isDown)
				{
					// Add the onmousedown event handler to the image object.
					imageElement.onmousedown = function()
					{
						this.writeAttribute({ src: this.readAttribute("src").replace(overSuffix + filetype, downSuffix + filetype) });
					};
					
					// Add the onmouseup event handler to the image object.
					imageElement.onmouseup = function()
					{
						var source = this.readAttribute("src");
			
						if (source.search(downSuffix))
						{
							this.writeAttribute({ src: source.replace(downSuffix + filetype, filetype) });
						}
					};
				}
			}
		);
	}
});