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 > video").forEach(item => {
    // Remove the video controls
    item.removeAttribute('controls');
    // Generate a thumbnail
    item.addEventListener('loadedmetadata', e => {
        const item = e.target;
        item.currentTime = item.duration * 0.5;  // 10% of the video
        item.addEventListener('loadeddata', e => {
            const v = e.target;
            const canvas = document.createElement("canvas");
            canvas.width = v.videoWidth;
            canvas.height = v.videoHeight;
            // draw the video frame to canvas
            const ctx = canvas.getContext("2d");
            // ctx.drawImage(v, 0, 0, canvas.width, canvas.height);
            // draw the play button
            // icon = new Path2D("M10,16.5V7.5L16,12M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z");
            icon = new Path2D("M10 10 h 80 v 80 h -80 Z");
            console.log(icon);
            ctx.fill(icon);
            // return the canvas image as a blob
            ctx.canvas.toBlob(
                blob => {
                    console.log(blob);
                    v.setAttribute('poster', URL.createObjectURL(blob));
                },
                "image/png",
                0.75 /* quality */
            );
        });
    });
});

document.querySelectorAll(".gallery-js > *").forEach(item => {
    // Add some dynamic behavior
    item.addEventListener("click", function(e) {
        // 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);
        spot.firstElementChild.setAttribute('controls', "");

        // 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";
        }
    });
});