(function() {
    const container = document.getElementById('fajaedeseo-globe-container');
    const startBtn = document.getElementById('fajaedeseo-globe-start-btn');
    const uiLayer = document.getElementById('fajaedeseo-globe-ui');
    
    // Controleer of de bibliotheek en container geladen zijn
    if (!container || !startBtn || typeof Globe === 'undefined' || typeof fajaedeGlobeConfig === 'undefined') {
        return;
    }

    startBtn.addEventListener('click', function() {
        // UI aanpassen: knop weg, container en controls tonen
        startBtn.style.display = 'none';
        container.style.display = 'block';
        uiLayer.style.display = 'block';
        
        // Overlay altijd tonen, tekst aanpassen op basis van status
        const overlay = document.createElement('div');
        overlay.id = 'fajaedeseo-globe-overlay';
        const upgradeMsg = fajaedeGlobeConfig.is_pro ? '' : '<p><small>Upgrade to Pro for live locations</small></p>';
        overlay.innerHTML = `<h3>Visitors: ${fajaedeGlobeConfig.total_visitors}</h3>${upgradeMsg}`;
        container.parentElement.appendChild(overlay);

        if (!fajaedeGlobeConfig.is_pro) {
        }

        initGlobe();
    });

    function initGlobe() {
    // Initialiseer de globe
    const myGlobe = Globe()(container)
        .globeImageUrl(fajaedeGlobeConfig.assets_url + 'earth-night.jpg')
        .bumpImageUrl(fajaedeGlobeConfig.assets_url + 'earth-topology.png')
        .backgroundColor('rgba(0,0,0,0)')
        .showAtmosphere(true)
        .atmosphereColor('lightskyblue');
    
    myGlobe.width(container.clientWidth).height(container.clientHeight);

    let hoverD = null;
    // Laad landen borders
    fetch(fajaedeGlobeConfig.assets_url + 'ne_110m_admin_0_countries.geojson')
        .then(res => res.json())
        .then(countries => {
            myGlobe.polygonsData(countries.features)
                .polygonCapColor(d => d === hoverD ? 'rgba(0, 115, 170, 0.4)' : 'rgba(0, 115, 170, 0.15)')
                .polygonSideColor(() => 'rgba(255, 255, 255, 0.05)')
                .polygonStrokeColor(() => '#111')
                .polygonLabel(d => `<strong>${d.properties.NAME}</strong>`)
                .onPolygonHover(hoverObj => {
                    container.style.cursor = hoverObj ? 'pointer' : 'default';
                    hoverD = hoverObj;
                    myGlobe.polygonCapColor(d => d === hoverD ? 'rgba(0, 115, 170, 0.4)' : 'rgba(0, 115, 170, 0.15)');
                });
        });

    // Voeg markers toe vanuit de PHP data
    myGlobe.pointsData(fajaedeGlobeConfig.data)
        .pointAltitude('size')
        .pointColor('color')
        .pointRadius(0.5);

    myGlobe.controls().autoRotate = true;
    myGlobe.controls().autoRotateSpeed = 0.5;

    // Koppel UI Elementen
    const stopBtn = document.getElementById('fajaedeseo-globe-toggle-rotate');
    const speedSlider = document.getElementById('fajaedeseo-globe-speed-slider');

    if (stopBtn) {
        stopBtn.addEventListener('click', function() {
            const isRotating = myGlobe.controls().autoRotate;
            myGlobe.controls().autoRotate = !isRotating;
            stopBtn.textContent = !isRotating ? 'Stop Rotation' : 'Start Rotation';
        });
    }

    if (speedSlider) {
        speedSlider.addEventListener('input', function() {
            myGlobe.controls().autoRotateSpeed = parseFloat(this.value);
        });
    }

    window.addEventListener('resize', () => {
        myGlobe.width(container.clientWidth).height(container.clientHeight);
    });
    }
})();
