/*

	UTGallery v0.2 (for jQuery)
	
	(C)opyright utopia 365 LLP 2009. All Rights Reserved.
	
	www.utopia365.com

*/



(function($) {

$.fn.UTGallery = function(options) 
{
	var imageURLs = options['images'];
	imageURLs.sort(function() {return 0.5 - Math.random()})
	
	var interval=options['interval'] || 5000;
	var fadeSpeed=options['fadeSpeed'] || 2000;
	var doFades=options['doFades'];
	var allowControls=options['allowControls'];
	if (allowControls==null)
	{
		allowControls=true;
	}
//	allowControls=true;
	if (doFades==null)
	{
		doFades=true;
	}
	var firstImageShown=false;
	var isPlaying=false;
	var images = [];
	var imageOn = -1;
	var timer=null;
	var _this = this;
	var controlsDiv;
	var buttonsDiv;
	var imagesDiv;
	var previousButton;
	var playButton;
	var pauseButton;
	var nextButton;
	var previousImage=null;

	var height=options['height'] || $(this).height();
	var width=options['width'] || $(this).width();

	$(this).css("overflow","hidden");

	$(this).click(function(e)
	{
		if (!timer)
		{
			_this.onPlayButton();
		}
		else
		{
			_this.stop();
		}
		return false;
	});
	
	$(this).hover(function(e)
	{
		 _this.showControls(e); 
	},
	function(e) 
	{ 
		_this.hideControls(e); 
	});
	

	$(this).append("<div id='" + $(this).attr("id") + "_images'></div>")
	imagesDiv=$("#" + $(this).attr("id") + "_images");
	imagesDiv.css("position", "absolute")
//	imagesDiv.css("background-color", "black")
	imagesDiv.css('left','0px');
	imagesDiv.css('top','0px');
	imagesDiv.css('width','100%');
	imagesDiv.css('height','100%');

	$(this).append("<div id='" + $(this).attr("id") + "_controls'></div>")
	controlsDiv=$("#" + $(this).attr("id") + "_controls");
	controlsDiv.css("position", "absolute");
	controlsDiv.css("background-color", "#000000")
	controlsDiv.css('left','0px');
	controlsDiv.css('top',height -40 + 'px');
	controlsDiv.css('width','100%');
	controlsDiv.css('height','40px');
	controlsDiv.css('opacity','0.75');
	controlsDiv.hide();

	$(this).append("<div id='" + $(this).attr("id") + "_controls_button'></div>")
	buttonsDiv=$("#" + $(this).attr("id") + "_controls_button");
	buttonsDiv.css("position", "absolute");
	buttonsDiv.css('left','0px');
	buttonsDiv.css('top',height -41 + 'px');
	buttonsDiv.css('width','100%');
	buttonsDiv.css('height','41px');
	buttonsDiv.css('border-top','1px solid #000000');
	buttonsDiv.hide();
	
	buttonsDiv.append("<div id='" + $(this).attr("id") + "_controls_play'><img src='/UTGallery/play_button_with_text.png' /></div>")
	playButton=$("#" + $(this).attr("id") + "_controls_play");
	playButton.css("position","absolute");
	playButton.css('width','40px');
	playButton.css('height','40px');
	playButton.css('left', '50%');
	playButton.css('top', '0px');
	playButton.css('margin-left', "-20px");
	playButton.css('margin-top', "-1px");
	playButton.css('cursor', 'pointer');
	playButton.css('opacity','0.25');
	playButton.attr('title', 'Play Slideshow')

	buttonsDiv.append("<div id='" + $(this).attr("id") + "_controls_pause'><img src='/UTGallery/pause_button_with_text.png' /></div>")
	pauseButton=$("#" + $(this).attr("id") + "_controls_pause");
	pauseButton.css("position","absolute");
	pauseButton.css('width','40px');
	pauseButton.css('height','40px');
	pauseButton.css('left', '50%');
	pauseButton.css('top', '0px');
	pauseButton.css('margin-left', "-20px");
	pauseButton.css('margin-top', "-1px");
	pauseButton.hide();
	pauseButton.css('cursor', 'pointer');
	pauseButton.css('opacity','0.25');
	pauseButton.attr('title', 'Pause Slideshow')

	buttonsDiv.append("<div id='" + $(this).attr("id") + "_controls_next'><img src='/UTGallery/next_button_with_text.png' /></div>")
	nextButton=$("#" + $(this).attr("id") + "_controls_next");
	nextButton.css("position","absolute");
	nextButton.css('width','40px');
	nextButton.css('height','40px');
	nextButton.css('left', '50%');
	nextButton.css('top', '0px');
	nextButton.css('margin-left', "20px");
	nextButton.css('margin-top', "-1px");
	nextButton.css('cursor', 'pointer');
	nextButton.css('opacity','0.25');
	nextButton.attr('title', 'Next Image')

	buttonsDiv.append("<div id='" + $(this).attr("id") + "_controls_previous'><img src='/UTGallery/previous_button_with_text.png' /></div>")
	previousButton=$("#" + $(this).attr("id") + "_controls_previous");
	previousButton.css("position","absolute");
	previousButton.css('width','40px');
	previousButton.css('height','40px');
	previousButton.css('left', '50%');
	previousButton.css('top', '0px');
	previousButton.css('margin-left', "-60px");
	previousButton.css('margin-top', "-1px");
	previousButton.css('cursor', 'pointer');
	previousButton.css('opacity','0.25');
	previousButton.attr('title', 'Previous Image')

	playButton.hover(function(e)
	{
		 $(this).css('opacity', '0.75')
	},
	function(e) 
	{ 
		 $(this).css('opacity', '0.25')
	});
	pauseButton.hover(function(e)
	{
		 $(this).css('opacity', '0.75')
	},
	function(e) 
	{ 
		 $(this).css('opacity', '0.25')
	});
	nextButton.hover(function(e)
	{
		 $(this).css('opacity', '0.75')
	},
	function(e) 
	{ 
		 $(this).css('opacity', '0.25')
	});
	previousButton.hover(function(e)
	{
		 $(this).css('opacity', '0.75')
	},
	function(e) 
	{ 
		 $(this).css('opacity', '0.25')
	});



	playButton.click(function(e)
	{
		e.stopPropagation();
		_this.onPlayButton();
		return false;
	});
	pauseButton.click(function(e)
	{
		e.stopPropagation();
		_this.stop();
		return false;
	});
	nextButton.click(function(e)
	{
		e.stopPropagation();
		if (timer)
		{
			clearTimeout(timer);
			timer=null;
			timer=setInterval(_this.onPlayTimer, interval);
		}
		fadeNextImage=false;
		_this.next();
		return false;
	});
	
	previousButton.click(function(e)
	{
		e.stopPropagation();
		if (timer)
		{
			clearTimeout(timer);
			timer=null;
			timer=setInterval(_this.onPlayTimer, interval);
		}
		fadeNextImage=false;
		_this.previous();
		return false;
	});

	this.onPlayButton=function()
	{
		imageOn++;
		if (imageOn==imageURLs.length)
		{
			imageOn=0;
		}
		fadeNextImage=true;
		_this.updateImage();
		_this.play();
	}

	this.next=function()
	{
		imageOn++;
		if (imageOn==imageURLs.length)
		{
			imageOn=0;
		}
		_this.updateImage();
	}

	this.previous=function()
	{
		imageOn--;
		if (imageOn<0)
		{
			imageOn=imageURLs.length-1;
		}
		_this.updateImage();
	}

	this.onPlayTimer=function()
	{
		imageOn++;
		if (imageOn==imageURLs.length)
		{
			imageOn=0;
		}
		fadeNextImage=true;
		_this.updateImage();
	}

	this.showControls=function()
	{
		if (allowControls)
		{
			controlsDiv.fadeIn(250);
			buttonsDiv.fadeIn(250);
		}
	}

	this.hideControls=function()
	{
		controlsDiv.fadeOut(250);
		buttonsDiv.fadeOut(250);
	}

	this.play=function()
	{
		playButton.hide();
		pauseButton.show();
		timer=setInterval(_this.onPlayTimer, interval);
		isPlaying=true;
	}
	
	this.stop=function()
	{
		playButton.show();
		pauseButton.hide();
		clearTimeout(timer);
		timer=null;
		isPlaying=false;
	}
	
	this.updateImage=function()
	{
		var self = $(this);
		var image;
		if (!images[imageOn])
		{
//			alert(imageURLs[imageOn]);
			image = $('<img />')
			    .attr('src', imageURLs[imageOn])
				.css('position', 'absolute')
				.css('left', '0px')
				.css('top', '0px');
//				imagesDiv.append(image);
//				image.hide();
				if(navigator.appName!="Microsoft Internet Explorer") // NOT IE
				{
					image.load(function() 
					{
						images[imageOn]=image;
						imagesDiv.append(image);
						image.hide();
						if (image.width())
						{
							image.css('width', image.width() + 'px');
							image.css('height', image.height() + 'px');
							image.css('left', ((imagesDiv.width()/2) - (image.width()/2)) + 'px');
							image.css('top', ((imagesDiv.height()/2) - (image.height()/2)) + 'px');
						}
						else
						{
							image.css('width', imagesDiv.width() + 'px');
							image.css('height', imagesDiv.height() + 'px');
						}
						if ((firstImageShown) && (fadeNextImage) && (doFades))
						{
							if (previousImage)
							{
	//							previousImage.fadeOut(fadeSpeed)
							}
							images[imageOn].fadeIn(fadeSpeed,function()
							{
								if (previousImage)
								{
	//								previousImage.remove();
								}
								previousImage=image;
							});
						}
						else
						{
							image.show();
							if (previousImage)
							{
	//							previousImage.remove();
							}
							previousImage=image;
						}
						firstImageShown=true;
						fadeNextImage=false;
			    	});
				}



							if(navigator.appName=="Microsoft Internet Explorer") // IS IE
							{
//								image.load(function() 
//								{
									images[imageOn]=image;
									imagesDiv.append(image);
									image.hide();
									if (image.width())
									{
										image.css('width', image.width() + 'px');
										image.css('height', image.height() + 'px');
										image.css('left', ((imagesDiv.width()/2) - (image.width()/2)) + 'px');
										image.css('top', ((imagesDiv.height()/2) - (image.height()/2)) + 'px');
									}
									else
									{
										image.css('width', imagesDiv.width() + 'px');
										image.css('height', imagesDiv.height() + 'px');
									}
									if ((firstImageShown) && (fadeNextImage) && (doFades))
									{
										if (previousImage)
										{
				//							previousImage.fadeOut(fadeSpeed)
										}
										images[imageOn].fadeIn(fadeSpeed,function()
										{
											if (previousImage)
											{
				//								previousImage.remove();
											}
											previousImage=image;
										});
									}
									else
									{
										image.show();
										if (previousImage)
										{
				//							previousImage.remove();
										}
										previousImage=image;
									}
									firstImageShown=true;
									fadeNextImage=false;
//						    	});
							}

				
				
		}
		else
		{
			if ((firstImageShown) && (fadeNextImage) && (doFades))
			{
				images[imageOn].hide();
				images[imageOn].fadeIn(fadeSpeed, function()
				{
					if (previousImage)
					{
//						previousImage.remove();
					}
					previousImage=image;
				});
			}
			else
			{
				if (previousImage)
				{
//					previousImage.remove();
				}
				previousImage=image;
			}
			imagesDiv.append(images[imageOn]);
			firstImageShown=true;
			fadeNextImage=false;
		}
	}

	$(function()
	{
		if (options['autoPlay']==true)
		{
			_this.onPlayButton();
		}
		else
		{
			_this.next();
		}
	});
};


})(jQuery);