$(document).ready(function(){
// add a click event
	$(".lightbox").click(function(){
		overlayLink = $(this).attr("href");
		captionText = $(this).attr("rel");
		window.startOverlay(overlayLink);
			$(".overlay").animate({"opacity":"1"}, 400, "linear");
		return false;
	});
});

function startOverlay(overlayLink) {
//add the elements to the dom
	$("body")
		.append('<div class="overlay"></div><div class="container"></div>');

//animate the semitransparant layer


//add the return, Caption, and lightbox image to the DOM
	$(".container").html('<span class="caption">'+captionText+'</span><a href="#" class="returni"><img src="../../img/back.png" alt="back" /></a><img class="lightboximg" src="'+overlayLink+'" alt="" />');
	
	

//positioning
	$(".container img").load(function() {
		var imgWidth = $(".container .lightboximg").width();
		var imgHeight = $(".container .lightboximg").height();
		$(".container")
			.css({
				"box-shadow":	("rgba(0, 0, 0, .25) 0 1px 3px"),
				"-moz-border-radius": ("3px"),	
				"-webkit-border-radius": ("3px"),		
				"padding":	("14px 10px 7px 10px"),
				"margin-top": -(imgHeight/2),
				"margin-left":-(imgWidth/2) //to position it in the middle
				
			})
			
			.animate({"opacity":"1"}, 400, "linear");

		$(".caption")
			.css({
				"margin-top":(imgHeight/10) //to position it in the middle
				
			})
			.animate({"opacity":"1"}, 400, "linear");

// initiate close
		window.removeOverlay();
	});
}
// close
function removeOverlay() {

	$(".return, .returni").click(function(){
		$(".container, .overlay").animate({"opacity":"0"}, 400, "linear", function(){
			$(".container, .overlay").remove();	
		});
	});
}

//lol shitty way to make this work, but it's easy, and what I know how to do.

$(document).ready(function(){
// add a click event
	$(".lightboxmore").click(function(){
		overlaymoreLink = $(this).attr("href");
		captionmoreText = $(this).attr("rel");
		moreText = $(this).attr("rev");
		window.startOverlaymore(overlaymoreLink);
			$(".overlay").animate({"opacity":"1"}, 400, "linear");
		return false;
	});
});

function startOverlaymore(overlaymoreLink) {
//add the elements to the dom
	$("body")
		.append('<div class="container"></div><div class="overlay"></div>');

//animate the semitransparant layer


//add the return, Caption, and lightboxmore image to the DOM
	$(".container").html('<span class="caption">'+captionmoreText+'</span><a href="#" class="return"><img src="../../img/back.png" alt="back" /></a><a href="more/'+moreText+'.html" class="more" target="more"><img src="../../img/expand.png" alt="see more" /></a><img class="lightboximg" src="'+overlaymoreLink+'" alt="" />');
	
	

//positioning
	$(".container img").load(function() {
		var imgWidth = $(".container .lightboximg").width();
		var imgHeight = $(".container .lightboximg").height();
		$(".container")
			.css({
				"box-shadow":	("rgba(0, 0, 0, .25) 0 1px 3px"),
				"-moz-border-radius": ("3px"),	
				"-webkit-border-radius": ("3px"),		
				"padding":	("28px 7px 4px 7px"),
				"margin-top": -(imgHeight/2),
				"margin-left":-(imgWidth/2) //to position it in the middle
				
			})
			.animate({"opacity":"1"}, 400, "linear");

		$(".caption")
			.css({
				"margin-top":(imgHeight/10) //to position it in the middle
				
			})
			.animate({"opacity":"1"}, 400, "linear");

// initiate close
		window.removeOverlay();
	});
}
// close