var currentOffset = 0;
var viewHeight, displayable, galleryHeight, galleryMargin, galleryCount, maxOffset;

$(function () {
	//$("body").backstretch("img/backgrounds/bg_restaurant.jpg");
	lightbox.option({
		'resizeDuration': 300,
		'wrapAround': true,
		'albumLabel': "Bild %1 von %2"
	});

	function init() {
		viewHeight = $(window).height();
		displayable = Math.floor((viewHeight - 220) / 140);
		galleryHeight = displayable * 140;
		galleryMargin = (viewHeight - galleryHeight) / 2;
		galleryCount = $('#navi li').length;
		maxOffset = -1 * (galleryCount - displayable) * 140;
		console.debug(displayable, galleryCount);

		$('#scroll').css({
			height: galleryHeight,
			'top': galleryMargin
		})
	}

	let imagesToLoad = [{
			path: "Restaurant01",
			alt: "nice"
		},
		{
			path: "Restaurant02",
			alt: ""
		},
		{
			path: "Restaurant31",
			alt: ""
		},
		{
			path: "Restaurant34",
			alt: ""
		},
		{
			path: "Restaurant05",
			alt: ""
		},
		{
			path: "Restaurant11",
			alt: ""
		},
		{
			path: "Restaurant13",
			alt: ""
		},
		{
			path: "Restaurant14",
			alt: ""
		},
		{
			path: "Restaurant07",
			alt: ""
		},
		{
			path: "Restaurant08",
			alt: ""
		},
		{
			path: "Restaurant48",
			alt: ""
		},
		{
			path: "Restaurant17",
			alt: ""
		},
		{
			path: "Restaurant19",
			alt: "Der Blick auf das Foyer aus unserer oberen Etage"
		},
		{
			path: "Restaurant20",
			alt: ""
		},
		{
			path: "Restaurant23",
			alt: ""
		},
		{
			path: "Restaurant25",
			alt: ""
		},
		{
			path: "Restaurant40",
			alt: ""
		},
		{
			path: "Restaurant49",
			alt: ""
		},
		{
			path: "Speisen01",
			alt: ""
		},
		{
			path: "Speisen22",
			alt: ""
		},
		{
			path: "Speisen21",
			alt: ""
		},
		{
			path: "Speisen23",
			alt: ""
		},
		{
			path: "Speisen24",
			alt: ""
		},
		{
			path: "Speisen25",
			alt: ""
		},
		{
			path: "Speisen26",
			alt: ""
		},
		{
			path: "Buffet01",
			alt: ""
		},
		{
			path: "Buffet02",
			alt: ""
		},
		{
			path: "Buffet04",
			alt: ""
		},
		{
			path: "Buffet06",
			alt: ""
		},
		{
			path: "Buffet07",
			alt: ""
		},
		{
			path: "Buffet11",
			alt: ""
		},
		{
			path: "Zubereitung01",
			alt: "So geht es in der Küche zu"
		},
		{
			path: "Zubereitung02",
			alt: "So geht es in der Küche zu"
		},
		{
			path: "Zubereitung03",
			alt: "So geht es in der Küche zu"
		},
		{
			path: "Zubereitung04",
			alt: "So geht es in der Küche zu"
		}
	]
	imagesToLoad.sort(function () {
		return Math.random() - 0.5;
	})
	imagesToLoad.forEach(function (element) {
		var item = '<li><a href="img/gallery/' +
			element.path +
			'.jpg" title="" data-lightbox="' +
			'album' //element.path.substr(0, 4)
			+
			'" style="background-image: url(img/gallery/thumb/' +
			element.path +
			'.jpg);" data-alt="' +
			element.alt +
			'" data-title="' +
			element.alt +
			'"></a></li>';
		$('#navi').append(item);
	});

	$('#prev').click(function () {
		if (currentOffset < 0) {
			currentOffset += 140;
		} else {
			currentOffset = maxOffset;
		}
		$('#navi').css('transform', "translateY(" + currentOffset + "px)");
	});

	$('#next').click(function () {

		if (currentOffset > maxOffset) {
			currentOffset -= 140;
		} else {
			currentOffset = 0;
		}
		$('#navi').css('transform', "translateY(" + currentOffset + "px)");
	});


	$(window).on('mousewheel DOMMouseScroll', function (event) {
		if (event.originalEvent.detail >= 0) {
			$('#next').click();
		} else {
			$('#prev').click();
		}
	});
	$(window).resize(function () {
		init();
	});
	init();
});