//Set flag to determine if overlay is currently showing
// 0 = false, 1 = true
var stateOf = 0;

//Starts the overlay
function startOverlay(){
	
	if(stateOf == 0){
		$("#pageOverlay").css({"opacity": "0.80"}).delay(2000).fadeIn("slow");
		$("#promo").delay(2000).fadeIn("slow");
		
		stateOf = 1;
	}
}

//Closes the overlay
function exitOverlay(){
	
	if(stateOf == 1){
		$("#pageOverlay").fadeOut("slow");
		$("#promo").fadeOut("slow");
		
		stateOf = 0;
	}
}

//Center the promo box in browser window
function centerPromo(){
	
	var browserWidth = document.documentElement.clientWidth;
	var browserHeight = document.documentElement.clientHeight;
	var promoHeight = $("#promo").height();
	var promoWidth = $("#promo").width();
	
	$("#promo").css({"position": "absolute","top": (browserHeight / 2) - (promoHeight / 2), "left": (browserWidth / 2) - (promoWidth / 2)});
	
}

//events are handled with jQuery
$(function(){
		   
	//start the overlay when document is loaded
	startOverlay();
	centerPromo();
	
	//start the overlay with a button event
	$("#button").click(function(){
			startOverlay();
			centerPromo();		
	});
	
	//this function closes the overlay when user clicks "close"
	$("#closeBtn").click(function(){
		  exitOverlay();
	});
	
	//this function closes the overlay when user click outside the message area
	$("#pageOverlay").click(function(){
		exitOverlay();
	});
});