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

   $RCSfile: rollovers.js,v $ $Name:  $
   $Date: 2006/01/25 05:34:57 $ $Revision: 1.7 $
   ============================================================================
   When        Who        What
   ----------------------------------------------------------------------------
   2006-01-20  amm        Rollovers constructor created
   ============================================================================

   Notes:

	- JavaScript object to create image rollovers.  

	- The .swap method is what actually changes the image on rollover.
	  The first parameter is the id of the image in your rollovers object
	  that you want to change. The second parameter is the html element
	  that you want it changed on.

	- When you call .add the image will be named automatically according
	  to its file name.  There is an optional second param for naming it
	  something else.

   Usage:   
   
	<script src="/genjs/rollovers.js"></script>
	<script>
	// create the object
	var rollovers = new Rollovers();

	// set properties
	rollovers.suffix = "-r";
	rollovers.path = "/images/";

	// then add your images
	rollovers.add("shirts.jpg");
	rollovers.add("sign-up.jpg");
	</script>

	<img src="/images/shirts.jpg"
		onmouseover="rollovers.swap('shirts', this);"
		onmouseout="rollovers.swap('shirts', this);">

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


function Rollovers(images_list, img_suffix, img_path)
{
	// variables
	var STATE_MOUSEOUT = 0;
	var STATE_MOUSEOVER = 1;
	var img_over;
	var images_list = new String(images_list);
	var parent_obj = this;  // for reference in sub-functions

	// properties
	this.name = "Rollovers";
	this.images_list = (arguments.length > 0) ? images_list : '';
	this.images_list_arr = images_list.split(',');
	this.suffix = (arguments.length > 1) ? img_suffix : "_over";
	this.path = (arguments.length > 2) ? img_path : "/images/";
	this.images = new Object();

	// process: turn the optional list of images into objects
	this.process = function()
	{
		// create rollovers
		for (i = 0; i < this.images_list_arr.length; i++)
		{
			this.add(this.images_list_arr[i]);
		}
	}

	// add: add an image to the images collection
	this.add = function(img, id)
	{
		var image_filename = new String(img);					// myimage.jpg
 		var img = image_filename.substr(0, image_filename.lastIndexOf('.') );	// myimage
		var ext = image_filename.substr(image_filename.lastIndexOf('.') + 1);	// jpg
		var id = (id) ? id : img;

		// create the image object along with .out and .over image paths; set the initial src to .out and set the state accordingly
		this.images[id] = new Image();
		this.images[id].out = this.path + img + "." + ext;
		this.images[id].over = this.path + img + this.suffix + "." + ext;
		this.images[id].src = this.images[id].out;
		this.images[id].state = STATE_MOUSEOUT;

		// create the over image so that it gets cached
		img_over = new Image();
		img_over.src = this.images[id].over;
	}

	this.swap = function(id, element)
	{
		if (parent_obj.images[id].state === STATE_MOUSEOUT)
		{
			element.src = parent_obj.images[id].over;
			parent_obj.images[id].state = STATE_MOUSEOVER;
		}
		else if (parent_obj.images[id].state === STATE_MOUSEOVER)
		{
			element.src = parent_obj.images[id].out;
			parent_obj.images[id].state = STATE_MOUSEOUT;
		}
	}


	// constructor initializations: if there's an images_list, process it
	if (this.images_list_arr.length != 0)
	{
		this.process();
	}
}