/**
 * JS
 * imglightbox.js
 * 
 * @author msavary
 * Copyright 2010-2011 © USER STUDIO. All Rights Reserved.
 * 
 * img lightbox handling
 * 
 */


//returns the requested GET parameter from the specified URL or window location by default
function getURLParam(param, url) {
    if (!url) url = window.location.href;
    var regex = '[?&]' + param + '=([^&#]*)';
    var results = (new RegExp(regex)).exec(url);
    if(results) return results[1];
    return 0;
}



//binds imgLightboxLink <a>'s click events with startImgOverlay method
$(document).ready(function(){
    bindImgLightboxLinks(0);
});
function bindImgLightboxLinks(id) {
    // make string for optional container id and add a click event
	$((id!=0 ? id+" " : "")+".imgLightboxLink").click(function(){
		lightboxLink = $(this).attr("href");
		window.startImgOverlay(lightboxLink);
		return false;
	});
}



function startImgOverlay(lightboxLink) {
    //get the body scroll position and height
    var bodyScrollTop = $(window).scrollTop(); //only works if body has overflow
    var bodyScrollHeight = $(window).height();
    var bodyScrollWidth = $(window).width();
    var docHeight = $(document).height();
    
    //make sure there aint no nuttin
    $(".lightboxClose, .lightboxContainer, .lightboxOverlay").remove();

    //add the elements to the DOM
	$("body")
		.append('<div class="lightboxOverlay"><img src="http://www.smallab.org/layout/loading_black.gif" style="position:absolute; left:'+bodyScrollWidth/2+'px; top:'+(bodyScrollTop+bodyScrollHeight/2)+'px; margin-top:-16px; margin-left:-16px;" class="loading" alt="Loading..." /></div><div class="lightboxContainer"></div><div class="lightboxClose">×</div>');
		//.css({"overflow":"hidden"});

    //animate the semitransparent layer
    $(".lightboxOverlay")
    	.css({"top":"0px", "height":docHeight+"px"})
		.animate({"opacity":"0.6"}, 400, "linear");

    //add the lightbox image to the DOM
    if (getURLParam("link", lightboxLink) != 0) {
    	$(".lightboxContainer").html('<a href="'+getURLParam("link", lightboxLink)+'" title="'+getURLParam("link", lightboxLink)+'" target="_blank"><img src="'+lightboxLink+'" alt="" /></a>');
    } else
        $(".lightboxContainer").html('<img src="'+lightboxLink+'" alt="" />');

    //position it correctly after downloading
    border = 12;
    if (getURLParam("border",lightboxLink))
    	border = getURLParam("border",lightboxLink);
	$(".lightboxContainer img").load(function() {
		var imgWidth = $(".lightboxContainer img").width();
		var imgHeight = $(".lightboxContainer img").height();
	    var imgMarginTop = bodyScrollHeight/2 - imgHeight/2 - border;
	    var imgMarginLeft = -imgWidth/2 - border;
	    
		$(".lightboxContainer")
			.css({
			    "border":     border+"px solid #eee",
				"top":        bodyScrollTop + "px",
				"left":       "50%",				
				"width":      imgWidth,
				"height":     imgHeight,
				"margin-top": imgMarginTop + "px",
				"margin-left":imgMarginLeft + "px" //to position it in the middle
			})
			.animate({"opacity":"1"}, 400, "linear", function() {
	            $(".lightboxClose")
	                .css({
	                    "top":        bodyScrollTop + "px",
	                    "left":       "50%",				
	                    "margin-top": (imgMarginTop) + "px",
	                    "margin-left":imgMarginLeft + imgWidth - 3 + "px",
	                    "opacity":    1
	                });
			});

        //callback to prepare the remove on the new DOM elements
		window.removeImgOverlay(lightboxLink);
	});
}

function removeImgOverlay(lightboxLink) {
    //façon Android Gingerbread :)
	$(".lightboxClose, .lightboxOverlay"+(getURLParam("link", lightboxLink)==0 ? ", .lightboxContainer" : "")).click(function(){ //, .lightboxContainer
		$(".lightboxOverlay .loading").remove();
		$(".lightboxClose").css({'opacity':0});
		$(".lightboxOverlay").animate({'opacity':.95}, 250, 'linear');
		var newTop = $(window).scrollTop() + $(".lightboxContainer img").height()/2;
		$(".lightboxContainer").css({'min-height':0}).animate({'top':newTop+'px', 'height':0}, 250, 'linear', function() {
			$(this)
				.html("")
				.css({'left':'0', 'margin-left':'25px', 'width':$(window).width()-50+'px', 'height':0, 'border':'solid 1px #fff'})
				.animate({'opacity':0.2, 'width':'20%', 'left':'40%'}, 350, 'linear', function() {
					$(".lightboxClose, .lightboxContainer, .lightboxOverlay").fadeOut(100, function() {
						$(this).remove();
					});
				});
		});
	});
}