$(document).ready(function() {	

	$(document.body).append('<div id="mask" />');
	
	$("a[class=popup-link]", document.body).each(function () {
		
		var popup = $('<div class="popup"></div>');
		var content = $('<iframe src="' + $(this).attr('href') + '" frameborder="0" width="630" height="400"></iframe>');
		
		$(popup).append('<h3>' + $(this).attr('name') + '</h3>');
		$(popup).append(content);
		$(document.body).append(popup);
		
		$(this).click(function(e) {
			
			e.preventDefault();
		
			var maskHeight = $(document).height();
			var maskWidth = $(window).width();
			
			var winH = $(window).height();
			var winW = $(window).width();
			
			$('#mask').css({'width':maskWidth,'height':maskHeight});
			$(popup).css({'top': $(window).scrollTop() + winH/2-$(popup).height()/2, 'left': winW/2-$(popup).width()/2});
			
			$('#mask').fadeTo("slow",0.8);	
			$(popup).fadeIn(2000); 
			
			return false;
			
		});
	
	});
	
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.popup').hide();
	});			
	
});