let scrollValue = 0;
const slideshow = document.querySelector('.slideshow');
let scrollValueMax = 0;


const scroll = (vw) => {
	scrollValue += vw;
	if (scrollValue < 0)
		scrollValue = 0;
	else if (scrollValue > scrollValueMax)
		scrollValue = scrollValueMax;
	slideshow.style.transform = `translateX(${-scrollValue}vw)`;
};

const handleWheelEvent = (e) => {
	scroll(e.deltaY / 12);
};

const handleKeyDown = (e) => {
	const key = e.key;
	switch (key) {
		case 'ArrowUp':
			scroll(-20);
			break;
		case 'ArrowRight':
			scroll(20);
			break;
		case 'ArrowDown':
			scroll(20);
			break;
		case 'ArrowLeft':
			scroll(-20);
			break;
		case 'Home':
			scroll(-Number.MAX_VALUE);
			break;
		case 'End':
			scroll(Number.MAX_VALUE);
			break;
		case 'PageUp':
			scroll(-90);
			break;
		case 'PageDown':
			scroll(90);
			break;
	}
};

const updateScrollValueMax = () => {
	scrollValueMax = slideshow.clientWidth / window.innerWidth * 100 - 100;
	scroll(0);
};

const userInteracted = () => {
	const hint = document.querySelector('.hint');
	hint.classList.add('hint-hidden');
};

const addScrollFunctionality = () => {
	document.body.style.overflowX = 'hidden';
	new ResizeObserver(updateScrollValueMax).observe(slideshow);
	window.addEventListener('wheel', handleWheelEvent);
	window.addEventListener('wheel', userInteracted, {once: true});
	window.addEventListener('keydown', handleKeyDown);
	window.addEventListener('keydown', userInteracted, {once: true});
};

const init = () => {
	const touchscreen = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
	if (!touchscreen)
		addScrollFunctionality();
};

window.addEventListener('DOMContentLoaded', init);