window.addEventListener('load', (event) => {

    const banner = document.querySelector('.block-home-scroll-banner')

    if (typeof(banner) == 'undefined' || banner == null) return

    function setBannerHeight(banner){
        if (window.matchMedia('(min-width: 62rem)').matches) {
            //get element top offset
            const bannerOffsetTop = banner.offsetTop
            //set block height
            banner.style.setProperty('--home-scroll-banner-img-height', `${window.innerHeight-bannerOffsetTop}px`)
        }
    }

    setBannerHeight(banner)

    function getImagePos(image, scrollPosition){
        const imageSpeed = image.getAttribute('data-home-scroll-banner-image-parallax-speed')
        const imagePos = (scrollPosition * 0.1) * imageSpeed 
        image.style.transform = `translate3d(0,-${imagePos}px,0)`
    }


    const parallaxImages = document.querySelectorAll('[data-home-scroll-banner-image]')

    document.addEventListener('scroll', function(){
        const scrollPosition = window.scrollY
        parallaxImages.forEach(image => {
            getImagePos(image, scrollPosition)
        })
    })

    let observer = new IntersectionObserver((entries) => { 
        
        entries.forEach(entry => {
                       
            if(entry.isIntersecting && (entry.target.getBoundingClientRect().top > 0)){
                entry.target.classList.add('is-visible')
                entry.target.style.opacity = entry.intersectionRatio.toFixed(1)
            }

        })

    }, 
    {
        threshold: [0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1]
    })

    parallaxImages.forEach(image => {
        observer.observe(image)
    })

    window.addEventListener('resize', function(){
        setBannerHeight(banner)
    })
    
})