
/*

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

*/

(function($) {

$.fn.UTGallery = function(options) 
{
	var imageURLs = options['images'];
	var imageLinks = options['links'] || [];
	
	if (options['randomizeImages']==null)
	{
		options['randomizeImages']=true;
	}
	
	if (options['randomizeImages'])
	{
		imageURLs.sort(function() {return 0.5 - Math.random()})
	}
	
	if (options['allowControls']==null)
	{
		options['allowControls']=true;
	}
	
	var allowControls=options['allowControls'];
	var interval=options['interval'] || 5000;
	var fadeSpeed=options['fadeSpeed'] || 2000;
	var doFades=options['doFades'];
	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;

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

	if (imageLinks.length>0)
	{
		$(this).css("cursor", "pointer");
	}

	$(this).click(function(e)
	{
		if (imageLinks.length>0)
		{
			if (imageOn==-1)
			{
				imageOn=0;
			}
			document.location.href=imageLinks[imageOn];
		}
		
		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',$(this).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',$(this).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=no;
	}
	
	this.updateImage=function()
	{
		var self = $(this);
		var image;
		if (!images[imageOn])
		{
			image = $('<img />')
			    .attr('src', imageURLs[imageOn])
				.css('position', 'absolute')
				.css('left', '0px')
				.css('top', '0px')
				.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);
