$(function () {
    $(".expandable").click(function () {
        let src_link = $(this).attr("href");

        let is_video = [".mpeg", ".mov", ".mp4", ".webm", ".mkv", ".ogg"].some(
            (ext) => src_link.endsWith(ext)
        );

        if (!is_video) {
            toggle_image($(this), src_link);
        } else {
            toggle_video($(this), src_link);
        }

        $(this).toggleClass("expanded");

        return false;
    });
});

function toggle_image(parent, src_link) {
    let expanded = parent.hasClass("expanded");
    let thumb = parent.find(".thumb");
    let src = parent.find(".src");

    if (!expanded) {
        if (src.length === 0) {
            thumb.css("opacity", 0.5);
            parent.append(`<img class="src" src="${src_link}">`);
    
            let src = parent.find(".src");
            
            src.hide();

            src.on("load", function () {
                thumb.hide();
                thumb.css("opacity", "");
                src.show();
            });
        } else {
            thumb.hide();
            src.show();
        }
    } else {
        src.hide();
        thumb.show();
    }
}

function toggle_video(parent, src_link) {
    let expanded = parent.hasClass("expanded");
    let thumb = parent.find(".thumb");
    let src = parent.parent().find(".src");

    if (!expanded) {
        if (src.length === 0) {
            thumb.css("opacity", 0.5);

            parent.append('<span class="closer">[Zavřít]<br></span>')

            parent.parent().append(
                `<video class="src" src="${src_link}" autoplay="" controls="" loop=""></video>`
            );

            let src = parent.parent().find(".src");

            src.hide();

            src.on("loadstart", function () {
                thumb.hide();
                thumb.css("opacity", "");
                src.show();
            });
        } else {
            thumb.hide();
            src.show();
            src.get(0).play();
            parent.find(".closer").show();
        }
    } else {
        src.get(0).pause();
        src.hide();
        thumb.show();
        parent.find(".closer").hide();
    }
}