{"id":106,"date":"2026-08-31T16:28:31","date_gmt":"2026-08-31T14:28:31","guid":{"rendered":"http:\/\/openworld.freemyip.com\/portal\/?page_id=106"},"modified":"2026-09-14T04:52:30","modified_gmt":"2026-09-14T02:52:30","slug":"guide","status":"publish","type":"page","link":"https:\/\/openworld.freemyip.com\/portal\/guide\/","title":{"rendered":"\u00datic\u00e9lkalauz"},"content":{"rendered":"    <div id=\"DestinationGuide\">\n        <div id=\"AboutIcon\">\n            <a href=\"#\" onclick=\"toggleDescription(); return false;\">?<\/a>\n        <\/div>\n        \n        <div id=\"Description\">\n            Welcome to the Destination Guide. Browse through our categories and click on any destination to teleport directly there!\n        <\/div>\n        \n        <!-- Breadcrumb Navigation -->\n        <div id=\"BreadcrumbNav\">\n            <a href=\"#\" onclick=\"showCategories(); return false;\" id=\"home-link\">Categories<\/a>\n            <span class=\"separator\" id=\"breadcrumb-sep\" style=\"display: none;\">><\/span>\n            <span id=\"current-category\" style=\"display: none;\"><\/span>\n        <\/div>\n        \n        <!-- Main Content Area -->\n        <div id=\"MainContent\">\n            <!-- Category View (Main Menu) -->\n            <div id=\"CategoryView\">\n                <!-- Categories will be populated here -->\n            <\/div>\n            \n            <!-- Destination View (Category Contents) -->\n            <div id=\"DestinationView\" class=\"hidden\">\n                <!-- Destinations will be populated here -->\n            <\/div>\n        <\/div>\n        \n        <!-- Detail View (Destination Details) -->\n        <div id=\"DetailView\">\n    <button class=\"close-detail\" onclick=\"closeDetail()\">&times;<\/button>\n    <div class=\"detail-content\">\n        <img decoding=\"async\" id=\"detail-image\" class=\"detail-image\" src=\"\" alt=\"\">\n        <div class=\"detail-info\">\n            <div id=\"detail-title\" class=\"detail-title\"><\/div>\n            <div id=\"detail-description\" class=\"detail-description\"><\/div>\n            <a id=\"detail-teleport\" class=\"detail-teleport\" href=\"#\">TELEPORT<\/a>\n        <\/div>\n    <\/div>\n<\/div>\n    \n    <script>\n    \/\/ Destination data from WordPress\n    const destinationData = {\"Educational\":[{\"id\":\"1\",\"category\":\"Educational\",\"name\":\"OpenWorld WelcomeHub\",\"image\":\"https:\\\/\\\/openworld.freemyip.com\\\/portal\\\/wp-content\\\/uploads\\\/event-manager-uploads\\\/venue_logo\\\/2026\\\/09\\\/Snapshot_2026-08-13_230156_001-1.png\",\"slurl\":\"hop:\\\/\\\/openworld.freemyip.com:8002\\\/OpenWorldWelcomeHub\\\/128\\\/115\\\/22\",\"description\":\"\",\"created_at\":\"2026-09-14 04:41:09\"}]};\n    \n    let currentView = 'categories';\n    let currentCategory = '';\n\n    function toggleDescription() {\n        const desc = document.getElementById('Description');\n        desc.style.display = desc.style.display === 'none' ? 'block' : 'none';\n    }\n\n    function initializeGuide() {\n        showCategories();\n    }\n\n    function showCategories() {\n        currentView = 'categories';\n        currentCategory = '';\n        \n        \/\/ Update breadcrumb\n        document.getElementById('breadcrumb-sep').style.display = 'none';\n        document.getElementById('current-category').style.display = 'none';\n        \n        \/\/ Hide other views\n        document.getElementById('DestinationView').classList.add('hidden');\n        document.getElementById('DetailView').classList.remove('active');\n        document.getElementById('CategoryView').classList.remove('hidden');\n        \n        \/\/ Populate categories\n        const categoryView = document.getElementById('CategoryView');\n        categoryView.innerHTML = '';\n        \n        for (const [categoryName, destinations] of Object.entries(destinationData)) {\n            const categoryTile = document.createElement('div');\n            categoryTile.className = 'category-tile';\n            categoryTile.onclick = () => showCategory(categoryName);\n            \n            \/\/ Use first destination image as category representative\n            const representativeImage = destinations[0]?.image || '';\n            \n            categoryTile.innerHTML = `\n                ${representativeImage ? \n                    `<img decoding=\"async\" src=\"${representativeImage}\" alt=\"${escapeHtml(categoryName)}\">` : \n                    `<div class=\"no-image-placeholder\">No Image<\/div>`\n                }\n                <div class=\"category-name\">\n                    ${escapeHtml(categoryName)}\n                    <div class=\"category-count\">(${destinations.length} ${destinations.length === 1 ? 'item' : 'items'})<\/div>\n                <\/div>\n            `;\n            \n            categoryView.appendChild(categoryTile);\n        }\n    }\n\n    function showCategory(categoryName) {\n        currentView = 'destinations';\n        currentCategory = categoryName;\n        \n        \/\/ Update breadcrumb\n        document.getElementById('breadcrumb-sep').style.display = 'inline';\n        document.getElementById('current-category').style.display = 'inline';\n        document.getElementById('current-category').textContent = categoryName;\n        \n        \/\/ Hide other views\n        document.getElementById('CategoryView').classList.add('hidden');\n        document.getElementById('DetailView').classList.remove('active');\n        document.getElementById('DestinationView').classList.remove('hidden');\n        \n        \/\/ Populate destinations\n        const destinationView = document.getElementById('DestinationView');\n        destinationView.innerHTML = '';\n        \n        const destinations = destinationData[categoryName] || [];\n        \n        if (destinations.length === 0) {\n            destinationView.innerHTML = '<div class=\"destination-guide-empty\">No destinations in this category yet.<\/div>';\n            return;\n        }\n        \n        destinations.forEach(destination => {\n            const destTile = document.createElement('div');\n            destTile.className = 'destination-tile';\n            destTile.onclick = (e) => {\n                \/\/ Prevent detail view when clicking teleport button\n                if (!e.target.classList.contains('TPButton')) {\n                    showDestinationDetail(destination);\n                }\n            };\n            \n            destTile.innerHTML = `\n                ${destination.image ? \n                    `<img decoding=\"async\" src=\"${destination.image}\" alt=\"${escapeHtml(destination.name)}\">` : \n                    `<div class=\"no-image-placeholder\">No Image<\/div>`\n                }\n                <div class=\"TPButton\" onclick=\"teleport('${destination.slurl}'); event.stopPropagation();\">VISIT<\/div>\n                <div class=\"destination-name\">${escapeHtml(destination.name)}<\/div>\n            `;\n            \n            destinationView.appendChild(destTile);\n        });\n    }\n\n    function showDestinationDetail(destination) {\n        \/\/ Update detail view content\n        document.getElementById('detail-image').src = destination.image || '';\n        document.getElementById('detail-image').style.display = destination.image ? 'block' : 'none';\n        document.getElementById('detail-title').textContent = destination.name;\n        document.getElementById('detail-description').textContent = destination.description;\n        document.getElementById('detail-teleport').href = destination.slurl;\n        document.getElementById('detail-teleport').onclick = (e) => {\n            e.preventDefault();\n            teleport(destination.slurl);\n        };\n        \n        \/\/ Show detail view\n        document.getElementById('DetailView').classList.add('active');\n    }\n\n    function closeDetail() {\n        document.getElementById('DetailView').classList.remove('active');\n    }\n\n    function teleport(slurl) {\n        \/\/ Open the SLURL - this will trigger Second Life or compatible viewer\n        window.open(slurl, '_self');\n    }\n\n    function escapeHtml(text) {\n        const div = document.createElement('div');\n        div.textContent = text;\n        return div.innerHTML;\n    }\n\n    \/\/ Initialize when page loads\n    document.addEventListener('DOMContentLoaded', function() {\n        initializeGuide();\n    });\n\n    \/\/ Handle escape key to close detail view\n    document.addEventListener('keydown', function(e) {\n        if (e.key === 'Escape' && document.getElementById('DetailView').classList.contains('active')) {\n            closeDetail();\n        }\n    });\n    <\/script>\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_forum_subforum_count":0,"_sitemap_exclude":false,"_sitemap_priority":"","_sitemap_frequency":"","footnotes":""},"class_list":["post-106","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/openworld.freemyip.com\/portal\/wp-json\/wp\/v2\/pages\/106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openworld.freemyip.com\/portal\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/openworld.freemyip.com\/portal\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/openworld.freemyip.com\/portal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/openworld.freemyip.com\/portal\/wp-json\/wp\/v2\/comments?post=106"}],"version-history":[{"count":4,"href":"https:\/\/openworld.freemyip.com\/portal\/wp-json\/wp\/v2\/pages\/106\/revisions"}],"predecessor-version":[{"id":343,"href":"https:\/\/openworld.freemyip.com\/portal\/wp-json\/wp\/v2\/pages\/106\/revisions\/343"}],"wp:attachment":[{"href":"https:\/\/openworld.freemyip.com\/portal\/wp-json\/wp\/v2\/media?parent=106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}