$(document).ready(function() {	

	//select all the box holders  with name equal to modal
	$('.folio-box-holder').click(function(e) {
		
		//Get the A tag
		var id = $(this).attr('id');
			id = id + '-m';
	
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//transition effect		
		$('#mask').fadeIn(800);	
		$('#mask').fadeTo("slow",0.8);	
	
		if (navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/Android/i)) { 
		
		var positionY = window.pageYOffset;
			winW = $(window).width();
			
			if (winW == 768)
			{
			var browserH = 690
			} else {
			var browserH = 946
			}
			
		var	boxH = browserH - 400;
			boxNH = boxH / 2;
			positionM = positionY + boxH;
		
		
		//Set the popup window to center
		$('.window#' + id).css('top', positionM);
		}
		
		//transition effect
		$('.window#' + id).fadeIn(2000); 
	
	});
	
	//if close button is clicked
	$('.window .close').click(function (e) {
		
		$('#mask').fadeOut(800);	
		$('#mask').fadeTo("slow",0);
		$('.window').hide();
	});		
	
	//if mask is clicked
	$('#mask').click(function () {
		$(this).fadeOut(800);	
		$(this).fadeTo("slow",0);
		$('.window').hide();
	});			
	
});