//modal
$(document).ready(function() {     
	//Get the screen height and width  
	var maskHeight = $(document).height();  
	var maskWidth = $(window).width();  

	//Set height and width to mask to fill up the whole screen  
	$('#mask').css({'width':maskWidth,'height':maskHeight});  
	
	$('a.modalpop').click(function () {   
			  
			//transition effect       
				
			$('#mask').fadeTo("slow",0.6);    
		  
			//Get the window height and width  
			var winH = $(window).height();  
			var winW = $(window).width();  
					
			//Set the popup window to center  
			$('#dialog').css('top',  winH/2-$('#dialog').height()/2);  
			$('#dialog').css('left', winW/2-$('#dialog').width()/2);  
		  
			//transition effect  
			$('#dialog').fadeIn("slow"); 
		  
		//if close button is clicked  
		$('.window .close').click(function (e) {  
			//Cancel the link behavior  
			e.preventDefault();  
			$('#mask, .window').hide();  
		});       
		  
		//if mask is clicked  
		$('#mask').click(function () {  
			$(this).hide();  
			$('.window').hide();  
		});
		
		$('#dialog').click(function () {  
			$('#mask').hide();  
			$('.window').hide();  
		});
		  
	});
	
	
	/****** video pop 0*****/
	$('a.videopop0').click(function () {   
			  
			//transition effect       
				
			$('#mask').fadeTo("slow",0.6);    
		  
			//Get the window height and width  
			var winH = $(window).height();  
			var winW = $(window).width();  
					
			//Set the popup window to center  
			$('#video0').css('top',  winH/2-$('#video0').height()/2);  
			$('#video0').css('left', winW/2-$('#video0').width()/2);  
		  
			//transition effect  
			$('#video0').fadeIn("slow"); 
		  
	});	
	
	
	/****** video pop 1*****/
	$('a.videopop1').click(function () {   
			  
			//transition effect       
				
			$('#mask').fadeTo("slow",0.6);    
		  
			//Get the window height and width  
			var winH = $(window).height();  
			var winW = $(window).width();  
					
			//Set the popup window to center  
			$('#video1').css('top',  winH/2-$('#video1').height()/2);  
			$('#video1').css('left', winW/2-$('#video1').width()/2);  
		  
			//transition effect  
			$('#video1').fadeIn("slow"); 
		  
	});
	
	/****** video pop 2*****/
	$('a.videopop2').click(function () {   
			  
			//transition effect       
				
			$('#mask').fadeTo("slow",0.6);    
		  
			//Get the window height and width  
			var winH = $(window).height();  
			var winW = $(window).width();  
					
			//Set the popup window to center  
			$('#video2').css('top',  winH/2-$('#video2').height()/2);  
			$('#video2').css('left', winW/2-$('#video2').width()/2);  
		  
			//transition effect  
			$('#video2').fadeIn("slow"); 
		  
	});
	
	/****** video pop 3*****/
	$('a.videopop3').click(function () {   
			  
			//transition effect       
				
			$('#mask').fadeTo("slow",0.6);    
		  
			//Get the window height and width  
			var winH = $(window).height();  
			var winW = $(window).width();  
					
			//Set the popup window to center  
			$('#video3').css('top',  winH/2-$('#video3').height()/2);  
			$('#video3').css('left', winW/2-$('#video3').width()/2);  
		  
			//transition effect  
			$('#video3').fadeIn("slow"); 
		  
	});

	//if close button is clicked  
		$('.window .close').click(function (e) {  
			//Cancel the link behavior  
			e.preventDefault();  
			$('#mask, .window').hide();
			$f().stop();
		});       
		  
		//if mask is clicked  
		$('#mask').click(function () {  
			$(this).hide();  
			$('.window').hide();
			$f().stop();
		});
		
		$('#dialog').click(function () {  
			$('#mask').hide();  
			$('.window').hide();
			$f().stop();
		});
		
		$('.closebutton').click(function () {  
			$('#mask').hide();  
			$('.window').hide(); 
			$f().stop();
		});

});