function showOverlay( myurl, mywidth ) {
	if (mywidth == undefined) {
		$("#overlay-panel").width("350px");
	} else {
		$("#overlay-panel").width(mywidth);
	}
	$("#overlay-panel").load(myurl, function(){
		$("#overlay").fadeIn("fast");
			$("a#hide-overlay").click(function(ev){
				ev.preventDefault();
				$("#overlay").fadeOut("fast");
			});
	});
}

$(document).ready( function(){
	$(".background").fadeTo("fast", 0.0);
	var mybackgrounds = $(".background")
	mybackgrounds.each(function(){
		$(this).hover(function(){
			$(this).fadeTo("slow", 1.0); // This sets the opacity to 100% on hover
			},function(){
			$(this).fadeTo("slow", 0.0); // This sets the opacity back to 60% on mouseout
		});
	});
	// fades the document in
	$('#container').fadeIn(800);

	$("a.show-overlay").each(function(){
		$(this).click(function(ev) {
			ev.preventDefault();
			var myurl = $(this).attr("href");
			var mywidth = $(this).attr("boxwidth");
			showOverlay(myurl,mywidth);
		});
	});
	
});