$(document).on("click", ".nav-tabs .nav-item", function () {
  centerItFixedWidth($(this), $(this).parent());
});

function centerItFixedWidth(target, outer) {
  var out = $(outer);
  var tar = $(target);
  var x = out.width();
  var y = tar.outerWidth(true);
  var z = tar.index();
  var q = 0;
  var m = out.find('li');
  //Just need to add up the width of all the elements before our target. 
  for (var i = 0; i < z; i++) {
    q += $(m[i]).outerWidth(true);
  }
  out.animate({
    scrollLeft: (Math.max(0, q - (x - y) / 2))
  }, 300);
}

(function () {
  const initializedBars = new WeakSet();
  const resizeObservers = new WeakMap();

  function setupNewsBar(newsBar) {
    if (!newsBar || initializedBars.has(newsBar)) return;

    const oldMarquee = newsBar.querySelector("marquee");
    if (!oldMarquee) return;

    // Create wrapper
    const wrapper = document.createElement("div");
    wrapper.className = "marquee-wrapper";

    // Create moving text
    const newMarquee = document.createElement("div");
    newMarquee.className = "marquee-content";
    newMarquee.innerHTML = oldMarquee.innerHTML;

    wrapper.appendChild(newMarquee);
    oldMarquee.replaceWith(wrapper);

    const updateSpeed = () => {
      const pixelsPerSecond = 75;
      const textWidth = newMarquee.scrollWidth;
      const wrapperWidth = wrapper.clientWidth;

      // No animation if text fits inside
      if (textWidth <= wrapperWidth) {
        newMarquee.style.animationDuration = "0s";
        newMarquee.classList.add("no-marquee");
        return;
      }

      newMarquee.classList.remove("no-marquee");

      // total travel distance = text width + visible area
      const totalDistance = textWidth + wrapperWidth;
      const time = totalDistance / pixelsPerSecond;

      newMarquee.style.animationDuration = `${time}s`;
    };

    updateSpeed();

    const observer = new ResizeObserver(() => {
      updateSpeed();
    });

    observer.observe(newMarquee);
    observer.observe(wrapper);

    resizeObservers.set(newsBar, observer);
    initializedBars.add(newsBar);
  }

  function initAllNewsBars() {
    document.querySelectorAll(".upcoming-fixure").forEach(setupNewsBar);
  }

  // first load
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initAllNewsBars);
  } else {
    initAllNewsBars();
  }

  // watch Vue route/component DOM updates
  const pageObserver = new MutationObserver(() => {
    initAllNewsBars();
  });

  pageObserver.observe(document.body, {
    childList: true,
    subtree: true,
  });
})();