let resolutionA = 16;
let resolutionB = 9;
let fontSize = 1;

$(document).ready(function () {
    // -------------- Credits -------------
    $("#credits_title").html($.trim(credits[0]))
    $("#credits_version").text($.trim(credits[1]))
    $("#credits_date").text($.trim(credits[2]))
    $("#credits_role_1").text($.trim(credits[3]))
    $("#credits_role_2").text($.trim(credits[4]))

    // -------------- Sources -------------
    if(sources.length > 0) {
        $(".fieldset-original").removeClass('d-none');
        $.each(sources, function(key, source_value) {
            $("#sources").append("<li>"+source_value+"</li>")
        });
    }

    // ------------- Fix Links ------------
    $("#inner_container a").attr("target", "_blank");
    $(".modal a").attr("target", "_blank");

    // Change titles with credits_title var
    $('.app-title').html(credits[0]);

    // -------- Slideshow app fixes -------
    let txt = "";
    let slideInterval;

    if (!SHOW_CAPTIONS || $(".carousel-caption").length < 1) {
        $("#carousel .carousel-caption").remove();
        $("#hide_captions_check").hide().attr("aria-hidden", true);
    } else {
        $("#hide_captions_check input").change(function () {
            if ($(this).is(":checked")) {
                $("#carousel .carousel-caption").css({ display: "block" });
            } else {
                $("#carousel .carousel-caption")
                    .removeClass("d-block")
                    .css({ display: "none" });
            }
        });
    }

    if (USE_CAPTIONS_SHADOWS) {
        $(".carousel-caption").css({ textShadow: "1px 1px 1px #555" });
    }

    $(".carousel-item:first").addClass("active");

    if ($(".carousel-item").length < 2) {
        $("#carousel button, #play-btn").remove();
    }

    // ---------- Prevent loop, show carousel indicators - bullets (1/2) --------
    $("#carousel").attr("data-bs-wrap", "false");
    $("#controls").append('<span id="slide_status" class="float-end mt-1 me-2 d-none" tabindex="0"> </span>');
    let total_slides = $(".carousel-item").length;

    let indicators_html = '<div class="carousel-indicators">';
    for (let a = 0; a < total_slides; a++) {
        current = a === 0 ? ' class="active" aria-current="true" ' : "";
        indicators_html += `<button type="button" data-bs-target="#carousel" data-bs-slide-to="${a}" aria-label="Διαφάνεια ${a + 1}" ${current}></button>`;
    }
    indicators_html += "</div>";
    $("#carousel").prepend(indicators_html);
    $(".carousel-indicators button").css({
        height: "3px",
        // borderTop: "1px solid",
    });

    function update_carousel_stats(slide) {
        $("#controls #slide_status").text(
            `Διαφάνεια: ${slide}/${total_slides}`
        );
    }
    update_carousel_stats(1);
    $(".carousel-control-prev").attr("disabled", "disabled").hide();

    // ---------- Prevent loop, show carousel indicators - bullets (1/2 END) --------

    $("#carousel").on("slid.bs.carousel", (event) => {
        txt = $(event.relatedTarget).find(".carousel-caption").text();

        if ($.trim(txt).length < 1) {
            txt = $(event.relatedTarget).find("img").attr("alt");
        }

        // ---------- Prevent loop, show carousel indicators - bullets (2/2) --------
        update_carousel_stats(event.to + 1);
        $("#alert").text($("#controls #slide_status").text().replace("/", " από ") + ". " + txt);
        $(".carousel-control-prev, .carousel-control-next").removeAttr("disabled").show();

        if (event.to == 0) {
            $(".carousel-control-prev").attr("disabled", "disabled").hide();
        } else if (event.to == total_slides - 1) {
            $(".carousel-control-next").attr("disabled", "disabled").hide();
        }
        // ---------- Prevent loop, show carousel indicators - bullets (2/2 END) --------
    });

    $("#play-btn").click(function () {
        let icon = $(this).find("i");
        if (icon.hasClass("paused")) {
            setTimeout(function () {
            $("#carousel").carousel("next");
            slideInterval = setInterval(function () {
                $("#carousel").carousel("next");
            }, 8000);
            }, 1000);

            icon.removeClass("paused bi-play-circle");
            icon.addClass("bi-pause-circle");
            $("body").addClass("bg-slideshow");
        } else {
            clearInterval(slideInterval);
            icon.addClass("paused bi-play-circle");
            icon.removeClass("bi-pause-circle");
            $("body").removeClass("bg-slideshow");
        }
    });

    // Resize window
    $(window).resize();

    // --------- Theme Mode ----------
    // Set initial theme based on local storage
    if (localStorage.getItem("theme") === "dark") {
        $("body").addClass("dark-mode");
        $("#themeIcon").removeClass("bi-moon").addClass("bi-sun")
    }

    // Change theme mode
    $("#themeToggle").click(function() {
        isDark = $("body").hasClass("dark-mode");
        if(isDark) {
            $("body").removeClass("dark-mode");
            $("#themeIcon").removeClass("bi-sun").addClass("bi-moon");
            localStorage.setItem("theme", "light");
        } else {
            $("body").addClass("dark-mode");
            $("#themeIcon").removeClass("bi-moon").addClass("bi-sun");
            localStorage.setItem("theme", "dark");
        }
    });

    // Hide theme button
    if(!ENABLE_DARK_MODE){
        $("#themeToggle").hide();
        $("body").removeClass("dark-mode");
    }

    // ----------- Help screen ------------
    // Hide help screen button
    if(!ENABLE_HELP_SCREEN){
        $("#helpBtn").hide();
    }
    
    $('#outer_container').removeClass('opacity-0');
});

