<!-- Tailwind CSS: A utility-first CSS framework for rapid UI development. -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Business Directory Config: Load API keys from external file -->
<script src="business-directory-config.js"></script>

<!-- Google Fonts: Using the 'Inter' font family for a clean, modern look. -->

<style>
        /* CUSTOM STYLES
         * This block contains custom CSS to add features not easily available with standard Tailwind classes,
         * like the 3D card flip animation.
         * The !important rule is used on every style to ensure these styles override any conflicting
         * styles from a parent theme (like a WordPress theme).
        */

        /* Base body styling */
        body {
            font-family: 'Inter', sans-serif !important;
            background-color: #ffffff !important;
        }

        /* Custom scrollbar styling for a more modern look */
        ::-webkit-scrollbar {
            width: 8px !important;
        }
        ::-webkit-scrollbar-track {
            background: #f1f5f9 !important;
        }
        ::-webkit-scrollbar-thumb {
            background: #94a3b8 !important;
            border-radius: 10px !important;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #64748b !important;
        }

        /*
         * 3D Flip Card Styles
         * The following rules create the interactive 3D flip effect on the business cards.
        */

        /* The main container for the card grid. */
        #business-listings {
            perspective: 1000px !important;
        }

        /* The container for a single card, which handles the 3D space for the flip. */
        .business-card-container {
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
            cursor: pointer !important;
        }
        .business-card-container:hover {
            transform: translateY(-5px) !important;
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.07), 0 4px 6px -4px rgb(0 0 0 / 0.07) !important;
        }

        /* The inner wrapper that performs the actual flip animation. */
        .business-card-flipper {
            transition: transform 0.6s !important;
            transform-style: preserve-3d !important;
            position: relative !important;
        }

        /* On hover of the container, flip the inner card. */
        .business-card-container:hover .business-card-flipper {
            transform: rotateY(180deg) !important;
        }

        /* Common styles for both the front and back faces of the card. */
        .card-face {
            position: absolute !important;
            width: 100% !important;
            height: 100% !important;
            -webkit-backface-visibility: hidden !important;
            backface-visibility: hidden !important;
            display: flex !important;
            flex-direction: column !important;
        }

        /* The front face of the card is initially visible (no rotation needed). */
        
        /* The back face of the card is initially flipped 180 degrees and hidden. */
        .card-back {
            transform: rotateY(180deg) !important;
        }

        /* Styles for the modal popup (the detailed view when a card is clicked). */
        .modal-overlay {
            transition: opacity 0.3s ease !important;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            z-index: 999999 !important;
        }
        .modal-content {
            transition: transform 0.3s ease !important;
            position: relative !important;
            z-index: 1000000 !important;
        }
    </style>

&nbsp;

<!-- Loading State -->
<div id="loading-state" class="container mx-auto p-4 sm:p-6 lg:p-8">
  <div class="flex flex-col items-center justify-center min-h-[400px]">
    <div class="animate-spin rounded-full h-16 w-16 border-b-4 border-[#ec3237]"></div>
    <p class="mt-4 text-lg text-slate-600">Loading businesses...</p>
  </div>
</div>

<!-- Main application container -->
<div id="app" class="container mx-auto p-4 sm:p-6 lg:p-8" style="display: none;">

<!-- Header Section: Contains the main title and subtitle for the directory. -->

<header class="text-left mb-10 py-4 border-b-2 border-black">
<h1 class="text-5xl md:text-6xl font-extrabold text-black uppercase">Fun<span class="text-[#ec3237]">Times</span> Directory</h1>
<p class="mt-2 text-lg text-slate-700">The trusted information source for the African diaspora</p>

</header><!-- Filters Section: Contains all the controls for searching and filtering the business list. -->

<section id="filters" class="mb-10 p-6 bg-slate-50 rounded-lg border border-slate-200">
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">

<!-- Search Input -->
<div class="md:col-span-2"><label class="block text-sm font-medium text-slate-700 mb-1" for="search-input">Search by name or description</label>
<input id="search-input" class="w-full px-4 py-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-[#e5c000] focus:border-[#e5c000] transition" type="search" placeholder="e.g., 'coffee' or 'bakery'" /></div>
<!-- County Filter Dropdown -->
<div class="md:col-span-1"><label class="block text-sm font-medium text-slate-700 mb-1" for="county-filter">Filter by county</label>
<select id="county-filter" class="w-full px-4 py-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-[#e5c000] focus:border-[#e5c000] transition">
<option value="all">All counties</option>
</select></div>
<!-- Category Filter Dropdown -->
<div class="md:col-span-1"><label class="block text-sm font-medium text-slate-700 mb-1" for="category-filter">Filter by category</label>
<select id="category-filter" class="w-full px-4 py-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-[#e5c000] focus:border-[#e5c000] transition">
<option value="all">All categories</option>
</select></div>
</div>
</section><!-- Business Listings Section: This is where the business cards are dynamically rendered by JavaScript. -->

