$(function(){
	
	function resetPopupImage() {
		$("#popup-image-container").css({"left" : "-2000px", "top" : "-2000px"});
		$("#popup-image-caption").text("");
	}
		
	$("<div>").attr("id", "popup-image-container").appendTo("body");
	
	$("<div>").attr("id", "popup-top").appendTo("#popup-image-container");
	$("<div>").attr("id", "popup-tl").appendTo("#popup-top");
	$("<div>").attr("id", "popup-t").appendTo("#popup-top");
	$("<div>").attr("id", "popup-tr").appendTo("#popup-top");
	
	$("<div>").attr("id", "popup-mid").appendTo("#popup-image-container");
	$("<div>").attr("id", "popup-l").appendTo("#popup-mid");
	$("<img />").attr("id", "popup-image").appendTo("#popup-mid");
	$("<div>").attr("id", "popup-r").appendTo("#popup-mid");
	
	$("<div>").attr("id", "popup-bot").appendTo("#popup-image-container");
	$("<div>").attr("id", "popup-bl").appendTo("#popup-bot");
	$("<div>").attr("id", "popup-b").appendTo("#popup-bot");
	$("<div>").attr("id", "popup-br").appendTo("#popup-bot");
	
	$("<a>").attr("id", "popup-image-close").appendTo("#popup-image-container");
	$("<img />").attr("src", "/images/commons/popup-image-close.png").appendTo("#popup-image-close");
	$("<div>").attr("id", "popup-image-caption").appendTo("#popup-image-container");
	
	$("#popup-image-close").css("position", "absolute");
	
	resetPopupImage();
	
	$("#popup-image").load(function() {
		
		$("#popup-image-container").css("width", (($("#popup-image").width() + 68) + "px"));
		$("#popup-image-container").css("height", (($("#popup-image").height() + 62) + "px"));
		
		$("#popup-mid").css("height", ($("#popup-image").height() + "px"));
		$("#popup-t").css("width", ($("#popup-image").width() + "px"));
		$("#popup-b").css("width", ($("#popup-image").width() + "px"));
		$("#popup-l").css("height", ($("#popup-image").height() + "px"));
		$("#popup-r").css("height", ($("#popup-image").height() + "px"));
		
		if ($("#popup-image-caption").text() != "") {
			$("#popup-image-container").css("height", (($("#popup-image").height() + 77) + "px"));
			$("#popup-mid").css("height", (($("#popup-image").height() + 15) + "px"));
			$("#popup-l").css("height", (($("#popup-image").height() + 15) + "px"));
			$("#popup-r").css("height", (($("#popup-image").height() + 15) + "px"));
			$("#popup-image-caption").css("width", ($("#popup-image").width() + "px"));
		}
		
		$("#popup-image-close").css("left", (($("#popup-image").width() - 27) + "px"));
		
		var newX = Math.round((($(window).width()) / 2)  - ($("#popup-image-container").width() / 2));
		var newY = Math.round((($(window).height()) / 2) - ($("#popup-image-container").height() / 2));
		
		if (newY < 20) {
			newY = 20;
		}
		
		$("#popup-image-container").css({"left" : newX + "px", "top" : newY + "px"});
	});
	
	function closeImagePopup() {
		resetPopupImage();
		$("#popup-image").attr("src", "");
	}
	
	$("#popup-image-close").click(function(event) {
		closeImagePopup();
	});
	
	$(".column-image a").click(function(event) {
		event.preventDefault();
		$("#gallery-image-close").trigger("click");
		resetPopupImage();
		$("#popup-image-caption").text($(this).attr("title"));
		$("#popup-image").attr("src", $(this).attr("href"));
	});

});