/**
 * ZMND Interactive Hover Image Widget JavaScript
 * 
 * @package Watson
 * @since 1.0.0
 */

(function($) {
    'use strict';

    /**
     * Initialize the image change on hover
     * 
     * @param {string} containerId - The ID of the container element
     * @since 1.0.0
     */
    function initServiceFeatures(container) {
        // Set default image
        var $container = $(container);
        var defaultImage = $container.find('.ws-zmnd-app-demo').attr('src');
        
        // Handle hover on feature blocks
        $container.find('.ws-zmnd-app-features').on('mouseenter', function() {
            // Get image source from data attribute
            var imgSrc = $(this).data('src');
            
            // Change the center image with animation
            $container.find('.ws-zmnd-app-demo').fadeOut(200, function() {
                $(this).attr('src', imgSrc).fadeIn(200);
            });
        });
        
        // Reset to default image when not hovering any feature
        $container.on('mouseleave', function() {
            $container.find('.ws-zmnd-app-demo').fadeOut(200, function() {
                $(this).attr('src', defaultImage).fadeIn(200);
            });
        });
    }
    
    /**
     * Initialize all interactive hover containers on the page
     * 
     * @since 1.0.0
     */
    function initAllInteractiveHovers() {
        $('.ws-zmnd-service-application').each(function() {
            initServiceFeatures(this);
        });
    }
    
    // Initialize on document ready
    $(document).ready(function() {
        initAllInteractiveHovers();
    });
    
    // Re-initialize on Elementor frontend init
    $(window).on('elementor/frontend/init', function() {
        elementorFrontend.hooks.addAction('frontend/element_ready/ws_zmnd_interactive_hover_image.default', function($element) {
            initAllInteractiveHovers();
        });
    });
    
})(jQuery);
