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

  // 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(".bubble, 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.3);
  $("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);

  isToggled = false;
  /* updateImageSize(); */
});
