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

  $("#hide_captions_check input").click();

  // Store panzoom instances per carousel item
  const panzoomMap = new Map();

  // Initialize panzoom for each carousel item
  document.querySelectorAll('.carousel-item .panzoom-container').forEach((el) => {
  const pz = panzoom(el, { 
    smoothScroll: false,
    bounds: true,
    boundsPadding: 0.1,
    maxZoom: 2,
    minZoom: 1,
    initialZoom: 1,
    onTouch: function(e) {
        // `e` - is current touch event.
        return false; // tells the library to not preventDefault.
      }
    });
    panzoomMap.set(el, { pz, el });
  });

  // Helper to get current active item
  function getActivePanzoom() {
    const activeItem = document.querySelector('.carousel-item.active .panzoom-container');
    return panzoomMap.get(activeItem);
  }

  // Zoom buttons
  document.getElementById('zoomIn').addEventListener('click', () => {
    const active  = getActivePanzoom();
    if (!active ) return;
    const { pz, el } = active;
    const rect = el.getBoundingClientRect();
    const x = rect.width / 2;
    const y = rect.height / 2;
    pz.smoothZoom(x, y, 1.2);
  });
  document.getElementById('zoomOut').addEventListener('click', () => {
    const active = getActivePanzoom();
    if (!active ) return;
    const { pz, el } = active;
    const rect = el.getBoundingClientRect();
    const x = rect.width / 2;
    const y = rect.height / 2;
    pz.smoothZoom(x, y, 0.8);
  });

  // Pan buttons
  const panStep = 50;
  document.getElementById('panUp').addEventListener('click', () => {
    const active  = getActivePanzoom();
    if (!active ) return;
    const { pz, el } = active;
    pz.moveBy(0, -panStep);
  });
  document.getElementById('panDown').addEventListener('click', () => {
    const active  = getActivePanzoom();
    if (!active ) return;
    const { pz, el } = active;
    pz.moveBy(0, panStep);
  });
  document.getElementById('panLeft').addEventListener('click', () => {
    const active  = getActivePanzoom();
    if (!active ) return;
    const { pz, el } = active;
    pz.moveBy(-panStep, 0);
  });
  document.getElementById('panRight').addEventListener('click', () => {
    const active  = getActivePanzoom();
    if (!active ) return;
    const { pz, el } = active;
    pz.moveBy(panStep, 0);
  });
  // Reset button
  document.getElementById('panReset').addEventListener('click', () => {
    const active = getActivePanzoom();
    if (!active ) return;
    const { pz, el } = active;
    el.style.transformOrigin = '0px 0px 0px';
    el.style.transform = 'matrix(1, 0, 0, 1, 0, 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 *, .zp-button , .zp-button-i")
    .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").not(".zp-button-i").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);
});