window.addEventListener('load', function(){
  // GSAP
  gsap.registerPlugin(ScrollTrigger);

  // History Event
  const history = document.querySelector('.history');
  if(history){
    let hisLine = document.querySelector('.history .line');
    let hisItem = document.querySelectorAll('.history .item');
    let hisCon = document.querySelectorAll('.history .his-con dl');
  
    hisItem.forEach((item) => {
      gsap.to(item, {
        scrollTrigger : {
          trigger:item,
          start:"top +=50%",
          toggleActions: "play none none none",
          onEnter: () => item.classList.add("active"),
          onLeaveBack: () => item.classList.remove("active")
        }
      })
    })
  
    hisCon.forEach((con) => {
      gsap.to(con, {
        scrollTrigger : {
          trigger:con,
          start:"top +=50%",
          toggleActions: "play none none none",
          onEnter: () => con.classList.add("active"),
          onLeaveBack: () => con.classList.remove("active")
        }
      })
    })
  
    window.addEventListener('scroll', function(){
      let totalHeight = 0;
  
      hisCon.forEach(con => {
        if(con.classList.contains('active')) {
          totalHeight += con.offsetHeight;
        }
      });
  
      if(totalHeight > 0) {
        hisLine.style.height = totalHeight + "px";
      } else {
        hisLine.style.height = "0";
      }
  
  
    }, false);
  }


  // Location Event
  const location = document.querySelector('.location');

  if(location){
    let locationAnchors = document.querySelectorAll('.location .anchor a');
    let headerHeight = document.getElementById('header').offsetHeight;
    locationAnchors.forEach((anchor) => {
      anchor.addEventListener('click', function(e){
        // 기본 이벤트 제거
        e.preventDefault();
    
        let targetId = this.getAttribute('href');
        let targetSec = document.querySelector(targetId);
  
        if(targetSec) {
          let elementTop = targetSec.getBoundingClientRect().top + window.pageYOffset;

          window.scrollTo({
            top: elementTop - headerHeight,
            behavior: 'smooth'
          });
        }

      })
    })
  }


}, false);