<!-- CONTENTS :: HISTORY -->
<script>
    var front = {
        _scrollTop:null, // 현재 스크롤탑
        _winW:null, // 윈도우 너비
        _winH:null, // 윈도우 높이
        controller1:null, // 스크롤매직 컨트롤러1
        controller2:null, // 스크롤매직 컨트롤러2
        init:function () {
            this.yearNumberAnim();
            this.activeYearAnim(); // 배경 패럴랙스 효과
        },
        // 년대 고정
        yearNumberAnim:function () {
            ScrollTrigger.matchMedia({
                // PC 화면일 때
                "(min-width:1099px)":function () {
                    var items = gsap.utils.toArray('.txt-year'); // .txt-year 요소 배열로 선택
                    items.forEach(function (item) {
                        var $this = $(item);
                        var parents = $this.parents(".item-history"); // 부모 요소의 높이를 지정하고
                        var itemH = function () {
                            return parents.height() - $(item).innerHeight();
                        }; // 부모 요소의 높이 값 함수
                        var pcYearTl = gsap.timeline({
                            scrollTrigger:{
                                trigger:item,
                                start:"top 50%",
                                // end:"+=" + itemH(), // 끝 지점을 함수로 지정할 시, update될 때 마다(리사이즈 될 때마다) 재위치 시켜줌
                                end:(function () { return "+=" + (parents.height() - $(item).innerHeight()) }), // ES5 대응하려면 함수 형태로 "+=" + "string 또는 number" 형태로 return 해야 함
                                // 또는
                                // end:(function () { return "+=" + itemH() }),
                                pin:true, // 스크롤에 따라 고정
                                toggleActions:"play none none reverse", // onEnter일 때 play, onLeaveBack일 때 reverse
                            }
                        });
                        pcYearTl.set(item, { opacity:0 }); // 초기상태를 설정하는 방식도 있음
                        pcYearTl.to(item, { opacity:1, duration:0.55, ease:'power1.ease' });
                    });
                },
                // 모바일일 때
                "(max-width:1098px)":function () {
                    var items = gsap.utils.toArray('.txt-year'); // .txt-year 요소 gsap 배열로 선택
                    items.forEach(function (item) {
                        var $this = $(item);
                        var parents = $this.parents(".item-history"); // 부모 요소의 높이를 지정하고
                        var itemH = function () {
                            return parents.height() - $(item).innerHeight();
                        }
                        var mobileYearTl = gsap.timeline({
                            scrollTrigger:{
                                trigger:item,
                                start:"top 90%",
                                end:"+=" + itemH(),
                                toggleActions:"play none none reverse",
                            }
                        });
                        mobileYearTl.set(item, { y:15, opacity:0 }) // 초기상태를 설정하는 방식도 있음
                        mobileYearTl.to(item, { y:0, opacity:1, duration:0.45, ease:'power1.ease' })
                    });
                }
            });
        },
        // 해당 연도 active + line처리
        activeYearAnim:function () {
            var items = gsap.utils.toArray('.txt-yearly'); // .txt-year 요소 배열로 선택
            items.forEach(function (item) {
                var txtYearly = gsap.timeline({
                    scrollTrigger:{
                        trigger:item,
                        start:"top 50%",
                        toggleClass:"active" // 토글 클래스 방식
                    }
                });
            });
        },
        // line 가운데 고정처리 (pc)
        lineFixAnim:function () {
            var _scrollTop = $(window).scrollTop(); // 스크롤 탑값
            var $line = $('.item-history:first-child .txt-yearly .line');
            var lineScrollTop = $line.offset().top; // cocoa active 높이
            var lineCssHeight = (_scrollTop + (front._winH / 2)) - lineScrollTop;
            var lastInfoHeight = $('.item-history:last-child .info-wrap:last-child').innerHeight();
            var historyWrapHeight = $('.history-list-wrap').innerHeight() - lastInfoHeight * 1.5;
            if ((_scrollTop < lineScrollTop - (front._winH / 2))) {
                $line.css('opacity', 0)
            } else if ((_scrollTop > lineScrollTop - (front._winH / 2)) && lineCssHeight < historyWrapHeight) {
                $line.css({ 'height':lineCssHeight, 'opacity':1 });
            }
        }
    };
    $(document).ready(function () {
        front.init();
        $(document).resize(function () {
            front._winW = $(window).innerWidth();
            front._winH = $(window).innerHeight();
            front.lineFixAnim();
        }).trigger('resize');
        $(document).scroll(function () {
            front._scrollTop = $(window).scrollTop();
            front._winW = $(window).innerWidth();
            front._winH = $(window).innerHeight();
            front.lineFixAnim();
        }).trigger('scroll');
    });
</script>