//SETTING UP THE MODAL POPUP
var modalPopupStatus = 0;	//0 means disabled; 1 means enabled;
var modalPopupBackgroundOpacity = 0.5; //between 0 (transparent) and 1 (black)

//loading popup with jQuery
function loadModalPopup()
{
	//loads modal popup only if it is disabled
	if(modalPopupStatus==0)
	{
		$("#modalPopupBackground").css({
			"opacity": modalPopupBackgroundOpacity
		});
	
		var title = $("#modalPopupTitle").html();
		$("#modalPopupTitle").html("Loading...");
	
		$("#modalPopupContent").css({"opacity": "0"});
		
		$("#modalPopupBackground").fadeIn("fast", function () {
			$("#modalPopupArea").fadeIn("fast", function () {
				$("#modalPopupContent").slideDown("def", function () {
					$("#modalPopupTitle").html(title);
					$("#modalPopupContent").css({"opacity": "1"});
				});
			});
		});
		
		modalPopupStatus = 1;
	}
}

//disabling popup with jQuery
function disableModalPopup()
{
	//disables modal popup only if it is enabled
	if(modalPopupStatus==1)
	{
		var title = $("#modalPopupTitle").html();
		$("#modalPopupTitle").html("Goodbye...");
		
		$("#modalPopupContent").css({"opacity": "0"});
		
		$("#modalPopupContent").slideUp("def", function () { 
			$("#modalPopupArea").fadeOut("fast", function () {
				$("#modalPopupBackground").fadeOut("fast", function () {
					$("#modalPopupTitle").html(title);
					$("#modalPopupContent").css({"opacity": "1"});
				});
			});
		});
		modalPopupStatus = 0;
	}
}

//centering popup
function centerModalPopup()
{
	$("#modalPopupContent").show(); //show contents so we can get height
	
	//request data for centering
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $("#modalPopupArea").height();
	var popupWidth = $("#modalPopupArea").width();
	
	var topPosition = windowHeight/2-popupHeight/2;
	var leftPosition = windowWidth/2-popupWidth/2;
	
	//check if popup is larger than browser window
	if(topPosition < 0)
		topPosition = 5;
	
	if(leftPosition < 0)
		leftPosition = 5;
	
	//centering
	$("#modalPopupArea").css({
		"position": "absolute",
		"top": topPosition,
		"left": leftPosition
	});
	//only need force for IE6

	$("#modalPopupBackground").css({
		"height": windowHeight
	});
	
	$("#modalPopupContent").hide(); //hide after height is calculated
}

$(document).ready(function()
{
	//Create the background overlay
	this.overlay = $('<div/>')
		.attr('id', 'modalPopupBackground')
		.css({
			display: 'none',
			position: 'fixed',
			_position: 'absolute', //hack for internet explorer 6
			opacity: modalPopupBackgroundOpacity,
			height: '100%',
			width: '100%',
			top: '0',
			left: '0',
			'background-color': '#000000',
			border: '1px solid #cecece',
			'z-index': '1'
		})
		.appendTo('body');
			
	//LOADING POPUP
	//Click the button event
	$(".modalPopupLoad").click(function()
	{
		//centering with css
		centerModalPopup();
		
		//load popup
		loadModalPopup();
		
		return false;
	});
	
	//CLOSING POPUP
	//Click the x event
	$("#modalPopupClose").click(function()
	{
		disableModalPopup();
	});
	
	//Press Escape event
	$(document).keypress(function(e)
	{
		if(e.keyCode==27 && modalPopupStatus==1)
		{
			disableModalPopup();
		}
	});
});