const scrollAnimiation = ScrollAnimation();
scrollAnimiation.initScrollAnimation();
scrollAnimiation.registerListener();

const footer = Footer();
footer.registerClickListener();


function Footer() {
    const footer = document.querySelector('#footer');
    const footerCloseButton = document.querySelector('#footer-close-button');
    const articles = document.querySelectorAll('article .page');

    const registerClickListener = () => {
        footerCloseButton.onclick = () => {
            footer.classList.add('footer--hidden');
            articles.forEach(article => article.classList.remove('page--has-footer'));
            setTimeout(() => {
                footer.classList.remove('footer--fixed');
                footerCloseButton.classList.add('hidden');
            }, 300);
        };
    };

    return { registerClickListener };
}


function ScrollAnimation() {
    const bg1 = document.querySelector('#background1');
    const bg2 = document.querySelector('#background2');
    const bg3 = document.querySelector('#background3');

    const article2Position = document.querySelector('#article2').offsetTop;
    const article3Position = document.querySelector('#article3').offsetTop;

    const mockup1 = document.querySelector('#mockup1');
    const mockup2 = document.querySelector('#mockup2');
    const mockup3 = document.querySelector('#mockup3');

    const fade1StartPosition = article2Position - (window.innerHeight / 2);
    const fade1EndPosition = article2Position - 100;
    const fade1Hight = fade1EndPosition - fade1StartPosition;

    const fade2StartPosition = article3Position - (window.innerHeight / 2);
    const fade2EndPosition = article3Position - 100;
    const fade2Hight = fade2EndPosition - fade2StartPosition;

    const controlScrollStates = () => {
        const scrollPosition = window.scrollY;

        if (scrollPosition < fade1StartPosition) {
            bg1.style.opacity = mockup1.style.opacity = 1;
            bg2.style.opacity = mockup2.style.opacity = 0;
            bg3.style.opacity = mockup3.style.opacity = 0;
        }

        if (fade1StartPosition < scrollPosition && scrollPosition < fade1EndPosition) {
            bg1.style.opacity = mockup1.style.opacity = 1 - (1 / fade1Hight * (scrollPosition - fade1StartPosition));
            bg2.style.opacity = mockup2.style.opacity = (1 / fade1Hight * (scrollPosition - fade1StartPosition));
        }

        if (fade1EndPosition < scrollPosition && scrollPosition < fade2StartPosition) {
            bg1.style.opacity = mockup1.style.opacity = 0;
            bg2.style.opacity = mockup2.style.opacity = 1;
            bg3.style.opacity = mockup3.style.opacity = 0;
        }

        if (fade2StartPosition < scrollPosition && scrollPosition < fade2EndPosition) {
            bg2.style.opacity = mockup2.style.opacity = 1 - (1 / fade2Hight * (scrollPosition - fade2StartPosition));
            bg3.style.opacity = mockup3.style.opacity = (1 / fade2Hight * (scrollPosition - fade2StartPosition));
        }

        if (fade2EndPosition < scrollPosition) {
            bg1.style.opacity = mockup1.style.opacity = 0;
            bg2.style.opacity = mockup2.style.opacity = 0;
            bg3.style.opacity = mockup3.style.opacity = 1;
        }
    };

    const registerListener = () => {
        window.onscroll = () => {
            controlScrollStates();
        };
    };

    const initScrollAnimation = () => {
        controlScrollStates();
    };


    return { registerListener, initScrollAnimation };
}