// NAVBAR EFFECT ON SCROLL
const navstick = document.querySelector('.navstyle');
const scrollto = document.querySelector('.back-to-top');

window.onscroll = function () {
	var top = window.scrollY;
	if (top >= 30) {
		navstick.classList.add('onscroll');
	} else {
		navstick.classList.remove('onscroll');
	}

	if (top >= 500) {
		scrollto.classList.add('visibleback');
	} else {
		scrollto.classList.remove('visibleback');
	}
}
// TRAILER OVERLAY ON/OFF
const onstate = document.querySelector('#overlay');
const modalOn = document.querySelectorAll('.triggeron');
const modalOff = document.querySelectorAll('.triggeroff');
const iframebox = document.querySelector('.iframebox');
const iframe = document.createElement('iframe');

for (i of modalOn) {
	i.addEventListener('click', function () {
		const playid = document.getElementById("trailer" + this.id);
		const ytid = playid.getAttribute('data-value');
		const titre = playid.getAttribute('data-title');
		const url = 'https://www.youtube.com/embed/' + ytid;
		const allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
		iframe.id = 'videoIframe';
		iframe.src = url;
		iframe.title = titre;
		iframe.allow = allow;
		iframe.allowFullscreen = true;
		iframebox.appendChild(iframe);
		onstate.classList.add('on');
	});
}

modalOff.forEach(trigger => trigger.addEventListener("click", off));
function off() {
	onstate.classList.remove('on');
	iframe.remove();
}
