const menuItems = [
    { name: "ar1.html", photo: "path/to/photo1.jpg", price: "$10" },
    { name: "ar2.html", photo: "path/to/photo2.jpg", price: "$15" },
    { name: "ar3.html", photo: "path/to/photo3.jpg", price: "$20" }
];

const menu = document.getElementById('menu');

menuItems.forEach(item => {
    const itemDiv = document.createElement('div');
    itemDiv.className = 'menu-item';
    itemDiv.innerHTML = `
        <img src="${item.photo}" alt="${item.name}">
        <p>${item.name}</p>
        <p>${item.price}</p>
    `;
    itemDiv.addEventListener('click', () => {
        spawnIframe(item.name);
    });
    menu.appendChild(itemDiv);
});

function spawnIframe(itemName) {
    const iframeContainer = document.getElementById('iframe-container');
    const iframe = document.getElementById('ar-frame');
    iframe.src = 'assets/arTab/'+itemName; // Path to the AR app
    iframeContainer.style.display = 'block';
}

function closeSelf(){
    const iframeContainer = document.getElementById('iframe-container');
    const iframe = document.getElementById('ar-frame');
    iframeContainer.style.display = 'none';
}