$(function () {
    update_expandable($(".expandable"));
});

function update_expandable(elements) {
    elements.each(function() {
        $(this).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 thumb = parent.find(".thumb");
    let src = parent.find(".src");

    if (src.length === 0) {
        thumb.addClass("loading");

        parent.append(`<img class="src" src="${src_link}">`);

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

        src.hide();
        src.on("load", function () {
            thumb.removeClass("loading");
            thumb.hide();
            src.show();

            parent.closest(".post-files").addClass("float-none-b");
        });

        return;
    }

    thumb.toggle();
    src.toggle();

    parent.closest(".post-files").toggleClass("float-none-b");
}

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

    if (src.length === 0) {
        thumb.addClass("loading");

        parent.append('<b class="closer">[Zavřít]<br></b>');
        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.removeClass("loading");
            thumb.hide();
            src.show();

            parent.closest(".post-files").addClass("float-none-b");
        });

        return;
    }

    thumb.toggle();
    src.toggle();

    if (expanded) {
        src.get(0).pause();
        src.get(0).currentTime = 0;
    } else {
        src.get(0).play();
    }

    parent.closest(".post-files").toggleClass("float-none-b");
    parent.find(".closer").toggle();
}