$(function(){

    /*변수및 요소 선언*/
    var scrollBody = $('.motion_area'); //부모 스크롤 엘리먼트
    var parallaxDistance = 210; // 패럴럭스 요소가 움직이는 거리 조절

    /*움직일 요소들*/
    var bgContent = scrollBody.find('.bg'); //변수에 모션그래픽 캐릭터를 지정합니다.
    var objectBody = scrollBody.find('.motion_object'); //변수에 모션그래픽 캐릭터를 지정합니다.
    var moonBody = scrollBody.find('.motion_moon'); // 변수에 달님을 지정합니다.

    /*스크롤할때 변해야 할 값들*/
    var scrollHeight; // 스크롤 높이
    var scrollRealHeight; //실제로 스크롤해야될 높이를 담을 변수를 선업합니다
    var winScrollTop; // 스크롤바의 높이를 담을 변수를 선업합니다
    var percent; // 스크롤 백분율값을 담을 변수를 선업합니다
    var moveDistance; // 패럴럭스 요소가 움직일 거리를 담을 변수 선업합니다

    function setProperty(){ // 스크롤할때 변할 값들을 셋팅해주는 함수

        scrollHeight = scrollBody.height(); // 스크롤 높이
        scrollRealHeight = (scrollHeight - $(window).height()); //실제로 스크롤해야될 높이값을 구합니다
        winScrollTop = $(window).scrollTop(); //스크롤바의 현재 위치를 구합니다
        var scrollPerecnt = winScrollTop / scrollRealHeight; //거리와 현재 위치를 기준으로 비율을 구합니다
        percent = scrollPerecnt * 100; //백분율 구하기
        moveDistance = scrollPerecnt * parallaxDistance; //패럴럭스 요소가 움직일 거리 실제 높이에 백분율값을 곱하고 시간차 움직임을 위해 패럴러스 거리값을 곱합니다.


    }

    function motionFunc(){ // 스크롤할때 계속 호출될 모션 함수 선언

        setProperty(); // 스크롤할때 변해야할 값들의 변수를 선언
        changeBackgound(); //백그라운드를 바꿔주는 함수
        parallaxMove(); //캐럭터 패럴럭스 움직임을 처리해주는 함수

    }

    function changeBackgound(){//해당 높이가 됐을때 백그라운드를 바꿔주는 함수
        if(percent < 25){
            setBackground(0);
        }else if(percent >= 25 && percent < 50){
            setBackground(1);
        }else if(percent >= 50 && percent < 75){
            setBackground(2);
            moonBody.removeClass('active'); //달님 퇴장
        }else if(percent >= 75 && percent < 100){
            setBackground(3);
            moonBody.addClass('active'); //달님 등장

        }
    }

    function setBackground(index){ // 필요한 백그라운드 이미지로 교체해주는 함수

        bgContent.removeClass('active');
        bgContent.eq(index).addClass('active');
    }

    function parallaxMove(){ //캐럭터 패럴럭스 움직임을 처리해주는 함수
        objectBody.css({ // 계산된 값을 css를 이용해 적용합니다
            transform : 'translate(0px,'+ moveDistance +'px)'
        });
    }

    function init(){ //최초 한번실행
        motionFunc();
    }

    $(window).on("scroll resize", function(e){ //스크롤 이벤트 바인딩
        motionFunc();
    })

    init(); //start


});

(function () {
    var scrollBody = document.querySelector(".motion_area");
    var parallaxDistance = 210;
    var bgContent = scrollBody.querySelectorAll(".bg");
    var objectBody = scrollBody.querySelector(".motion_object");
    var moonBody = scrollBody.querySelector(".motion_moon");
    var scrollHeight;
    var scrollRealHeight;
    var winScrollTop;
    var percent;
    var moveDistance;

    var setProperty = function () {
        scrollHeight = scrollBody.offsetHeight;
        scrollRealHeight = scrollHeight - innerHeight;
        winScrollTop = pageYOffset;
        var scrollPerecnt = winScrollTop / scrollRealHeight;
        percent = scrollPerecnt * 100;
        moveDistance = scrollPerecnt * parallaxDistance;
    }

    var setBackground = function (index) {
        bgContent.forEach(function (el) {
            el.classList.remove("active");
        })
        bgContent[index].classList.add("active");
    }

    var changeBackgound = function () {
        if (percent < 25) {
            setBackground(0);
        } else if (percent >= 25 && percent < 50) {
            setBackground(1);
        } else if (percent >= 50 && percent < 75) {
            setBackground(2);
            moonBody.classList.remove('active'); //달님 퇴장
        } else if (percent >= 75 && percent < 100) {
            setBackground(3);
            moonBody.classList.add('active'); //달님 등장
        }
    }

    var parallaxMove = function () {
        objectBody.style.transform = 'translate(0px,'+ moveDistance +'px)';
    }

    var motionFunc = function () {
        setProperty();
        changeBackgound();
        parallaxMove();
    }

    var init = function () {
        motionFunc();
    }

    init();
    addEventListener("scroll", function () {
        motionFunc();
    })
    addEventListener("resize", function () {
        motionFunc();
    })
})()