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

let scale = 1;

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

document.getElementById("view").addEventListener("click", e => {
    e.target.firstChild.remove();
    e.target.style.display = "none";
});

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

file_links.forEach(f => f.addEventListener('click', e => {
    if (video_formats.some(ext => e.target.pathname.endsWith(ext))) {
        e.preventDefault();
        const video = document.createElement("video");
        video.addEventListener('wheel', mousescroll);
        video.autoplay = true;
        video.controls = true;
        video.src = e.target.pathname;
        document.getElementById("view").appendChild(video);
        document.getElementById("view").style.display = view_display_style;
    } else if (audio_formats.some(ext => e.target.pathname.endsWith(ext))) {
        e.preventDefault();
        const audio = document.createElement("audio");
        audio.autoplay = true;
        audio.controls = true;
        audio.src = e.target.pathname;
        document.getElementById("view").appendChild(audio);
        document.getElementById("view").style.display = view_display_style;
    } else if (image_formats.some(ext => e.target.pathname.endsWith(ext))) {
        e.preventDefault();
        const image = document.createElement("img");
        image.addEventListener('wheel', mousescroll);
        image.src = e.target.pathname;
        document.getElementById("view").appendChild(image);
        document.getElementById("view").style.display = view_display_style;
    }
}));