<main id="business-listings" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Business cards will be dynamically inserted here --></main><!-- No Results Message: This is shown only when no businesses match the current filters. -->
<div id="no-results" class="hidden text-center py-16">
<h3 class="text-2xl font-semibold text-slate-700">No businesses found</h3>
<p class="text-slate-500 mt-2">Try adjusting your search or filter criteria.</p>

</div>
</div>
<!-- Modal Popup Structure: This is the detailed view that appears when a card is clicked. It is hidden by default. -->
<div id="business-modal" class="modal-overlay fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4 z-50 hidden" style="z-index: 999999;">
<div class="modal-content bg-white rounded-lg shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto transform scale-95" style="z-index: 1000000;">

<!-- Modal Header -->
<div class="sticky top-0 bg-white p-6 border-b border-slate-200 flex justify-between items-start">
<div id="modal-header"><!-- Modal title and category content is injected here by JavaScript --></div>
<button id="modal-close-btn" class="text-slate-400 hover:text-slate-600 transition-colors ml-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Modal Body -->
<div id="modal-body" class="p-6"><!-- Business details content is injected here by JavaScript --></div>
</div>
</div>
<script>
    // JAVASCRIPT LOGIC
    // This script controls all the interactive parts of the directory:
    // - Storing and managing the business data
    // - Rendering the business cards
    // - Handling the search and filter functionality
    // - Managing the modal pop-up
    // - Setting up the flip card interaction

        // --- API CONFIGURATION ---
        // Config is loaded from business-directory-config.js (which is gitignored)
        // See business-directory-config.example.js for setup instructions
        const API_CONFIG = {
            baseUrl: `${BUSINESS_DIR_CONFIG.supabaseUrl}/functions/v1`,
            anonKey: BUSINESS_DIR_CONFIG.supabaseAnonKey,
            endpoints: {
                getBusinesses: '/get-businesses'
            }
        };

        // --- DATA STORE ---
        let businessData = [];
        let isLoading = true;

        // --- LOAD BUSINESSES FROM API ---
        async function loadBusinesses() {
            const loadingState = document.getElementById('loading-state');
            const appContainer = document.getElementById('app');
            
            try {
                isLoading = true;
                
                console.log('Fetching businesses from API...');
                const response = await fetch(`${API_CONFIG.baseUrl}${API_CONFIG.endpoints.getBusinesses}`, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'apikey': API_CONFIG.anonKey,
                        'Authorization': `Bearer ${API_CONFIG.anonKey}`
                    },
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const data = await response.json();
                
                // Validate data
                if (!Array.isArray(data)) {
                    throw new Error('Invalid data format received from API');
                }

                businessData = data;
                
                // Add originalIndex for modal functionality
                businessData.forEach((biz, index) => {
                    biz.originalIndex = index;
                });

                console.log(`✓ Loaded ${businessData.length} businesses from API`);
                
                // Hide loading, show app
                if (loadingState) loadingState.style.display = 'none';
                if (appContainer) appContainer.style.display = 'block';
                
                // Initialize the UI
                populateFilters();
                applyFilters();
                
                isLoading = false;

            } catch (error) {
                console.error('Error loading businesses:', error);
                isLoading = false;
                
                // Show error message
                if (loadingState) {
                    loadingState.innerHTML = `
                        <div class="flex flex-col items-center justify-center min-h-[400px]">
                            <svg class="w-16 h-16 text-red-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <h3 class="text-2xl font-semibold text-slate-700 mb-2">Error Loading Businesses</h3>
                            <p class="text-slate-500 mb-4">${error.message}</p>
                            <button onclick="location.reload()" class="px-6 py-2 bg-[#ec3237] text-white rounded-md hover:bg-[#d42a2f] transition">
                                Retry
                            </button>
                        </div>
                    `;
                }
            }
        }

        // --- REMOVED: Hardcoded businessData array ---
        // Businesses are now loaded dynamically from Supabase API
        // Old hardcoded data (239 businesses) has been migrated to database

        // --- DOM ELEMENT REFERENCES
        // Storing references to frequently used DOM elements improves performance by avoiding repeated queries.
        const listingsContainer = document.getElementById('business-listings');
        const searchInput = document.getElementById('search-input');
        const countyFilter = document.getElementById('county-filter');
        const categoryFilter = document.getElementById('category-filter');
        const noResultsMessage = document.getElementById('no-results');
        const modal = document.getElementById('business-modal');
        const modalHeader = document.getElementById('modal-header');
        const modalBody = document.getElementById('modal-body');
        const modalCloseBtn = document.getElementById('modal-close-btn');

        // --- STYLING & THEME CONFIGURATION ---
        // This object defines the color scheme for the ownership tags.
        // To change the colors, you can modify the hex codes here.
        const ownershipStyles = {
            'Black-Owned': {
                tagBg: 'bg-[#17593b]', // Green
                tagText: 'text-white'
            },
            'Latino-Owned': {
                tagBg: 'bg-[#e5c000]', // Yellow
                tagText: 'text-black' // Black text provides better contrast on the yellow background.
            },
            'Minority Business Enterprise': {
                tagBg: 'bg-[#ec3237]', // Red
                tagText: 'text-white'
            },
            'default': {
                tagBg: 'bg-slate-500', // A fallback color for any other type.
                tagText: 'text-white'
            }
        };

        // --- RENDER FUNCTION ---
        /**
         * Renders a list of business objects to the page by creating HTML cards.
         * This function is the core of the UI generation.
         * @param {Array<Object>} businesses - An array of business objects to display.
         */
        function renderListings(businesses) {
            // Clear any existing content to prevent duplication.
            listingsContainer.innerHTML = '';
            // Show or hide the "No results" message based on whether the `businesses` array is empty.
            noResultsMessage.classList.toggle('hidden', businesses.length > 0);

            // Loop through each business object provided.
            businesses.forEach((biz) => {
                // Get the appropriate style from the config object based on ownership type.
                const styles = ownershipStyles[biz.ownership] || ownershipStyles.default;
                const formatUrl = (url) => {
                    if (!url || url.trim() === '') return null;
                    if (url.startsWith('http')) return url;
                    return `https://${url}`;
                };
                const websiteUrl = formatUrl(biz.website);

                // Create the main container for the card. This element will handle the hover effect.
                const cardContainer = document.createElement('article');
                cardContainer.className = 'business-card-container h-[280px]'; // Fixed height for consistent card size.
                // Store the original index of the business from the main `businessData` array. This is crucial for retrieving the correct data when a card is clicked after filtering.
                cardContainer.setAttribute('data-business-index', biz.originalIndex); 

                // The inner HTML for the card, including the front and back faces for the flip animation.
                cardContainer.innerHTML = `
<div class="business-card-flipper w-full h-full relative">
                        <!-- FRONT FACE OF THE CARD -->
<div class="card-face card-front bg-white rounded-lg shadow-md border border-slate-200 overflow-hidden">
<div class="p-6 flex-grow flex flex-col">
<header class="mb-4">
<h2 class="text-xl font-bold text-black">${biz.name}</h2>
<p class="text-sm text-slate-600">${biz.category}</p>
                                </header>
<p class="text-slate-800 mb-4 flex-grow">${biz.description.substring(0, 80)}${biz.description.length > 80 ? '...' : ''}</p>
<footer class="mt-auto pt-4 flex flex-col items-center gap-2">
                                     <span class="inline-block px-3 py-1.5 text-xs font-semibold rounded ${styles.tagBg} ${styles.tagText} whitespace-nowrap">
                                        ${biz.ownership}
                                    </span>
                                    <span class="text-xs text-slate-400 font-semibold uppercase whitespace-nowrap">Hover to flip</span>
                                </footer>
                            </div>
                        </div>

                        <!-- BACK FACE OF THE CARD -->
<div class="card-face card-back bg-slate-800 text-white rounded-lg shadow-md border border-slate-700 overflow-hidden">
<div class="p-6 flex-grow flex flex-col justify-center items-center text-center">
<h3 class="text-lg font-bold mb-4 text-white">${biz.name}</h3>
<div class="space-y-3">
                                    ${biz.address || biz.location ? `<p class="text-slate-200">${biz.address || biz.location}</p>` : ''}
                                    ${biz.phone ? `<a href="tel:${biz.phone}" class="block text-yellow-400 hover:text-white transition">${biz.phone}</a>` : ''}
                                    ${websiteUrl ? `<a href="${websiteUrl}" target="_blank" rel="noopener noreferrer" class="block text-yellow-400 hover:text-white transition truncate max-w-full">${biz.website}</a>` : ''}
                                </div>
<p class="text-xs text-slate-300 font-semibold uppercase mt-6">Click for details</p>
                           </div>
                        </div>
                    </div>
                `;
                // Add the newly created card to the main listings container.
                listingsContainer.appendChild(cardContainer);
            });
        }

        // --- MODAL FUNCTIONS ---
        /**
         * Populates and displays the modal with details of a specific business.
         * @param {Object} biz - The business object to display.
         */
        function showModal(biz) {
            // If in iframe, send modal data to parent instead
            if (window.self !== window.top) {
                try {
                    window.parent.postMessage({ 
                        iframe: 'business-directory',
                        action: 'showModal',
                        business: biz
                    }, '*');
                    return; // Don't show modal in iframe
                } catch(e) {
                    console.log('Could not communicate with parent window, showing modal in iframe');
                }
            }
            
            const styles = ownershipStyles[biz.ownership] || ownershipStyles.default;
            const formatUrl = (url) => {
                if (!url || url.trim() === '') return null;
                if (url.startsWith('http')) return url;
                return `https://${url}`;
            };
            const websiteUrl = formatUrl(biz.website);

            // Populate modal header with the business name and category.
            modalHeader.innerHTML = `
                <div>
                    <h2 class="text-2xl font-bold text-black">${biz.name}</h2>
                    <p class="text-md text-slate-600">${biz.category}</p>
                </div>
            `;
            
            // Populate modal body with the full business details.
            modalBody.innerHTML = `
                <div class="space-y-5">
                    <p class="text-lg text-slate-800">${biz.description}</p>
                    <div class="pt-5 border-t border-slate-200 space-y-4">
                        ${biz.address || biz.location ? `
                        <div class="flex items-start">
                            <svg class="w-6 h-6 text-slate-500 mr-4 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                            <span class="text-slate-900 text-lg">${biz.address || biz.location}</span>
                        </div>
                        ` : ''}
                        ${biz.phone ? `
                        <div class="flex items-center">
                            <svg class="w-6 h-6 text-slate-500 mr-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
                            <a href="tel:${biz.phone}" class="text-[#17593b] hover:text-black text-lg transition">${biz.phone}</a>
                        </div>
                        ` : ''}
                        ${websiteUrl ? `
                        <div class="flex items-center">
                            <svg class="w-6 h-6 text-slate-500 mr-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9V3m0 18a9 9 0 009-9M3 12h18"></path></svg>
                            <a href="${websiteUrl}" target="_blank" rel="noopener noreferrer" class="text-[#17593b] hover:text-black text-lg transition truncate">${biz.website}</a>
                        </div>
                        ` : ''}
                        <div class="flex items-center">
                            <span class="inline-block px-4 py-2 text-sm font-semibold rounded ${styles.tagBg} ${styles.tagText} whitespace-nowrap">
                                ${biz.ownership}
                            </span>
                        </div>
                    </div>
                </div>
            `;
            
            // Prevent body scroll while modal is open (apply to both body and html)
            document.body.style.overflow = 'hidden';
            document.documentElement.style.overflow = 'hidden';
            
            // Make the modal visible and play the animation.
            modal.classList.remove('hidden');
            void modal.offsetWidth; // This is a trick to force the browser to reflow, allowing the CSS transition to play.
            modal.classList.remove('opacity-0');
            modal.querySelector('.modal-content').classList.remove('scale-95');
        }

        /**
         * Hides the modal from view with an animation.
         */
        function hideModal() {
            // Re-enable body scroll (apply to both body and html)
            document.body.style.overflow = '';
            document.documentElement.style.overflow = '';
            
            modal.classList.add('opacity-0');
            modal.querySelector('.modal-content').classList.add('scale-95');
            // Wait for the transition to finish before setting display to 'none'.
            setTimeout(() => {
                modal.classList.add('hidden');
            }, 300); 
        }

        // --- FILTERING LOGIC ---
        /**
         * Filters the main business data based on current user input and selections, then re-renders the list.
         */
        function applyFilters() {
            const searchTerm = searchInput.value.toLowerCase();
            const selectedCounty = countyFilter.value;
            const selectedCategory = categoryFilter.value;

            // Use the `filter` method to create a new array containing only the businesses that match the criteria.
            const filteredData = businessData.filter(biz => {
                // Check if the search term is present in the business name or description.
                const matchesSearch = searchTerm === '' ||
                    biz.name.toLowerCase().includes(searchTerm) ||
                    biz.description.toLowerCase().includes(searchTerm);
                // Check if the county matches the filter (or if the filter is set to 'all').
                const matchesCounty = selectedCounty === 'all' || biz.county === selectedCounty;
                // Check if the category matches the filter (or if the filter is set to 'all').
                const matchesCategory = selectedCategory === 'all' || biz.category === selectedCategory;
                
                // A business is included only if it matches all active filters.
                return matchesSearch && matchesCounty && matchesCategory;
            });

            // Call the render function with the newly filtered list of businesses.
            renderListings(filteredData);
        }

        // --- SETUP AND INITIALIZATION ---
        /**
         * Populates the filter dropdowns with unique values from the data.
         * This function runs once when the page loads.
         */
        function populateFilters() {
            // Debug: Check what data we have
            console.log('Sample businesses:', businessData.slice(0, 3).map(b => ({ 
                name: b.name, 
                county: b.county, 
                category: b.category 
            })));
            
            // Use a Set to automatically get unique, non-empty values for counties and categories.
            const counties = [...new Set(businessData.map(biz => biz.county).filter(Boolean))].sort();
            const categories = [...new Set(businessData.map(biz => biz.category).filter(Boolean))].sort();

            console.log('Unique counties:', counties);
            console.log('Unique categories:', categories);

            // Clear existing options (keep only the first "All" option)
            countyFilter.length = 1;
            categoryFilter.length = 1;

            // Create and append an option element for each unique county.
            counties.forEach(county => {
                countyFilter.add(new Option(county, county));
            });
            // Create and append an option element for each unique category.
            categories.forEach(category => {
                categoryFilter.add(new Option(category, category));
            });
            
            console.log(`✓ Populated filters: ${counties.length} counties, ${categories.length} categories`);
        }

        // --- APP START ---
        // This is the entry point of the application. It runs when the page's DOM is fully loaded.
        document.addEventListener('DOMContentLoaded', () => {
            // Load businesses from API on page load
            loadBusinesses(); 
            
            // Prepare the modal for its entrance animation by setting its initial state.
            modal.classList.add('opacity-0');
            modal.querySelector('.modal-content').classList.add('scale-95');

        // --- EVENT LISTENERS ---
        // These listeners connect user actions (like typing or selecting) to our JavaScript functions.

        // Re-filter the list every time the user types in the search box.
        searchInput.addEventListener('input', applyFilters);
        // Re-filter the list every time the user changes the selection in the dropdowns.
        countyFilter.addEventListener('change', applyFilters);
        categoryFilter.addEventListener('change', applyFilters);

        // Use event delegation to handle clicks on any business card.
        // This is more efficient than adding a listener to every single card.
        listingsContainer.addEventListener('click', (e) => {
            // Find the closest parent element that is a card container.
            const cardContainer = e.target.closest('.business-card-container');
            if (cardContainer) {
                // Retrieve the original index of the business from the data attribute.
                const businessIndex = cardContainer.dataset.businessIndex;
                const business = businessData[businessIndex];
                // Show the modal for the clicked business.
                showModal(business);
            }
        });

        // Event listeners for closing the modal.
        modalCloseBtn.addEventListener('click', hideModal);
        modal.addEventListener('click', (e) => {
            // Only close if the dark overlay itself is clicked, not the content inside it.
            if (e.target === modal) {
                hideModal();
            }
        });
        document.addEventListener('keydown', (e) => {
            // Allow closing the modal by pressing the 'Escape' key.
            if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
                hideModal();
            }
        });
        });
        
        // --- IFRAME AUTO-RESIZE FOR WORDPRESS ---
        function notifyParentHeight() {
            try {
                const height = Math.max(
                    document.body.scrollHeight,
                    document.documentElement.scrollHeight,
                    document.body.offsetHeight,
                    document.documentElement.offsetHeight
                );
                window.parent.postMessage({ 
                    iframe: 'business-directory',
                    height: height 
                }, '*');
            } catch(e) {
                // Silently fail if not in iframe
            }
        }
        
        // Notify on load and content changes
        if (window.self !== window.top) {
            window.addEventListener('load', notifyParentHeight);
            // Watch for content changes
            const observer = new MutationObserver(notifyParentHeight);
            observer.observe(document.body, { childList: true, subtree: true });
            // Also check periodically for dynamic changes
            setInterval(notifyParentHeight, 1000);
        }
    </script>