$(document).ready(function() {

//click on document Image1
$(".documentImage").click(function(event) {
newUrl = event.currentTarget.src;
newUrl = newUrl.replace("mediumImage", "largeImage");
newUrl = newUrl.replace("pageImage", "largeImage");
document.getElementById('documentImageOverlayImg').src='';
document.getElementById('documentImageOverlayImg').src=newUrl+'?'+Math.random();

$('#documentImageOverlayImg').load(function() {

imageWidth = document.getElementById('documentImageOverlayImg').width;
imageHeight = document.getElementById('documentImageOverlayImg').height;

document.getElementById('documentImageOverlay').style.marginLeft=-(imageWidth/2)-10+"px";
document.getElementById('documentImageOverlay').style.marginTop=-(imageHeight/2)-10+"px";

$('object').fadeOut('fast');

$('#overlay').fadeIn('fast', function() {
$('#documentImageOverlay').fadeIn('fast');
imageWidth = document.getElementById('documentImageOverlayImg').width;
imageHeight = document.getElementById('documentImageOverlayImg').height;
document.getElementById('documentImageOverlay').style.marginLeft=-(imageWidth/2)-10+"px";
document.getElementById('documentImageOverlay').style.marginTop=-(imageHeight/2)-10+"px";
});

});

});

//click on overlay
$("#overlay").click(function() {
$('object').fadeIn('fast');
$('#documentImageOverlay').fadeOut('fast');
$('#overlay').fadeOut('fast');
});


});