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