//***************************
// ImageSwapper Constructor *
//***************************
function CS_ImageSwapper(listener_wrapper, handler_wrapper)
{
	// get id's
	this.listener_wrapper	= document.getElementById(listener_wrapper);
	this.handler_wrapper	= document.getElementById(handler_wrapper);
	
	// set vars
	this.active_class		= 'active';
	
	if (this.listener_wrapper && this.handler_wrapper)
	{
		this.image_listener	= this.listener_wrapper.getElementsByTagName('img').item(0);
		this.image_handlers	= this.handler_wrapper.getElementsByTagName('img');
		
		// initialize fader
		if (this.image_handlers.length > 0)
		{
			this.init();
		}
	}
}

//**********************************
// Function initialize image fader *
//**********************************
CS_ImageSwapper.prototype.init = function()
{
	// create img tag
	if (!this.image_listener)
	{
		
		this.image_listener = this.createImageNode();
	}
	
	// set current image
	this.current_image					= this.image_handlers[0];
	this.current_image.className		= this.active_class;
	this.image_listener.src				= this.current_image.src;
	this.image_listener.style.display	= 'block';
	
	// set events
	this.events();
}

//*****************************
// Function create image node *
//*****************************
CS_ImageSwapper.prototype.createImageNode = function()
{
	// create
	var image_node = document.createElement('img');
	
	// add to node
	this.listener_wrapper.appendChild(image_node);
	
	// get and return node
	var image_listener	= this.listener_wrapper.getElementsByTagName('img').item(0);
	
	return image_listener;
}

//**********************
// Function set events *
//**********************
CS_ImageSwapper.prototype.events = function()
{
	// set vars
	var _this = this;
	
	for (var a=0; a<this.image_handlers.length; a++)
	{
		var image_handler = this.image_handlers[a];
		
		image_handler.onclick = function()
		{
			if (_this.current_image != this)
			{
				_this.current_image.className	= '';
				this.className					= _this.active_class;
				_this.current_image				= this;
				
				_this.image_listener.src			= this.src;
			}
		}
		
		image_handler.onmouseover = function()
		{
			if (_this.current_image != this)
			{
				this.className = _this.active_class;
			}
		}
		
		image_handler.onmouseout = function()
		{
			if (_this.current_image != this)
			{
				this.className = '';
			}
		}
	}
}