$(document).ready(function() {
			//select all the a tag with name equal to modal
			$('a[name=previewmodal]').click(function(e) {
				//Cancel the link behavior
				e.preventDefault();
				var id='#dialog';
				var content	= $(this).attr('href');			
			
				//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').fadeIn(1000);	
				$('#mask').fadeTo("fast",0.8);	
			
				//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);
				$(id).css('left', winW/2-$(id).width()/2);
				
				$('#datacontainer').attr('src', content);
			
				//transition effect
				$(id).fadeIn(1000); 
			
			});
			
			//if close button is clicked
			$('.window .close').click(function (e) {
				//Cancel the link behavior
				e.preventDefault();
				$('#mask, .window').fadeOut("slow");
			});		
			
			//if mask is clicked
			$('#mask').click(function () {
				$(this).hide();
				$('.window').fadeOut("slow");
			});			
			
			$(document).keyup(function(e) {  
			  if(e.keyCode == 27) {  
			    $('#mask').fadeOut("slow");  
			    $('.window').fadeOut("slow");  
			  }  
			}); 
		});