/*
 * @class Base class for creating image rollovers. Instantiate after container div
 * Usage: var topnav = new W.Preload('topnav').select('topnav_main');
 * @param	[String]	container	id for div containing the rollover
 * @requires W
 * @requires W.Event
 */
W.Preload = function(container)
{
	this.init(container);
};



W.Preload.prototype = {
	images		: null,
	names		: null,
	selected	: null,
	loaded		: false,
	
	
	init : function(container)
	{
		var obj		= this;
		this.names 	= [];		// initialize array
		this.images	= [];		
		var index	= null;
		var name	= null;		// image name attribute
		
		
		// get images
		var imgs	= document.getElementById(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;
	},
	
	
	
	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;
		}
	}
};