$(document).ready(function(){
	$("a[rel='whitebox']").click(function(){
		initWhitebox($(this).attr("href"));
		return false;
	});
});

function initWhitebox(targetLocation){
	$("body")
		.prepend("<div id='overlay'></div><div id='whitebox'></div>");
	if($(window).height() < 735) {
		var topMargin = "0";
		var topPos = "0";
		//alert("height: " + $(window).height() + "\ntopMargin: " + topMargin + "\ntopPos :" + topPos);
	} else {
		var topMargin = "-335px";
		var topPos = "50%";
		//alert("height: " + $(window).height() + "\ntopMargin: " + topMargin + "\ntopPos :" + topPos);
	}
	$("#overlay")
		.click(killWhitebox)
		.css({
			"opacity": .8,
			height: $(document).height()
		})
		.fadeIn("fast",function(){
			$("#whitebox")
				.delay(400)
				.css({
					left: "50%",
					top: topPos,
					marginLeft: "-300px",
					marginTop: "-250",
					width: "600px",
					height: "500px",
					opacity: "0"
				})
				.animate({
					left: "50%",
					top: topPos,
					marginLeft: "-400px",
					marginTop: topMargin,
					width: "800px",
					height: "670px",
					opacity: ["1", "swing"]
				},"slow",function(){
					$("#whitebox")
						.load(targetLocation, function() {
							$("#whitebox *")
								.css("visibility","visible") // Why should I have to make the element "visible"?
							$("#whitebox")
								.append("<a id='closeBtn' href='#' onclick='killWhitebox(); return false;'>Close</a>");
						});
				});
		});
}// function initWhitebox

function killWhitebox(){
	$("#whitebox")
		.fadeOut("slow",function(){
			$("#overlay")
				.fadeOut("slow");
		});
}// function killWhitebox