/////////////////////////////////////////////////////////
////////////////// LOCOMOTIVE PARALLAX //////////////////
/////////////////////////////////////////////////////////

const locoScroll = new LocomotiveScroll({
    el: document.querySelector("[data-scroll-container]"),
    smooth: true,
    smoothMobile: false,
    // lerp: 0.05,
    getDirection: true,
    repeat: true,
    offset: ["0%", "0%"], //Fade in/out at 10% of screen height.
    reloadOnContextChange: true,
    smartphone: {
        smooth: false,
    },
});


let inviewFooterLogo = false;
let inviewBiker = false;
let inviewSkier = false;
let inviewStories = false;


//Locomotive on scroll functions.
locoScroll.on("scroll", (instance) => {
    // Update scrollTrigger when locomotive scrolls.
    ScrollTrigger.update;

    document.documentElement.setAttribute("data-direction", instance.direction);

    //Sticky class for header
    if (instance.direction === "down") {
        if (instance.scroll.y > 50) {
            $("#header").addClass("scrolled");
        }
    } else if (instance.direction === "up") {
        if (instance.scroll.y < 50) {
            $("#header").removeClass("scrolled");
        }
    }

    // Run lottie animations when in view.
    if($('#footer-logo').hasClass('is-inview') && !inviewFooterLogo ) {
        
        inviewFooterLogo = true;

        var footerLogo = document.getElementById('footer-logo');
        var footerAnimation = bodymovin.loadAnimation({
            container: footerLogo, // the dom element that will contain the animation
            renderer: 'svg',
            loop: false,
            autoplay: true,
            path: '/wp-content/themes/foe/images/animations/Logo.json' // the path to the animation json
        });

        footerLogo.addEventListener("mouseenter", function () {
            footerAnimation.goToAndPlay(0);
        });
    }

    if($('#skier').hasClass('is-inview') && !inviewSkier ) {
        
        inviewSkier = true;

        var skier = document.getElementById('skier');
        var animationSkier = bodymovin.loadAnimation({
            container: skier, // the dom element that will contain the animation
            renderer: 'svg',
            loop: false,
            autoplay: true,
            path: '/wp-content/themes/foe/images/animations/Skier.json' // the path to the animation json
        });

        skier.addEventListener("mouseenter", function () {
            animationSkier.goToAndPlay(0);
        });
    }

    if($('#your-stories').hasClass('is-inview') && !inviewStories ) {
        
        inviewStories = true;

        var stories = document.getElementById('your-stories');
        var animationStories = bodymovin.loadAnimation({
            container: stories, // the dom element that will contain the animation
            renderer: 'svg',
            loop: false,
            autoplay: true,
            path: '/wp-content/themes/foe/images/animations/Your-Stories-Teal.json' // the path to the animation json
        });

    }


    // console.log(instance);
});

//Enables Locomotive Scroll callback functions when elements enter screen.
// Eg. adding data-scroll-call="storiesSVG" runs storiesSVG()
locoScroll.on("call", (func, args, obj) => {
    this[func]();
    // console.log(args);
    // console.log(obj.id);
});

// Scroll update all pages after DOM is loaded.
document.addEventListener("DOMContentLoaded", function () {
    function ScrollUpdateDelay() {
        setTimeout(function () {
            locoScroll.update();
        }, 500);
    }
    ScrollUpdateDelay();
});

// Scroll Update trigger. Can be run after any interacting that changes the DOM height.
function ScrollUpdateTrig() {
    setTimeout(function () {
        locoScroll.update();
    }, 500);
}

//Run locoscroll update whenever the height changes of the scroll container.
const containerId = document.querySelector("[data-scroll-container]");
let MutationObserver =
    window.MutationObserver ||
    window.webkitMutationObserver ||
    window.MozMutationObserver;

let recordHeight = 0;
const mutationObserver = new MutationObserver(function (mutations) {
    let height = window
        .getComputedStyle(containerId)
        .getPropertyValue("height");
    if (height === recordHeight) {
        return;
    }
    recordHeight = height;

    locoScroll.update();
});

mutationObserver.observe(containerId, {
    childList: true,
    attributes: true,
    characterData: true,
    subtree: true,
});

/////////////////////////////////////////////////////////
//////////////// Document Ready Function ////////////////
/////////////////////////////////////////////////////////

$(document).ready(function () {
    initJS();
});

