document.addEventListener("DOMContentLoaded",function(){var timelineContent={};var periodKeys=[];var loadedDotsInPeriod={};$.ajax({url:'/umbraco/surface/Timeline/GetYearDetails',type:'GET',success:function(data){$('#hdnJson').val(data);timelineContent=JSON.parse($('#hdnJson').val());loadedDotsInPeriod=JSON.parse($('#hdnJson').val());$.ajax({url:'/umbraco/surface/Timeline/GetYearTitles',type:'GET',success:function(data){$('#hdnTitlesJson').val(data);periodKeys=JSON.parse($('#hdnTitlesJson').val());initialize();document.querySelectorAll('.tab').forEach((tab,tabIndex)=>{tab.addEventListener('click',()=>{switchToTab(tabIndex);});});document.querySelectorAll('.dropdown-menu li').forEach((item,tabIndex)=>{item.addEventListener('click',function(){switchToTab(tabIndex);const dropdownMenu=document.querySelector('.dropdown-menu');if(dropdownMenu){dropdownMenu.style.display='none';}
const yearText=document.querySelector('.dropdown-toggle.tabmob .year-text');if(yearText){yearText.textContent=this.textContent;}});});function handleDropdownToggle(){const menu=document.querySelector('.dropdown-menu');if(menu){menu.style.display=(menu.style.display==='block')?'none':'block';}}
const dropdownToggle=document.querySelector('.dropdown-toggle.tabmob');if(dropdownToggle){dropdownToggle.addEventListener('click',handleDropdownToggle);}
document.addEventListener('click',function(event){const dropdown=document.querySelector('.custom-dropdown');const menu=document.querySelector('.dropdown-menu');if(dropdown&&menu&&!dropdown.contains(event.target)){menu.style.display='none';}});function adjustLayout(){const tabContainer=document.querySelector('.time-period-tabs');const customDropdown=document.querySelector('.custom-dropdown');if(window.innerWidth<=849){if(tabContainer)tabContainer.style.display='none';if(customDropdown)customDropdown.style.display='block';}else{if(tabContainer)tabContainer.style.display='flex';if(customDropdown)customDropdown.style.display='none';}}
window.addEventListener('resize',adjustLayout);adjustLayout();},error:function(xhr,status,error){console.error('Error:',error);console.error('Status:',status);console.error('Response:',xhr.responseText);}});},error:function(xhr,status,error){console.error('Error:',error);console.error('Status:',status);console.error('Response:',xhr.responseText);}});let currentPeriodIndex=0;let activeYearIndex=0;const dotSpacing=150;let currentPosition=0;function getCurrentPeriodKey(){return periodKeys[currentPeriodIndex];}
function getYearsForCurrentPeriod(){return timelineContent[getCurrentPeriodKey()].map((item)=>item.year);}
const timelineDots=document.getElementById("timelineDots");const prevBtn=document.getElementById("prevBtn");const nextBtn=document.getElementById("nextBtn");const timelineProgress=document.getElementById("timelineProgress");const contentContainer=document.getElementById("timelineContent");const fullyLoadedPeriods=new Set();const ANIMATIONS={MEDIUM:"transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)",CONTENT_FADE:"opacity 0.2s ease-in-out",PROGRESS:"width 0.25s cubic-bezier(0.4, 0, 0.2, 1), left 0.25s cubic-bezier(0.4, 0, 0.2, 1)",};function rebuildTimeline(){if(!timelineDots)return;timelineDots.innerHTML="";const years=getYearsForCurrentPeriod();const fragment=document.createDocumentFragment();years.forEach((year,index)=>{const dotContainer=document.createElement("div");dotContainer.className="timeline-dot-container";dotContainer.style.width=`${dotSpacing}px`;const dot=document.createElement("div");dot.className="timeline-dot";dot.setAttribute("data-index",index);dot.setAttribute("data-year",year);if(index===activeYearIndex){dot.classList.add("active");}else if(index<activeYearIndex){dot.classList.add("in-past");}
const yearLabel=document.createElement("div");yearLabel.className="timeline-dot-year";yearLabel.textContent=year;dot.appendChild(yearLabel);dotContainer.appendChild(dot);fragment.appendChild(dotContainer);});timelineDots.appendChild(fragment);timelineDots.addEventListener("click",function(e){const dot=e.target.closest(".timeline-dot");if(!dot)return;const index=parseInt(dot.getAttribute("data-index"),10);if(isNaN(index))return;ensureDotIsLoaded(index);setActiveYear(index);});centerTimeline();}
function centerTimeline(){if(!timelineDots)return;const wrapper=document.querySelector(".timeline-wrapper");if(!wrapper)return;const timelineContainer=document.querySelector(".timeline-container");const wrapperWidth=wrapper.clientWidth;const years=getYearsForCurrentPeriod();const totalDotsWidth=years.length*dotSpacing;if(totalDotsWidth<=wrapperWidth){const offset=(wrapperWidth-totalDotsWidth)/2;currentPosition=offset;timelineDots.style.transform=`translate3d(${offset}px, 0, 0)`;timelineContainer.style.setProperty("--left-fade-opacity","0");timelineContainer.style.setProperty("--right-fade-opacity","0");}else{positionForActiveDot();}
updateNavigationButtons();}
function positionForActiveDot(){if(!timelineDots)return;const wrapper=document.querySelector(".timeline-wrapper");if(!wrapper)return;const wrapperWidth=wrapper.clientWidth;const years=getYearsForCurrentPeriod();const totalDotsWidth=years.length*dotSpacing;if(totalDotsWidth>wrapperWidth){const activeDotOffset=activeYearIndex*dotSpacing+dotSpacing/2;const idealPosition=wrapperWidth/2-activeDotOffset;const minPosition=-(totalDotsWidth-wrapperWidth);const maxPosition=0;currentPosition=Math.max(minPosition,Math.min(maxPosition,idealPosition));timelineDots.classList.add("timeline-dots-animate");timelineDots.style.transform=`translate3d(${currentPosition}px, 0, 0)`;updateScrollIndicators();}}
function updateScrollIndicators(){const wrapper=document.querySelector(".timeline-wrapper");if(!wrapper)return;const timelineContainer=document.querySelector(".timeline-container");const wrapperWidth=wrapper.clientWidth;const years=getYearsForCurrentPeriod();const totalDotsWidth=years.length*dotSpacing;if(totalDotsWidth<=wrapperWidth){timelineContainer.style.setProperty("--left-fade-opacity","0");timelineContainer.style.setProperty("--right-fade-opacity","0");return;}
const minPosition=-(totalDotsWidth-wrapperWidth);const maxPosition=0;const isAtStart=currentPosition>=maxPosition-5;const isAtEnd=currentPosition<=minPosition+5;timelineContainer.style.setProperty("--left-fade-opacity",isAtStart?"0":"1");timelineContainer.style.setProperty("--right-fade-opacity",isAtEnd?"0":"1");}
function ensureDotIsLoaded(index){const currentPeriodKey=getCurrentPeriodKey();if(fullyLoadedPeriods.has(currentPeriodKey))return;if(loadedDotsInPeriod[currentPeriodKey].includes(index))return;loadedDotsInPeriod[currentPeriodKey].push(index);if(loadedDotsInPeriod[currentPeriodKey].length===timelineContent[currentPeriodKey].length){fullyLoadedPeriods.add(currentPeriodKey);}}
function updateYearContent(index){if(!contentContainer)return;ensureDotIsLoaded(index);const Content=timelineContent[getCurrentPeriodKey()][index];if(!Content)return;const newContentHTML=Content.HasImage?`
<div class="left-timeline-content is-image">
<img src="/sb/${Content.Image}" alt="${Content.Year}">
</div>
<div class="right-timeline-content is-text">
<div class="year-heading" id="yearHeading">${Content.Year}</div>
<div class="timeline-year-copy-container">
  <div class="timeline-year-copy">
    ${Content.Text}
  </div>
  <div class="timeline-fade-overlay"></div>
</div>
</div>
`:`
<div class="full-width-timeline-content is-text">
<div class="year-heading" id="yearHeading">${Content.Year}</div>
<div class="timeline-year-copy-container">
  <div class="timeline-year-copy">
     ${Content.Text}
  </div>
  <div class="timeline-fade-overlay"></div>
</div>
</div>
`;contentContainer.innerHTML=newContentHTML;requestAnimationFrame(()=>{checkTimelineContentOverflow();setTimeout(()=>{checkTimelineContentOverflow();},50);const images=contentContainer.querySelectorAll("img");images.forEach((img)=>{img.onload=()=>img.classList.add("loaded");if(img.complete)img.classList.add("loaded");});});}
function updateNavigationButtons(){const years=getYearsForCurrentPeriod();if(prevBtn){prevBtn.classList.toggle("hidden",activeYearIndex===0);}
if(nextBtn){nextBtn.classList.toggle("hidden",activeYearIndex===years.length-1);}}
function setActiveYear(index){const years=getYearsForCurrentPeriod();if(index<0||index>=years.length)return;activeYearIndex=index;document.querySelectorAll(".timeline-dot").forEach((dot,i)=>{dot.classList.remove("active","in-past");if(i===index){dot.classList.add("active");}else if(i<index){dot.classList.add("in-past");}});updateYearContent(index);positionForActiveDot();updateProgressBar();updateNavigationButtons();}
function updateProgressBar(){if(!timelineProgress)return;const wrapper=document.querySelector(".timeline-wrapper");if(!wrapper)return;const wrapperWidth=wrapper.clientWidth;const years=getYearsForCurrentPeriod();timelineProgress.classList.remove("timeline-progress-no-transition");if(activeYearIndex===years.length-1){timelineProgress.style.width=`${wrapperWidth}px`;return;}
const absoluteDotPosition=activeYearIndex*dotSpacing+dotSpacing/2;const dotPositionInWrapper=absoluteDotPosition+currentPosition;if(dotPositionInWrapper>=0&&dotPositionInWrapper<=wrapperWidth){timelineProgress.style.width=`${dotPositionInWrapper}px`;}else if(dotPositionInWrapper<0){timelineProgress.style.width="0";}else{timelineProgress.style.width=`${wrapperWidth}px`;}}
if(prevBtn){prevBtn.addEventListener("click",function(){if(activeYearIndex>0){ensureDotIsLoaded(activeYearIndex-1);setActiveYear(activeYearIndex-1);this.classList.add("clicked");setTimeout(()=>this.classList.remove("clicked"),150);}});}
if(nextBtn){nextBtn.addEventListener("click",function(){const years=getYearsForCurrentPeriod();if(activeYearIndex<years.length-1){ensureDotIsLoaded(activeYearIndex+1);setActiveYear(activeYearIndex+1);this.classList.add("clicked");setTimeout(()=>this.classList.remove("clicked"),150);}});}
function switchToTab(tabIndex){if(tabIndex===currentPeriodIndex)return;const tabs=document.querySelectorAll('.tab');tabs.forEach(t=>t.classList.remove('active'));tabs[tabIndex].classList.add('active');currentPeriodIndex=tabIndex;const newPeriodKey=getCurrentPeriodKey();const newYears=getYearsForCurrentPeriod();if(newYears.length>0){if(contentContainer){contentContainer.classList.add('content-fade');}
if(timelineDots){timelineDots.classList.add('content-fade');}
setTimeout(()=>{activeYearIndex=0;currentPosition=0;if(!loadedDotsInPeriod[newPeriodKey].includes(0)){loadedDotsInPeriod[newPeriodKey].push(0);}
rebuildTimeline();updateYearContent(0);updateNavigationButtons();updateProgressBar();updateScrollIndicators();requestAnimationFrame(()=>{if(timelineDots){timelineDots.classList.remove('content-fade');}
if(contentContainer){contentContainer.classList.remove('content-fade');}
setTimeout(()=>{checkTimelineContentOverflow();},50);});},200);}}
document.querySelectorAll('.tab').forEach((tab,tabIndex)=>{tab.addEventListener('click',()=>{switchToTab(tabIndex);});});document.querySelectorAll('.dropdown-menu li').forEach((item,tabIndex)=>{item.addEventListener('click',function(){switchToTab(tabIndex);const dropdownMenu=document.querySelector('.dropdown-menu');if(dropdownMenu){dropdownMenu.style.display='none';}
const yearText=document.querySelector('.dropdown-toggle.tabmob .year-text');if(yearText){yearText.textContent=this.textContent;}});});function handleDropdownToggle(){const menu=document.querySelector('.dropdown-menu');if(menu){menu.style.display=(menu.style.display==='block')?'none':'block';}}
const dropdownToggle=document.querySelector('.dropdown-toggle.tabmob');if(dropdownToggle){dropdownToggle.addEventListener('click',handleDropdownToggle);}
document.addEventListener('click',function(event){const dropdown=document.querySelector('.custom-dropdown');const menu=document.querySelector('.dropdown-menu');if(dropdown&&menu&&!dropdown.contains(event.target)){menu.style.display='none';}});function adjustLayout(){const tabContainer=document.querySelector('.time-period-tabs');const customDropdown=document.querySelector('.custom-dropdown');if(window.innerWidth<=849){if(tabContainer)tabContainer.style.display='none';if(customDropdown)customDropdown.style.display='block';}else{if(tabContainer)tabContainer.style.display='flex';if(customDropdown)customDropdown.style.display='none';}}
window.addEventListener('resize',adjustLayout);adjustLayout();function initializeContent(){const currentPeriodKey=getCurrentPeriodKey();if(!timelineContent[currentPeriodKey]||!timelineContent[currentPeriodKey].length)return;const Content=timelineContent[currentPeriodKey][activeYearIndex];if(Content&&contentContainer){const newContentHTML=Content.HasImage?`
<div class="left-timeline-content is-image">
  <img src="/sb/${Content.Image}" alt="${Content.Year}">
</div>
<div class="right-timeline-content is-text">
  <div class="year-heading" id="yearHeading">${Content.Year}</div>
  <div class="timeline-year-copy-container">
    <div class="timeline-year-copy">
       ${Content.Text}
    </div>
    <div class="timeline-fade-overlay"></div>
  </div>
</div>
`:`
<div class="full-width-timeline-content is-text">
  <div class="year-heading" id="yearHeading">${Content.Year}</div>
  <div class="timeline-year-copy-container">
    <div class="timeline-year-copy">
      ${Content.Text}
    </div>
    <div class="timeline-fade-overlay"></div>
  </div>
</div>
`;contentContainer.innerHTML=newContentHTML;contentContainer.style.opacity="1";requestAnimationFrame(()=>{checkTimelineContentOverflow();setTimeout(()=>{checkTimelineContentOverflow();},50);const images=contentContainer.querySelectorAll("img");images.forEach((img)=>{img.onload=()=>img.classList.add("loaded");if(img.complete)img.classList.add("loaded");});});}}
function initializeProgressBar(){if(!timelineProgress)return;const wrapper=document.querySelector(".timeline-wrapper");if(!wrapper)return;if(activeYearIndex===0){const firstDotContainer=document.querySelector(".timeline-dot-container");if(!firstDotContainer)return;const dotCenter=dotSpacing/2;const offset=currentPosition>0?currentPosition:0;const progressWidth=dotCenter+offset;timelineProgress.classList.add("timeline-progress-no-transition");timelineProgress.style.width=`${progressWidth}px`;void timelineProgress.offsetWidth;setTimeout(()=>{timelineProgress.classList.remove("timeline-progress-no-transition");},50);}}
function loadAllDotsForCurrentPeriod(){const currentPeriodKey=getCurrentPeriodKey();const totalDots=timelineContent[currentPeriodKey].length;loadedDotsInPeriod[currentPeriodKey]=Array.from({length:totalDots},(_,i)=>i);fullyLoadedPeriods.add(currentPeriodKey);}
function initialize(){document.querySelectorAll(".tab").forEach((tab,index)=>{if(index===currentPeriodIndex){tab.classList.add("active");}else{tab.classList.remove("active");}});loadAllDotsForCurrentPeriod();rebuildTimeline();initializeContent();initializeProgressBar();updateScrollIndicators();updateNavigationButtons();let resizeTimeout;window.addEventListener("resize",()=>{clearTimeout(resizeTimeout);resizeTimeout=setTimeout(()=>{centerTimeline();updateProgressBar();checkTimelineContentOverflow();},500);});}});function checkTimelineContentOverflow(){const timelineContents=document.querySelectorAll(".timeline-year-copy");timelineContents.forEach((content)=>{const fadeOverlay=content.nextElementSibling;if(!fadeOverlay)return;if(!content.hasScrollListener){content.hasScrollListener=true;content.onscroll=function(){const scrolledToBottom=Math.abs(content.scrollHeight-content.scrollTop-content.clientHeight)<10;fadeOverlay.style.opacity=scrolledToBottom?"0":"1";};}
const isOverflowing=content.scrollHeight>content.clientHeight;fadeOverlay.style.opacity=isOverflowing?"1":"0";});}
window.addEventListener("load",function(){setTimeout(()=>{checkTimelineContentOverflow();},50);});;;