$(document).ready(function () {

	// if user clicked on button, the overlay layer or the dialogbox, close the dialog	
	
	// if user resize the window, call the same function again
	// to make sure the overlay fills the screen and dialogbox aligned to center	
	$(window).resize(function () {
		
		//only do it if the dialog box is not hidden
		if (!$('#dialog-box').is(':hidden')) popup();		
	});	
	
	
});

//Popup dialog
function eXpopup(message) {
		
	// get the screen height and width 
	$("#dialog-overlay").remove();
	$("#dialog-box").remove();
	$("body").append('<div id="dialog-overlay"></div><div id="dialog-box"><a href="#" class="close">Close</a><div class="dialog-content"><div id="dialog-message"></div></div></div>');
	 
	 
	 $('#dialog-message').html(message);
	
	
	var maskHeight = $(window).height();  
	var maskWidth = $(window).width();
	
	// calculate the values for center alignment
	var dialogTop =  (maskHeight/3) - ($('#dialog-box').height()/2);  
	var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2); 
	if(dialogTop <= 20) { dialogTop = 20; }
	// assign values to the overlay and dialog box
	$('#dialog-overlay').css({height:$(document).height(), width:maskWidth}).fadeIn('slow');
	
	
	
	// display the message	
	$('#dialog-box').css({top:($('#dialog-box').height()*-1-100), left:dialogLeft}).show();
	$('#dialog-box').animate({top:dialogTop + $(document).scrollTop()  },'slow');
	
	
	$('a.btn-ok, #dialog-overlay, .close').unbind('click');
	$('a.btn-ok, #dialog-overlay, .close').click(function () {	
	
		removePopup();
		return false;
	});
	
	$(document).unbind('keyup');
	$(document).keyup(function(e) {
  		if (e.keyCode == 27) { removePopup(); return false; } 
	});

}


function removePopup() {
		$('#dialog-overlay').fadeOut('slow');
		$('#dialog-box').animate({top:($('#dialog-box').height()*-1-100)},'slow','', function () {  $('#dialog-overlay, #dialog-box').remove(); } );
	
}