document.querySelectorAll(".gallery").forEach(item => {
    // Switch to gallery-js stylesheet
    item.className = "gallery-js";

    // Create the spotlight container
    let spot = document.createElement('div');
    spot.className = "gallery-spot";
    spot.style.display = "none";
    spot.appendChild(item.firstElementChild.cloneNode(true));
    item.after(spot);

    // Add some logic
    // item.addEventListener("click", function(e) {
    //     console.log(e.target);
    //     console.log(e.currentTarget);
    //     // Select the clicked media
    //     Array.from(item.children).forEach(child => {
    //         child.classList.remove('selected');
    //     });
    //     e.target.classList.add('selected');
    //
    //     // Display the current
    //     e.currentTarget.nextElementSibling.querySelector('div').innerHTML = e.target.outerHTML;
    // });
});

document.querySelectorAll(".gallery-js > *").forEach(item => {
    item.addEventListener("click", function(e) {
        console.log(e.target);
        // Manage selected media
        if(e.target.classList.contains('selected')) {
            e.target.classList.remove('selected');
        } else {
            e.target.classList.add('selected');
        }
        Array.from(e.target.parentElement.children).forEach(el => {
            if(el != e.target) el.classList.remove('selected');
        });

        // Change content of spotlight
        let spot = e.target.parentElement.nextElementSibling;
        spot.replaceChild(e.target.cloneNode(true), spot.firstElementChild);
        // Open spotlight media in a new tab
        spot.firstElementChild.addEventListener("click", function(e) {
            window.open(spot.firstElementChild.src, "_blank");
        });

        // Display the spotlight
        if(e.target.classList.contains('selected')) {
             spot.style.display = "flex";
        } else {
            spot.style.display = "none";
        }
    });
});