var MootoolsJSBanner = new Class({
	Implements: [Options, Events],
	
	Binds: ["Show", "Start", "Stop", "ShowImage", "DisplayImage", "initializeThumbnailView", "SetImagesMorphTime", "SetImagesMorphTimeNormal", "SetImagesMorphTimeClick"],
	
	options: {
		object_name: "JSBanner",
		width: 547,
		height: 174,
		image_amount: 6,
		interval: 5000,
		fade_duration: 1000,
		fade_duration_click: 100,
		show_thumbnails: false,
		thumbnail_element: "slideshow-thumbnails",
		thumbnail_src_normal: "",
		thumbnail_src_over: ""
	},
	
	images: null,
	
	currentIndex: 0,
	
	interval: null,
	
	initialize: function(element, options) {
		this.setOptions(options);
		this.element = $(element);
		
		$(this.options.thumbnail_element).style.visibility = "hidden";

		this.images = this.element.getElements("img");
		
		for (var i=0; i<this.images.length; i++)
		{
			if(i > 0) {
				this.images[i].style.opacity = "0";
				this.images[i].style.zIndex = "1";
			}else{
				this.images[i].style.zIndex = "111";
			}
		}
		
		this.SetImagesMorphTimeNormal();
		
		if (this.images.length <= 1)
		{
			this.DisplayImage(0);
			this.Stop();
			setTimeout(this.Stop, 500);
			setTimeout(this.Stop, 1000);
		}
		else
		{
			this.DisplayImage(0);
			this.initializeThumbnailView();
			setTimeout(this.initializeThumbnailView, 500);
			setTimeout(this.initializeThumbnailView, 1000);
		}
	},
	
	SetImagesMorphTime: function(duration){
		for (var i=0; i<this.images.length; i++)
		{
			this.images[i].get('morph').constructor(this.images[i], {
				duration: duration,
				transition: 'linear',
				link: 'chain',
				fps: 50
			});
		}
	},
	SetImagesMorphTimeNormal: function() { this.SetImagesMorphTime(this.options.fade_duration); },
	SetImagesMorphTimeClick: function() { this.SetImagesMorphTime(this.options.fade_duration_click); },
	
	
	initializeThumbnailView: function()
	{
		if (this.images.length <= 1) return false;
		
		if (this.options.show_thumbnails == true)
		{
			var thumbnail_html = "";
			thumbnail_html += '<table border="0" celladding="0" cellspacing="0">';
			thumbnail_html += '<tr>';
			for (var i=0; i<this.options.image_amount; i++)
			{
				if (i == this.currentIndex)
				{
					thumbnail_html += '<td style="width:5px;">&#160;&#160;</td><td><img onclick="'+this.options.object_name+'.DisplayImage('+i+');" src="'+this.options.thumbnail_src_over+'" style="cursor:pointer;cursor:hand;" alt="" /></td>';
				}
				else
				{
					thumbnail_html += '<td style="width:5px;">&#160;&#160;</td><td><img onmouseout="this.src=\''+this.options.thumbnail_src_normal+'\'" onmouseover="this.src=\''+this.options.thumbnail_src_over+'\'" onclick="'+this.options.object_name+'.DisplayImage('+i+');" src="'+this.options.thumbnail_src_normal+'" style="cursor:pointer;cursor:hand;" alt="" /></td>';
				}
			}
			thumbnail_html += '</tr>';
			thumbnail_html += '</table>';
			$(this.options.thumbnail_element).innerHTML = thumbnail_html;
			
			$(this.options.thumbnail_element).style.left = this.element.getCoordinates().width - $(this.options.thumbnail_element).getCoordinates().width - 5 + "px";
			$(this.options.thumbnail_element).style.top = this.element.getCoordinates().height - $(this.options.thumbnail_element).getCoordinates().height - 5 + "px";
			
			$(this.options.thumbnail_element).style.visibility = "visible";
		}
	},
	
	Start: function()
	{
		this.ShowImage(this.currentIndex);
		this.currentIndex = (this.currentIndex < this.images.length - 1) ? this.currentIndex+1 : 0;
		this.initializeThumbnailView();
		this.interval = setTimeout(this.Start, this.options.interval);
	},
	
	Stop: function()
	{
		// When the interval is null exit the function because clearInterval could throw an error.
		if (this.interval == null) return false;
		
		clearInterval(this.interval);
		this.interval = null;
	},
	
	ShowImage: function(index)
	{
		var index1 = index;
		var index2 = (index < this.images.length - 1) ? index+1 : 0;
		this.Show(index1, index2);
	},
	
	Show: function(index1, index2)
	{
		this.images[index1].get('morph').cancel();
		this.images[index2].get('morph').cancel();
		this.images[index1].morph({opacity: 0}).set("styles", {zIndex: 1});
		this.images[index2].morph({opacity: 1}).set("styles", {zIndex: 111});
	},
	
	DisplayImage: function(index)
	{
		this.SetImagesMorphTimeClick();
		
		this.Stop();
		this.currentIndex = index;
		this.initializeThumbnailView();
		
		for (var i=0; i<this.images.length; i++)
		{
			if (i != this.currentIndex)
			{
				this.images[i].get('morph').cancel();
				this.images[i].morph({opacity:0}).set("styles", {zIndex: 1});
			}
		}
		this.images[this.currentIndex].get('morph').cancel();
		this.images[this.currentIndex].morph({opacity:1}).set("styles", {zIndex: 111});
		this.interval = setTimeout(this.Start, this.options.interval);
		
		this.SetImagesMorphTimeNormal();
	}
	
});