var grayoutContent = '<div id="gray-out">&nbsp;</div>';

function popupThis(popupContent) {
	var windowWidth = document.documentElement.clientWidth;  
	var windowHeight = document.documentElement.clientHeight;

	grayout = $(grayoutContent);
	
	var popupHeader = popupContent.children('h3').remove();
	popup = $('<div class="popup"><a class="popup-close"><span>Close</span></a></div>').append(popupHeader).append(popupContent);
	$('body').append(grayout);
	
	grayout.append(popup);
	
	grayout.fadeIn();
	
	var popupHeight = popup.height();  
	var popupWidth = popup.width();  
	
	popup.css({			
		"top": windowHeight/2-popupHeight/2,  
		"left": windowWidth/2-popupWidth/2  
	});
	
	
	$('a.popup-close').click(function() {
		$('#gray-out').remove();
	});
}

$(document).ready(function(){
	$('a.popup-callout').click(function() {
		var popupContent = 	$(this).next('.popup-content').clone();
		// Popups MUST have a popup-content div near them or this fails
	
		popupThis(popupContent);
	});
	
});