let magazineHTML = `
  <div class="hn-mag-div" aria-label="HelloNation Magazine" onclick="window.open('https://www.hellonation.com/mag/ny/yorktown/52734', '_blank')">
    <div class="hn-mag-title">
      <p id="hn-title-hello" class="black-text-shadow">Hello</p>
      <p id="hn-title-city" class="white-text-shadow">Yorktown</p>
      <p id="hn-title-state" class="white-text-shadow">New York</p>
    </div>
    <div class="hn-mag-video-wrapper">
      <video autoplay muted loop playsinline poster="//vid.hellonetcdn.com/vid/ny/yorktown2025hellonation/nyyorkhn25_wel_rev2_iwd1.jpg?">
        <source src="//vid.hellonetcdn.com/vid/ny/yorktown2025hellonation/nyyorkhn25_wel_rev2_iwd_xtlrg_univ.mp4?" type="video/mp4">
      </video>
    </div>
    <div id="hn-mag-footer-wrap">
        <p id="hn-mag-footer">Video Magazine</p>
    </div>

  </div>
`;

function fitTextToLines(el, lineCount = 2, minFontSize = 10, maxFontSize = 40, onFitComplete) {


  function getRealLineHeight(fontSize = 24) {
    const span = document.createElement("span");
    span.textContent = "Hg"; // typical tall/low characters
    span.style.fontFamily = 'FF-GRIFTERBold';
    span.style.fontSize = fontSize + "px";
    span.style.fontWeight = 'bold'; // if GRIFTERBold isn't bold by default
    span.style.letterSpacing = 0;
    span.style.padding = '0';
    span.style.margin = '0';
    span.style.lineHeight = "normal";
    span.style.position = "absolute";
    span.style.visibility = "hidden";
    document.body.appendChild(span);
    const realHeight = span.offsetHeight;
    document.body.removeChild(span);
    //console.log('getRealLineheight for fontSize', fontSize, 'realLineHeight', realHeight );
    return realHeight;
  }
  function applyFit() {
    //console.log('readjust fonts', minFontSize, maxFontSize);
    el.style.fontSize = maxFontSize + "px";
    el.style.lineHeight = "1";
    el.style.whiteSpace = "normal";


    requestAnimationFrame(() => {

      const initialLineHeight = getRealLineHeight(maxFontSize);
      let lineCountUsed = lineCount;
      let maxHeight = initialLineHeight * lineCount + 1;
      // Check if content height is less than 1 line
      if (el.scrollHeight <= initialLineHeight + 1) {
        lineCountUsed = 1;
        maxHeight = initialLineHeight + 1;
        while (
          el.scrollWidth > el.clientWidth &&
          parseFloat(el.style.fontSize) > minFontSize
        ) {
          const currentSize = parseFloat(el.style.fontSize);
          el.style.fontSize = (currentSize - 1) + "px";
        }
      }
      else{
        while (
          el.scrollHeight > maxHeight &&
          parseFloat(el.style.fontSize) > minFontSize
        ) {
          const currentSize = parseFloat(el.style.fontSize);
          el.style.fontSize = (currentSize - 1) + "px";

          // Recalculate real line height after font size change
          const adjustedLineHeight = getRealLineHeight(currentSize - 1);
          maxHeight = adjustedLineHeight * lineCountUsed + 1; // update threshold
          //console.log('lineHeight', realLineHeight, 'maxHeight', maxHeight, 'scrollHeight', el.scrollHeight);
        }
      }

      //console.log('lineCountUsed', lineCountUsed);
      const finalFontSize = parseFloat(el.style.fontSize);
      if (typeof onFitComplete === "function") {
        onFitComplete(finalFontSize);
      }

    });
  }

  applyFit(); // Initial run

  // ResizeObserver to track changes in container size
  const observer = new ResizeObserver(() => applyFit());
  observer.observe(el);

  // Fallbacks for general environment changes
  window.addEventListener("resize", applyFit);
  window.addEventListener("orientationchange", applyFit);

  // Return a cleanup function if needed
  return () => {
    //observer.disconnect();
    window.removeEventListener("resize", applyFit);
    window.removeEventListener("orientationchange", applyFit);
  };
}


var wrapperdiv = document.getElementById("hn-mag-wrap");

