document.onreadystatechange = function () {
    if (document.readyState === 'interactive') {
        initHeroes();
    }
}

if (document.readyState === 'interactive') {
    initHeroes();
}

function initHeroes() {
    let hero = document.getElementsByClassName("hero-container"),
        background = document.getElementsByClassName("hero-background"),
        foreground = document.getElementsByClassName("hero-foreground"),
        canZoomOnMouse = false,
        canZoomOnScroll = false
    ;

    function zoomOnMouse() {
        for (i = 0; i < hero.length; i++) {
            const heroCount = i;
            hero[i].addEventListener("mouseover", function() {
                if (canZoomOnMouse) {
                    if (this.children[0].children[1].children[1].tagName == "SOURCE") {
                        TweenMax.to(this.children[0].children[0].children[2], 0.25, {scale: 1, ease: Back.easeOut.config(1.7)});
                    } else {
                        TweenMax.to(this.children[0].children[0].children[2], 0.25, {scale: 1.05, ease: Back.easeOut.config(1.7)});
                    }
                    TweenMax.to(this.children[0].children[1].children[2], 0.25, {boxShadow:'inset 0 0 30px black', '-webkit-filter':'drop-shadow(rgba(0, 0, 0, 0.8) 0px 0px 10px)', scale: 1.05, ease: Back.easeOut.config(1.7)});
                }
            })
            hero[i].addEventListener("mouseout", function() {
                if (canZoomOnMouse) {
                    if (this.children[0].children[1].children[1].tagName == "SOURCE") {
                        TweenMax.to(this.children[0].children[0].children[2], 0.25, {scale: 1.05, ease: Back.easeOut.config(1.7)});
                    } else {
                        TweenMax.to(this.children[0].children[0].children[2], 0.25, {scale: 1, ease: Back.easeOut.config(1.7)});
                    }
                    TweenMax.to(this.children[0].children[1].children[2], 0.25, {boxShadow:'inset 0 0 0px black', '-webkit-filter':'drop-shadow(rgba(0, 0, 0, 0.5) 0px 0px 4px)', scale: 1, ease: Back.easeOut.config(1.7)});
                }
            })
        }
    }

    function zoomOnScroll() {
        window.addEventListener('scroll', function(ev) {
            if (canZoomOnScroll) {
                for (i = 0; i < hero.length; i++) {
                    const heroCount = i;
                    var someDiv = hero[i];
                    var distanceToTop = someDiv.getBoundingClientRect().top;
                    if (distanceToTop > -200 && distanceToTop < 110 ) {
                        if (someDiv.children[0].children[1].tagName == "IMG") {
                            TweenMax.to(someDiv.children[0].children[0], 0.25, {scale: 1, ease: Power3.easeOut});
                        } else {
                            TweenMax.to(someDiv.children[0].children[0], 0.25, {scale: 1.05, ease: Power3.easeOut});
                        }
                        TweenMax.to(someDiv.children[0].children[1], 0.25, {boxShadow:'inset 0 0 30px black', '-webkit-filter':'drop-shadow(rgba(0, 0, 0, 0.8) 0px 0px 10px)', scale: 1.05, ease: Power3.easeOut});
                    } else {
                        if (someDiv.children[0].children[1].tagName == "IMG") {
                            TweenMax.to(someDiv.children[0].children[0], 0.25, {scale: 1.05, ease: Power3.easeOut});
                        } else {
                            TweenMax.to(someDiv.children[0].children[0], 0.25, {scale: 1, ease: Power3.easeOut});
                        }
                        TweenMax.to(someDiv.children[0].children[1], 0.25, {boxShadow:'inset 0 0 0px black', '-webkit-filter':'drop-shadow(rgba(0, 0, 0, 0.5) 0px 0px 4px)', scale: 1, ease: Power3.easeOut});
                    }
                }
            }
        })
    }

    function zoomEffect(){ //determine which zoomEffect is currently correct and execute it
        if (window.innerWidth > 991) { // IF window width is greater than 992 pixels
            canZoomOnMouse = true; //allow zoomOnMouse
            canZoomOnScroll = false; //disallow zoomOnScroll
            zoomOnMouse(); //execute zoomOnMouse
        } else { // IF window width is less than 992 pixels
            canZoomOnScroll = true; //allow zoomOnScroll
            canZoomOnMouse = false; //disallow zoomOnMouse
            zoomOnScroll(); //execute zoomOnScroll
        }
    }

    function resizeEvent() { //execute fitImages and zoomEffect
        zoomEffect();
    }

    resizeEvent(); //execute resizeEvent when page has finished loading

    window.onresize = resizeEvent;
}

document.addEventListener("DOMContentLoaded", function(event){
    var USPbar = document.getElementsByClassName("new-usp-bar");
    var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    var USPtimeline = new TimelineMax({repeat:-1, repeatDelay:4, delay:5, paused:true});

    USPtimeline.to(USPbar, 1, { ease: Power4.easeInOut, css:{left:"-100%"} });
    USPtimeline.to(USPbar, 1, { ease: Power4.easeInOut, css:{left:"-200%"} }, "+=5");
    USPtimeline.to(USPbar, 1, { ease: Power4.easeInOut, css:{left:"-300%"} }, "+=5");
    USPtimeline.to(USPbar, 1, { ease: Power4.easeInOut, css:{left:"-400%"} }, "+=5");
    USPtimeline.set(USPbar, { css:{marginLeft:"0"} });

    if (viewportWidth<=1110) {
        USPtimeline.play();
    }
});
