const header = document.querySelector("header");
const linkThing = document.querySelector(".featuredCard");
const featuredHeaders = document.querySelectorAll('.featuredCard > *');
const featured = document.querySelector('.featured');
const featuredTabs = document.querySelectorAll('.featured > *');
const featuredBg = document.querySelector('.headerBg > img');
var prevId = 1;
var intervalID;

function chFeatured(id, tf) {
	if (tf && id === prevId) return location.href = tf;

	if(!id) id = prevId + 1;
	if(id > 4) id = 1;
	if(id === prevId) return linkThing.setAttribute("onclick", featuredHeaders[id-1].getAttribute("onclick"));
	clearInterval(intervalID);
	timeraa();

	featuredHeaders.forEach((e, i) => {
		const isSelected = i === id-1;
		e.style.display = isSelected ? "block" : "none";
		featuredTabs[i].classList.toggle("selected", isSelected);
	})

	featured.scrollTo({
		left: featuredTabs[id-1].offsetLeft - document.body.offsetWidth / 10,
		behavior: "smooth"
	})

	let pos = ["-", ""]

	if (document.body.offsetWidth < 655) {
		pos[0] = ""
		pos[1] = "-"
	}

	const thumbnail = featuredTabs[id-1].children[0].src
	featuredBg.animate([
        { transform: `translatex(${prevId < id ? pos[0] : pos[1]}100px)`, opacity: 0}, 
        { transform: 'translatex(0)', opacity: 1 }
    ], {
        duration: 400,
        iterations: 1,
		easing: "cubic-bezier(0,1,.42,1)"
    });

	featuredHeaders[id-1].childNodes.forEach((e, i) => {
		if (typeof e.animate !== "function") return;
		e.animate([
			{ transform: `translatex(${prevId < id ? pos[0] : pos[1]}${100 + Number(String(i) + "0")}px)` }, 
			{ transform: 'translatex(0px)' }
		], {
			duration: 400 + Number(String(i) + "00"),
			iterations: 1,
			easing: "cubic-bezier(0,1,.42,1)"
		});
	})

	linkThing.setAttribute("onclick", featuredHeaders[id-1].getAttribute("onclick"))

	document.querySelector(".featuredCard").setAttribute("onmouseover", featuredHeaders[id-1].getAttribute("onmouseover"));

	featuredBg.src = thumbnail
	prevId = id;
}

const timeraa = () => intervalID = setInterval(chFeatured, 10000);
timeraa();

document.addEventListener("onload", chFeatured(1))