$(document).ready(function() {
	$('.boxOverLayer').css('opacity', 0);
	$('#lightboxImage').css('opacity', 0);
	$('#lightboxLeftArrow, #lightboxRightArrow').css('opacity', 0);
	
	$('.box').hover(
		function() {
			$(this).find('.boxOverLayer').css('display', 'block').stop().animate({'opacity' : 1}, 150);
			$(this).find('img.boxImage').stop().animate({'bottom': '-13px', 'right' : '-13px'}, 150);
		},
		function() {
			$(this).find('.boxOverLayer').stop().animate({'opacity' : 0}, 150);
			$(this).find('img.boxImage').stop().animate({'bottom': '-18px', 'right' : '-18px'}, 150);
		}
	);
	
	function lightboxHideImage() {
		$('#lightboxImage').animate({'opacity': 0}, 200, function() {
			resetLink();
			$(this).css('display', 'none');
			$('#lightbox #lightboxBackground div').animate({'width': '24px', 'height': '24px'}, 200);
			$('#lightboxLoader')
				.css('display', 'block')
				.animate({'opacity': 1}, 200);
			$('#lightboxLeftArrow, #lightboxRightArrow')
				.css('display', 'none')
				.animate({'opacity': 0}, 200);
		});
	}
	function lightboxShowImage() {
		$('#lightboxLoader').animate({'opacity': 0}, 200, function() {
			$(this).css('display', 'none');
			$('#lightbox #lightboxBackground div').animate({'width': $('#lightboxImage').width(), 'height': $('#lightboxImage').height()}, 200);
			$('#lightboxImage')
				.css('display', 'block')
				.animate({'opacity': 1}, 200);
			$('#lightboxLeftArrow, #lightboxRightArrow')
				.css('margin-top', ($(window).scrollTop() + 60 + ($('#lightboxImage').height()/2) - 40)+'px')
				.css('display', 'block')
				.animate({'opacity': 1}, 200);
		});
	}
	function lightboxHide() {
		$('#lightbox').animate({'opacity': 0}, 200, function() {
			resetLink();
			$(this).css('display', 'none').find('#lightboxImage').removeAttr('src');
			$('#lightbox #lightboxBackground div').css('width', '24px').css('height', '24px');
			$('#lightboxLoader').css('display', 'block').css('opacity', 1);
			$('#lightboxImage').css('display', 'none').css('opacity', 0);
			$('#lightboxLeftArrow, #lightboxRightArrow').css('display', 'none').css('opacity', 0);
		});
	}
	function lightboxShow() {
		$('#lightbox')
			.css('display', 'block')
			.css('width', $(document).width()).css('height', $(document).height())
			.css('opacity', 0)
			.animate({'opacity': 1}, 300);
	}
	function resetLink() {
		var image = $('img[rel="lightbox"]').get(currentLightboxImg);
		$(image).parent('a').attr('href', currentLightboxLink);
	}
	function changeImage() {
		var image = $('img[rel="lightbox"]').get(currentLightboxImg);
		currentLightboxLink = $(image).parent('a').attr('href');
		$('#lightboxImage').attr('src', currentLightboxLink).load(lightboxShowImage);
		$(image).parent('a').removeAttr('href');
	}
	$('img[rel="lightbox"]').each(function(i) {
		$(this).click(function() {
			currentLightboxImg = i;
			currentLightboxLink = $(this).parent('a').attr('href');
			var imageSource = $(this).parent('a');
			lightboxShow();
			$('#lightboxBackground').click(lightboxHide);
			$('#lightbox #lightboxBackground div').css('margin-top', ($(window).scrollTop() + 60)+'px');
			$('#lightboxImage').attr('src', currentLightboxLink).load(lightboxShowImage);
			$(this).parent('a').removeAttr('href');
		});
	});
	$('#lightboxLeftArrow').click(function() {
		if(currentLightboxImg > 0) {
			lightboxHideImage();
			setTimeout(function() {
				currentLightboxImg--;
				changeImage();
			}, 300);
		}
	});
	$('#lightboxRightArrow').click(function() {
		if((currentLightboxImg+1) < $('img[rel="lightbox"]').length) {
			lightboxHideImage();
			setTimeout(function() {
				currentLightboxImg++;
				changeImage();
			}, 300);
		}
	});
});