var Webflow = Webflow || [];
Webflow.push(function() {

    const isDesktop = window.innerWidth >= 992;
    const isTablet = 992 > window.innerWidth && window.innerWidth >= 768;
    const isMobile = 768 > window.innerWidth;
    const isLandscape = window.innerHeight < 425;

    let lastWidth = window.innerWidth;
    window.addEventListener('resize', debounce(onResize, 300));

    const vimeoPlayers = [];
    initVideos();

    if (!isDesktop) {
        initMobile();
        return;
    }

    const IconOpen = initIconOpen();

    // ----- common reusable variables
    let isActivePresent = false;

    let textList = $('.home-list-text');
    let textItems = textList.find('.home-list-text-item');
    let imageList = $('.home-list-images');
    let imageItems = imageList.find('.home-list-image');

    const tlTextItems = gsap.timeline({ paused: true });
    tlTextItems.to(textList, {
        yPercent: -100,
        duration: 1,
        ease: 'none',
    });


    // ----- resize handling
    var imageItemPad;
    var imageItemH;
    var textItemH;
    // onResize();
    reInitStuff();

    // disable links on desktop
    const links = $('.home-list-image__link');
    links.each((i, item) => {
        const link = $(item);
        const href = link.attr('href');
        link.attr('href', '#');
        link.attr('data-href', href);
    });
    links.on('click', (e) => {
        const link = $(e.currentTarget);
        if (link.closest('.home-list-image').hasClass('is--active')) {
            window.location = link.attr('data-href');
        }
    });

    // ----- click navigation
    let isNavScrollInProgress = false;
    let navScrollTO = -1;

    textItems.on('click', (e) => {
        const i = textItems.index(e.currentTarget);
        doNav(i);
    });
    imageItems.on('click', (e) => {
        const i = imageItems.index(e.currentTarget);
        doNav(i);
    });
    imageItems.on('mouseover', (e) => {
        const item = $(e.currentTarget);
        const i = imageItems.index(item);
        if (!item.hasClass('is--active')) return;
        IconOpen.show(true, i);
    });
    imageItems.on('mouseout', (e) => {
        const item = $(e.currentTarget);
        if (!item.hasClass('is--active')) return;
        IconOpen.show(false);
    });

    function doNav(i) {
        // if (isNavScrollInProgress) return;

        console.log('NAV: ' + i);
        setActive(i);
        isNavScrollInProgress = true;
        window.scrollTo({
            // top: (imageItemH + imageItemPad) * i - imageItemPad * .5,
            top: (imageItemH + imageItemPad) * i,
            behavior: 'smooth',
        });
        if (navScrollTO >= 0) {
            clearTimeout(navScrollTO);
            navScrollTO = -1;
        }
        navScrollTO = setTimeout(() => {
            isNavScrollInProgress = false;
        }, 1300);
    }

    // ----- images scrolling & snapping
    let images = gsap.utils.toArray('.home-list-image');

    const SNAP_STEP = 1 / (images.length);

    let isSnapInProgress = false;

    ScrollTrigger.create({
        trigger: '.home-list-images',
        start: () => {
            let pinTop = $('.home-list-image').offset().top;
            return 'top ' + pinTop;
        },
        end: () => {
            let pinTop = $('.home-list-image').offset().top;
            return 'bottom ' + pinTop;
        },
        snap: {
            snapTo: SNAP_STEP,
            duration: { min: .1, max: .3 },
            delay: 0,
            ease: 'expo.out',
            directional: false,

            onStart: (self) => {
                isSnapInProgress = true;
                const i = Math.round(self.progress / SNAP_STEP);
                console.log('> ' + i);
                setActive(i);

                /*
                if (i >= textItems.length) {
                    textList.addClass('is--hidden');
                } else {
                    textList.removeClass('is--hidden');
                }
                */
            },
            onInterrupt: (self) => {

            },
            onComplete: (self) => {
                const i = Math.round(self.progress / SNAP_STEP);
                if (IconOpen.checkIntersect(imageItems[i])) {
                    IconOpen.show(true, i);
                }

                // allow for onUpdate to finish
                setTimeout(() => {
                    isSnapInProgress = false;
                }, 100);
            },
        },
        onUpdate: self => {
            // console.log('progress:', self.progress.toFixed(3), 'direction:', self.direction, 'velocity', self.getVelocity());
            tlTextItems.progress(self.progress);
            if (isActivePresent && !isSnapInProgress && !isNavScrollInProgress) {
                removeActive();
                IconOpen.show(false);
            }
        },
        onLeaveBack: () => { // we're at 0 scroll
            setActive(0);
        },
    });

    // ----- ENTRY POINT (reset scroll upon page load)
    setTimeout(() => {
        window.scrollTo(0, 0);
        setActive(0);
    }, 100);



    // ************************************************** functions **************************************************
    function setActive(i) {
        removeActive();
        imageItems.eq(i).addClass('is--active');
        textItems.eq(i).addClass('is--active');
        isActivePresent = true;
        currentItem = i;
    };

    function removeActive() {
        imageItems.removeClass('is--active');
        textItems.removeClass('is--active');
        isActivePresent = false;
        currentItem = -1;
    }

    function onResize(e) {
        if (lastWidth == window.innerWidth) return; // do NOT resize on mobile height change

        const isNowDesktop = window.innerWidth >= 992;
        const isNowTablet = 992 > window.innerWidth && window.innerWidth >= 768;
        const isNowMobile = 768 > window.innerWidth;
        const isNowLandscape = window.innerHeight < 425;

        if ((isDesktop && !isNowDesktop) || (!isDesktop && isNowDesktop)) location.reload();
        // reInitStuff();
    }

    function reInitStuff() {
        imageItemPad = parseFloat(getComputedStyle(document.querySelector('.home-list-image')).marginBottom.replace('px', ''));
        imageItemH = $('.home-list-image').outerHeight();
        textItemH = $('.home-list-text-item').height();

        textList.css('margin-top', (imageItemH / 2 - textItemH / 2));
        // textList.css('margin-top', 0);
        // textList.css('margin-top', imageItemPad);
        // textList.css('margin-top', (imageItemH / 2));
        // textList.css('margin-top', imageItemPad);

        console.log('Image Height: ' + imageItemH);
        console.log(imageItemH, textItemH);
        console.log('Image Margin: ' + imageItemPad);

        ScrollTrigger.refresh();

        window.scrollTo(0, 0);
        setActive(0);
    }

    function initIconOpen() {
        const iconOpen = $('.hover-icon-open');
        const iconOpenCont = iconOpen.find('.hover-icon-open__cont');

        let __mouseX = __mouseY = 0;
        window.addEventListener('mousemove', (e) => {
            const x = e.clientX;
            const y = e.clientY;

            __mouseX = x;
            __mouseY = y;
            // console.log(x, y);

            iconOpen.css('transform', `translate(${x}px, ${y}px)`);
        });

        function showOpen(st, index) {
            if (st) {
                iconOpenCont.addClass('is--active');
            } else {
                iconOpenCont.removeClass('is--active');
            }
        }

        function checkIntersect(image) {
            const rc = image.getBoundingClientRect();
            return (
                rc.left < __mouseX && rc.right > __mouseX &&
                rc.top < __mouseY && rc.bottom > __mouseY
            );
        }

        return { show: showOpen, checkIntersect };
    }

    function initMobile() {
        const imageList = $('.home-list-images');
        const imageItems = imageList.find('.home-list-image');

        imageItems.each((i, image) => {
            ScrollTrigger.create({
                id: 'video_' + i,
                trigger: image,
                // markers: true,
                start: 'top 50%',
                end: 'bottom 45%',
                onEnter: videoStart.bind(this, $(image)),
                onLeave: videoStop.bind(this, $(image)),
                onEnterBack: videoStart.bind(this, $(image)),
                onLeaveBack: videoStop.bind(this, $(image)),
            });
        });

        function videoStart(image) {
            image.addClass('is--active');
        }

        function videoStop(image) {
            image.removeClass('is--active');
        }
    }

    function initVideos() {
        const playerDivs = document.querySelectorAll('[data-vimeo-id1]');

        // const loadedFlags = Array(playerDivs.length).fill(false, 0, playerDivs.length);
        const loadedFlags = [];

        playerDivs.forEach((playerDiv, i) => {
            const vimeoId = playerDiv.getAttribute('data-vimeo-id1');

            var options = {
                id: vimeoId,
                // width: { video01_width },
                background: true,
            };

            var player = new Vimeo.Player(playerDiv, options);
            // player.setVolume(0);

            // player.on('play', function() {
            //     console.log('Played the first video');
            // });

            player.on('play', function() {
                if (loadedFlags[i] == true) return;

                console.log('First video started playing');
                $(playerDiv).closest('.home-list-image').addClass('is--loaded');

                loadedFlags[i] == true;
            });


            const btn = playerDiv.parentNode.parentNode;
            var toId = -1;

            /*
            btn.addEventListener('mouseover', () => {
                if (toId) {
                    clearTimeout(toId);
                }

                player.setCurrentTime(0);
                player.play();
            });
            btn.addEventListener('mouseout', () => {
                if (toId) {
                    clearTimeout(toId);
                }
                toId = setTimeout(() => {
                    player.pause();
                    player.setCurrentTime(0);
                }, 300);
            });
            */
            vimeoPlayers.push(player);
        });
    }


    function debounce(func, wait, immediate) {
        var timeout;
        return function() {
            var context = this,
                args = arguments;
            clearTimeout(timeout);
            timeout = setTimeout(function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            }, wait);
            if (immediate && !timeout) func.apply(context, args);
        };
    }

});