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]);

    // Hide categories select if there is only one
    if(Object.keys(data).length < 2){
        $("#category_wrapper").hide()
    }

    // 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));
    $("#search_icon, #letters button").css('font-size', (fontSize * 0.85));

    // 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);

    setImageMargin();
});