( function( $ ) {
    var pxl_widget_image_handler = function( $scope, $ ) {
        /* Image Effect */

        /* Ink Transition Effect */
        const inkTriggers = [...document.querySelectorAll('.pxl-image-ink')];
        const pxl_controller = new ScrollMagic.Controller();
        inkTriggers.map(ink => {
            const sceneInk = new ScrollMagic.Scene({
                triggerElement: ink,
                triggerHook: 'onEnter',
            })
            .setClassToggle(ink, 'is-active')
            .reverse(false)
            .addTo(pxl_controller);
        });

        /* Scroll Load Effect */
        const imagesAni = document.querySelectorAll(".pxl-image-scroller img");
        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = 1;
                        entry.target.style.filter = "grayscale(0)";
                    } else {
                        entry.target.style.opacity = 0;
                        entry.target.style.filter = "grayscale(1)";
                    }
                });
            },
            {
                threshold: 0.15
            }
            );
        imagesAni.forEach((el, i) => {
            observer.observe(el);
        });

    };

    var pxl_gsap_ani = function( $scope, $ ) {
        // SplitText
        var st = $scope.find(".pxl-split-text.scroll-out");
        if(st.length == 0) return;
        st.each(function(el) {
            ScrollOut({
                targets: this
            });
        });

        // ScrollTrigger
        const scrollEx = () => {
            var prevSection = $scope.prev('section');
            gsap.utils.toArray($scope.find('.element-scroll')).forEach((section, index) => {
                const w = section;
                var x = w.scrollWidth * -1;
                var xEnd = 0;
                if($(section).closest('.pxl-section-scroll').hasClass('revesal')){
                    x = '100%';
                    xEnd = (w.scrollWidth + 50 - section.offsetWidth) * -1;
                }
                gsap.fromTo(w, { x }, {
                    x: xEnd,
                    scrollTrigger: {
                        trigger: prevSection,
                        start: 'top 10%',
                        end: 'bottom 50%',
                        scrub: 0.5
                    }
                });
            });
        }
        scrollEx();

    };

    var pxl_widget_image_box_handler = function( $scope, $ ) {
        if (window.elementorFrontend.isEditMode()) {
            $scope.find('.pxl-image-box1').each(function () {
                var itemImage = $(this).find(".item--image");
                var imageFront = itemImage.find(".image-front");
                var imageBack = itemImage.find(".image-back");

                imageFront.add(imageBack).css({
                    'opacity': '1',
                    'transition': 'opacity 300ms ease-in-out'
                });

                itemImage.hover(function () {
                    imageFront.css('opacity', '0');
                    imageBack.css('opacity', '1');
                }, function () {
                    imageFront.css('opacity', '1');
                    imageBack.css('opacity', '0');
                });
            });

        }

        var $imageTwoScroll = $scope.find('.pxl-image-box2');
        $imageTwoScroll.each(function () {
            var $thisItem = $(this),
            itemImageCenter = $thisItem.find(".item--image");

            gsap.to(itemImageCenter, {
                scrollTrigger: {
                    trigger: itemImageCenter,
                    start: "top center",
                    end: "bottom center",
                    scrub: 2,
                },
                "--data-rotate": 80,
                onUpdate: function () {
                    gsap.set(itemImageCenter, { rotate: parseFloat(itemImageCenter.css("--data-rotate")) });
                    var parallaxValue = parseFloat(itemImageCenter.css("--data-rotate").replace(/[^\d.-]/g, "")) / 50;
                    itemImageCenter.css("--data--parallax", parallaxValue + "px");
                },
            });

        });

        $scope.find('.pxl-image-box3').each(function () {
            var $thisItem = $(this),
            imageCenter = $thisItem.find(".item--image"),
            imageParticle1 = $thisItem.find(".item--particle1"),
            imageParticle2 = $thisItem.find(".item--particle2"),
            imageMask = $thisItem.find(".item--mask");

            if (imageParticle1.length) {
                const timeline1 = gsap.timeline({
                    defaults: {
                        duration: 3,
                        stagger: {
                            each: 0.1,
                            from: "end"
                        },
                        ease: "power2.inOut"
                    },
                    scrollTrigger: {
                        trigger: $thisItem,
                        scrub: 2,
                        start: "top center",
                        end: "bottom center",
                        toggleActions: "restart none none none"
                    }
                });

                timeline1
                .from(imageParticle1, { translateY: "0" })
                .to(imageParticle1, { translateY: "100%" });
            }

            if (imageParticle2.length) {
                const timeline1 = gsap.timeline({
                    defaults: {
                        duration: 3,
                        stagger: {
                            each: 0.1,
                            from: "end"
                        },
                        ease: "power2.inOut"
                    },
                    scrollTrigger: {
                        trigger: $thisItem,
                        scrub: 2,
                        start: "top center",
                        end: "bottom center",
                        toggleActions: "restart none none none"
                    }
                });

                timeline1
                .from(imageParticle2, { translateY: "0" })
                .to(imageParticle2, { translateY: "30px" });
            }

            if (imageMask.length) {
                const timeline1 = gsap.timeline({
                    defaults: {
                        duration: 3,
                        stagger: {
                            each: 0.1,
                            from: "end"
                        },
                        ease: "power2.inOut"
                    },
                    scrollTrigger: {
                        trigger: $thisItem,
                        scrub: 2,
                        start: "top center",
                        end: "bottom center",
                        toggleActions: "restart none none none"
                    }
                });

                timeline1
                .from(imageMask, { top: "0", scale: "1" })
                .to(imageMask, { top: "-10%", scale: "0.5" });
            }

        });

    };

    $( window ).on( 'elementor/frontend/init', function() {
        elementorFrontend.hooks.addAction( 'frontend/element_ready/pxl_image.default', pxl_widget_image_handler );
        elementorFrontend.hooks.addAction( 'frontend/element_ready/pxl_heading.default', pxl_gsap_ani );
        elementorFrontend.hooks.addAction( 'frontend/element_ready/pxl_image_box.default', pxl_widget_image_box_handler );
    } );
} )( jQuery );