<div id="cmptv-logo-clock-banner" style="
  position: relative;
  width: 700px;
  height: 90px;
  margin: 0 auto;
  overflow: hidden;
  background: #000;
">
  <!-- OPTIONAL BACKGROUND IMAGE -->
  <div id="cmptv-banner-bg" style="
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 1;
    pointer-events: none;
  "></div>

  <!-- LOGO -->
  <img id="cmptv-banner-logo" src="" alt="CMPTV Logo" style="
    position: absolute;
    display: block;
    z-index: 2;
    pointer-events: none;
  ">

  <!-- OPTIONAL DARK OVERLAY -->
  <div id="cmptv-banner-overlay" style="
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
  "></div>

  <!-- CLOCK -->
  <div id="clock-banner-time" style="
    position: absolute;
    font-family: Arial, sans-serif;
    font-weight: bold;
    line-height: 1;
    color: #ffffff;
    white-space: nowrap;
    z-index: 4;
    pointer-events: none;
  ">
    Loading...
  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {

  /* =========================================================
     CMPTV LOGO & CLOCK CUSTOM MODULE CONTROLS
     Change only these values for quick adjustments
     ========================================================= */

  const SETTINGS = {
    /* BANNER */
    bannerWidth: 680,
    bannerHeight: 100,
    bannerBackgroundColor: "#000000",

    /* OPTIONAL BACKGROUND IMAGE */
    useBackgroundImage: false,
    backgroundImage: "",
    backgroundSize: "cover",         // cover | contain | 680px 100px
    backgroundPositionX: 0,          // + right, - left
    backgroundPositionY: 0,          // + down, - up
    backgroundOpacity: 1,

    /* LOGO */
    logoImage: "https://mycommunitytv.org/images/give-back-gift-cards-745-x-120-px-1.png",
    logoWidth: 680,                  // exact px width
    logoHeight: 100,                 // exact px height
    logoX: -20,                        // + right, - left
    logoY: +5,                        // + down, - up
    logoOpacity: 1,
    logoFit: "contain",              // contain | cover | fill
    logoAnchorX: "left",             // left | center | right
    logoAnchorY: "top",              // top | center | bottom

    /* OVERLAY FOR READABILITY */
    useOverlay: false,
    overlayColor: "rgba(0,0,0,0.20)",

    /* CLOCK */
    showClock: true,
    clockX: 170,                     // + right, - left
    clockY: 6,                       // + down, - up
    clockFontSize: 35.5,
    clockFontFamily: "Arial, sans-serif",
    clockFontWeight: "bold",
    clockColor: "#ffffff",
    clockShadow: "2px 2px 5px rgba(0,0,0,0.7)",
    clockLetterSpacing: "0px",
    clockAlign: "left",              // left | center | right

    /* DATE / TIME FORMAT */
    use12Hour: true,
    showWeekday: true,
    showMonth: true,
    showDay: true,
    showYear: false,
    showTime: true,
    showSeconds: false,
    showAMPM: true,

    /* TEXT STYLE */
    monthFormat: "short",            // short | long | numeric
    weekdayFormat: "short",          // short | long
    separator1: ", ",
    separator2: ", ",

    /* TIMEZONE / LOCALE */
    locale: undefined,               // undefined = browser/site default, or "en-CA"
    timeZone: undefined              // undefined = browser/site default, or "America/Toronto"
  };

  const banner = document.getElementById("cmptv-logo-clock-banner");
  const bg = document.getElementById("cmptv-banner-bg");
  const logo = document.getElementById("cmptv-banner-logo");
  const overlay = document.getElementById("cmptv-banner-overlay");
  const clock = document.getElementById("clock-banner-time");

  function applyBannerSettings() {
    banner.style.width = SETTINGS.bannerWidth + "px";
    banner.style.height = SETTINGS.bannerHeight + "px";
    banner.style.background = SETTINGS.bannerBackgroundColor;

    if (SETTINGS.useBackgroundImage && SETTINGS.backgroundImage) {
      bg.style.backgroundImage = `url("${SETTINGS.backgroundImage}")`;
      bg.style.backgroundSize = SETTINGS.backgroundSize;
      bg.style.backgroundPosition =
        `calc(50% + ${SETTINGS.backgroundPositionX}px) calc(50% + ${SETTINGS.backgroundPositionY}px)`;
      bg.style.opacity = SETTINGS.backgroundOpacity;
      bg.style.display = "block";
    } else {
      bg.style.display = "none";
    }

    overlay.style.background = SETTINGS.useOverlay ? SETTINGS.overlayColor : "transparent";
  }

  function getAnchorBaseX() {
    if (SETTINGS.logoAnchorX === "center") return (SETTINGS.bannerWidth - SETTINGS.logoWidth) / 2;
    if (SETTINGS.logoAnchorX === "right") return SETTINGS.bannerWidth - SETTINGS.logoWidth;
    return 0;
  }

  function getAnchorBaseY() {
    if (SETTINGS.logoAnchorY === "center") return (SETTINGS.bannerHeight - SETTINGS.logoHeight) / 2;
    if (SETTINGS.logoAnchorY === "bottom") return SETTINGS.bannerHeight - SETTINGS.logoHeight;
    return 0;
  }

  function applyLogoSettings() {
    logo.src = SETTINGS.logoImage;
    logo.style.width = SETTINGS.logoWidth + "px";
    logo.style.height = SETTINGS.logoHeight + "px";
    logo.style.left = (getAnchorBaseX() + SETTINGS.logoX) + "px";
    logo.style.top = (getAnchorBaseY() + SETTINGS.logoY) + "px";
    logo.style.opacity = SETTINGS.logoOpacity;
    logo.style.objectFit = SETTINGS.logoFit;
  }

  function formatParts(now) {
    const parts = [];

    if (SETTINGS.showWeekday) {
      const weekday = now.toLocaleDateString(SETTINGS.locale, {
        weekday: SETTINGS.weekdayFormat,
        timeZone: SETTINGS.timeZone
      });
      parts.push(weekday);
    }

    const dateBits = [];

    if (SETTINGS.showMonth) {
      let monthValue;
      if (SETTINGS.monthFormat === "numeric") {
        monthValue = now.toLocaleDateString(SETTINGS.locale, {
          month: "numeric",
          timeZone: SETTINGS.timeZone
        });
      } else {
        monthValue = now.toLocaleDateString(SETTINGS.locale, {
          month: SETTINGS.monthFormat,
          timeZone: SETTINGS.timeZone
        });
      }
      dateBits.push(monthValue);
    }

    if (SETTINGS.showDay) {
      const dayValue = now.toLocaleDateString(SETTINGS.locale, {
        day: "numeric",
        timeZone: SETTINGS.timeZone
      });
      dateBits.push(dayValue);
    }

    if (SETTINGS.showYear) {
      const yearValue = now.toLocaleDateString(SETTINGS.locale, {
        year: "numeric",
        timeZone: SETTINGS.timeZone
      });
      dateBits.push(yearValue);
    }

    if (dateBits.length) {
      parts.push(dateBits.join(" "));
    }

    if (SETTINGS.showTime) {
      const timeOptions = {
        hour: "numeric",
        minute: "2-digit",
        hour12: SETTINGS.use12Hour,
        timeZone: SETTINGS.timeZone
      };

      if (SETTINGS.showSeconds) {
        timeOptions.second = "2-digit";
      }

      let timeString = now.toLocaleTimeString(SETTINGS.locale, timeOptions);

      if (!SETTINGS.showAMPM && SETTINGS.use12Hour) {
        timeString = timeString.replace(/\s?(AM|PM)$/i, "");
      }

      parts.push(timeString);
    }

    if (parts.length === 3) {
      return parts[0] + SETTINGS.separator1 + parts[1] + SETTINGS.separator2 + parts[2];
    }

    if (parts.length === 2) {
      return parts[0] + SETTINGS.separator1 + parts[1];
    }

    if (parts.length === 1) {
      return parts[0];
    }

    return "";
  }

  function updateClock() {
    if (!SETTINGS.showClock) {
      clock.style.display = "none";
      return;
    }

    const now = new Date();
    const output = formatParts(now);

    clock.style.display = "block";
    clock.textContent = output || "Time Unavailable";
    clock.style.left = SETTINGS.clockX + "px";
    clock.style.top = SETTINGS.clockY + "px";
    clock.style.fontSize = SETTINGS.clockFontSize + "px";
    clock.style.fontFamily = SETTINGS.clockFontFamily;
    clock.style.fontWeight = SETTINGS.clockFontWeight;
    clock.style.color = SETTINGS.clockColor;
    clock.style.textShadow = SETTINGS.clockShadow;
    clock.style.letterSpacing = SETTINGS.clockLetterSpacing;
    clock.style.textAlign = SETTINGS.clockAlign;
  }

  applyBannerSettings();
  applyLogoSettings();
  updateClock();

  setInterval(updateClock, SETTINGS.showSeconds ? 1000 : 15000);
});
</script>