function overlayPopup(id,url)
{



	var preload=new Image();
	preload.src=url;
	preload.onLoad=popPopup(id,url,preload);

}

function popPopup(id,url,preload){

	var galleryDiv = document.getElementById('photo' + id);
	
	var imageElement = galleryDiv.getElementsByTagName('img')[0];
	
	var title = imageElement.getAttribute('title');

	var overlayDiv = document.getElementById('overlayPopup');
	overlayDiv.innerHTML = '<div class="overlayWrapper"><div class="overlayBody"><div id="overlayCloser" class="overlayCloser" onclick="closePopup();"><img style="border:0;" src="../images/delete.png" width="40"></div><img name="image" id="image" height="400"><br/><div class="overlayTitle">' + title + '</div></div></div>';

	document.getElementById('image').src=preload.src;


	// show mask
	var overlayMask = document.getElementById('overlayMask');
	overlayMask.style.display='block';
	overlayMask.style.height = '' + (document.body.clientHeight + 40) + 'px';


	// show pop up
	overlayDiv.style.display='block';

	// position horizontally
	var clientWidth = document.body.clientWidth;
	var divWidth = overlayDiv.offsetWidth;
	overlayDiv.style.left = "" + ((clientWidth-divWidth+60 )/2) + "px";


	// position vertically	
	var divHeight = overlayDiv.offsetHeight;
	var centerY = getScreenCenterY();
	overlayDiv.style.top =  "" + (centerY - ((divHeight)/2)) + "px";

	// position close button
	var closeElement = document.getElementById('overlayCloser');
	closeElement.style.left= "" + (divWidth-30) + "px"; 
	

}

function closePopup()
{
	var overlayDiv = document.getElementById('overlayPopup');
	var overlayMask = document.getElementById('overlayMask');
	overlayDiv.style.display='none';
	overlayMask.style.display='none';
}
 
getScreenCenterY=function() {  
	var y = 0;    
	y = getScrollOffset()+(getInnerHeight()/2);  
	return(y);  
}  
  
getScreenCenterX=function() {  
	return(document.body.clientWidth/2);  
}  
  
getInnerHeight=function() {  
	var y;  
	if (self.innerHeight) // all except Explorer  
	{  
	y = self.innerHeight;  
	}  
	else if (document.documentElement && document.documentElement.clientHeight)  
	// Explorer 6 Strict Mode  
	{  
		y = document.documentElement.clientHeight;  
	}  
	else if (document.body) // other Explorers  
	{  
		y = document.body.clientHeight;  
	}  
	return(y);  
}  
  
getScrollOffset=function() {  
	var y;  
	if (self.pageYOffset) // all except Explorer  
	{  
		y = self.pageYOffset;  
	}  
	else if (document.documentElement && document.documentElement.scrollTop)  
	// Explorer 6 Strict  
	{  
		y = document.documentElement.scrollTop;  
	}  
	else if (document.body) // all other Explorers  
	{  
		y = document.body.scrollTop;  
	}  
	return(y);  
}