$(function () {
	$('.port-item a').click(function () {
		$this = $(this);
		imgSrc = $this.attr('href');
		$this.find('span').addClass('load');
		
		var overlay = $('<div id="overlay"><p>Click on the image to close.</p><img /></div>');
		overlay.hide().find('img').attr('title', 'Click to close.').load(function () {
			$this.find('span').removeClass('load');
			$(this).parent().addClass('visible');
			$('#overlay').click(function () {
				$(this).fadeOut(function () {
					$(this).remove();
				});
			});
			var width = $(this).width();

			$(this).parent().css({
				position:'absolute',
				top:30+$(window).scrollTop()+'px',
				left:'50%',
				marginLeft:'-'+Math.round(width/2)+'px'
			});
		}).attr('src', imgSrc);
		
		$('body').append(overlay);
		$('#overlay').fadeIn();
		
		return false;
	});
});