if(wrapperdiv != null) {
	wrapperdiv.innerHTML = magazineHTML;
}else{
	var tourElement = document.createElement('div');
	tourElement.setAttribute("id", "hn-mag-wrap");
	tourElement.innerHTML = magazineHTML;
	var scriptElement = document.currentScript;
	if(!scriptElement) {
		var scripts = document.getElementsByTagName("script");
		scriptElement = scripts[scripts.length - 1];
	}
	scriptElement.parentNode.insertBefore(tourElement, scriptElement);
}
const magstyle = document.createElement('style');
magstyle.id = 'hn-mag-style';
magstyle.innerHTML = `
  @font-face {font-family:FF-GRIFTERBold;src:url("https://www.hellonation.com/code/php/font-proxy.php") format("opentype");font-weight:bold;font-style:normal;}

  #hn-mag-wrap .hn-mag-div {font-weight:bold !important;font-family:FF-GRIFTERBold,GRIFTER !important;overflow:hidden !important; max-width:350px !important;min-width:150px !important;margin:auto !important;position:relative !important;background-image:url(https://www.hellonation.com/m/modimages/New_York4.jpg);background-repeat:no-repeat;background-size:100% 100%;background-position:0 0;cursor:pointer;border:2px solid #333 !important;}
  #hn-mag-wrap .hn-mag-title {margin-top:5px !important;margin-left:5px !important;position:relative !important; }
  .black-text-shadow {color: #000;text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);}
  .white-text-shadow {color: #fff;text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}
  #hn-mag-wrap #hn-title-hello{max-width:65%;font-size:clamp(25px, 3vw, 60px);line-height:1;margin:0 !important;color:#00264c !important;hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;-webkit-hyphens:auto;hyphenate-after:2;-ms-hyphenate-after:2;-moz-hyphenate-after:2;-webkit-hyphenate-after:2;hyphenate-before:2;-ms-hyphenate-before:2;-moz-hyphenate-before:2;-webkit-hyphenate-before:2;text-align:left !important;}
  #hn-mag-wrap #hn-title-city{width:calc(100% - 5px);box-sizing: border-box;display:block;font-size:clamp(12px, 2vw, 30px); line-height:1;max-height:calc(1em * 2);overflow:hidden;margin:0;color:#fff !important;hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;-webkit-hyphens:auto;hyphenate-after:2;-ms-hyphenate-after:2;-moz-hyphenate-after:2;-webkit-hyphenate-after:2;hyphenate-before:2;-ms-hyphenate-before:2;-moz-hyphenate-before:2;-webkit-hyphenate-before:2;text-align:left;}
  #hn-mag-wrap #hn-title-state{max-width:70%;font-size:clamp(10px, 1vw, 15px); line-height:1 !important;margin:0;color:#fff !important;letter-spacing:0.1em;hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;-webkit-hyphens:auto;hyphenate-after:2;-ms-hyphenate-after:2;-moz-hyphenate-after:2;-webkit-hyphenate-after:2;hyphenate-before:2;-ms-hyphenate-before:2;-moz-hyphenate-before:2;-webkit-hyphenate-before:2;text-align:left;}
  #hn-mag-wrap #hn-mag-bg{position:absolute;top:0px !important;display:block;width:auto !important; height:auto !important;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-tap-highlight-color:transparent;padding:0;-ms-transform:scale(.5);-ms-transform-origin:0 0 0;-webkit-transform:scale(.5);-webkit-transform-origin:0 0 0;transform:scale(.5);transform-origin:0 0 0;}
  #hn-mag-wrap .hn-mag-video-wrapper video{width:100%;border-top:5px solid #000 !important; border-bottom:5px solid #000 !important;}
  #hn-mag-wrap #hn-mag-footer-wrap{margin:auto;max-width:80%;min-width:50%;padding:10px;}
  #hn-mag-wrap #hn-mag-footer{margin:0;padding:0;font-size:clamp(10px, 1vw, 15px);line-height:1;letter-spacing:1px;display:flex;justify-content:center;color:#fff !important;}
`;
document.head.appendChild(magstyle);

window.addEventListener("load", () => {
  const helloText = document.getElementById('hn-title-hello');
  const cityTitle = document.getElementById('hn-title-city');
  const stateTitle = document.getElementById('hn-title-state');
  const footerText = document.getElementById('hn-mag-footer');
  const cityName = cityTitle.textContent.trim();
  const charCount = cityName.length;



  // Main Cover Title with custom interpolation points
  const coverTitlePoints = [
    { chars: 9, size: 50 },
    { chars: 15, size: 40 },
    { chars: 24, size: 24 }
  ];

  let mainFontSize;
  //console.log(charCount);
  if (charCount <= coverTitlePoints[0].chars) {
    mainFontSize = coverTitlePoints[0].size;
  } else if (charCount >= coverTitlePoints[2].chars) {
    mainFontSize = coverTitlePoints[2].size;
  } else {
    const [start, end] = charCount <= coverTitlePoints[1].chars
      ? [coverTitlePoints[0], coverTitlePoints[1]]
      : [coverTitlePoints[1], coverTitlePoints[2]];

    mainFontSize = start.size + ((end.size - start.size) * (charCount - start.chars)) / (end.chars - start.chars);
  }
  //let minFontSize = Math.round(mainFontSize/2);
  //console.log('minsize', minFontSize, 'maxSize', mainFontSize);
  fitTextToLines(helloText, 1, 25, 60, (calculatedSize) => {
  //console.log("Final font size:", calculatedSize + "px");
  //console.log('city Main:', mainFontSize, 'relative size:', Math.round(calculatedSize/1.8), 'min', Math.min(mainFontSize, Math.round(calculatedSize/1.8)));
      fitTextToLines(cityTitle, 2, 10, Math.min(mainFontSize, Math.round(calculatedSize/1.8)), (calculatedSize) =>{
        //console.log('city font size', calculatedSize);
        cityTitle.style.lineHeight = 1.1;
      });
      fitTextToLines(stateTitle,1, 10, Math.min(22, Math.round(calculatedSize/4)));
      fitTextToLines(footerText,1, 10, Math.min(20, Math.round(calculatedSize/4)));
  });




});