// $(window).resize(function () {
//     debounce(function () {
//         lineSplit();
//     }, 50);
// });

//initJS function runs on document ready and barbaJS on enter.
function initJS() {
    gsap.registerPlugin(ScrollTrigger);

    //Sub-nav hover reveal/hide function
    $("#header_nav > .menu-item-has-children").hover(
        function () {
            sub = $(this).children(".sub-menu");
            sub.stop(true, false).fadeIn(150);
            sub.addClass("open");
        },
        function () {
            sub.removeClass("open");
            sub.stop(true, false).fadeOut(150);
        }
    );

    //Mobile Navigation Sub Menu Reveal. Remove to enable landing pages to be tappable.
    $("#mobile_nav .menu-item-has-children > a").click(function (e) {
        e.preventDefault();
        $(this).parent().toggleClass("open");
        mobileSub = $(this).siblings(".sub-menu");
        mobileSub.slideToggle();
    });

    if ($(".slider").length) {
        $(".slider").slick({
            speed: 500,
            autoplay: true,
            autoplaySpeed: 5000,
            draggable: true,
            fade: false,
            infinite: true,
            initialSlide: 0,
            pauseOnHover: true,
            pauseOnFocus: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            adaptiveHeight: false,
            // centerMode: false,
            // centerPadding: '50px',

            dots: true,
            arrows: true,
            // appendArrows: $(element),
            // appendDots: $(element),

            prevArrow:
                '<button type="button" data-role="none" class="slick-prev">Prev</button>',
            nextArrow:
                '<button type="button" data-role="none" class="slick-next">Next</button>',

            /* Responsive Breakpoint triggered settings */
            /* eg
                responsive: [{
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 3,
                        infinite: true
                    }
                }, {
                    breakpoint: 600,
                    settings: {
                        slidesToShow: 2,
                        dots: true
                    }
                }, {
                    breakpoint: 300,
                    settings: "unslick" // destroys slick
                }]
            */
        });
    }


    //Scroll to anchor links when ID is present in URL.
    if (window.location.hash) { 

        window.scrollTo(0,0); //prevents default scroll

        var hash = window.location.hash.substring(1);  
        const target = document.getElementById(hash); 

        setTimeout(function () {

            locoScroll.scrollTo( target, {
                'offset': 0,
                'callback': function() {
                    locoScroll.update();
                },

            } );


        }, 100);

    }

    //Locomotive smooth scroll to anchor Links on same page.
    $('a[href*="#"]:not([href="#"]):not([href="menu-modal"])').click(function (e) {

        if ( location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname ) {

            href = $(this).attr("href");
            hash = href.split('#').pop();

            // console.log(hash);

            if ( $('#'+hash).length ) {
                locoScroll.scrollTo('#'+hash);
                return false;
            }

        }
    });


    /* Locomotive Anchor Scroll */
    const anchorLinks = document.querySelectorAll(
        "a[href^=\\#]:not([href$=\\#])"
    );
    //console.log(anchorLinks+'anchorLinks');

    anchorLinks.forEach((anchorLink) => {

        let hashval = anchorLink.getAttribute("href");
        let hashtarget = document.querySelector(hashval);

        anchorLink.addEventListener("click", (e) => {
            e.preventDefault();
            e.stopPropagation();

            // console.log(hashtarget);

            locoScroll.scrollTo(hashtarget);
        });
    });


    if($(window).width() > 1100) {
    
    }

    var mobileStories = document.getElementById('your-stories-mobile');
    var mobileAnimationStories = bodymovin.loadAnimation({
        container: mobileStories, // the dom element that will contain the animation
        renderer: 'svg',
        loop: false,
        autoplay: true,
        path: '/wp-content/themes/foe/images/animations/Your-Stories-Teal.json' // the path to the animation json
    });
 
    $('.wpgmaps_blist_row').click(function(){
        locoScroll.update();
    });


    //Modal Hide
    $(".modal-close").click(function () {
        $(".modal-outer").removeClass("open").fadeOut();
    });

    $('.age-close').click(function(){
        Cookies.set("age-gate", "closed"), { expires: 30 };
        $(".modal-outer").removeClass("open").fadeOut();
        setTimeout(function(){
            $('.modal-age-gate').fadeOut();
        }, 300);
    });

    // $(".modal .foe-button").click(function () {
    //     Cookies.set("modal", "closed");
    // });

    //Modal Reveal
    if (Cookies.get("age-gate") != "closed") {
        // setTimeout(() => {
        $('.modal-age-gate').show();
        setTimeout(function(){
            $(".modal-outer").fadeIn().addClass("open");
        });
        // }, 3000);
    }

    //console.log(Cookies.get("modal"));

    $(".career .title").click(function () {
        $(this).toggleClass("open");
        $(this).siblings(".info").slideToggle(500);
    });

    $('.beer-link').click(function(){
        $('.modal-beer').show();
        setTimeout(function(){
            $('.modal-outer').fadeIn().addClass('open');
        });
        $('.modal-beer').fadeIn();
    });

    $('.menu-link, a[href="#menu-modal"]').click(function(){
        $('.menu-modal').show();
                
        setTimeout(function(){
            $('.menu-modal').addClass('open');				
        }, 200);
    });

    

    // const target = document.querySelector('.heading-reveal');
    // if( target != '' ){

    //     const results = Splitting({ target: target, by: 'lines' });

    //     $('.heading-reveal').addClass('line-up');

    //     results[0].lines[0][0];
    //     // results[0].lines.forEach((line, index) => {
    //     //     line.forEach((word) => {
    //     //         gsap.from(word, { opacity: 0, delay: index /  4 });
    //     //     })
    //     // });
    // }

    //lineSplit();

    gsap.registerPlugin(ScrollTrigger);

    // setTimeout(function () {
    //     locoScroll.update();
    // }, 1000);

    //Featured Slider Block
    if ($(".featured-slider").length) {
        var featuredSwiper = new Swiper(".featured-slider", {
            // Optional parameters
            autoHeight: false,
            loop: true,
            speed: 750,
            centeredSlides: true,
            effect: "fade",

            autoplay: {
                delay: 6000,
                disableOnInteraction: true,
            },
            pagination: {
                el: ".featured-pagination",
                clickable: true,
            },
        });
    }

    //Beer Slider Block
    if ($(".beer-slideshow").length) {
        //Example swiper slider
        var swiper = new Swiper(".beer-slideshow", {
            // Optional parameters
            autoHeight: false,
            loop: true,
            speed: 750,
            slidesPerView: "auto",

            // Navigation arrows
            navigation: {
                nextEl: ".beer-button-next",
                prevEl: ".beer-button-prev",
            },

            breakpoints: {
                // 0: {
                //     slidesPerView: 1,
                //     spaceBetween: 20,
                //     centeredSlides: true,
                // },
                // 510: {
                //     spaceBetween: 20,
                //     centeredSlides: false,
                // },
            },
        });
    }

    //Beer Slider Block
    if ($(".brewery-slideshow").length) {
        //Example swiper slider
        var swiper = new Swiper(".brewery-slideshow", {
            // Optional parameters
            autoHeight: false,
            loop: true,
            speed: 750,
            slidesPerView: "auto",

            // Navigation arrows
            navigation: {
                nextEl: ".beer-button-next",
                prevEl: ".beer-button-prev",
            },

            breakpoints: {
                // 0: {
                //     slidesPerView: 1,
                //     spaceBetween: 20,
                //     centeredSlides: true,
                // },
                // 510: {
                //     spaceBetween: 20,
                //     centeredSlides: false,
                // },
            },
        });
    }

    $('#gform_submit_button_2').after('<div id="newsletter-arrow"></div>');

    //Lottie animations loaded from JSON files.
	var canoe = document.getElementById('canoe');
	var animationCanoe = bodymovin.loadAnimation({
		container: canoe, // the dom element that will contain the animation
		renderer: 'svg',
		loop: true,
		autoplay: true,
		path: '/wp-content/themes/foe/images/animations/Canoe.json' // the path to the animation json
	});

    var tent = document.getElementById('tent');
	var animationTent = bodymovin.loadAnimation({
		container: tent, // the dom element that will contain the animation
		renderer: 'svg',
		loop: true,
		autoplay: true,
		path: '/wp-content/themes/foe/images/animations/Tent.json' // the path to the animation json
	});

    var biker = document.getElementById('biker');
    var animationBiker = bodymovin.loadAnimation({
        container: biker, // the dom element that will contain the animation
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: '/wp-content/themes/foe/images/animations/Mountain-Biker.json' // the path to the animation json
    });

    var arrow = document.getElementById('newsletter-arrow');
    var animationArrow = bodymovin.loadAnimation({
        container: arrow, // the dom element that will contain the animation
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: '/wp-content/themes/foe/images/animations/Footer-Arrow.json' // the path to the animation json
    });

    var contactLogo = document.getElementById('contact-logo');
    var animationArrow = bodymovin.loadAnimation({
        container: contactLogo, // the dom element that will contain the animation
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: '/wp-content/themes/foe/images/animations/Logo.json' // the path to the animation json
    });

    var modalLogo = document.getElementById('modal-logo');
    var animationModalLogo = bodymovin.loadAnimation({
        container: modalLogo, // the dom element that will contain the animation
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: '/wp-content/themes/foe/images/animations/Logo.json' // the path to the animation json
    });

    var storyLogo = document.getElementById('story-logo');
    var animationStoryLogo = bodymovin.loadAnimation({
        container: storyLogo, // the dom element that will contain the animation
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: '/wp-content/themes/foe/images/animations/Logo.json' // the path to the animation json
    });

    var cheers = document.getElementById('cheers');
    var animationCheers = bodymovin.loadAnimation({
        container: cheers, // the dom element that will contain the animation
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: '/wp-content/themes/foe/images/animations/Cheers.json' // the path to the animation json
    });

    //Moving Store locator search
    if($('.map-wrap').length){

        var innerScroller = document.getElementById("wpgmza_marker_list_1");
        innerScroller.onmouseover = function(event) { locoScroll.stop(); };
        innerScroller.onmouseout = function(event) { locoScroll.start(); };
        
    }


    // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.
    ScrollTrigger.addEventListener("refresh", () => locoScroll.update());

    // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
    ScrollTrigger.refresh();
}

