const colophon = document.querySelector(".colophon");
const container = document.querySelector(".index");

fetch("releases.json")
	.then((res) => res.json())
	.then((data) => {
		buildIndex(data.releases);
	});

const buildIndex = function (releases) {
	container.innerHTML = "";
	for (const [index, release] of releases.entries()) {
		let item = document.createElement("li");
		let link = document.createElement("a");
		link.href = index.toString().padStart(2, "0");
		link.innerHTML = index.toString().padStart(2, "0") + ". " + release.title;
		item.appendChild(link);
		item.addEventListener("mouseenter", (e) => {
			buildColophon(release);
		});
		container.appendChild(item);
	}
};

const buildColophon = function (release) {
	colophon.innerHTML = "";
	let caretakers = document.createElement("div");
	caretakers.classList.add("caretakers");

	for (const caretaker of release.caretakers) {
		caretakers.appendChild(buildAvatar(caretaker));
	}

	let contributors = document.createElement("ul");
	contributors.classList.add("contributors");

	for (const contributor of release.contributors) {
		let contribution = document.createElement("div");
		for (const person of contributor) {
			contribution.appendChild(buildAvatar(person));
		}
		contributors.appendChild(contribution);
	}
	colophon.appendChild(caretakers);
	colophon.appendChild(contributors);
};

const buildAvatar = function (who) {
	let avatar = document.createElement("img");
	avatar.classList.add("avatar");
	avatar.src = "img/avatar/" + who + ".jpg";
	avatar.alt = who;
	return avatar;
};