/**
 * jQuery Lightbox v1
 * by Jason "Palamedes" Ellis <palamedes[at]rocketmail.com>
 * Requires jQuery 1.3 or later
 *
 * This javascript module is designed to turn any link with the correct attribute 
 * into a lightbox link.   Meaning, an anchor with rel='lightbox' will display that
 * image in a lightbox like format.  All CSS and Javascript is within this file with
 * the exception of jQuery.
 * 
 * I specifically am writing this to work with my Wordpress blog without having 
 * to create a special plugin to do the work for me.  Just add the attribute to the link
 * and tada.. lightbox.
 *
 * Also this is a good way for me to learn a little about jquery .. feel free to comment
 * to me about what you think I have done right or wrong.. feedback is always welcome
 *
 * Jason 
 */

// When the document is ready, search for all rel='lightbox' and add onclick
$(document).ready(function() {

	$("a[rel='lightbox']").click(function() {
		// localize this
		var dis = $(this);
		// get the href
		var source = dis.attr('href');
		// make sure its an image
		var re = /^.*?(.gif|.jpg|.png)$/i;
		var isImage = re.exec(source);
		if (!isImage) {
			// Not an image, don't lightbox it
			return true;
		}

		// okay now load the real image!
		newImage = new Image();
		newImage.id = 'lightboxImage';
        newImage.src = source;

		// Deal with the different browsers
	    var position = {
    	    scrollTop : function () {
        	    return  window.pageYOffset ||
            	        document.documentElement && document.documentElement.scrollTop ||
                	    document.body.scrollTop;
			},
			innerHeight : function () {
				return	window.innerHeight ||
						document.documentElement && document.documentElement.clientHeight ||
						document.body.clientHeight;
    	    },
			innerWidth : function () {
				return	window.innerWidth ||
						document.documentElement && document.documentElement.clientWidth ||
						document.body.clientWidth;
			}
	    }

		// Hide the scroll bars on the right
		$('body').css({overflow:"hidden"});

		// Create the lightboxShade element and append to body
		$('<div id="lightboxShade"></div>').appendTo('body');
		// Style the element
		var lightboxShadeCSS = {
			position: "absolute",	top: position.scrollTop() + "px",
			left: "0px",			bottom: "auto",
			width: "100%",			height: position.innerHeight() + "px",
			background: "black",	opacity: "0.8",
			display: "none",		"z-index": "1000",
			"text-align": "center",	margin: "0",
			padding: "0"
		}
		// Apply the styles
		$('#lightboxShade').css(lightboxShadeCSS);
		// Create the center box
		$('<div id="lightbox"><img id="lightboxLoading"src="/images/loading.gif" /></div>').appendTo('body');
		// Add an onClick to the image to get rid of the lightbox
		$('#lightboxLoading').click(function() {
			// animate the destruction of the lightbox itself 
			$('#lightbox').animate({
				width: '0px',
				height: '0px',
				top: (position.scrollTop() + (position.innerHeight() / 2)) + "px",
				marginLeft : '0px',
				opacity: '0'
			}, 500);
			// fade out the lightbox shade
			$('#lightboxShade').fadeOut(1000, function(){ 
				// make the scroll bars visible again
				$('body').css({overflow:"visible"});
				// destroy the elements
				$('#lightbox').remove();
				$('#lightboxShade').remove();
			});
		});
		// style the element
		var lightboxCSS = {
			width: "1px", height: "1px", background: "white", opacity: "1", border: "2px solid black",
			top: (position.scrollTop() + (position.innerHeight() / 2)) + "px", 
			left: "50%",  position: "absolute",	"z-index": "1000", "text-align":"center"
		};
		// apply the styles
		$('#lightbox').css(lightboxCSS);

		// fade the lightbox in -- shade faster!
		$('#lightboxShade').fadeIn(500);

		// Now animate from 1x1 to a loading box
		var initialHeight = 80;
		var initialWidth = 100;
		$('#lightbox').animate({
			width: initialWidth + 'px',
			height: initialHeight + 'px',
			paddingTop: '20px',
            top: position.scrollTop() + ((position.innerHeight() / 2) - (initialHeight / 2)) + "px",
            marginLeft: "-" + (initialWidth/2) + "px"
		}, 300);
		
	
		// Test to see if the image is loaded, if it is show it!
		imageLoaded = function() {
			if (newImage.height > 0) {

				imageHeight = newImage.height;
				imageWidth = newImage.width;

				// Is the image bigger than our screen?  Scale it down if it is
				if (imageHeight > imageWidth) {
					if (imageHeight > position.innerHeight()) {
						var percentage = ((position.innerHeight()-20) / imageHeight);
						imageWidth = imageWidth * percentage;
						imageHeight = imageHeight * percentage;
					}
					if (imageWidth > position.innerWidth()) {
						var newPercentage = ((position.innerWidth()-20) / imageWidth);
						imageWidth = imageWidth * newPercentage;
						imageHeight = imageHeight * newPercentage;
					}				
				} else {
					if (imageWidth > position.innerWidth()) {
						var percentage = ((position.innerWidth()-20) / imageWidth);
						imageWidth = imageWidth * percentage;
						imageHeight = imageHeight * percentage;
					}
					if (imageHeight > position.innerHeight()) {
						var newPercentage = ((position.innerHeight()-20) / imageHeight);
						imageWidth = imageWidth * newPercentage;
						imageHeight = imageHeight * newPercentage;
					}
				}
				$('#lightboxLoading').css({"width": imageWidth + "px", "height": imageHeight  + "px"});

				$('#lightboxLoading').css("display","none");
		        // Resize the white to fit the image!
    		    $('#lightbox').animate({
        		    width: imageWidth + "px",
            		height: imageHeight + "px",
					paddingTop: '0px',
	            	top: position.scrollTop() + ((position.innerHeight() / 2) - (imageHeight / 2)) + "px",
	    	        marginLeft: "-"+(imageWidth/2)+"px"
    	    	}, 500, function() {
					$('#lightboxLoading').attr("src",newImage.src);
					$('#lightboxLoading').css("display","block");
	        	});
	
			} else {
				// @TODO What if it never finds the image? Need Max Revs here.. 
				setTimeout("imageLoaded()", 200);
			}
		}

		// Okay now start waiting for the image to load.. 
		setTimeout("imageLoaded()", 200);

		return false;

	});

	


})