// JavaScript Document

$(document).ready(function () {

	//Select all the a tag with name equal to modal
	$("a[name = modal]").click(function (e) {
		//Stop the link
		e.preventDefault();
		//Get the a tag
		var tag = $(this).attr('href');
		
		//Get screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
		
		//Set height and width to make mask fill full screen
		$('.mask').css({'width' :maskWidth, 'height' :maskHeight, 'top' :0, 'left' :0});
		
		$('.mask').fadeIn(500);
		$('.mask').fadeTo('slow', 0.7);
		
		//Get the Window Hiehg and Width;
		var winHeight = $(window).height();
		var winWidth = $(window).width();
		
		//Set the popup to center screen
		$(tag).css('top', winHeight/2-$(tag).height()/2);
		$(tag).css('left', winWidth/2-$(tag).width()/2);
		
		//Add a transition Effect
		$('#window').fadeIn(2000);
		
		
	});
	
	//Do if Close Button is click
	$('a.close').click(function (e) {
		e.preventDefault();
		$(".mask, .window").hide();
	});
	
	
	//if mask is clicked
	$('.mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});
	
	



});