gsap.registerPlugin(ScrollTrigger);
jQuery(document).ready(function ($) {
    let sections = gsap.utils.toArray(".stage");

    ScrollTrigger.create({
        start: 0,
        end: "max",
        onUpdate: updateValues
    });
    function updateValues() {
        sections.forEach((section, index) => {
            if (ScrollTrigger.isInViewport(sections[index])) {

                $(sections[index]).addClass('animate')
                console.log(sections[index])
            }else{
                $(sections[index]).removeClass('animate')
            }
        });


    }
    updateValues();
    if (window.innerWidth<=767){
        let hover_sections = gsap.utils.toArray(".hover_section");

        ScrollTrigger.create({
            start: 0,
            end: "max",
            onUpdate: updateHover_section
        });
        function updateHover_section() {
            hover_sections.forEach((section, index) => {
                if (ScrollTrigger.isInViewport(hover_sections[index]) && ScrollTrigger.positionInViewport(hover_sections[index], "center").toFixed(2)<= 1.4 &&  ScrollTrigger.positionInViewport(hover_sections[index], "center").toFixed(2)>0) {
                    $(hover_sections[index]).addClass('animate')
                }else{
                    $(hover_sections[index]).removeClass('animate')
                }
            });
        }
        updateHover_section();
    }
})
setTimeout(function () {



let horizontalSection = document.querySelector('.solution_section_column>.elementor-widget-wrap');
       if (horizontalSection   ){
            if (window.innerWidth>767){
                var $masthead = document.querySelector('.solution_section_column>.elementor-widget-wrap ');
                var mastheadWidth = 0;
                function getMastheadWidth() {
                    mastheadWidth = $masthead.scrollWidth;
                }
                getMastheadWidth();
                ScrollTrigger.addEventListener('refreshInit', getMastheadWidth);

                function updateProxy() {
                    // move the handler to the corresponding ratio according to the page's scroll position.
                    if (trigger) {
                        gsap.set(proxy, {x: -trigger.scroll()});
                    }
                }

                var trigger = ScrollTrigger.create({
                    animation: gsap.to('.solution_section_column>.elementor-widget-wrap', {
                        x: () => horizontalSection.scrollWidth   * -1,
                        xPercent: 100,
                        ease: "none",
                    }),
                    trigger: '.horizontalSection',
                    start: 'center center',
                    end:() => "+=" + (horizontalSection.offsetWidth - 1000)*4 ,
                    pin: '.horizontalSection ',
                    scrub: 2,
                    invalidateOnRefresh: true,
                    onUpdate: updateProxy
                });

                var proxy = document.createElement('div');
                Draggable.create(proxy, {
                    type:"x",
                    edgeResistance: 0.5,
                    snap: (val) => Math.round(val / 100) * 100,
                    trigger: '.solution_section_column>.elementor-widget-wrap',
                    // inertia: true,
                    // throwProps: true,
                    ease: 'none',
                    bounds: {
                        // minX:-1500,
                        maxX: 0
                    },
                    // onThrowUpdate: function() {
                    //     trigger.scroll(-this.x);
                    // },
                    onDrag: function() {
                        trigger.scroll(-this.x);
                    }

                });
                window.addEventListener('wheel', updateProxy);
                gsap.to('.st--piston-even, .st--piston-odd', {
                    // odd goes -100%, even goes 100%
                    y: i => (i % 2 ? '-30px' : '30px'),
                    ease: 'none',
                    yoyo: true,
                    // repeat: 2,
                    scrollTrigger: {
                        trigger: '.horizontalSection',
                        // containerAnimation: scrollTween,
                        start: 'center center',
                        scrub: 2,
                    },
                })
            }
            else{
                jQuery(document).ready(function ($) {
                    $('.solution_section_column>.elementor-widget-wrap .solutions_item ').addClass("swiper-slide")
                    $('.solution_section_column>.elementor-widget-wrap').addClass("swiper-wrapper")
                    var solution_swiper = new Swiper(".solution_section_column", {
                        slidesPerView: 'auto',
                        loop: false,
                        spaceBetween: 0,
                        resizeReInit: true,
                    });

                    solution_swiper.on('slideChange', function () {
                        if (solution_swiper.realIndex % 2 == 0) { // code for even event
                            $('.solution_section_column .swiper-slide:odd').addClass('bottom');
                            $('.solution_section_column .swiper-slide:even').removeClass('bottom');
                        } else {

                            $('.solution_section_column .swiper-slide:even').addClass('bottom');
                            $('.solution_section_column .swiper-slide:odd').removeClass('bottom');
                        }

                    });
                })
            }

       }

},1000)
jQuery(document).ready(function ($) {
    // $(".stage_nav.cus_stage_text li:first-child a").addClass("active")
    $(".stage_nav.cus_stage_text li a").click(function(e) {
        e.preventDefault()
      var href=  $( this ).attr("href").replace('#', '');
        // console.log(href)
        // $(".stage_nav.cus_stage_text li a").removeClass("active")
        // $( this ).addClass("active")
        $('html, body').animate({
            scrollTop: $("."+href).offset().top-50
        }, 1000);

    });
    $( ".core_principles_inner_section" ).hover(
        function() {
            $( this ).closest(".core_principles_section").addClass("active")
        }, function() {
            $( this ).closest(".core_principles_section").removeClass("active")
        }
    );
    
    $(window).scroll(function (e) {

        if($(this).scrollTop() >= ($( document ).height()/2) ){
            $('body').addClass("active")
        }else{
            $('body').removeClass("active")
        }
    })
    $('.stage_slider_column>.elementor-widget-wrap').addClass("swiper-wrapper")
    var stage_slider_swiper = new Swiper(".stage_slider_column", {
        slidesPerView: 'auto',
        loop: false,
        spaceBetween:47,
        freeMode: true,
        resizeReInit: true,
        navigation: {
            nextEl: '.stage_slider_nav .swiper-button-next',
            prevEl: '.stage_slider_nav .swiper-button-prev',
        },
        mousewheel: {
            releaseOnEdges: true,
            sensitivity:    2,
            // thresholdDelta: 5,
            // thresholdTime: 5,
        },
        breakpoints: {
            640: {
                // slidesPerView: 1,
                // spaceBetween: 40,
            }
        },
    });
    $('.our_history_column>.elementor-widget-wrap').addClass("swiper-wrapper")
    var our_history_swiper = new Swiper(".our_history_column", {
        slidesPerView: 'auto',
        loop: false,
        spaceBetween:40,
        freeMode: true,
        resizeReInit: true,
        navigation: {
            nextEl: '.our_history_slider_nav .swiper-button-next',
            prevEl: '.our_history_slider_nav .swiper-button-prev',
        },
        mousewheel: {
            releaseOnEdges: true,
            sensitivity:    2,
            // thresholdDelta: 5,
            // thresholdTime: 5,
        },
        breakpoints: {
            640: {
                // slidesPerView: 1,
                // spaceBetween: 40,
            }
        },
    });

    our_history_swiper.on('slideChange', function () {
        if (our_history_swiper.realIndex % 2 == 0) { // code for even event
            $('.our_history_column .swiper-slide:odd').addClass('bottom');
            $('.our_history_column .swiper-slide:even').removeClass('bottom');
        }else{

            $('.our_history_column .swiper-slide:even').addClass('bottom');
            $('.our_history_column .swiper-slide:odd').removeClass('bottom');
        }

    });
    // setTimeout(function () {
    //     our_history_swiper.update()
    //
    // },2000)
    $('.rewards_column>.elementor-widget-wrap').addClass("swiper-wrapper")
    var swiper = new Swiper(".rewards_column", {
        slidesPerView: 'auto',
        loop: false,
        freeMode: true,
        spaceBetween:40,
        mousewheel: {
            releaseOnEdges: true,
            sensitivity:    2,
            // thresholdDelta: 50,
            // thresholdTime: 50,
        },
        navigation: {
            nextEl: '.rewards_slider_nav .swiper-button-next',
            prevEl: '.rewards_slider_nav .swiper-button-prev',
        },
        breakpoints: {
            640: {

                // spaceBetween: 20,
            }
        },
    });
    $('.rewards_column .swiper-slide:odd').addClass('bottom');
    swiper.on('slideChange', function () {
        if (swiper.realIndex % 2 == 0) { // code for even event
            $('.rewards_column .swiper-slide:odd').addClass('bottom');
            $('.rewards_column .swiper-slide:even').removeClass('bottom');
             }else{

            $('.rewards_column .swiper-slide:even').addClass('bottom');
            $('.rewards_column .swiper-slide:odd').removeClass('bottom');
        }

});
})