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
		})
	}
	// Anzuzeigende Bilder
	let imagesToLoad = [{
			path: "Speisen01",
			alt: ""
		},
		{
			path: "Speisen02",
			alt: ""
		},
		{
			path: "Speisen03",
			alt: ""
		},
		{
			path: "Speisen04",
			alt: ""
		},
		{
			path: "Speisen05",
			alt: ""
		},
		{
			path: "Restaurant01",
			alt: ""
		},
		{
			path: "Restaurant02",
			alt: ""
		},
		{
			path: "Restaurant03",
			alt: ""
		},
		{
			path: "Restaurant04",
			alt: ""
		},
		{
			path: "Restaurant05",
			alt: ""
		},
		{
			path: "Restaurant06",
			alt: ""
		},
		{
			path: "Restaurant07",
			alt: ""
		},
		{
			path: "Restaurant08",
			alt: "",
			title: ""
		},
		{
			path: "Restaurant09",
			alt: ""
		},
		{
			path: "Restaurant10",
			alt: ""
		},
		{
			path: "Restaurant11",
			alt: ""
		},
		{
			path: "Restaurant12",
			alt: ""
		},
		{
			path: "Restaurant13",
			alt: ""
		},
		{
			path: "Restaurant14",
			alt: ""
		},
		{
			path: "Restaurant15",
			alt: ""
		},
		{
			path: "Restaurant16",
			alt: ""
		},
		{
			path: "Restaurant17",
			alt: ""
		},
		{
			path: "Restaurant18",
			alt: ""
		},
		{
			path: "Restaurant19",
			alt: ""
		},
		{
			path: "Restaurant20",
			alt: ""
		},
	];
	// Ende Anzuzeigende Bilder 

	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/thumbs/' +
			element.path +
			'.jpg);" data-alt="' +
			element.alt +
			'" data-title="' +
			(element.title ? element.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();
});