$(document).ready(function() {
    $('a[name=modal]').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        
        var id = '#' + $(this).attr('rel');
		var url = $(this).attr('href');
		var params = url.substring(url.lastIndexOf('?') + 1, url.length);
		params = params.split('&');
	 	
		if($(this).attr('class')) {
			mask = '#' + $(this).attr('class');
		}
		
		//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, 'left':0, 'top':0});   
		$('#mask').fadeIn(1000);
     
        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
        
		$(id).attr('src', url);
		
		var paramValues;
		for(var i = 0; i < params.length; i++) {
			paramValues = params[i].split('=');
			$(id).attr(paramValues[0], paramValues[1]);
		}
			   
        //Set the popup window to center
        $(id).css('top',  winH/2 - ($(id).height() / 2));
        $(id).css('left', winW/2 - ($(id).width() / 2));
		$(id).css('overflow', 'hidden');
		
		$('.close').css('top', (winH/2 - ($(id).height() / 2)) + 25);
		$('.close').css('left', (winW/2 - ($(id).width() / 2)) + $(id).width());
     
        //transition effect
        $(id).fadeIn(1000);
		$('.close').fadeIn(1000);
    });
     
    //if mask or close button is clicked
    $('#mask, .close').click(function () {
        $('#mask').fadeOut(500);
		$('.window').fadeOut(500);
		$('.close').fadeOut(500);
    });        
     
});