<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mylai Maha Periyava Anusham Trust</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Cinzel', serif;
            background: linear-gradient(180deg, #FFF8DC 0%, #FFE5B4 100%);
            color: #2C1810;
            margin: 0;
            padding: 0;
            text-align: center;
            min-height: 100vh;
        }
        .header {
            background: linear-gradient(135deg, #FF6B35 0%, #FF9933 50%, #FFA726 100%);
            padding: 15px 20px;
            border-bottom: 4px solid #B84300;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
            display: flex;
            align-items: center;
            justify-content: space-between; /* Adjusted to balance logo/title and back button */
            flex-wrap: wrap;
            gap: 15px;
            position: relative;
        }
        .header-brand-box {
            display: flex;
            align-items: center;
            gap: 15px;
            flex-wrap: wrap;
        }
        .header img {
            height: 50px;
            width: auto;
            filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
        }
        .header h1 {
            margin: 0;
            font-size: clamp(1.3rem, 4vw, 2.5rem);
            color: #FFFFFF;
            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
            font-weight: 700;
            letter-spacing: 1px;
        }

        /* BACK TO MYLAI NAVIGATION BUTTON */
        .btn-back-nav {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #2C1810;
            color: #FFF8DC;
            text-decoration: none;
            padding: 8px 18px;
            font-size: 0.9rem;
            font-weight: 700;
            border-radius: 6px;
            border: 2px solid #D4AF37;
            box-shadow: 0 3px 8px rgba(0,0,0,0.2);
            transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
            letter-spacing: 0.5px;
        }
        .btn-back-nav:hover {
            background: #B84300;
            color: #FFFFFF;
            border-color: #FFF8DC;
            transform: translateY(-1px);
            box-shadow: 0 5px 12px rgba(0,0,0,0.3);
        }

        .content img.main-banner-img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 20px auto;
            border: 6px solid #FF6B35;
            border-radius: 12px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease;
        }
        .content img.main-banner-img:hover {
            transform: scale(1.02);
        }
        .timeline-title {
            background: linear-gradient(135deg, #E65100 0%, #FF6D00 50%, #FF8F00 100%);
            padding: 15px 15px;
            border-bottom: 3px solid #BF360C;
            margin: 20px auto;
            width: 90%;
            max-width: 600px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
        }
        .timeline-title h2 {
            font-size: clamp(1.5rem, 4vw, 2.5rem);
            margin: 0;
            color: #FFFFFF;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        .timeline-title h3 {
            font-size: clamp(1rem, 2.5vw, 1.5rem);
            margin: 5px 0 0 0;
            color: #FFF8E1;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
        }
        .calendar-controls {
            margin: 30px auto 20px;
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
        }
        .calendar-controls select {
            padding: 10px 15px;
            font-family: 'Cinzel', serif;
            font-size: 1rem;
            border: 2px solid #FF6B35;
            border-radius: 8px;
            background: #FFFFFF;
            color: #2C1810;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            cursor: pointer;
        }
        .calendar-controls select:focus {
            outline: none;
            border-color: #B84300;
            box-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
        }
        .today-button {
            padding: 10px 20px;
            font-family: 'Cinzel', serif;
            font-size: 1rem;
            font-weight: 700;
            border: 2px solid #E65100;
            border-radius: 8px;
            background: linear-gradient(135deg, #FF6B35 0%, #FF9933 100%);
            color: #FFFFFF;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            transition: all 0.2s ease;
        }
        .today-button:hover {
            background: linear-gradient(135deg, #E65100 0%, #FF6D00 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
        .events-display {
            background: linear-gradient(135deg, #E65100 0%, #FF6D00 100%);
            color: #FFFFFF;
            padding: 15px 20px;
            margin: 20px auto;
            max-width: 450px;
            border-radius: 10px;
            font-size: 1.2rem;
            font-weight: 700;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
        }
        .calendar-container {
            background: #FFFFFF;
            border-radius: 12px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
            margin: 20px auto;
            padding: 20px;
            max-width: 450px;
        }
        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .calendar-nav {
            background: none;
            border: none;
            font-size: 1.5rem;
            color: #FF6B35;
            cursor: pointer;
            padding: 5px 10px;
            font-family: 'Cinzel', serif;
        }
        .calendar-nav:hover {
            color: #B84300;
        }
        .calendar-title {
            font-size: 1.4rem;
            font-weight: 700;
            color: #E65100;
        }
        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
        }
        .calendar-day-header {
            font-weight: 700;
            color: #E65100;
            padding: 10px 5px;
            font-size: 0.9rem;
        }
        .calendar-day {
            padding: 12px 5px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;
            background: #FFF8E1;
            transition: all 0.2s ease;
            position: relative;
        }
        .calendar-day:hover {
            background: #FFE5B4;
        }
        .calendar-day.today {
            background: #FF6B35;
            color: #FFFFFF;
            font-weight: 700;
            box-shadow: 0 0 0 3px #FFE5B4;
        }
        .calendar-day.selected {
            background: #4CAF50;
            color: #FFFFFF;
            font-weight: 700;
            box-shadow: 0 0 0 3px #C8E6C9;
        }
        .calendar-day.other-month {
            color: #AAA;
            background: #F5F5F5;
        }
        
        .calendar-day.has-events::after {
            content: '';
            position: absolute;
            bottom: 3px;
            left: 50%;
            transform: translateX(-50%);
            width: 6px;
            height: 6px;
            background-color: #D4AF37;
            border-radius: 50%;
            box-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }
        .calendar-day.selected.has-events::after,
        .calendar-day.today.has-events::after {
            background-color: #FFFFFF;
        }

        /* PHOTO GALLERY LAYOUT CONTROLS */
        .gallery-container {
            width: 95%;
            max-width: 1100px;
            margin: 30px auto;
            text-align: left;
        }
        .gallery-event-block {
            background: #FFFFFF;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            padding: 25px;
            margin-bottom: 30px;
            border-left: 6px solid #FF6B35;
        }
        .gallery-event-title {
            font-size: 1.6rem;
            color: #B84300;
            margin-top: 0;
            margin-bottom: 20px;
            border-bottom: 2px dashed #FFE5B4;
            padding-bottom: 8px;
            font-weight: 700;
            text-transform: capitalize;
        }
        
        .orientation-section-title {
            font-size: 0.95rem;
            color: #8B5A2B;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin: 15px 0 8px 0;
            font-weight: 700;
        }
        
        .grid-landscape {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 25px;
        }
        
        .grid-portrait {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 20px;
            margin-bottom: 25px;
        }
        
        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
            background: #FDFBF7;
            border: 1px solid #FFE5B4;
            transition: transform 0.2s ease;
            cursor: pointer;
        }
        .gallery-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 18px rgba(0,0,0,0.18);
        }
        
        .gallery-item img {
            width: 100%;
            height: auto;
            max-height: 500px;
            object-fit: contain;
            display: block;
            background: #FAFAFA;
        }
        
        .no-events-message {
            background: #FFFFFF;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            text-align: center;
            color: #777;
            font-size: 1.1rem;
            max-width: 450px;
            margin: 20px auto;
        }

        .process-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(44, 24, 16, 0.95);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            color: #FFFFFF;
            transition: opacity 0.3s ease;
        }
        .process-overlay.hidden {
            opacity: 0;
            pointer-events: none;
        }
        .spinner {
            width: 60px;
            height: 60px;
            border: 6px solid #FFE5B4;
            border-top: 6px solid #FF6B35;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 20px;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* POPUP WINDOW (MODAL) STYLING */
        .image-popup-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        .image-popup-modal.visible {
            opacity: 1;
            pointer-events: auto;
        }
        .popup-content-box {
            background: #FFF8DC;
            padding: 15px;
            border-radius: 12px;
            max-width: 90%;
            max-height: 90%;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 4px solid #FF6B35;
            position: relative;
        }
        .popup-img {
            max-width: 100%;
            max-height: 70vh;
            object-fit: contain;
            border-radius: 6px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }
        .popup-ok-btn {
            margin-top: 15px;
            padding: 10px 30px;
            font-family: 'Cinzel', serif;
            font-size: 1.1rem;
            font-weight: 700;
            background: linear-gradient(135deg, #FF6B35 0%, #FF9933 100%);
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
            transition: all 0.2s ease;
        }
        .popup-ok-btn:hover {
            background: linear-gradient(135deg, #E65100 0%, #FF6D00 100%);
            transform: scale(1.05);
        }

        @media (max-width: 768px) {
            .header {
                justify-content: center;
                text-align: center;
                padding-right: 20px !important;
                padding-left: 20px !important;
            }
            .header-brand-box {
                justify-content: center;
            }
            .header-nav-stack {
                position: static !important;
                transform: none !important;
                margin-top: 10px;
                align-items: center !important;
                width: 100%;
            }
        }

        @media (max-width: 480px) {
             .grid-landscape, .grid-portrait {
                 grid-template-columns: 1fr;
             }
        }
    </style>
</head>
<body>

    <div id="processOverlay" class="process-overlay">
        <div class="spinner"></div>
        <h2>Please Wait</h2>
        <p style="color: #FF9933; margin-top: 5px;">Synchronizing Live Trust Registry Logs...</p>
    </div>

    <div id="imagePopupModal" class="image-popup-modal">
        <div class="popup-content-box" onclick="event.stopPropagation()">
            <img id="popupImg" class="popup-img" src="" alt="High Res Preview">
            <button id="popupOkBtn" class="popup-ok-btn">OK</button>
        </div>
    </div>

    <div class="header" style="position: relative; display: flex; justify-content: center; align-items: center; width: 100%; box-sizing: border-box; padding-right: 240px; padding-left: 240px;">
        <div class="header-brand-box" style="display: flex; flex-direction: row; align-items: center; text-align: left; gap: 15px;">
            <img src="Essentials/Images/mp1.jpg" alt="Mylai Maha Periyava Anusham Trust Logo" style="flex-shrink: 0;">
            <h1 style="margin: 0;">Mylai Maha Periyava Anusham Trust</h1>
        </div>

        <div class="header-nav-stack" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; align-items: flex-end; z-index: 100;">
            <a href="mylai.html" class="btn-back-nav" style="position: static; float: none; display: inline-block; margin: 0;">
                ← Back to Mylai Page
            </a>
            <a href="index.html" class="btn-back-nav" style="position: static; float: none; display: inline-block; margin: 0;">
                ← Back to GanesaSarma
            </a>
        </div>
    </div>

    <div class="content">
        <img src="Essentials/Images/mp2.jpg" class="main-banner-img" alt="Maha Periyava Image">
        <div class="timeline-title">
            <h2>Time Line</h2>
            <h3>Events in Periyava Temple</h3>
        </div>
        <div class="calendar-controls">
            <select id="monthSelect"></select>
            <select id="yearSelect"></select>
            <button id="todayBtn" class="today-button">Today</button>
        </div>
        <div class="calendar-container">
            <div class="calendar-header">
                <button class="calendar-nav" id="prevMonth">&#9664;</button>
                <div class="calendar-title" id="calendarTitle"></div>
                <button class="calendar-nav" id="nextMonth">&#9654;</button>
            </div>
            <div class="calendar-grid" id="calendarGrid">
                <div class="calendar-day-header">Sun</div>
                <div class="calendar-day-header">Mon</div>
                <div class="calendar-day-header">Tue</div>
                <div class="calendar-day-header">Wed</div>
                <div class="calendar-day-header">Thu</div>
                <div class="calendar-day-header">Fri</div>
                <div class="calendar-day-header">Sat</div>
            </div>
        </div>
        <div class="events-display" id="eventsDisplay">Events Container</div>

        <div id="galleryContainer" class="gallery-container"></div>
    </div>

    <script>
        const today = new Date();
        let currentMonth = today.getMonth();
        let currentYear = today.getFullYear();
        let selectedDate = new Date(today.getFullYear(), today.getMonth(), today.getDate());

        let eventDatabase = {};

        const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
        const monthSelect = document.getElementById('monthSelect');
        const yearSelect = document.getElementById('yearSelect');
        const calendarTitle = document.getElementById('calendarTitle');
        const calendarGrid = document.getElementById('calendarGrid');
        const eventsDisplay = document.getElementById('eventsDisplay');
        const galleryContainer = document.getElementById('galleryContainer');
        const processOverlay = document.getElementById('processOverlay');

        // Modal elements
        const imagePopupModal = document.getElementById('imagePopupModal');
        const popupImg = document.getElementById('popupImg');
        const popupOkBtn = document.getElementById('popupOkBtn');

        for (let i = 0; i < 12; i++) {
            const option = document.createElement('option');
            option.value = i;
            option.textContent = monthNames[i];
            monthSelect.appendChild(option);
        }

        // DYNAMIC UPPER YEAR LIMIT: Set dynamically from 2021 up to current system year
        for (let i = 2021; i <= today.getFullYear(); i++) {
            const option = document.createElement('option');
            option.value = i;
            option.textContent = i;
            yearSelect.appendChild(option);
        }

        // Popup utility handlers
        function openImagePopup(srcUrl) {
            popupImg.src = srcUrl;
            imagePopupModal.classList.add('visible');
        }
        function closeImagePopup() {
            imagePopupModal.classList.remove('visible');
            setTimeout(() => { popupImg.src = ""; }, 300);
        }
        popupOkBtn.addEventListener('click', closeImagePopup);
        imagePopupModal.addEventListener('click', closeImagePopup);

        async function loadTimelineData() {
            const baseDropboxUrl = 'https://dl.dropboxusercontent.com/scl/fi/rf85elkz5fc3cl1h8kccc/TimeLine.txt?rlkey=umkh0r7wtf7ulu3rzqzcgb1yc&dl=1';
            const dynamicDropboxUrl = baseDropboxUrl + '&_cb=' + new Date().getTime();
            const proxyUrl = 'https://api.allorigins.win/get?url=' + encodeURIComponent(dynamicDropboxUrl);

            try {
                const response = await fetch(proxyUrl);
                if (!response.ok) throw new Error('Proxy endpoint down');
                const jsonWrapper = await response.json();
                const rawText = jsonWrapper.contents;

                parseRegistryText(rawText);
            } catch (err) {
                console.warn("Proxy connection slow, running fallback direct text read context...");
                try {
                    const fallbackResponse = await fetch(baseDropboxUrl);
                    const fallbackText = await fallbackResponse.text();
                    parseRegistryText(fallbackText);
                } catch (fallbackErr) {
                    console.error("Critical failure streaming file timeline data records:", fallbackErr);
                }
            } finally {
                processOverlay.classList.add('hidden');
                monthSelect.value = currentMonth;
                yearSelect.value = currentYear;
                renderCalendar();
                updateEventsDisplay();
            }
        }

        function parseRegistryText(text) {
            if (!text) return;
            const lines = text.split(/\r?\n/);

            lines.forEach(line => {
                let cleanLine = line.trim();
                if (!cleanLine) return;

                const lowerLine = cleanLine.toLowerCase();
                if (!lowerLine.endsWith('.jpg') && !lowerLine.endsWith('.jpeg')) return;

                cleanLine = cleanLine.replace(/\\/g, '/');

                const finalSlash = cleanLine.lastIndexOf('/');
                if (finalSlash === -1) return;
                const fileName = cleanLine.substring(finalSlash + 1).trim();

                if (fileName.length < 10) return;
                const dateRawBlock = fileName.substring(0, 10);
                const normalizedDate = dateRawBlock.replace(/[\.\/]/g, '-');

                if (!/^\d{4}-\d{2}-\d{2}$/.test(normalizedDate)) return;

                let descriptionPart = fileName.substring(10).trim();
                if (descriptionPart.startsWith('-')) {
                    descriptionPart = descriptionPart.substring(1).trim();
                }

                descriptionPart = descriptionPart.replace(/\.[jJ][pP][eE]?[gG]$/i, '').trim();

                let eventHeading = "Temple Updates";
                const trailingNumPattern = descriptionPart.match(/(.*?)\s+(\d+)$/);
                const leadingNumPattern = descriptionPart.match(/^(\d+)\s+(.*)/);

                if (trailingNumPattern) {
                    eventHeading = trailingNumPattern[1].trim();
                } else if (leadingNumPattern) {
                    eventHeading = leadingNumPattern[2].trim();
                } else if (descriptionPart.length > 0) {
                    eventHeading = descriptionPart;
                }

                const absoluteImageURL = 'https://www.ganesasarma.com' + (cleanLine.startsWith('/') ? '' : '/') + cleanLine;

                if (!eventDatabase[normalizedDate]) {
                    eventDatabase[normalizedDate] = {};
                }
                if (!eventDatabase[normalizedDate][eventHeading]) {
                    eventDatabase[normalizedDate][eventHeading] = [];
                }
                eventDatabase[normalizedDate][eventHeading].push(absoluteImageURL);
            });
        }

        function renderCalendar() {
            calendarTitle.textContent = monthNames[currentMonth] + ' ' + currentYear;

            while (calendarGrid.children.length > 7) {
                calendarGrid.removeChild(calendarGrid.lastChild);
            }

            const firstDay = new Date(currentYear, currentMonth, 1);
            const lastDay = new Date(currentYear, currentMonth + 1, 0);

            const startDate = new Date(firstDay);
            startDate.setDate(startDate.getDate() - firstDay.getDay());

            const endDate = new Date(lastDay);
            endDate.setDate(endDate.getDate() + (6 - lastDay.getDay()));

            for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
                const dayEl = document.createElement('div');
                dayEl.className = 'calendar-day';
                const dayDate = new Date(d.getFullYear(), d.getMonth(), d.getDate());
                dayEl.textContent = d.getDate();

                if (d.getMonth() !== currentMonth) {
                    dayEl.classList.add('other-month');
                }

                const targetY = dayDate.getFullYear();
                const targetM = String(dayDate.getMonth() + 1).padStart(2, '0');
                const targetD = String(dayDate.getDate()).padStart(2, '0');
                const calculatedLookupKey = `${targetY}-${targetM}-${targetD}`;

                if (eventDatabase[calculatedLookupKey] && Object.keys(eventDatabase[calculatedLookupKey]).length > 0) {
                    dayEl.classList.add('has-events');
                }

                const systemNow = new Date();
                if (d.getFullYear() === systemNow.getFullYear() && d.getMonth() === systemNow.getMonth() && d.getDate() === systemNow.getDate()) {
                    dayEl.classList.add('today');
                }
                if (d.getFullYear() === selectedDate.getFullYear() && d.getMonth() === selectedDate.getMonth() && d.getDate() === selectedDate.getDate()) {
                    dayEl.classList.add('selected');
                }

                dayEl.addEventListener('click', () => {
                    selectedDate = new Date(dayDate.getFullYear(), dayDate.getMonth(), dayDate.getDate());
                    currentMonth = selectedDate.getMonth();
                    currentYear = selectedDate.getFullYear();
                    monthSelect.value = currentMonth;
                    yearSelect.value = currentYear;
                    updateEventsDisplay();
                    renderCalendar();

                    // Smoothly brings the content display into focus below the calendar grid
                    setTimeout(() => {
                        const targetView = document.getElementById('eventsDisplay');
                        if (targetView) {
                            targetView.scrollIntoView({ behavior: 'smooth', block: 'start' });
                        }
                    }, 100);
                });

                calendarGrid.appendChild(dayEl);
            }
        }

        function updateEventsDisplay() {
            const ordinal = getOrdinal(selectedDate.getDate());
            eventsDisplay.textContent = 'Events on ' + ordinal + ' ' + monthNames[selectedDate.getMonth()] + ' ' + selectedDate.getFullYear();
            renderGalleryContainer();
        }

        function getOrdinal(num) {
            const s = ['th', 'st', 'nd', 'rd'];
            const v = num % 100;
            return num + (s[(v - 20) % 10] || s[v] || s[0]);
        }

        function determineOrientation(url) {
            return new Promise((resolve) => {
                const img = new Image();
                img.onload = function () {
                    if (this.naturalHeight > this.naturalWidth) {
                        resolve({ url: url, orientation: 'portrait' });
                    } else {
                        resolve({ url: url, orientation: 'landscape' });
                    }
                };
                img.onerror = function () {
                    resolve({ url: url, orientation: 'landscape' });
                };
                img.src = url;
            });
        }

        async function renderGalleryContainer() {
            // 1. Reveal the loading overlay while processing new date images
            const processOverlay = document.getElementById('processOverlay');
            if (processOverlay) {
                processOverlay.classList.remove('hidden');
            }

            galleryContainer.innerHTML = '';

            const reqY = selectedDate.getFullYear();
            const reqM = String(selectedDate.getMonth() + 1).padStart(2, '0');
            const reqD = String(selectedDate.getDate()).padStart(2, '0');
            const matchKey = `${reqY}-${reqM}-${reqD}`;

            const todaysEvents = eventDatabase[matchKey];

            if (!todaysEvents || Object.keys(todaysEvents).length === 0) {
                const fallbackMessage = document.createElement('div');
                fallbackMessage.className = 'no-events-message';
                fallbackMessage.textContent = 'No event timeline pictures captured for this date registry entry.';
                galleryContainer.appendChild(fallbackMessage);
                
                // Hide overlay immediately if there are no events to load
                if (processOverlay) processOverlay.classList.add('hidden');
                return;
            }

            try {
                for (const [headingText, picturesList] of Object.entries(todaysEvents)) {
                    const groupBlock = document.createElement('div');
                    groupBlock.className = 'gallery-event-block';

                    const headingTitle = document.createElement('h3');
                    headingTitle.className = 'gallery-event-title';
                    headingTitle.textContent = headingText;
                    groupBlock.appendChild(headingTitle);

                    const analyzedImages = await Promise.all(picturesList.map(url => determineOrientation(url)));

                    const landscapes = analyzedImages.filter(item => item.orientation === 'landscape');
                    const portraits = analyzedImages.filter(item => item.orientation === 'portrait');

                    const createGalleryItem = (urlPath) => {
                        const cellItem = document.createElement('div');
                        cellItem.className = 'gallery-item';

                        cellItem.addEventListener('click', () => openImagePopup(urlPath));

                        const imageNode = document.createElement('img');
                        imageNode.src = urlPath;
                        imageNode.alt = headingText;
                        imageNode.loading = 'lazy';
                        cellItem.appendChild(imageNode);
                        return cellItem;
                    };

                    if (landscapes.length > 0) {
                        if (portraits.length > 0) {
                            const subTitle = document.createElement('div');
                            subTitle.className = 'orientation-section-title';
                            subTitle.textContent = 'Landscape Views';
                            groupBlock.appendChild(subTitle);
                        }

                    const landGrid = document.createElement('div');
                    landGrid.className = 'grid-landscape';
                    landscapes.forEach(item => {
                        landGrid.appendChild(createGalleryItem(item.url));
                    });
                    groupBlock.appendChild(landGrid);
                }

                if (portraits.length > 0) {
                    if (landscapes.length > 0) {
                        const subTitle = document.createElement('div');
                        subTitle.className = 'orientation-section-title';
                        subTitle.textContent = 'Portrait Views';
                        groupBlock.appendChild(subTitle);
                    }

                    const portGrid = document.createElement('div');
                    portGrid.className = 'grid-portrait';
                    portraits.forEach(item => {
                        portGrid.appendChild(createGalleryItem(item.url));
                    });
                    groupBlock.appendChild(portGrid);
                }

                    galleryContainer.appendChild(groupBlock);
                }
            } catch (err) {
                console.error("Error processing grid image layout orientations:", err);
            } finally {
                // 2. Safely hide the loading overlay once image rendering is complete
                if (processOverlay) {
                    processOverlay.classList.add('hidden');
                }
            }
        }

        monthSelect.addEventListener('change', () => {
            currentMonth = parseInt(monthSelect.value);
            selectedDate = new Date(currentYear, currentMonth, 1);
            updateControlSelectors();
        });
        yearSelect.addEventListener('change', () => {
            currentYear = parseInt(yearSelect.value);
            selectedDate = new Date(currentYear, currentMonth, 1);
            updateControlSelectors();
        });
        document.getElementById('prevMonth').addEventListener('click', () => {
            currentMonth--;
            if (currentMonth < 0) { currentMonth = 11; currentYear--; }
            selectedDate = new Date(currentYear, currentMonth, 1);
            updateControlSelectors();
        });
        document.getElementById('nextMonth').addEventListener('click', () => {
            currentMonth++;
            if (currentMonth > 11) { currentMonth = 0; currentYear++; }
            selectedDate = new Date(currentYear, currentMonth, 1);
            updateControlSelectors();
        });
        document.getElementById('todayBtn').addEventListener('click', () => {
            const systemToday = new Date();
            currentMonth = systemToday.getMonth();
            currentYear = systemToday.getFullYear();
            selectedDate = new Date(systemToday.getFullYear(), systemToday.getMonth(), systemToday.getDate());
            updateControlSelectors();
        });

        function updateControlSelectors() {
            monthSelect.value = currentMonth;
            yearSelect.value = currentYear;
            updateEventsDisplay();
            renderCalendar();
        }

        loadTimelineData();
    </script>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <a href="https://www.hitwebcounter.com" target="_blank">
        <center>
            <img src="https://hitwebcounter.com/counter/counter.php?page=7749412&style=0001&nbdigits=5&type=page&initCount=4500" title="Free Counter" Alt="web counter" border="0" />
        </center>
    </a>


</body>
</html>