$(document).ready(function() {    
	//select all the a tag with name equal to modal
	$('a[name=modal]').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
	
		//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});
		
		//transition effect		
		$('#mask').fadeTo("slow",0.8);	
	
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
		
		var selector = $(this).attr('rel');
		var $mb_window = $(selector);
		      
		//Set the popup window to center
		$mb_window.css('left', winW/2 - $mb_window.width()/2);
		$mb_window.css('top', winH/2 - $mb_window.height()/2);
		
		$mb_window.show(100);
	
		//transition effect
		$mb_window.fadeIn(1000); 
	
		return false;
	});

	$('.mb_head a').click(function () {
		$('.mb_window, #mask').hide();
	});
	
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.mb_window').hide();
	});          
      
});