jQuery(document).ready(function() {
	jQuery('a[name=bounce]').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
		//Get the screen height and width
		var maskHeight = jQuery(document).height();
		var maskWidth = jQuery(window).width();
		
		var id = jQuery(this).attr('id');
		var winW = jQuery(window).width();
		jQuery(id).css('left', winW/2-jQuery(id).width()/2);
		
		//Set height and width to mask to fill up the whole screen
		jQuery('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//transition effect		
		jQuery('#mask').fadeIn(1000);	
		jQuery('#mask').fadeTo("slow",0.8);
		jQuery(id).animate( { top: 0 }, { duration: 1500})
	
		//if close button is clicked
		jQuery('.close').click(function (e) {
			//Cancel the link behavior
			e.preventDefault();
			jQuery('#mask').fadeOut(1000);
			jQuery(id).animate({ top: -650 }, { duration: 1000 })
		});		
		
		//if mask is clicked
		jQuery('#mask').click(function () {
			jQuery('#mask').fadeOut(1000);
			jQuery(id).animate({ top: -650 }, { duration: 1000 })
		});	
	});
});