window.SitselBeforeAfterEditor = {
    initEditorSlider: function(containerId) {
        var container = document.getElementById(containerId);
        if (!container) return;
        
        // ✅ FIX: Skip if already initialized
        if (container.dataset.sitsEditorInit === 'true') {
            return;
        }
        
        var beforeImg = container.querySelector('.sitsel-before-image');
        var divider = container.querySelector('.sitsel-divider');
        if (!beforeImg || !divider) return;
        
        var initialPos = parseFloat(container.getAttribute('data-initial-position')) || 50;
        var direction = container.getAttribute('data-direction') || 'horizontal';
        
        var updateTimeout = null;
        
        var updateEditor = function() {
            // Clear any pending updates
            if (updateTimeout) {
                clearTimeout(updateTimeout);
            }
            
            if (direction === 'horizontal') {
                var containerWidth = container.offsetWidth;
                if (containerWidth === 0) {
                    // Wait for element to render
                    updateTimeout = setTimeout(updateEditor, 100);
                    return;
                }
                var position = (initialPos / 100) * containerWidth;
                beforeImg.style.clipPath = 'inset(0 ' + (100 - initialPos) + '% 0 0)';
                divider.style.left = position + 'px';
            } else {
                var containerHeight = container.offsetHeight;
                if (containerHeight === 0) {
                    // Wait for element to render
                    updateTimeout = setTimeout(updateEditor, 100);
                    return;
                }
                var position = (initialPos / 100) * containerHeight;
                beforeImg.style.clipPath = 'inset(0 0 ' + (100 - initialPos) + '% 0)';
                divider.style.top = position + 'px';
            }
            
            container.style.opacity = '1';
            container.style.visibility = 'visible';
            container.classList.add('sitsel-ready');
        };
        
        // ✅ FIX: Only call once, with optional retry if dimensions are 0
        updateEditor();
        
        // ✅ Listen to editor changes (only once)
        if (typeof elementor !== 'undefined' && elementor.channels && elementor.channels.editor) {
            elementor.channels.editor.on('change', function() {
                // Re-read initial position in case it changed
                initialPos = parseFloat(container.getAttribute('data-initial-position')) || 50;
                direction = container.getAttribute('data-direction') || 'horizontal';
                
                if (updateTimeout) {
                    clearTimeout(updateTimeout);
                }
                updateTimeout = setTimeout(updateEditor, 50);
            });
        }
        
       
        var panelListener = function(e) {
            if (e.target.closest('.elementor-panel-navigation-tab')) {
                initialPos = parseFloat(container.getAttribute('data-initial-position')) || 50;
                direction = container.getAttribute('data-direction') || 'horizontal';
                
                if (updateTimeout) {
                    clearTimeout(updateTimeout);
                }
                updateTimeout = setTimeout(updateEditor, 100);
            }
        };
        
        document.addEventListener('click', panelListener);
        
        
        container.dataset.sitsEditorInit = 'true';
        
        
        container.dataset.panelListener = panelListener;
    }
};
