$(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();  

	var source = $(this).attr('href');
	var id = "#dialog";
	var h = $(this).attr('height');
	var w = $(this).attr('width');
	var caption = $(this).attr('title') != "" ? $(this).attr('title') : "Sample";
	var file = $(this).attr('rel');
	var ext = file.split(".")[1];
	
	//Get the screen height and width  
	var maskHeight = $(document).height();  
	var maskWidth = $(window).width();  
	
	//Get the window height and width  
	var winH = $(window).height();  
	var winW = $(window).width(); 
	var winTop = winH/2-h/2 - 20;  
	var winLeft = winW/2-w/2 - 20;
	 
	document.getElementById("dialog").innerHTML = '<b>' + caption + '</b> | ';
    document.getElementById("dialog").innerHTML += '<a href="#" class="close">Close</a><br>';
	document.getElementById("dialog").innerHTML += '<div id="swfDiv"></div>';
   
	//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("slow",0.9);    
			 
	//Set the popup window to center
	// - 20 for padding
	$(id).css('top',  winH/2-$(id).height()/2 - 20);  
	$(id).css('left', winW/2-$(id).width()/2 - 20);
	 
   
	//transition effect  
	function step1()
	{
		// tween the size and position of the display box
		$(id).animate({width: w + "px", height: h + "px", top: winTop + "px", left: winLeft + "px"}, 500, step2);
	}
	 
	function step2()
	{
		if(ext == "swf")
		{
			// embed the SWF file to display
			swfobject.embedSWF(file, "swfDiv", w, h, "8.0.0");
		}
		else
		{
			// embed image file to display
			document.getElementById('swfDiv').innerHTML = '<img src=' + file + ' height=' + h + ' width=' + w +' />';
		}
	}
	 
	// fade in the overlay
	$(id).fadeIn(2000, step1);
	 
	//if close button is clicked  
	$('.window .close').click(function (e)
	{  								 
		document.getElementById("dialog").innerHTML = '<p>empty</p>';
		//Cancel the link behavior  
		e.preventDefault();  
		$('#mask, .window').hide();  
	});
   
});  
   
//if close button is clicked  
$('.window .close').click(function (e)
{  
	document.getElementById("dialog").innerHTML = '<p>empty</p>';
	//Cancel the link behavior  
	e.preventDefault();  
	$('#mask, .window').hide();  
});       
   
//if mask is clicked  
$('#mask').click(function ()
{
	document.getElementById("dialog").innerHTML = '<p>empty</p>';
	$(this).hide();  
	$('.window').hide();  
});           
   
});