<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<script type="text/javascript" src="swfobject.js">
		</script>
		<script type="text/javascript">
			// hide URL field on the iPhone/iPod touch
			function hideUrlBar() {
				if (((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))) {
					container = document.getElementById("container");
					if (container) {
						var cheight;
						switch(window.innerHeight) {
							case 208:cheight=268; break; // landscape
							case 336:cheight=396; break; // portrait, in call status bar
							case 356:cheight=416; break; // portrait 
							default:
								cheight=window.innerHeight;
						}
						if ((container.offsetHeight!=cheight) || (window.innerHeight!=cheight)) {
							container.style.height=cheight + "px";
							setTimeout(function() { hideUrlBar(); }, 1000);
						}
					}
				}
				
				if (window.pageYOffset==0) {
					window.scrollTo(0, 1);
				
				}
			}
		</script>
		<style type="text/css" title="Default">
			body, div, h1, h2, h3, span, p {
				font-family: Verdana,Arial,Helvetica,sans-serif;
				color: #000000; 
			}
			/* fullscreen */
			html {
				height:100%;
			}
			body {
				height:100%;
				margin: 0px;
				overflow:hidden; /* disable scrollbars */
			}
			body {
			  font-size: 10pt;
			  background : #ffffff; 
			}
			table,tr,td {
				font-size: 10pt;
				border-color : #777777;
				background : #dddddd; 
				color: #000000; 
				border-style : solid;
				border-width : 2px;
				padding: 5px;
				border-collapse:collapse;
			}
			h1 {
				font-size: 18pt;
			}
			h2 {
				font-size: 14pt;
			}
			.warning { 
				font-weight: bold;
			} 
		</style>	
	</head>
	<body onorientationchange="hideUrlBar();">
		<script type="text/javascript" src="pano2vr_player.js">
		</script>
		<script type="text/javascript" src="skin.js">
		</script>
		<script type="text/javascript" src="pano2vrgyro.js">
		</script>
		<div id="container" style="width:100%;height:100%;">
		This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.
		</div>
		<script type="text/javascript">
		function initPanorama() {
			// First try HTML5/WebGL mode (no Flash support in modern browsers)
			if (typeof ggHasHtml5Css3D === 'function' && typeof ggHasWebGL === 'function' && 
			    (ggHasHtml5Css3D() || ggHasWebGL())) {
				
				try {
					// create the panorama player with the container
					window.pano = new pano2vrPlayer("container");
					// add the skin object
					window.skin = new pano2vrSkin(window.pano);
					// load the configuration
					window.pano.readConfigUrl("mk_15.xml");
					// hide the URL bar on the iPhone
					hideUrlBar();
					// add gyroscope controller
					window.gyro = new pano2vrGyro(window.pano, "container");
					
					console.log("Pano2VR initialized successfully");
				} catch(e) {
					console.error("Error initializing Pano2VR:", e);
					document.getElementById("container").innerHTML = 
						"<p style='text-align:center; padding:20px;'>Error loading panorama viewer: " + e.message + "</p>";
				}
				
			} else if (swfobject && swfobject.hasFlashPlayerVersion && swfobject.hasFlashPlayerVersion("9.0.0")) {
				// Fallback to Flash (likely won't work in modern browsers)
				var flashvars = {};
				var params = {};
				params.quality = "high";
				params.bgcolor = "#ffffff";
				params.allowscriptaccess = "sameDomain";
				params.allowfullscreen = "true";
				var attributes = {};
				attributes.id = "pano";
				attributes.name = "pano";
				attributes.align = "middle";
				swfobject.embedSWF(
					"mk_15.swf", "container", 
					"100%", "100%",
					"9.0.0", "expressInstall.swf", 
					flashvars, params, attributes);
			} else {
				// Show error message with debugging info
				var debugInfo = "Browser support check:<br>";
				debugInfo += "- WebGL available: " + (typeof ggHasWebGL === 'function' ? ggHasWebGL() : 'function not found') + "<br>";
				debugInfo += "- CSS3D available: " + (typeof ggHasHtml5Css3D === 'function' ? ggHasHtml5Css3D() : 'function not found') + "<br>";
				debugInfo += "- User Agent: " + navigator.userAgent + "<br>";
				
				document.getElementById("container").innerHTML = 
					"<div style='padding:20px; text-align:center;'>" +
					"<p><strong>Unable to load panorama viewer</strong></p>" +
					"<p>Your browser needs to support WebGL or CSS3 3D transforms.</p>" +
					"<details><summary>Debug Information</summary>" + debugInfo + "</details>" +
					"</div>";
			}
		}
		
		// Initialize when page is loaded
		if (document.readyState === 'loading') {
			document.addEventListener('DOMContentLoaded', initPanorama);
		} else {
			initPanorama();
		}
		</script>
		<noscript>
			<p><b>Please enable Javascript!</b></p>
		</noscript>
	</body>
</html>
