// JavaScript Document
$(document).ready(function() {
						   // Select all the a tag with name equal to modal
						   $('a[name=modal]').click(function(e) {
															 // Cancel link behavior
															 e.preventDefault();
															 //Get the A tag
															 var id = $(this).attr('href');
															 
															 // Get the screen height and width
															 var maskHeight = $(document).height()-5;
															 var maskWidth = $(document).width()-5;
															 
															 // Set height and width to mask and fill up the screen
															 $('#mask').css({'width':maskWidth,'height':maskHeight});
															 
															 // Transition effect
															$('#mask').fadeIn(1000);       
															$('#mask').fadeTo("slow",0.9);     
															 
															 // Get the window height and width
															 var winH = $(window).height();
															 var winW = $(window).width();
															 
															 // Set the popup window to center
															 $(id).css('top', (winH/2-$(id).height()/2)-100);
															 $(id).css('left', winW/2-$(id).width()/2);
															 
															 // Transition effect
															 $(id).fadeIn(2000);
															 });
						   
						   // If close button is clicked
						   $('.window .close').click(function (e) {
															   // Cancel link behavior
															   e.preventDefault();
															   $('#mask, .window').hide();
															   });
						   
						   // If mask is clicked
						   $('#mask').click(function() {
													 $(this).hide();
													 $('.window').hide();
													 });
						   });