(() => {
    let currentIndex = 0;
    const mainEl = document.querySelector("main");
    const lightboxEl = document.querySelector(".c-lightbox");
    const lightboxBgEl = document.querySelector(".c-lightbox__bg");
    const lightboxCloseEl = document.querySelector(".c-lightbox__close");
    const lightboxPrevEl = document.querySelector(".c-lightbox__prev");
    const lightboxNextEl = document.querySelector(".c-lightbox__next");
    const lightboxImgEl = document.querySelector(".c-lightbox__img");
    const figureEls = Array.from(mainEl.querySelectorAll("figure")).map(el => el.querySelector("a"));

    const show = () => {
        lightboxEl.classList.add("is-shown");
    }

    const hide = () => {
        lightboxEl.classList.remove("is-shown");
    }

    const setIndex = (i) => {
        currentIndex = i;
        lightboxImgEl.src = figureEls[i].href;
    };

    lightboxBgEl.addEventListener("click", hide);
    lightboxCloseEl.addEventListener("click", hide);
    lightboxPrevEl.addEventListener("click", () => {
        setIndex(currentIndex === 0 ? figureEls.length - 1 : currentIndex - 1);
    });
    lightboxNextEl.addEventListener("click", () => {
        setIndex(currentIndex === figureEls.length - 1 ? 0 : currentIndex + 1);
    });
    
    figureEls.forEach((figureEl, i) => {
        figureEl.addEventListener("click", e => {
            e.preventDefault();
            show();
            setIndex(i);
        })
    });
})();