var controller = new ScrollMagic.Controller();

// 애니메이션 정의
var tween = gsap.to(".visual2", {
    duration: 1, // 애니메이션 시간 (초)
    width: "2000px", // 최종 너비
    // ease: "power2.inOut" // 이징 적용
});

// ScrollMagic 씬 생성
var scene = new ScrollMagic.Scene({
    triggerElement: ".visual2", // 애니메이션 시작 요소
    triggerHook: 0.4, // 스크롤 위치 (0.5는 화면 중앙)
    duration: 270 // 애니메이션 지속 거리
})
.setTween(tween)
// .addIndicators({name: "Box Animation"}) // 디버그를 위한 인디케이터 추가 (선택 사항)
.addTo(controller);
/* 240610 서주원 - 상단비주얼 애니메이션 끝 */


//전체 라인 높이 
const historyContent = document.querySelector('.history_list_wrap');
const afterElement = window.getComputedStyle(historyContent, '::after');
const height = historyContent.offsetHeight;

const style = document.createElement('style');
style.innerHTML = `
    .history_list_wrap::after {
        height: ${height - 173}px;
    }
`;
document.head.appendChild(style);


// 탭 버튼 클릭 & 스크롤 이벤트
const Historybuttons = document.querySelectorAll('.btn_history_year button');
const Historycontents = document.querySelectorAll('.history_content');
const offset = -600;

function handleButtonClick(event) {
    const year = event.target.getAttribute('data-year');
    const Historycontents = document.getElementById('year_' + year);
    const targetPosition = Historycontents.offsetTop - offset;

    window.scrollTo({
        top: targetPosition,
        behavior: 'smooth'
    });

    Historybuttons.forEach(button => button.classList.remove('active'));
    event.target.classList.add('active');

    Historycontents.forEach(section => section.classList.remove('active'));
    Historycontents.classList.add('active');
}

function handleScroll() {
    const scrollPosition = window.scrollY + offset;

    Historycontents.forEach(section => {
        const top = section.offsetTop;
        const bottom = top + section.offsetHeight;
        const year = section.id.split('_')[1];

        if (scrollPosition >= top && scrollPosition < bottom) {
            Historybuttons.forEach(button => button.classList.remove('active'));
            document.querySelector(`.btn_history_year button[data-year="${year}"]`).classList.add('active');
        }
    });
}

Historybuttons.forEach(button => button.addEventListener('click', handleButtonClick));
window.addEventListener('scroll', handleScroll);