window.addEventListener("DOMContentLoaded", ()=>{

	let carousel = document.getElementById("imageCarouselBlock");
	let carouselItems = carousel.getElementsByClassName("carouselItem");
	let controls = document.getElementById("imageCarouselControls");

	//build controls
	for(let i of carouselItems){
		let heading = "Feature";
		let h2s = i.getElementsByTagName("h2");
		if(h2s.length){
			heading = h2s[0].innerHTML;
		}

		let rect = i.getBoundingClientRect();

		let but = document.createElement("a");
		but.className = "choice";
		but.innerHTML = heading;
		but.setAttribute("tabindex", "0");
		controls.appendChild(but);
		but.focusOnMe = function(){
			carousel.scroll(rect.x, 0);
			for(let c of controls.getElementsByClassName("choice")){
				c.classList.remove("selected");
			}
			this.classList.add("selected");
		}
		but.addEventListener("click", function(){this.focusOnMe();});
		but.addEventListener("keyup", function(e){
			if(e.key != "Enter") return;
			this.focusOnMe();});
	}

	let set = controls.getElementsByClassName("choice");
	if(set.length) set[0].classList.add("selected");

});