<!-- ENTERPRISE HEADLINE ZONE: 1025x384px / AUTO-FIT TEXT — LIVE from JS Events group RSS -->
<div id="rssHeadlineZone" style="
  width:100%;
  aspect-ratio:1025/384;
   background:#000;
  color:#fff;
  font-family:Arial, Helvetica, sans-serif;
  position:relative;
  overflow:hidden;
  box-sizing:border-box;
  padding:4px 28px 22px 14px;
">
  <div id="rssHeadlineContent" style="
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity 0.9s ease-in-out;
    display:flex;
    flex-direction:column;
    justify-content:center;
    box-sizing:border-box;
  ">
    Loading events...
  </div>
</div>

<script>
(function () {
  // Live feed: upcoming events for JS Events group 157 (Give Back Promotions)
  var FEED_URL = "/community-group-events-feed.php?groupid=157";
  var MAX_ITEMS = 20;

  // Fallback headlines shown only if the live feed is unreachable.
  var fallbackHeadlines = [
    {
      title: "GIVE BACK PROMOTIONS — COMMUNITY EVENTS",
      dateTime: "Live schedule loading…",
      location: "Online",
      organizer: "Canada’s Marketplace"
    }
  ];

  var headlines = fallbackHeadlines.slice();
  var display = document.getElementById("rssHeadlineContent");
  var i = 0;
  var timer = null;

  function escapeHtml(str) {
    return String(str || "").replace(/[&<>"']/g, function (m) {
      return ({
        "&": "&amp;",
        "<": "&lt;",
        ">": "&gt;",
        '"': "&quot;",
        "'": "&#039;"
      })[m];
    });
  }

  function textOf(node, tag) {
    if (!node) return "";
    var el = node.getElementsByTagName(tag);
    if (!el || !el.length) return "";
    return (el[0].textContent || "").trim();
  }

  // cmptv: namespaced tags — read via localName across items.
  function nsText(item, local) {
    var kids = item.childNodes;
    for (var k = 0; k < kids.length; k++) {
      var n = kids[k];
      if (n.nodeType === 1 && (n.localName === local || n.nodeName === "cmptv:" + local)) {
        return (n.textContent || "").trim();
      }
    }
    return "";
  }

  function parseFeed(xmlText) {
    var out = [];
    try {
      var doc = new DOMParser().parseFromString(xmlText, "application/xml");
      if (doc.getElementsByTagName("parsererror").length) return out;
      var items = doc.getElementsByTagName("item");
      for (var x = 0; x < items.length && out.length < MAX_ITEMS; x++) {
        var it = items[x];
        var title = textOf(it, "title");
        if (!title) continue;
        out.push({
          title: title,
          dateTime: nsText(it, "dateTime") || "",
          location: nsText(it, "location") || "",
          organizer: nsText(it, "organizer") || "Canada’s Marketplace"
        });
      }
    } catch (err) {}
    return out;
  }

  function loadFeed() {
    try {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", FEED_URL + (FEED_URL.indexOf("?") > -1 ? "&" : "?") + "_ts=" + (new Date().getTime()), true);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            var parsed = parseFeed(xhr.responseText);
            if (parsed.length) {
              headlines = parsed;
              i = 0;
            }
          }
        }
      };
      xhr.send();
    } catch (err) {}
  }

  function buildLayout(e) {
    display.innerHTML = `
      <div id="headlineFitWrap" style="
        width:100%;
        height:100%;
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:8px;
        overflow:hidden;
      ">
        <div class="fit-line title-line" style="
          font-weight:700;
          text-transform:uppercase;
          white-space:nowrap;
          overflow:visible;
          text-overflow:clip;
          line-height:1.0;
          letter-spacing:0;
          text-shadow:0 2px 4px rgba(0,0,0,0.55);
        ">${escapeHtml(e.title)}</div>

        <div class="fit-line datetime-line" style="
          font-weight:500;
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;
          line-height:1.05;
          text-shadow:0 2px 4px rgba(0,0,0,0.45);
        ">${escapeHtml(e.dateTime)}</div>

        <div class="fit-line location-line" style="
          font-weight:500;
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;
          line-height:1.05;
          text-shadow:0 2px 4px rgba(0,0,0,0.45);
        ">${escapeHtml(e.location)}</div>

        <div class="fit-line organizer-line" style="
          font-weight:500;
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;
          line-height:1.05;
          text-shadow:0 2px 4px rgba(0,0,0,0.45);
        ">Organized by: ${escapeHtml(e.organizer)}</div>
      </div>
    `;
  }

  function fitHeadlineBlock() {
    const wrap = document.getElementById("headlineFitWrap");
    if (!wrap) return;

    const title = wrap.querySelector(".title-line");
    const dateTime = wrap.querySelector(".datetime-line");
    const location = wrap.querySelector(".location-line");
    const organizer = wrap.querySelector(".organizer-line");

    const maxSizes = {
      title: 56,
      dateTime: 46,
      location: 42,
      organizer: 38
    };

    const minSizes = {
      title: 16,
      dateTime: 18,
      location: 16,
      organizer: 15
    };

    const ratios = {
      dateTime: maxSizes.dateTime / maxSizes.title,
      location: maxSizes.location / maxSizes.title,
      organizer: maxSizes.organizer / maxSizes.title
    };

    let titleSize = maxSizes.title;

    function applySizes(base) {
      const dt = Math.max(minSizes.dateTime, Math.round(base * ratios.dateTime));
      const loc = Math.max(minSizes.location, Math.round(base * ratios.location));
      const org = Math.max(minSizes.organizer, Math.round(base * ratios.organizer));

      title.style.fontSize = base + "px";
      dateTime.style.fontSize = dt + "px";
      location.style.fontSize = loc + "px";
      organizer.style.fontSize = org + "px";

      const dynamicGap = Math.max(4, Math.round(base * 0.14));
      wrap.style.gap = dynamicGap + "px";
    }

    applySizes(titleSize);

    while (titleSize > minSizes.title) {
      const fitsHeight = wrap.scrollHeight <= wrap.clientHeight;
      const fitsTitleWidth = title.scrollWidth <= title.clientWidth;
      const fitsDateWidth = dateTime.scrollWidth <= dateTime.clientWidth;
      const fitsLocationWidth = location.scrollWidth <= location.clientWidth;
      const fitsOrganizerWidth = organizer.scrollWidth <= organizer.clientWidth;

      if (fitsHeight && fitsTitleWidth && fitsDateWidth && fitsLocationWidth && fitsOrganizerWidth) {
        break;
      }

      titleSize -= 1;
      applySizes(titleSize);
    }

    if (title.scrollWidth > title.clientWidth) {
      title.style.letterSpacing = "-0.3px";

      while (titleSize > minSizes.title && title.scrollWidth > title.clientWidth) {
        titleSize -= 1;
        applySizes(titleSize);
      }
    }
  }

  function showNext() {
    if (!headlines.length) return;
    if (i >= headlines.length) i = 0;
    const e = headlines[i];
    display.style.opacity = 0;

    setTimeout(() => {
      buildLayout(e);
      fitHeadlineBlock();
      display.style.opacity = 1;
      i = (i + 1) % headlines.length;
    }, 900);
  }

  window.addEventListener("resize", function () {
    fitHeadlineBlock();
  });

  loadFeed();
  // Refresh live events every 10 minutes.
  setInterval(loadFeed, 600000);

  showNext();
  setInterval(showNext, 12000);
})();
</script>
