/*
	Author:		Andy LeMay
	Date:		1 August 2010
	Version:	1.0
	Notes:
	
	Assuming you have a bunch of elements on the page that have the classname "lite_lightbox"
	the following code will enable this lightbox plugin on them:
	
	$(".lite_lightbox").each(
		function(){
			$(this).aslLiteLightbox({});
		}
	);
	
	For more specific control over the lightbox, define a settings object:
	
	var _settings = {finalOverlayOpacity:.5, transitionDuration:500, overlayBackgroundColor:"#F00"};
	
	And pass them to the plugin constructor:
	
	$(".lite_lightbox").each(
		function(){
			$(this).aslLiteLightbox({_settings});
		}
	);
	
	For a list of available settings, see the bottom of this file.
*/


(function($){
	
	// Class definition:
	
	var ASLLiteLightbox = function(pElement, pSettings){
		
		var _element = $(pElement);
		var _settings = pSettings;
		
		// add this instance to the DOM node of the element
		_element.data('ASLLiteLightbox', this);
		
		// used to call public methods from internal private methods
		var _obj = this;
		
		/*
		*
		* Utility
		*
		**/
		
		var debug = function(pSource, pMessage, pLevel) {
			if(window.console && window.console.log){
				window.console.log("[" + pLevel + "]: " + pSource + ": " + pMessage);
			}
		}
		
		/*
		*
		* Private
		*
		**/
		
		var createLiteLightbox = function(){
			
			$("body")
				.css({"overflow-y":"hidden"})
				.append('<div class="lite_lightbox_overlay"></div><div class="lite_lightbox_container"></div>');
			
			var _topOffset = $(window).scrollTop();
			
			$(".lite_lightbox_overlay")
				.css({"top":_topOffset, "background":_settings.overlayBackgroundColor, "z-index":_settings.zIndexStart}).animate({opacity: _settings.finalOverlayOpacity}, 250, onFadeInComplete);
			
		}
		
		var positionLoadedImage = function(e){
      
      
			var __width = $(".lite_lightbox_container img").width();
			var __height = $(".lite_lightbox_container img").height();
			var _topOffset = $(window).scrollTop() + ($(window).height() / 2) - (__height / 2);
			
			$(".lite_lightbox_container")
				.css({
					"top":_topOffset,
					"left":"50%",
					"width":__width,
					"height":__height,
					"margin-left": -(__width / 2),
					"padding":_settings.containerPadding,
					"background-color":_settings.containerBackgroundColor,
					"z-index":_settings.zIndexStart + 1
				})
				.animate({"opacity":"1"}, _settings.transitionDuration, "linear");
		}
		
		/*
		*
		* Handlers
		*
		**/
		
		var onElementClick = function(e){
			e.preventDefault();
			createLiteLightbox();
		}
		
		var onFadeInComplete = function(e){
			$(".lite_lightbox_overlay").click(onCloseClick).css({"cursor":"pointer"});
			$(".lite_lightbox_container").html('<img src="' + _element.attr("href") + '" alt="" />');
			$(".lite_lightbox_container img").load(positionLoadedImage);
			$(".lite_lightbox_container").click(onCloseClick).css({"cursor":"pointer"});
		}
		
		var onOverlayFadeOutComplete = function(e){
			// clean up
			$(".lite_lightbox_overlay, .lite_lightbox_container").remove();
			$("body").css({"overflow-y":"visible"})
		}
		
		var onContainerFadeOutComplete = function(e){
			$(".lite_lightbox_overlay")
				.animate({opacity: 0}, _settings.transitionDuration, onOverlayFadeOutComplete);
		}
		
		var onCloseClick = function(e){
			$(".lite_lightbox_container")
				.animate({opacity: 0}, _settings.transitionDuration, onContainerFadeOutComplete);
		}
		
		// bind the click to the handler
		_element.click(onElementClick);

	}

	// jQuery Wrapper:
	jQuery.fn.aslLiteLightbox = function(pOptions){
		
		var defaultSettings = {
			id: "aslLiteLightbox",
			transitionDuration: 200,
			zIndexStart: 100,
			overlayBackgroundColor: "#000",
			finalOverlayOpacity: .75,
			containerBackgroundColor: "#FFF",
			containerPadding: "20px"
		};
	
		var _settings = $.extend(defaultSettings, pOptions);
		
		return new ASLLiteLightbox(this, _settings);
	}
	
})(jQuery);