//	Simple Image Loader
//	Developed by Patrick Dubinski
//	http://www.3dprog.com
//	Easy to Use, please email with reference on where you're using it please!
//	:) Have Fun Programming
//

function loadImage(url, obj) {
		$("#imageBox").find("img").attr({
				src: "http://www.3dprog.com/images/wait.gif",
				alt: "Loading Please Wait",
				height:30,
				width:30
		});
		$("#imageBox").find(".caption").html("");
		$("#expand").attr({
			href: url
		});
		var img = new Image();
		img.src = url;
		if ($(obj).attr("href") !== "undefined") {
			img.alt = $(obj).find("img").attr("alt");
		} else {
			img.alt = $(obj).attr("alt");
		}
		$(img).load(function() {
			var $height = img.height;
			var $width = img.width;
			if ($height > ($(window).height()-300)) {
				$width /= ($height / ($(window).height() - 400));
				$height = $(window).height() - 300;
			}
			// with the holding div #loader, apply:
      		$('#imageBox')
        	// remove the loading element (so no background spinner), 
				.find("img").attr({
					src: this.src,
					alt: this.alt,
					height: $height,
					width: $width
				});
        		// then insert our image
        	$("#imageBox").find(".caption").html(this.alt);
    
      		// fade our image in to create a nice effect
      		$(this).fadeIn(500, function() {
				$("#imageBox").animate({
					left: $(window).width()/2 - $("#imageBox").width()/2,
					top: $(window).height()/2 - $("#imageBox").height()/2,
					width: $width + 10
				},500).css({opacity: 1.0});
			});
		}).error(function () {
			// Error has occurred
		}).attr({
			src: url
		});
		$("#bgshadow").show().css({opacity: 0.7});
		$("#imageBox").show().animate({
			left: $(window).width()/2 - $("#imageBox").width()/2,
			top: $(window).height()/2 - $("#imageBox").height()/2,
			width: $width + 10
		});
}
$(document).ready(function() {
	$("body").append("<div id='imageBox' style='display:none; text-align:center; border:1px solid #999999; background-color:#EEEEEE; padding:5px; position:fixed;" +
	" z-index:15;'><a href='javascript:void(0);' class='exit' style='position:absolute; padding:5px; right:0; top:0; background:#EEEEEE;'>X</a>" + 
	"<a href='' id='expand'><img src=\"http://www.3dprog.com/images/wait.gif\" alt=\"Loading Please Wait\"></a><p align='center' id='delete'>" +
	"<span class=\"caption\" style=\"color:#000000;\"></span></p>" +
	"</div><div id='bgshadow' style='display:none;" +
	"background-color:#000000; position:fixed; z-index:14;'></div>");
	
	$("#imageBox").css({top: $(window).height()/2 - 200, left: $(window).width()/2 - 200});
	$("#bgshadow").css({'height': $(document).height(), 'width': $(window).width(), top:0, left:0, opacity:0.0}).click(function() { 
		$("#imageBox").hide();
		$("#bgshadow").animate({opacity: 0.0},100).hide();
	});
	$(window).resize(function() {
		$("#bgshadow").css({'height': $(document).height(), 'width': $(window).width(), top:0, left:0, opacity:0.0});
	});
	$("a.exit").css({opacity:0.8}).click(function() {
		$("#imageBox").hide();
		$("#bgshadow").animate({opacity: 0.0},100).hide();
	}).hover(function() {
		$(this).css({background: '#EEEEEE', opacity:1.0, color: '#aa0000'});
	}, function () {
		$(this).css({background: '#DDDDDD', opacity:0.8, color: '#000000'});
	});
	
});