$(window).resize(function () {
    // Adjust inner_container height on window resize
    // Window Dimensions
    let windowWidth = $(window).width();
    let windowHeight = $(window).height();

    // Adjust font size (dynamically set size based on screen size)
    fontSize = 0.018 * Math.min(windowWidth, windowHeight) + 4;
    $("*")
        .not("video, audio, track, img, canvas, script, mjx-container *")
        .css('font-size', fontSize)
        .css('line-height', (fontSize * 1.5) + "px")

    $("h1").css('font-size', (fontSize * 1.30));
    $("h2").css('font-size', (fontSize * 1.25));
    $("h3").css('font-size', (fontSize * 1.2));
    $("h4").css('font-size', (fontSize * 1.15));
    $("h5, strong, fieldset, legend").css('font-size', (fontSize * 1.1));
    $("h6").css('font-size', (fontSize * 1.05));
    $("sup, sub").css('font-size', (fontSize * 0.7));
    $(".bi").css('font-size', (fontSize * 1.8));
    $(".bi.small").css('font-size', (fontSize * 1.1));

    // Adjust width
    let maxWidth = 1280;
    let width = (windowWidth >= maxWidth) ? maxWidth : windowWidth;

    // Adjust resolution (landscape OR portrait)
    if (windowWidth > windowHeight) {
        resolutionA = 16;
        resolutionB = 9;
    } else if (windowWidth < windowHeight) {
        resolutionA = 9;
        resolutionB = 16;
    }

    // Fix for mobile devices to make width - body padding
    if(windowWidth < maxWidth){
        width -= (2 * windowWidth / 100)
    }

    // Adjust height
    let height = (width * resolutionB) / resolutionA;

    // Additional check if height with body margin is bigger than window Height to recalculate height and width
    if ((height + (2 * windowWidth / 100)) > windowHeight) {
        height = windowHeight - (2 * windowWidth / 100);
        width = (height * resolutionA) / resolutionB;
    }
    $("#outer_container").css('width', width);

    // Fix the inner_container height
    let tHeight = height - $("#header").outerHeight() - ($("#main").outerHeight(true) - $("#inner_container").outerHeight(true));// (height - header_height - (main_padding))
    $("#inner_container").css('height', tHeight);
    $("#carousel .carousel-item").css('height', tHeight);
});