const video_formats = ["webm", "mp4"];
const audio_formats = ["mp3", "flac", "opus", "ogg", "m4a"];
const image_formats = ["jpg", "jpeg", "gif", "png", "bmp", "webp"];

const overlay = document.getElementById("overlay");
let   scale = 1;

function mousescroll(e) {
    e.preventDefault();
    scale = Math.min(Math.max(0.25, scale + (e.deltaY * -0.001)), 4);
    e.target.style.transform = `scale(${scale})`;
}

const ext_filter = (ext, pathname) => pathname.toLowerCase().endsWith(ext);

function to_overlay(eltyp, pathname) {
    const el = document.createElement(eltyp);
    if (eltyp !== "audio") el.addEventListener('wheel', mousescroll);
    if (eltyp !== "img") el.autoplay = el.controls = true;
    el.src = pathname;
    overlay.appendChild(el);
    overlay.style.visibility = "visible";
}

document.getElementById("overlay").addEventListener("click", e => {
    e.target.firstChild.remove();
    e.target.style.visibility = "hidden";
    scale = 1;
});

const file_links = Array.from(document.getElementsByTagName('tr')).slice(2).filter(e => e.lastChild.innerHTML != "DIR").map(l => l.firstChild.firstChild);

file_links.forEach(f => f.addEventListener('click', e => {
    const pathname = e.target.pathname;
    if (video_formats.some(ext => ext_filter(ext, pathname)))
        to_overlay("video", pathname);
    else if (audio_formats.some(ext => ext_filter(ext, pathname)))
        to_overlay("audio", pathname);
    else if (image_formats.some(ext => ext_filter(ext, pathname)))
        to_overlay("img", pathname);
    if (overlay.firstChild != null)
        e.preventDefault();
}));