function storyClose() {
    $(".story-modal").removeClass("open");
}

function menuClose() {
    $(".menu-modal, .story-modal").removeClass("open");
}

//Mobile Navigation Toggle Function
navState = false;

function navToggle() {
    $(".nav-toggle").toggleClass("open");

    if (navState) {
        //Closing Animation
        $(".mobile-wrap").removeClass("open").fadeOut();
        navState = false;
    } else {
        //Opening Animation
        $(".mobile-wrap").fadeIn().addClass("open");
        navState = true;
    }
}

// Limit .scroll() function. Example below.
// debounce(function(){
//      **Scroll Code**
// }, 50);

function lineSplit() {
    let revealText = document.querySelectorAll(".heading-reveal");
    let results = Splitting({ target: revealText, by: "lines" });

    results.forEach((splitResult) => {
        const wrappedLines = splitResult.lines
            .map(
                (wordsArr) => `
            <span class="line"><div class="words">
            ${wordsArr
                .map(
                    (word) => `${word.outerHTML}<span class="whitespace"> 
            </span>`
                )
                .join("")}
            </div></span>`
            )
            .join("");
        splitResult.el.innerHTML = wrappedLines;
    });

    let revealLines = revealText.forEach((element) => {
        const lines = element.querySelectorAll(".line .words");

        let tl = gsap.timeline({
            scrollTrigger: {
                trigger: element,
                toggleActions: "restart none none reset",
            },
        });
        tl.set(revealText, { autoAlpha: 1 });
        tl.from(lines, 0.7, {
            yPercent: 115,
            ease: Power3.out,
            stagger: 0.2,
            delay: 0.1,
        });
    });
}

function debounce(method, delay) {
    clearTimeout(method._tId);
    method._tId = setTimeout(function () {
        method();
    }, delay);
}

let animationDone = false;
function storiesSVG() {
    let attr = {
        autoAlpha: 0, // any properties (not limited to CSS)
        scale: 0.5,
        duration: 1, // seconds
        delay: 0.4,
        ease: Elastic.easeOut.config(1, 0.5),
        stagger: 0.1, // stagger start times
    };

    if (!animationDone) {

        visibility:"hidden"

        gsap.from("#story-right > g", attr);
        gsap.from("#story-left > g", attr);
        gsap.from("#story", {
            opacity: 0, // any properties (not limited to CSS)
            scale: 0.7,
            duration: 1, // seconds
            delay: 0.4,
            ease: Power2.easeOut,
        });
        animationDone = true;
    }
}

//Is scrolled into view function. Change number to adjust offset.
function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var docViewBottom = docViewBottom - 100;
    var elemTop = $(elem).offset().top;

    return elemTop <= docViewBottom;
}