function xBeforeAfterImage() {

    if ( document.querySelector('body > .brx-body.iframe') ) {
        return
    }

    const extrasBeforeAfterImage = function ( container ) {

        container.querySelectorAll('.x-before-after').forEach((beforeAfter) => {

            const configAttr = beforeAfter.getAttribute('data-x-before-after')
            const config = configAttr ? JSON.parse(configAttr) : {}

            const slider = beforeAfter.querySelector('.x-before-after_slider');

            const hasHotspots = beforeAfter.querySelector('.brxe-ximagehotspots') !== null; 
            
            // Function to update z-index of interactive elements based on visibility
            const updateInteractiveElements = () => {

                if (!hasHotspots) return;

                const position = parseFloat(getComputedStyle(beforeAfter).getPropertyValue('--x-before-after-position'));
                const firstBlock = beforeAfter.querySelector('.x-before-after_container > .x-before-after-image_block:nth-of-type(1)');
                const secondBlock = beforeAfter.querySelector('.x-before-after_container > .x-before-after-image_block:nth-of-type(2)');
                
                if (!firstBlock || !secondBlock) return;
                
                // Get all interactive elements (buttons, links, inputs, selects, textareas, hotspot markers)
                const firstBlockInteractive = firstBlock.querySelectorAll('button, a, input, select, textarea, [role="button"], [tabindex]:not([tabindex="-1"]), .x-marker_marker, [data-brx-filter]');
                const secondBlockInteractive = secondBlock.querySelectorAll('button, a, input, select, textarea, [role="button"], [tabindex]:not([tabindex="-1"]), .x-marker_marker, [data-brx-filter]');
                
                // Check each element in first block (clipped from left/top)
                firstBlockInteractive.forEach(element => {
                    const rect = element.getBoundingClientRect();
                    const containerRect = beforeAfter.getBoundingClientRect();
                    
                    let isFullyVisible = false;
                    if ('horizontal' === config.direction) {
                        // Element is fully visible if its right edge is within the clipped area
                        const elementRight = rect.right;
                        const clipPosition = containerRect.left + (containerRect.width * (position / 100));
                        isFullyVisible = elementRight <= clipPosition;
                    } else {
                        // Vertical: element fully visible if bottom edge is within top portion
                        const elementBottom = rect.bottom;
                        const clipPosition = containerRect.top + (containerRect.height * (position / 100));
                        isFullyVisible = elementBottom <= clipPosition;
                    }
                    
                    if (isFullyVisible) {
                        element.style.zIndex = '2';
                    } else {
                        element.style.zIndex = '';
                    }
                });
                
                // Check each element in second block (visible on right/bottom side)
                secondBlockInteractive.forEach(element => {
                    const rect = element.getBoundingClientRect();
                    const containerRect = beforeAfter.getBoundingClientRect(); 
                    
                    let isFullyVisible = false;
                    if ('horizontal' === config.direction) {
                        // Element is fully visible if its left edge is on the right side of clip position
                        const elementLeft = rect.left;
                        const clipPosition = containerRect.left + (containerRect.width * (position / 100));
                        isFullyVisible = elementLeft >= clipPosition;
                    } else {
                        // Vertical: element fully visible if top edge is below the clip position
                        const elementTop = rect.top;
                        const clipPosition = containerRect.top + (containerRect.height * (position / 100));
                        isFullyVisible = elementTop >= clipPosition;
                    }
                    
                    if (isFullyVisible) {
                        element.style.zIndex = '2';
                    } else {
                        element.style.zIndex = '';
                    }
                });
            }; 
            
            // Throttle function to limit how often updateInteractiveElements runs
            const throttle = (func, limit) => {
                let inThrottle;
                return function() {
                    const args = arguments;
                    const context = this;
                    if (!inThrottle) {
                        func.apply(context, args);
                        inThrottle = true;
                        setTimeout(() => inThrottle = false, limit);
                    }
                }
            }; 

            // Create throttled version of updateInteractiveElements
            const throttledUpdateInteractive = throttle(updateInteractiveElements, 30);

            slider.addEventListener('input', (e) => {
                beforeAfter.style.setProperty('--x-before-after-position', `${e.target.value}%`);
                throttledUpdateInteractive();
            });
            
            // Initial update on page load (with small delay to ensure elements are rendered)
            setTimeout(() => {
                updateInteractiveElements();
            }, 20); 

            if ( config.maybeMouseMove ) {

                let valueHover = 0;

                function rangePosition(e) {
                    const container = beforeAfter.querySelector('.x-before-after_slider-container');
                    const rect = container.getBoundingClientRect();
                    
                    if ('horizontal' === config.direction) {
                        // If mouse is at left edge of container
                        if (e.clientX <= rect.left) return 0;
                        // If mouse is at right edge of container
                        if (e.clientX >= rect.right) return 100;
                        // Otherwise calculate position within container
                        return ((e.clientX - rect.left) / rect.width) * 100;
                    } else {
                        // If mouse is at top edge of container
                        if (e.clientY <= rect.top) return 0;
                        // If mouse is at bottom edge of container
                        if (e.clientY >= rect.bottom) return 100;
                        // Otherwise calculate position within container
                        return ((e.clientY - rect.top) / rect.height) * 100;
                    }
                }
                

                beforeAfter.querySelector('.x-before-after_slider-container').addEventListener('mousemove', function(e) {
                    beforeAfter.style.setProperty('--x-before-after-position', `${rangePosition(e)}%`);
                    throttledUpdateInteractive();
                });
            }

        })

    }

    extrasBeforeAfterImage(document); 

    const xBeforeAfterImageAJAX = xExtrasRegisterAJAXHandler('doExtrasBeforeAfterImage', true, '.brxe-xbeforeafterimage');

     // Expose function
     window.doExtrasBeforeAfterImage = extrasBeforeAfterImage; 
   

}

document.addEventListener("DOMContentLoaded",function(e){
    bricksIsFrontend&&xBeforeAfterImage()
 });