let resolutionA = 16;
let resolutionB = 9;
let fontSize = 1;
let tHeight = 0;
let showCaption = false;

$(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;

  showCaption = SHOW_CAPTIONS;

  if (!SHOW_CAPTIONS || $(".carousel-caption").length < 1) {
    $("#carousel .carousel-caption").remove();
    $("#hide_captions_check").hide().attr("aria-hidden", true);
    $("#caption_toggle").hide().attr("aria-hidden", true);
  } else {
    $("#caption_toggle").click(function () {
      if ($("#carousel .carousel-caption").css("display") === "block") {
        $("#carousel .carousel-caption")
          .removeClass("d-block")
          .css({ display: "none" });
        $("#caption_toggle").html(
          '<i class="bi bi-toggle-off" role="img" aria-label="Λεζάντες - Captions"></i>'
        );
        $("#caption_toggle").removeClass("btn-move-right");
        $("#caption_toggle").addClass("btn-move-left");
        showCaption = false;
      } else {
        $("#carousel .carousel-caption").css({ display: "block" });
        $("#caption_toggle").html(
          '<i class="bi bi-toggle-on" role="img" aria-label="Λεζάντες - Captions" ></i>'
        );
        $("#caption_toggle").removeClass("btn-move-left");
        $("#caption_toggle").addClass("btn-move-right");
        showCaption = true;
      }
      $(window).resize();
    });
  }

  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) => {
    caption_el = $(event.relatedTarget).find(".carousel-caption");

    if(showCaption){
      // Change hide individually foreach slide based on caption height
      cHeight = tHeight - caption_el.outerHeight(true) - $(".carousel-indicators").outerHeight(true);
      $(event.relatedTarget).find(".carousel-image-wrapper, .image_wrap").css('height', cHeight);
    } else {
      $(event.relatedTarget).find(".carousel-image-wrapper, .image_wrap").css('height', tHeight);
    }

    txt = caption_el.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.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
  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);
  if(showCaption){
    cHeight = tHeight - $(".active .carousel-caption").outerHeight(true) - $(".carousel-indicators").outerHeight(true);
    $(".carousel-image-wrapper, .image_wrap").css('height', cHeight);
  } else {
    $(".carousel-image-wrapper, .image_wrap").css('height', tHeight);
  }
});