//CONTROLLING EVENTS IN jQuery
$.noConflict();
jQuery(document).ready(function($) {	

$("body").append('<div id="mask">');
$("body").append('<div id="dialog" class="window">');
	
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e)
{
	var src = $(this).attr('rel');
	var w = $(this).attr('width');
	var h = $(this).attr('height');
	$("#dialog").html('<iframe width="'+w+'" height="'+h+'" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'+src+'"></iframe>');
	
	//Cancel the link behavior
	e.preventDefault();
		
	//Get the A tag
	var id = $(this).attr('href');
	
	//Get the screen height and width
	var maskHeight = $(document).height();
	var maskWidth = $(window).width();
	
	//Set heigth 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.8);	
	
	//Get the window height and width
	//var winH = $(window).height() / 2 + "px";
	//var winW = $(window).width() / 2 + "px";              
	
	var top = $(window).scrollTop() + "px";
	var left = $(window).width() / 2;
	left = left - (w / 2) + "px";
	
	$(".window").css({'top':top, 'left':left});
	//$("#dialog").css('top',  winH/2-$(id).height()/2);
	//$(id).css('left', winW/2-$(id).width()/2);
	
	//transition effect
	$(id).fadeIn(2000); 
});
	
	//if close button is clicked
$('.window .close').click(function (e)
{
	//Cancel the link behavior
	e.preventDefault();
		
	$('#mask').hide();
	$('.window').hide();
});		
	
//if mask is clicked
$('#mask').click(function ()
{
	$(this).hide();
	$('.window').hide();
});			
	
});