// JavaScript Document
$(document).ready(function() {
		$('<div id="lightbox"></div>')
		.css({
		opacity : 0.8,
		width : $(document).width(),
		height : $(document).height()
		}).appendTo('body').hide();
		
		$('<div id="lightboxConteiner"><img border="0"></img></div>')
			.css({
			left: ($(document).width()/2 - 300),
			top: ($(document).height()/2 - 200)
			}).appendTo('body').hide();
			
		$('<div id="fechar">Fechar</div>')
			.css({
			left: 15,
			top: 15,
		}).appendTo('body').hide();
		
		$('.foto').click(function(event) {
			event.preventDefault();
			$('#lightbox').fadeIn(500);
			$('#fechar').fadeIn(500);
			
			$('#lightboxConteiner img').attr('src', $(this).attr('alt'));
			
			$('#lightboxConteiner')
			.css({
			left: ($(document).width()/2 - 300),
			top: 100
			}).fadeIn(500);
			
		});
		
		$('#fechar').click(function(event){
			$('#lightbox').fadeOut(500);
			$('#fechar').fadeOut(500); 
			$('#lightboxConteiner').fadeOut(500);
		});
		
		$('#lightbox').click(function(event){
			$('#lightbox').fadeOut(500);
			$('#fechar').fadeOut(500); 
			$('#lightboxConteiner').fadeOut(500);
		});
});