/**
 * @author Simon Hanukaev
 * 
 * To add a lightBox to a link on the page, the anchor tags should look
 * like this:
 * <a class="lightBoxLink" href="{imageUrl}" title="{imageCaption}">...</a>
 * {imageUrl} is the url of the image that will be shown in the lightBox.
 * {imageCaption} is the text that will be shown for each image.
 * 
 * Configurable constants:
 * LIGHT_BOX_LINK_CLASS - the class name of links that should open lightBox
 * 
 * Dependencies
 * jQuery 1.2.6
 */
(function () {
	/*global $, console */
	/*jslint browser: true */
	
	// Constants
	var LIGHT_BOX_LINK_CLASS = "lightBoxLink";
	
	// Private variables
	var lightBoxHorizontalPadding;
	var lightBoxVerticalPadding;
	var $lightBoxLinks;
	var numOfImages;
	var currentLightBoxIndex;
	
	var $progressBar, $lightBoxContent;
	var $lightBox, $img, $lightBoxControls;
	var $lightBoxImageCounter, $lightBoxImageDescription;
	
	// ========== Build LightBox jQuery, and append it to body ==========
	$(function(){
		// ==================================================
		//	<div id='lightBox'>
		//		<div id='lightBoxProgressBar'></div>
		//		<div id='lightBoxContent' class='clearfix'>
		//			<img id='lightBoxImage' alt=''/>
		//			<div id='lightBoxControls'>
		//				<a id='lightBoxPrev' href='#'></a>
		//				<a id='lightBoxNext' href='#'></a>
		//			</div>
		//			<a id='lightBoxClose' href='#'></a>
		//			<span id='lightBoxImageCounter'></span><br/>
		//			<span id='lightBoxImageDescription'></span>
		//		</div>
		//	</div>
		// ==================================================
		$lightBox = $("" +
				"<div id='lightBox'>" +
					"<div id='lightBoxProgressBar'></div>" +
					"<div id='lightBoxContent' class='clearfix'>" +
						"<img id='lightBoxImage' alt=''/>" +
						"<div id='lightBoxControls'>" +
							"<a id='lightBoxPrev' href='#'></a>" +
							"<a id='lightBoxNext' href='#'></a>" +
						"</div>" +
						"<a id='lightBoxClose' href='#'></a>" +
						"<span id='lightBoxImageCounter'></span><br/>" +
						"<span id='lightBoxImageDescription'></span>" +
					"</div>" +
				"</div>");
		$progressBar = $("#lightBoxProgressBar",$lightBox);
		$lightBoxContent = $ ("#lightBoxContent",$lightBox);
		$img = $("img",$lightBoxContent);
		$lightBoxControls = $("#lightBoxControls",$lightBoxContent);
		
		// Bind event handlers for next/prev buttons
		$("#lightBoxPrev",$lightBoxControls).bind("click", function() {
			var $prevLightBoxLink = $lightBoxLinks.eq(currentLightBoxIndex > 0 ? currentLightBoxIndex - 1 : numOfImages - 1);
			$lightBoxContent.fadeOut("normal",function() {
				loadImage($prevLightBoxLink.get(0));
			});
			return false;
		});
		$("#lightBoxNext",$lightBoxControls).bind("click", function() {
			var $nextLightBoxLink = $lightBoxLinks.eq(currentLightBoxIndex < numOfImages - 1 ? currentLightBoxIndex + 1 : 0);
			$lightBoxContent.fadeOut("normal",function() {
				loadImage($nextLightBoxLink.get(0));
			});
			return false;
		});
		
		// Bind event handler for close button
		$("#lightBoxClose",$lightBoxContent).bind("click",closeLightBox);
	
		$lightBoxImageCounter = $("#lightBoxImageCounter",$lightBoxContent);
		$lightBoxImageDescription = $("#lightBoxImageDescription",$lightBoxContent);
	
		// Set styles	
		$lightBox.css({
			display:			"none",
			zIndex:				100
		});
		$lightBoxContent.css("display","none");
	
		// Append to body
		$("body").append($lightBox);
		
		lightBoxHorizontalPadding = parseInt($lightBox.css("padding-left"),10) +
				parseInt($lightBox.css("padding-right"),10);
		lightBoxVerticalPadding = parseInt($lightBox.css("padding-top"),10) +
				parseInt($lightBox.css("padding-bottom"),10);
	
		// Initizalize lightbox links when DOM loads.
		initLightBox();
	});
	
	/**
	 * Ligh Box links initialization.
	 * This method need to be invoked when all light box links are loaded.
	 * <a class="lightBoxLink" href="{imgUrl}" title="{imgCaption}">...</a>
	 */
	window.initLightBox = function() {
		$lightBoxLinks = $("."+LIGHT_BOX_LINK_CLASS);
		numOfImages = $lightBoxLinks.length;
		
		if (numOfImages === 1) {
			$lightBoxControls.css("display","none");
			$lightBoxImageCounter.css("display","none");
		} else {
			$lightBoxControls.css("display","block");
			$lightBoxImageCounter.css("display","inline");
		}

		// Bind click event to the lightBoxLink
		$lightBoxLinks.bind("click", function(event) {
			event.preventDefault();
			event.stopPropagation();
			var lightBoxLink = this;
			LightBox.viewLightBox($lightBox,{
				verticalAlignCenter: true,
				callback: function() {
					loadImage(lightBoxLink);
				}
			});
		});
	};
	
	function loadImage(lightBoxLink) {
		currentLightBoxIndex = $lightBoxLinks.index(lightBoxLink);
		
		$lightBoxImageCounter.text("Image "+(currentLightBoxIndex+1)+" of "+numOfImages);
		$lightBoxImageDescription.text($(lightBoxLink).attr("title"));
		
		// Show ajax loader.
		$progressBar.css("display","block");
	
		var imgSrc = $(lightBoxLink).attr("href");
		var img = new Image();
		img.onload = function() {
			if ($lightBox.css("display") == "none") {
				return;
			}
			$img.attr("src",img.src);
			$img.css({
				width:			img.width+"px",
				height:			img.height+"px"
			});
			
			$progressBar.css("display","none");
			
			var newWidth = img.width;
			var newHeight = $lightBoxContent.height();
			
			var newMarginLeft = - Math.round((newWidth+lightBoxHorizontalPadding)/2);
			var newTop = LightBox.center.top - Math.round((newHeight+lightBoxVerticalPadding)/2);
			$lightBox.animate({
				marginLeft:		newMarginLeft+"px",
				top:			newTop+"px",
				width:			newWidth+"px",
				height:			newHeight+"px"
			},500,function() {
				$lightBoxContent.fadeIn("normal");
			});
		};
		img.src = imgSrc;
	}
	
	function closeLightBox(event) {
		event.preventDefault();
		event.stopPropagation();
		$lightBoxContent.css("display","none");
		LightBox.closeLightBox();
	}
	
})();