/**
 * Fusion Website Theme - Header Interactions
 * Expandable search bar - expands right from search button
 */

(function() {
    'use strict';
    
    function initExpandableSearch() {
        var searchTrigger = document.querySelector('.search-trigger');
        var searchExpanded = document.querySelector('.search-expanded');
        var searchClose = document.querySelector('.search-close');
        var searchInput = document.querySelector('.search-expanded input');
        
        if (!searchTrigger || !searchExpanded) {
            return;
        }
        
        // Open search
        searchTrigger.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            document.body.classList.add('search-open');
            searchExpanded.classList.add('active');
            
            // Focus the input after animation
            setTimeout(function() {
                if (searchInput) searchInput.focus();
            }, 250);
        });
        
        // Close search on X button
        if (searchClose) {
            searchClose.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                closeSearch();
            });
        }
        
        // Close on Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && document.body.classList.contains('search-open')) {
                closeSearch();
            }
        });
        
        // Close when clicking outside
        document.addEventListener('click', function(e) {
            if (document.body.classList.contains('search-open')) {
                if (!searchExpanded.contains(e.target) && !searchTrigger.contains(e.target)) {
                    closeSearch();
                }
            }
        });
        
        function closeSearch() {
            document.body.classList.remove('search-open');
            searchExpanded.classList.remove('active');
            if (searchInput) searchInput.value = '';
        }
    }
    
    // Initialize when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initExpandableSearch);
    } else {
        initExpandableSearch();
    }
    
    // Also try after a small delay in case elements are loaded dynamically
    setTimeout(initExpandableSearch, 500);
})();