$(document).ready(function(){  
      
    //get the height and width of the page  
    var window_width = $(window).width();  
    var window_height = $(window).height();  
      
    //vertical and horizontal centering of modal window(s)  
    /*we will use each function so if we have more then 1 
    modal window we center them all*/  
   $('.modal_window').each(function(){  
     
       //get the height and width of the modal  
       var modal_height = $(this).outerHeight();  
       var modal_width = $(this).outerWidth();  
     
       //calculate top and left offset needed for centering  
	   
       var top = (window_height-modal_height)/2;  
       var left = (window_width-modal_width)/2;  
     
       //apply new top and left css values  
       $(this).css({'top' : top , 'left' : left});  
    
  });  
     
       $('.activate_modal').click(function(){  
     
             //get the id of the modal window stored in the name of the activating element  
             var modal_id = $(this).attr('name');  
     
             //use the function to show it  
             show_modal(modal_id);  
     
       });  
     
	 
	 //if close button is clicked
	$('.modal_window .close_button').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		close_modal(); 
	});		
	
	
       $('.close_modal').click(function(){  
     
         //use the function to close it  
           close_modal();  
    
      });  
    
   });  
    
   //THE FUNCTIONS  
     
   function close_modal(){  
     
       //hide the mask  
       $('#mask').fadeOut(500);  
     
       //hide modal window(s)  
       $('.modal_window').fadeOut(500);  
     
   }  
   function show_modal(modal_id){  
     
       //set display to block and opacity to 0 so we can use fadeTo  
       $('#mask').css({ 'display' : 'block', opacity : 0});  
     
       //fade in the mask to opacity 0.8  
    $('#mask').fadeTo(500,0.8);  
     
       //show the modal window  
       $('#'+modal_id).fadeIn(500);  
     
   }