//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.40"});
		$("#pageOverlay").delay(1000).fadeIn("slow");
		$("#promo").delay(1000).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 awesomeness 
$(document).ready(function(){
	
	//start the overlay when document is loaded
	//startOverlay(); // comment out this line
	//centerPromo(); //  and this line if you don't want the overlay to begin when the document is ready
		
	//start the overlay with a button event
	$("#showVideoBtn").click(function(){
		startOverlay(); 
		centerPromo(); 		
	});
				
	//this function closes the overlay when user clicks "close"
	$("#closeBtn").click(function(){
		exitOverlay();
	});
	
	//this function closes the overlay when user clicks outside the message area
	$("#pageOverlay").click(function(){
		exitOverlay();
	});
	

});