$(document).ready(function(){
	
	// $("#imageCol").prepend("<p>A sample of our Portfolio:</p><p>(click to view larger)</p>");
	
	// images with class 'lightbox' get a lightbox
	$(".lightbox").each(function() {
        $(this).click(openbox);
    });
	
	//ID shadow is the DIV that dims the background
	$("#shadow").click(function(e) {
        $(this).fadeOut(400);
    });
});

function openbox(){
	//get the ID of the image that was clicked on, to use later
	id = $(this).attr("id");
	var shadow = $("#shadow");
	// shadow = shadow;
	// animate in the shadow box
	shadow.removeClass("hidden");
	shadow.addClass("showit");
	shadow.hide();
	shadow.css({top: '50%', left: '50%'})
	shadow.animate({
		height: "toggle",
		width: "toggle",
		// opacity: "toggle",
		opacity: 1,
		top: 0,
		left: 0,
		//load image when the shadowbox is done loading
		complete: loadIMG(id)
	}, 400);
	
	
}
function loadIMG(){
	//append the ID of the image to the url of a seperate page, using ajax to load the image
	//the ID of each image needs to match the image on the "Ajax" page
	url = "ajaximages.html #" + id;
	$("#dropbox").load(url);
}