let currentMenu = null;
let currentPage = 1;

window.addEventListener('message', function(event) {
    if (event.data.action === "open") {
        currentMenu = event.data.menu;
        currentPage = event.data.page;
        updateMenuDisplay();
        document.getElementById('menu-container').style.display = 'flex';
    } else if (event.data.action === "close") {
        document.getElementById('menu-container').style.display = 'none';
        currentMenu = null;
        currentPage = 1;
    }
});

function updateMenuDisplay() {
    if (!currentMenu || !currentMenu.images) return;
    
    const menuImage = document.getElementById('menu-image');
    menuImage.src = currentMenu.images[currentPage - 1];
    
    // Buttons ein-/ausblenden basierend auf der aktuellen Seite
    document.getElementById('prev-page').style.display = currentPage > 1 ? 'block' : 'none';
    document.getElementById('next-page').style.display = currentPage < currentMenu.images.length ? 'block' : 'none';
    
    document.getElementById('page-number').textContent = 
        `Seite ${currentPage} von ${currentMenu.images.length}`;
}

document.getElementById('prev-page').addEventListener('click', function() {
    if (currentMenu && currentPage > 1) {
        currentPage--;
        updateMenuDisplay();
        $.post('https://speisekarte/changePage', JSON.stringify({page: currentPage}));
    }
});

document.getElementById('next-page').addEventListener('click', function() {
    if (currentMenu && currentPage < currentMenu.images.length) {
        currentPage++;
        updateMenuDisplay();
        $.post('https://speisekarte/changePage', JSON.stringify({page: currentPage}));
    }
});

document.getElementById('close-button').addEventListener('click', function() {
    document.getElementById('menu-container').style.display = 'none';
    currentMenu = null;
    currentPage = 1;
    $.post('https://speisekarte/close', JSON.stringify({}));
});

// ESC-Taste Handler
document.addEventListener('keyup', function(event) {
    if (event.key === "Escape") {
        if (currentMenu) {
            document.getElementById('menu-container').style.display = 'none';
            currentMenu = null;
            currentPage = 1;
            $.post('https://speisekarte/close', JSON.stringify({}));
        }
    }
});

// Fehlerbehandlung für Bilder
document.getElementById('menu-image').addEventListener('error', function() {
    console.error('Fehler beim Laden des Bildes:', this.src);
    this.src = 'img/error.jpg'; // Optional: Zeige ein Fehlerbild
});