var index = 1000;
var viewWidth, viewHeight, imgWidth, imgHeight, imgRatio, newWidth, newHeight, offsetX, offsetY, $newImage, galleryVisible, galleryHeight, galleryMargin, maxOffset, galleryCount;

function initGallery() {
	viewWidth = $(window).width();
	viewHeight = $(window).height();

	galleryVisible = Math.floor((viewHeight - 220) / 140);
	galleryHeight = galleryVisible * 140;
	galleryMargin = (viewHeight - galleryHeight) /2;
	galleryCount = $('#gallery_nav li').length;
	maxOffset = (galleryCount - galleryVisible) * 140;

	$('#gallery_scroll').css({
		height: galleryHeight,
		'margin-top': galleryMargin
	});

	resizeImage()
}

function resizeImage() {
	imgWidth = $($newImage).height();
	imgHeight = $($newImage).width();

	imgRatio = imgWidth / imgHeight;

	newWidth = viewWidth;
	newHeight = newWidth * imgRatio;

	offsetX = newWidth / 2;
	offsetY = (newHeight - viewHeight) / 2;

	$($newImage).attr('width',newWidth);
	$($newImage).attr('height',newHeight);

	$($newImage).css({
		top: - offsetY
	});
}



$(function() {

	$(window).resize(function() {
		initGallery();
	});

	initGallery();



	$('#gallery_nav a').click(function(event) {

		event.preventDefault();
		index = index - 1;

		var imgSrc = $(this).attr('href');

		$('.gallery_wrap').append('<img src="' + imgSrc + '" style="z-index:' + index + '"/>');
		$newImage = $('.gallery_wrap img');

		$($newImage).load(function(){
			resizeImage();
			$('.gallery_wrap img').first().stop().fadeOut(500, function () {
				$(this).remove();
			});
		});
		$('#gallery_nav a').removeClass('active');
		$(this).addClass('active');
	});



	var galleryOffset = 0;

	$('#gallery_prev').click(function() {
		if (galleryOffset <= -140) {
			galleryOffset = galleryOffset + 140;
			console.log(galleryOffset)
			$('#gallery_nav').stop().animate({
				top: galleryOffset
			}, 250);
		}
	});

	$('#gallery_next').click(function() {
		if (galleryOffset > -maxOffset) {
			galleryOffset = galleryOffset - 140;
			console.log(galleryOffset)
			$('#gallery_nav').stop().animate({
				top: galleryOffset
			}, 250);
		}
	});
});