/*
 * * * * * * * * * * * * * * * * * * * * * *
 *	  s l a s h j q u e r  y . c  o m
 * Gallery v. 1.1 - jQuery gallery widget
 * Copyright (c) 2008 Rasmus Styrk
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 * * * * * * * * * * * * * * * * * * * * * *
*/
 
(function($){
	$.fn.gallery = function(options) 
	{	  
		/*	Default values
		*/
		var defaults = {
				showTitle: true,
				showAlt: true,
				showUrl: true,
				showNav: true,
				showSlide: false,
				imgMaxWidth: 600,
				imgMaxHeight: 400,
				slideshowDelay: 2500,
				spinnerDelay: 750,
				opacity: 1
		};
		
		var options = $.extend(defaults, options);
		
		/*	Gallery variables
		*/
		var parent = this;
		var now = new Date();
		var guid = now.getTime();
		
		/*	Image container and slideshow status
		*/
		var currentImage;
		var playing = false;
		
		/*	DOM operators ;o
		*/
		var body = $("body");

		/*	Gallery popup html
		*/
		var gPopup = "<div id='galleryPopup' style='display:none;'>\
							<div class='content' style='position:relative !important;'>\
								<h1></h1>\
								<div class='nav' style='float:right;'>\
									<a href='javascript://' class='prev'>previus</a> \
									<a href='javascript://' class='slideshow'>play</a> \
									<a href='javascript://' class='next'>next</a>\
								</div>\
								<div class='alt'></div>\
								<div class='body'></div>\
								<div class='url'></div>\
							</div>\
						</div>";
		
		/*	Gallery loader html
		*/
		var gLoader = "<div id='galleryLoader' style='display:none;'><img id='spinner' src='../spinner.gif'></div>";
		
		/*	Appending it to the DOM
		*/
		body.append(gPopup);
		body.append(gLoader);
		
		/*	lastly we assign our containers to variables for later use 
		*/
		var popupElm = $("#galleryPopup");
		var loaderElm = $("#galleryLoader");
				
		/*	Cycle through the selected images
		*/
		var i = 0;
		var images = [];
		
		$("img", parent).each
		(
			function()
			{
				/*	helpers
				*/
				var obj = $(this);
				obj.attr("id", i);
				
				var image = [];
				
				/*	Set image variables for later use
				*/
				image.src = obj.attr("src");
				image.title = obj.attr("title");
				image.alt = obj.attr("alt");
				image.id = obj.attr("id");
				
				/*	Saves our variables in array
				*/
				images[i] = image;
				
				/*	Indicates that this image is click-able
				*/
				obj.css("cursor", "pointer");

				/*	Make image click-able
				*/
				obj.bind("click", loadImage);
				
				/*	id counter
				*/
				i++;
			}
		);
		
		/*	Play function for our slideshow
		*/
		function play()
		{
			/*	If we're playing we're playing.. ehh?
			*/
			if(playing)
			{
				/*	Fake-click next image
				*/
				$(".next", popupElm).click();
				
				/*	loop our play function ;-)
				*/
				setTimeout(play, options.slideshowDelay);
			}	
		}
		
		/*	Toggle function for our slideshow (start/stop)
		*/
		function toggleSlide()
		{
			if(playing)
			{
				$(".slideshow", popupElm).html("play");
				playing = false;
			}
			else
			{	
				$(".slideshow", popupElm).html("pause");
				playing = true;
				play();
			}
		}
		
		/*	Putting spinner while loading image
		*/
		function loadImage(e)
		{				
			/*	We unbind all click events, just in case!
			*/
			$("*", popupElm).unbind("click");

			/*	If we press next/play we want to hide our content before loading new
			*/
			if(popupElm.is(":visible"))
			{
				$(".content", popupElm).fadeOut("fast");
			}
			
			/*	Check if we're already spinning, if not- lets spin!
			*/
			if(!loaderElm.is(":visible"))
			{
				/*	Position our spinner ;-)
				*/
				loaderElm.css
				(
					{
						position: "absolute",
						top: getPageScroll()[1] + ((getPageHeight() / 4) - (popupElm.height()/6)),
						left: (getPageWidth() / 2)
					}
				).fadeIn("fast");
			}
			
			/*	Update popup layout/features
			*/
			updatePopup();
			
			/*	Find clicked image data
			*/
			data = images[$(e.target).attr("id")];

			/*	Create the image object
			*/
			currentImage = new Image();
			
			/*	Set image data
			*/
			currentImage.src = data.src;
			currentImage.title = data.title;
			currentImage.alt = data.alt;
			currentImage.id = data.id;
			currentImage.guid = guid;
			
			/*	Resize image if to big
			*/
			currentImage.height = (currentImage.height > options.imgMaxHeight) ? options.imgMaxHeight : currentImage.height;					
			currentImage.width = (currentImage.width > options.imgMaxWidth) ? options.imgMaxWidth : currentImage.width;	
			
			setTimeout(putImage, options.spinnerDelay);	
		}
		
		/*	Creates popup and shows all info
		*/
		function putImage()
		{
			/*	If image is loaded we continue
			*/
			if(currentImage.complete)
			{
				/*	Ok image is loaded, lets hide our spinner
				*/
				loaderElm.hide();
				
				/*	Show the image
				*/
				$(".body", popupElm).html(currentImage);
				
				/*	Check if we want to see additional image informations
				*/
				if(currentImage.title) $("h1", popupElm).html(currentImage.title);
				if(currentImage.alt) $(".alt", popupElm).html(currentImage.alt);
				if(currentImage.src) $(".url", popupElm).html(currentImage.src);
				
				/*	Create navigation
				*/
				// Toggle slide (start/stop)
				$(".slideshow", popupElm).bind("click", toggleSlide);
			
				// Nav: previus image
				$(".prev", popupElm).attr("id", (currentImage.id == 0) ? (images.length-1) : (currentImage.id-1));
				$(".prev", popupElm).bind("click", loadImage);
					
				// Nav: next image
				$(".next", popupElm).attr("id", (currentImage.id == (images.length-1) ? 0 : (currentImage.id-1+2)));
				$(".next", popupElm).bind("click", loadImage);
				
				/*	If popup is already visible we only want to fade-in the content, not the whole box
				*/
				if(popupElm.is(":visible"))
				{
					$(".content", popupElm).fadeIn("slow");
				}
				else
				{
					$(".content", popupElm).show();
					popupElm.fadeIn("slow");
				}
				
				/*	Positioning the popup
				*/
				popupElm.css
				(
					{
						top: getPageScroll()[1] + ((getPageHeight() / 5) - (popupElm.height() / 6)),
						left: (getPageWidth() / 2) - (popupElm.width() / 2),
						height: popupElm.height(),
						width: popupElm.width()
					}
				)

				/*	Bind functions for hiding the popup
				*/
				body.bind("click", hideImage);
				
				/*document.bind
				(
					'keydown.', 
					function(e) 
					{
						if (e.keyCode == 27) hideImage(e)
						return true
					}
				)*/
			}
			else
			{
				setTimeout(putImage, 1);	
			}
		}
		
		/*	We update our popup for the current gallery
		*/
		function updatePopup()
		{
			/*	Animate our popup
			*/
			if(options.opacity <= 1 && options.opacity >= 0.1) popupElm.animate({ opacity: options.opacity });
					
			/*	Give all inside the popup a unique id
			*/
			$("*", popupElm).attr("guid", guid);			
			
			/*	Enable/disable features
			*/
			if(options.showTitle) $("h1", popupElm).show(); else $("h1", popupElm).hide();
			if(options.showAlt) $(".alt", popupElm).show(); else $(".alt", popupElm).hide();
			if(options.showUrl) $(".url", popupElm).show(); else $(".url", popupElm).hide();
			
			if(options.showNav)
			{
				$(".prev", popupElm).show(); 
				$(".next", popupElm).show(); 
			}
			else
			{
				$(".prev", popupElm).hide(); 
				$(".next", popupElm).hide(); 
			}
			
			if(options.showSlide) $(".slideshow", popupElm).show(); else $(".slideshow", popupElm).hide();
		}
		
		/*	Hide popup
		*/
		function hideImage(e)
		{
			/*	Check if we clicked outside the image
			*/
			
			if($(e.target).attr("guid") != guid)
			{
				/*	Hide and unbind click events
				*/
				if(playing)
				{
					$(".slideshow", popupElm).html("play");
					playing = false;
				}
				
				popupElm.hide();
				body.unbind("click", hideImage);
			}
		}
		
		/*	 getPageScroll() by quirksmode.com
		*/
		function getPageScroll() 
		{
			var xScroll, yScroll;
			if (self.pageYOffset) 
			{
				yScroll = self.pageYOffset;
				xScroll = self.pageXOffset;
			} 
			else if (document.documentElement && document.documentElement.scrollTop) 
			{
				yScroll = document.documentElement.scrollTop;
				xScroll = document.documentElement.scrollLeft;
			} 
			else if (document.body) 
			{
				yScroll = document.body.scrollTop;
				xScroll = document.body.scrollLeft;	
			}
			return new Array(xScroll,yScroll) 
		}
	
		/*	getPageHeight by quirksmode.com
		*/
		function getPageHeight() 
		{
			var windowHeight
			if (self.innerHeight) 
			{
				windowHeight = self.innerHeight;
			} 
			else if (document.documentElement && document.documentElement.clientHeight)
			{
				windowHeight = document.documentElement.clientHeight;
			}
			else if (document.body)
			{
				windowHeight = document.body.clientHeight;
			}
			return windowHeight
		}

		function getPageWidth() 
		{
			var windowWidth
			if (self.innerWidth) 
			{
				windowWidth = self.innerWidth;
			} 
			else if (document.documentElement && document.documentElement.clientWidth)
			{
				windowWidth = document.documentElement.clientWidth;
			}
			else if (document.body)
			{
				windowWidth = document.body.clientWidth;
			}	
			return windowWidth
		}
	}
})(jQuery);