jQuery(document).ready(function($) {
    var crtProjectsPinHandler = function($scope, $) {
        var $wrapper = $scope.find('.crt-projects-pin-wrapper');
        var $container = $scope.find('.crt-projects-pin-container');
        
        if (!$wrapper.length || !$container.length) {
            return;
        }

        // Safe imagesLoaded binding
        var initFn = function() {
            initGSAP();
        };

        if (typeof imagesLoaded !== 'undefined') {
            imagesLoaded($container[0], initFn);
        } else if ($.fn.imagesLoaded) {
            $container.imagesLoaded(initFn);
        } else {
            setTimeout(initFn, 300);
        }

        function initGSAP() {
            var pinDirection = $wrapper.data('pin-direction') || 'horizontal';
            var widgetId = $scope.data('id'); // Get unique Elementor widget ID

            // Only apply GSAP pinning on desktop sizing
            if (window.innerWidth > 768) {
                
                if (pinDirection === 'horizontal') {
                    var scrollWidth = $container[0].scrollWidth - window.innerWidth;
                    
                    if (scrollWidth > 0) {
                        gsap.to($container, {
                            x: () => -(scrollWidth + 100), 
                            ease: "none",
                            scrollTrigger: {
                                trigger: $wrapper,
                                pin: true,
                                scrub: 1,
                                start: "center center",
                                end: () => "+=" + scrollWidth,
                                invalidateOnRefresh: true,
                                id: "horizontal-" + widgetId
                            }
                        });
                    }
                } else if (pinDirection === 'vertical') {
                    var cards = gsap.utils.toArray($scope.find('.crt-project-card'));
                    cards.forEach((card, index) => {
                        let $this = card;
                        // Set elements to equal heights (based on the tallest element).
                        // ==============================
                        // console.log(pinDirection);
                        function setEqualHeight(selector) {
                            let maxHeight = 0;
                            jQuery(selector).css("height", "auto"); // Reset heights to auto before recalculating (useful for responsive designs).

                            jQuery(selector).each(function () {
                                let elementHeight = jQuery(this).height();
                                if (elementHeight > maxHeight) {
                                    maxHeight = elementHeight;
                                }
                            });
                            // console.log(maxHeight);
                            jQuery(selector).height(maxHeight);
                        }
                        // setEqualHeight(".crt-project-card");

                        // jQuery(window).on("resize orientationchange", function () {
                        //     setTimeout(function () {
                        //         setEqualHeight(".crt-project-card");
                        //     }, 100);
                        // });


                        var pinOffsetAttr = $wrapper.data('pin-offset');
                        var ttStTestimOffset = typeof pinOffsetAttr !== 'undefined' ? parseInt(pinOffsetAttr, 10) : 60;

                        // Sticky items (not last item).
                        // =============
                        if (!$this.matches(':last-child')) {
                            let ttStTestimItem = gsap.timeline({
                                defaults: { ease: "none" },
                                scrollTrigger: {
                                    trigger: $this,
                                    pin: true,
                                    start: "top " + ttStTestimOffset,
                                    end: "bottom " + (ttStTestimOffset - 30),
                                    pinSpacing: false,
                                    scrub: true,
                                    markers: false,
                                }
                            });

                            // Scale items.
                            ttStTestimItem.to($this, { scale: 0.9, opacity: 0.88 });
                            ttStTestimItem.set($this, { autoAlpha: 0 });
                        }
                    });
                }
            }
        }
    };

    $(window).on('elementor/frontend/init', function() {
        elementorFrontend.hooks.addAction('frontend/element_ready/crt-projects-pin.default', crtProjectsPinHandler);
    });
});
