//LIGHTBOX

$(document).ready( function()
{
	var overlay, viewer, img, close
	var imgWidth = 500
	var imgHeight = 375
	var padding = 25
	$(".latest-gallery-list img").bind("click",function()
	{ 
		if (!overlay)
		{
			function close()
			{
				overlay.fadeTo(200,0, function() { overlay.css("display","none" )})	
				viewer.fadeTo(200,0, function() { viewer.css("display","none" ); img[0].src = "" })
				return false;
			}
			overlay = $("<div style='background:#000;position:fixed;top:0;left:0;height:100%;width:100%'></div>").appendTo("body").bind("click", close)
			viewer = $("<div style='background:#fff;position:fixed;top:50%;left:50%;border:2px solid #000;text-align:center'></div>").appendTo("body")
			close = $("<a href='#'>Close</a>").css({position: "relative", "top": 15, "font": "15px Arial", "text-decoration": "none", "color": "#000" }).appendTo(viewer).bind("click", close)
			img = $("<img/>").appendTo(viewer).css({display:"block", padding: padding, margin:"auto"})
			overlay.css({"opacity":0 })
			viewer.css({ "min-width": imgWidth+(padding*2), "min-height": imgHeight+(padding*2), "margin-left": -(imgWidth/2), "margin-top":  -40-(imgHeight/2) })
		}

	//	overlay.css("height",$("body").css("height"))
		viewer.css("display", "block")
		overlay.css("display", "block")
		viewer.fadeTo(200,1)
		overlay.fadeTo(200, 0.6)
		img[0].src = this.src.replace(/&h=\d+&w=\d+&/,"&h=" + imgHeight + "&w=" + imgWidth + "&")
	})
}

)