document.addEventListener('DOMContentLoaded', function() {
    const ovationImage = document.getElementById('spaceweather-ovation');
    const forecast = document.getElementById('spaceweather-forecast');
    const overview = document.getElementById('spaceweather-overview');
    const toggleButton = document.getElementById('spaceweather-button');
    let isNorthOvation = true;

    async function fetchSpaceWeatherText() {
        try {
            const response = await fetch('https://quinten0508.com/api/spaceweather/3-day-forecast.txt');
            if (!response.ok) throw new Error('Network response was not ok');
            const text = await response.text();
            forecast.textContent = text;
        } catch (error) {
            console.error('Error fetching space weather text:', error);
        }
    }

    function fetchSpaceWeatherImage() {
        const imageUrl = isNorthOvation
            ? 'https://quinten0508.com/api/spaceweather/ovation-north.jpg'
            : 'https://quinten0508.com/api/spaceweather/ovation-south.jpg';

        ovationImage.src = imageUrl;
        ovationImage.alt = isNorthOvation ? 'Northern Hemisphere Aurora Ovatio visualization' 
        : 'Southern Hemisphere Aurora Ovation visualization';

    }

    function fetchOverviewImage() {
        overview.src = 'https://quinten0508.com/api/spaceweather/overview.gif';
        overview.alt = 'Solar flux and geomagnetic activity graphed'
    }

    toggleButton.addEventListener('click', function() {
        isNorthOvation = !isNorthOvation;
        fetchSpaceWeatherImage();
    });

    // Fetch text and images immediately on load
    fetchSpaceWeatherText();
    fetchSpaceWeatherImage();
    fetchOverviewImage();

    // Fetch images every 10 minutes
    setInterval(() => {
        fetchSpaceWeatherImage();
        fetchOverviewImage();
    }, 600000);
});