// JavaScript Document
$(document).ready( function() {
							
	$('.content').append('<div id="mask"></div>');
	$('.wrap').append('<div class="lightbox"></div>');
	$('.lightbox').prepend('<div class="lb_close"></div>');
	
	//select all the a tag with name equal to modal
	$('#gallery a').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
		//Get the A tag
		var imageSrc = $(this).attr('href');
		
		var image = $('<img/>');
		image.attr('src', imageSrc);
		$('.lightbox').append(image);
		
		//Get the screen height and width
		var maskHeight = $('.content').height()+50;
		var maskWidth = $('.content').width()+68;
		//Set height and width to mask to fill up the whole screen
		$('#mask').css({
			'width': maskWidth,
			'height': maskHeight,
			'opacity' : 0.7
		});
		
		//transition effect		
		$('#mask').fadeIn(200);	
	
		//Get the window height and width
		var winH = $('.content').height();
		var winW = $('.content').width();
		              
		//Set the popup window to center
		$('.lightbox').css('top',  winH/2-$(image).height()/2+100); 		
		$('.lightbox').css({
			'top' : 107,
			'left': 400,
			'position': "absolute",
			'z-index': 9999
		});
	
		//transition effect
		$('.lightbox').animate({ "marginTop": "-30px" }, { queue:false, duration:500 }).fadeIn(500);
	
	});
	
	//if close button is clicked
	$('.lb_close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		$('.lightbox').animate({ "marginTop": "30px" }, { queue:false, duration:500 }).fadeOut(500, function(){$('.lightbox img').remove();});
		$('#mask').hide();
		
	});		


});