// JavaScript Document

var modalActive = false;

$(document).ready(function() {	
 

$('.modal_link').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
		
		//Get the A tag
		var id = $(this).attr('href');
		ele = $(id);
		if (ele.html())
			{
			modalActive = true;
			$('#modal_display').html(ele.html());
			//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
			$('#modal_mask').css({'width':maskWidth,'height':maskHeight,'display':'block','opacity':0});
	
		
			//transition effect		
			$('#modal_mask').animate({opacity:0.7}, 800);
			
			//Get the window height and width
			var winH = $(window).height();
			var winW = $(window).width();

			//Set the popup window to center
			$('#modal_display').css({'width':400,'height':600,'display':'block','opacity':0});
	
				$('#modal_display').css('top',  (winH/2-$('#modal_display').height()/1.5));
			$('#modal_display').css('left', winW/2-$('#modal_display').width()/2);
		
			//transition effect
			$('#modal_display').animate({opacity:1}, 1200);

			}
	
	});
	
	//if close button is clicked
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		modalActive = false;
	
		$('#modal_mask').hide();
		$('#modal_display').hide();
	});		
	
	//if mask is clicked
	$('#modal_mask').click(function () {
		modalActive = false;
		$(this).hide();
		$('#modal_display').hide();
	});			
	$(window).resize(function()
		{
		if(modalActive)
			{
			var maskHeight = $(document).height();
			var maskWidth = $(window).width();
			$('#modal_mask').css({'width':maskWidth,'height':maskHeight});
			var winH = $(window).height();
			var winW = $(window).width();

			$('#modal_display').css('top',  (winH/2-$('#modal_display').height()/1.5));
			$('#modal_display').css('left', winW/2-$('#modal_display').width()/2);
			}
		});
});