/*
 * @class Base class for creating image rollovers. Instantiate after container div
 * Usage: var topnav = new W.Rollover('topnav');
 * Usage: var topnav = new W.Rollover('topnav').select('topnav_main');	// choose an image to be in the on state
 * Usage: var topnav = new W.Rollover('topnav').find_selected();			// discover if an image should be in an on state
 * @param	[String]	container	id for div containing the rollover
 * @requires W
 * @requires W.Event
 */
W.Rollover = function(container)
{
	this.init(container);
};



W.Rollover.prototype = {
	container	: null,
	images		: null,
	names		: null,
	selected	: null,
	loaded		: false,
	
	
	init : function(container)
	{
		var obj			= this;
		this.container	= document.getElementById(container);	// used in find_selected function
		this.names 		= [];									// initialize array
		this.images		= [];		
		var index		= null;
		var name		= null;									// image name attribute
		
		
		// get images
		var imgs	= this.container.getElementsByTagName('img');
		var src;
		var path;
		var suffix;

		for (var i = 0, max = imgs.length; i < max; ++i) {
			
			// assume that images with name attributes are rollovers
			if ((name = imgs[i].name) === '') { continue; }	// no image attribute, so img cannot be a rollover
			
			src	= imgs[i].src;
			
			// extract path
			if ((index = src.lastIndexOf('/')) != -1) {
				++index;
				path 	= src.substring(0, index);
			} 
			
			// extract suffix
			if ((index = src.lastIndexOf('.')) != -1) {
				suffix 	= src.substr(index + 1);
			}
			
			this.preload_image(path, name, suffix);
		}
		
		this.add_rollovers();
	},
	
	
	
	select : function(selected)
	{
		this.rollover(selected, true);
		
		this.selected	= selected;
	},
	
	
	
	unselect : function()
	{
		this.selected	= null;
	},
	
	
	
	find_selected : function()
	{
		var a	= this.container.getElementsByTagName('a');
		var url	= window.location.href;
		
		for (var i = a.length; --i >= 0; ) {
			if (a[i].href == url) {
				var img 	= a[i].getElementsByTagName('img')[0];
				if (!img) return false;
				var name	= img.name;
				if (name != '') {
					this.select(name);
					return true;
				}
			}
		}
		
		return false;
	},
	
	
	
	preload_image : function(path, name, suffix)
	{
		if (document.images) {
			this.names[this.names.length] = name;
			var on 					= name + '_on';
			var off					= name + '_off';
			this.images[on] 		= new Image();
			this.images[on].src 	= path + on + '.' + suffix;
			this.images[off]		= new Image();
			this.images[off].src	= path + off + '.' + suffix;
		}
	},
	
	
	
	add_rollover : function(name)
	{
		var obj		= this;
		var image 	= document.images[name];
		var a		= image.parentNode;
		if (image && a.tagName.toUpperCase() == 'A') {
			W.Event.add(a, 'mouseover', function() { obj.rollover(name, true); } );
			W.Event.add(a, 'mouseout', function() { obj.rollover(name, false); } );
		}
	},
	
	
	
	add_rollovers : function()
	{
		for (var i = 0, max = this.names.length; i < max; ++i) {
			this.add_rollover(this.names[i]);
		}
		this.loaded	= true;
	},
	
	
	
	rollover: function(name, active)
	{
		if (!this.loaded) { return; }
		if (name == this.selected) { return; }
		if (document.images && document.images[name]) {
			document[name].src = active? this.images[name + '_on'].src : this.images[name + '_off'].src;
		}
	}
};