<?ggf
/*
	Create the form in the HTML dialog box
*/
	form.addColorButton("textcolor","Text Color","#000000");
	form.addColorButton("bgcolor","Background Color","#ffffff");
	form.addCheckBox("fullscreen","Fullscreen",false);
	form.addCheckBox("maps","Include Google Maps",false);
	form.addCheckBox("gyro","Include gyroscope control",false);
	form.addCheckBox("parseanchor","Direct node access",false);
	form.addLine();
	form.addCheckBox("swfgeneric","Flash fallback player",false);
	form.addFileNameInput("swf","Flash fallback file","Flash Panorama","Flash (*.swf)");
	form.addCheckBox("swffirst","Prefer Flash if available",false);
	form.addLine();
	form.addCheckBox("showuserdata","Show User Data Table",true);
	form.addColorButton("tablebordercolor","Table Border Color","#777777");
	form.addColorButton("tabletextcolor","Table Text Color","#000000");
	form.addColorButton("tablebgcolor","Table Background Color","#dddddd");
	form.addLine();
	form.addCheckBox("jsxml","Embedded XML",false);
	form.addFileNameInput("touchicon","iOS Device Webpage Icon","Webpage Icon","Image (*.jpg *.png)");
	form.addCheckBox("manifest","Create HTML5 Cache Manifest",false);
	
	// define possible output formats
	form.addOutputFormat("HTML (.html)","html");
	form.addOutputFormat("HTML (.htm)","htm");
?>
<?ggs 
// Functions to write out HTML5 and Flash code
	function addHtml5Code() {
?>	
			// create the panorama player with the container
			pano=new pano2vrPlayer("container");
<?ggs if (formvalue["parseanchor"]=="true") {  ?>
			pano.startNode=startNode;
<?ggs }  ?>
<?ggs if (output.skinFile!="") { ?>
			// add the skin object
			skin=new pano2vrSkin(pano);
			// load the configuration
<?ggs } ?>
<?ggs
	if ((formvalue["jsxml"]=="true") && (formvalue["_gg_panorama"])) {
			panostr=formvalue["_gg_panorama"].toString();
			panostr=panostr.split("'").join("&#39;"); // workaround for .replace
			panostr=panostr.split("\n").join("';\n\t\t\tpanorama+='");
?>
			panorama='<?ggs document.write(panostr); ?>';
			pano.readConfigString(panorama);
<?ggs
	} else {
?>
			pano.readConfigUrl("<?ggs document.write(outputfile); ?>");
<?ggs
	}
?>
			// hide the URL bar on the iPhone
			hideUrlBar();
<?ggs if (formvalue["gyro"]=="true") { ?>
			// add gyroscope controller
			gyro=new pano2vrGyro(pano,"container");
<?ggs } ?>
<?ggs if (formvalue["maps"]=="true") { ?>
			window.addEventListener("load", function() { initMap(); });
<?ggs } ?>
<?ggs
	}
	function addFlashCode() {
?>
			var flashvars = {};
			var params = {};
<?ggs if (formvalue["maps"]=="true") { 
	if (formvalue['swf']!='') { 
?>
			function ggSwfReady() { initMap(); }
<?ggs } else { ?>
			function ggXmlReady() { initMap(); }
<?ggs } ?>
			// enable javascript interface
			flashvars.externalinterface="1";
<?ggs } ?>
			params.quality = "high";
			params.bgcolor = "<?ggs document.write(formvalue["bgcolor"]); ?>";
			params.allowscriptaccess = "sameDomain";
			params.allowfullscreen = "true";
			var attributes = {};
			attributes.id = "pano";
			attributes.name = "pano";
			attributes.align = "middle";
<?ggs if (formvalue["parseanchor"]=="true") {  ?>
			if (startNode.length>0) {
				flashvars.startnode=startNode;
			}
<?ggs }  ?>
<?ggs
		if (formvalue['swf']!='') {
			addFileFlashCode();
		} else {
			addGenericFlashCode();
		}
			
	}
	function addFileFlashCode() {
?>
			swfobject.embedSWF(
				"<?ggs 
					var swffn=document.expandVariables(formvalue['swf']);
					swffn=document.expandFilename(swffn);
					swffn=document.relativeOutputFilename(swffn);
					document.write(document.encodeUrl(swffn)); 
				?>", "container", 
<?ggs if (formvalue["fullscreen"]=="false") {  ?>
				"<?ggs document.write(output.windowWidth); ?>", "<?ggs document.write(output.windowHeight); ?>",
<?ggs } else {  ?>
				"100%", "100%",
<?ggs }  ?>
				"9.0.0", "", 
				flashvars, params, attributes);
<?ggs
	}
	function addGenericFlashCode() {
?>
<?ggs
	document.addfile("../html5/pano2vr_player.swf","pano2vr_player.swf");
	if (formvalue["_gg_skin"]) {
			skinstr=formvalue["_gg_skin"].toString();
			document.createfile('skin.xml',skinstr);
?>
			flashvars.skinxml="skin.xml";
<?ggs
	}
?>
			flashvars.panoxml="<?ggs document.write(outputfile); ?>";
			params.base="<?ggs document.write(outputbase); ?>";
			swfobject.embedSWF(
				"pano2vr_player.swf", "container", 
<?ggs if (formvalue["fullscreen"]=="false") {  ?>
				"<?ggs document.write(output.windowWidth); ?>", "<?ggs document.write(output.windowHeight); ?>",
<?ggs } else {  ?>
				"100%", "100%",
<?ggs }  ?>
				"9.0.0", "", 
				flashvars, params, attributes);
<?ggs
	}
?>
<!DOCTYPE html>
<?ggs 
var manifest;
if (formvalue["manifest"]=="true") {
	// create a HTML5 Offline Application Cache
	manifestfile=document.expandVariables("$n.manifest");
	d=new Date();
	manifest="CACHE MANIFEST\n";
	manifest+="# created with Pano2VR, " + d.toLocaleString() + "\n"; // make sure the file updates
	for(var key in formvalue["_gg_filelist"]) {
		manifest+=formvalue["_gg_filelist"][key] + "\n";
	}
	document.writeln('<html manifest="' + manifestfile + '">');	
} else {  ?>
<html>
<?ggs }  ?>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title><?ggs document.writeEncoded(document.expandVariables(config.userdata.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" />
<?ggs		
	if (formvalue["touchicon"]!="") {
		// absolut path to the file
		var touchicon=document.expandFilename(formvalue["touchicon"]);
		// extract just the name part
		id=touchicon.lastIndexOf('/');
		touchiconname=touchicon.substring(id+1);
		document.addfile(touchicon,touchiconname);
?>
		<link rel="apple-touch-icon" href="<?ggs document.write(touchiconname); ?>" />
<?ggs } ?>		
<?ggs
	addFlashFallback=(formvalue['swf']!='') || (formvalue["swfgeneric"]=="true");
	if (addFlashFallback) {
		document.addfile("../3rdparty/swfobject/swfobject.js","swfobject.js");
		manifest+="swfobject.js\n";
		document.writeln('\t\t<script type="text/javascript" src="swfobject.js">');
		document.writeln('\t\t</script>');
	}
	if (output.skinFile!="") {
			manifest+="skin.js\n";
	}
?>
		<script type="text/javascript">
			// hide URL field on the iPhone/iPod touch
			function hideUrlBar() {
<?ggs if (formvalue["fullscreen"]=="true") {  ?>
				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 260:cheight=320; break; // landscape, fullscreen
						 	case 336:cheight=396; break; // portrait, in call status bar
							case 356:cheight=416; break; // portrait 
							case 424:cheight=484; break; // portrait iPhone5, in call status bar
							case 444:cheight=504; break; // portrait iPhone5 
						 	default:
								cheight=window.innerHeight;
						}
						if ((cheight) && ((container.offsetHeight!=cheight) || (window.innerHeight!=cheight))) {
							container.style.height=cheight + "px";
							setTimeout(function() { hideUrlBar(); }, 1000);
						}
					}
				}
<?ggs }  ?>				
				document.getElementsByTagName("body")[0].style.marginTop="1px";
				window.scrollTo(0, 1);
			}
			window.addEventListener("load", hideUrlBar);
			window.addEventListener("resize", hideUrlBar);
			window.addEventListener("orientationchange", hideUrlBar);
		</script>
		<style type="text/css" title="Default">
			body, div, h1, h2, h3, span, p {
				font-family: Verdana,Arial,Helvetica,sans-serif;
				color: <?ggs document.write(formvalue["textcolor"]); ?>; 
			}
<?ggs if (formvalue["fullscreen"]=="true") {  ?>
			/* fullscreen */
			html {
				height:100%;
			}
			body {
				height:100%;
				margin: 0px;
				overflow:hidden; /* disable scrollbars */
			}
<?ggs }  ?>
			body {
			  font-size: 10pt;
			  background : <?ggs document.write(formvalue["bgcolor"]); ?>; 
			}
			table,tr,td {
				font-size: 10pt;
				border-color : <?ggs document.write(formvalue["tablebordercolor"]); ?>;
				background : <?ggs document.write(formvalue["tablebgcolor"]); ?>; 
				color: <?ggs document.write(formvalue["tabletextcolor"]); ?>; 
				border-style : solid;
				border-width : 2px;
				padding: 5px;
				border-collapse:collapse;
			}
			h1 {
				font-size: 18pt;
			}
			h2 {
				font-size: 14pt;
			}
			.warning { 
				font-weight: bold;
			} 
			/* fix for scroll bars on webkit & Mac OS X Lion */ 
			::-webkit-scrollbar {
				background-color: rgba(0,0,0,0.5);
				width: 0.75em;
			}
			::-webkit-scrollbar-thumb {
    			background-color:  rgba(255,255,255,0.5);
			}
		</style>	
	</head>
	<body>
<?ggs if (formvalue["fullscreen"]=="false") {  ?>
		<h1><?ggs document.writeEncoded(document.expandVariables(config.userdata.title)); ?></h1>
		<br>
<?ggs }  ?>
		<script type="text/javascript" src="pano2vr_player.js">
		</script>
<?ggs if (output.skinFile!="") { ?>
		<script type="text/javascript" src="skin.js">
		</script>
<?ggs } ?>
<?ggs if (formvalue["gyro"]=="true") { 
		document.addfile("../common/pano2vrgyro.js","pano2vrgyro.js");
		manifest+="pano2vrgyro.js\n";
?>
		<script type="text/javascript" src="pano2vrgyro.js">
		</script>
<?ggs } ?>

<?ggs if (formvalue["fullscreen"]=="false") {  ?>
		<div id="container" style="width:<?ggs document.write(output.windowWidth); ?>px;height:<?ggs document.write(output.windowHeight); ?>px;">
<?ggs } else {  ?>
		<div id="container" style="width:100%;height:100%;">
<?ggs }  ?>
		This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.
		</div>
		<script type="text/javascript">
<?ggs if (formvalue["parseanchor"]=="true") {  ?>
		var startNode=document.location.hash.substring(1);

		if (("onhashchange" in window) && (!(/MSIE (\d+\.\d+);/.test(navigator.userAgent)))) {
			window.onhashchange = function () {
				pano.openNext('{' + window.location.hash.substring(1) + '}');
         	}
	    } else {
        	var lastHash = window.location.hash;
        	window.setInterval(function () {
	           	if (window.location.hash != lastHash) {
   	        		lastHash = window.location.hash;
					pano.openNext('{' + window.location.hash.substring(1) + '}');
        	   	}
        	}, 100);
		}
<?ggs } ?>	
<?ggs if (addFlashFallback) { 
	if (formvalue["swffirst"]=="true") {  
?>
		if (swfobject.hasFlashPlayerVersion("9.0.0")) {
<?ggs addFlashCode(); ?>			
		} else 
		// check for CSS3 3D transformations and WebGL
		if (ggHasHtml5Css3D() || ggHasWebGL()) {
<?ggs addHtml5Code(); ?>
<?ggs } else { // swf first ?>
		// check for CSS3 3D transformations and WebGL
		if (ggHasHtml5Css3D() || ggHasWebGL()) {
		// use HTML5 panorama
<?ggs addHtml5Code(); ?>
		} else 
		if (swfobject.hasFlashPlayerVersion("9.0.0")) {
<?ggs addFlashCode(); ?>
			
<?ggs } // swf first  ?>
		}
<?ggs } else {
		addHtml5Code();
	  }
?>
		</script>
		<noscript>
			<p><b>Please enable Javascript!</b></p>
		</noscript>
<?ggs
	if ((formvalue["showuserdata"]=="true") && (formvalue["fullscreen"]=="false")) { 
?>		
		<p>
		<table>
			<tr>
				<td><b>Description</b></td>
				<td><?ggs document.writeEncoded(document.expandVariables(config.userdata.description)); ?></td>
			</tr>
			<tr>
				<td><b>Author</b></td>
				<td><?ggs document.writeEncoded(document.expandVariables(config.userdata.author)); ?></td>
			</tr>
			<tr>
				<td><b>Date/Time</b></td>
				<td><?ggs document.writeEncoded(document.expandVariables(config.userdata.dateTime)); ?></td>
			</tr>
			<tr>
				<td><b>Copyright</b></td>
				<td><?ggs document.writeEncoded(document.expandVariables(config.userdata.copyright)); ?></td>
			</tr>
		</table>
<?ggs
}
if (formvalue["manifest"]=="true") {
	document.createfile(manifestfile,manifest);	
}	
?>

<?ggs if (formvalue["maps"]=="true") { ?>

<hr>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<div id="mapdiv" style="width:700px; height:500px">map goes here!</div>
		
<script type="text/javascript">
	var lastFov = -1;
	var lastPan = -1;
	var lastZoom = -1;
	var radar=null;
	var activeNodeLatLng;
	var map;
	
	function updateRadar() 
	{
		if ((!activeNodeLatLng) || (!pano) || (!map)) return;
		var d2r = Math.PI/180 ;
		var r2d = 180/Math.PI ;
		
		var fov = pano.getFov();
		var pan = pano.getPanNorth();
		var zoom = map.getZoom();
		var gps=pano.getNodeLatLng("");
		if (zoom<6) zoom = 6; // avoid large radar beams on world map
		
		if ((fov==lastFov) && (pan==lastPan) && (zoom==lastZoom) && ((gps.length<2) || ((gps[0]==activeNodeLatLng.lat()) && (gps[1]==activeNodeLatLng.lng())))) return; // nothing to do
		lastPan=pan;
		lastFov=fov;
		lastZoom=zoom;
		if (gps.length>=2) {
			activeNodeLatLng = new google.maps.LatLng(gps[0], gps[1]);
		}
		var rLat = 4.0*r2d / Math.pow(2,zoom);     // beam size
		var rLng = rLat/Math.cos(activeNodeLatLng.lat() * d2r);
		
		// generate radar fan for fov
		var radar_poly = new Array();
		
		radar_poly.push(activeNodeLatLng);
		var segments=5;
		for (i=-segments; i<=segments; i++) {
			var angle = (fov / (2*segments)) * i;
			var x = -rLng * Math.sin((pan+angle)*d2r) + activeNodeLatLng.lng();
			var y =  rLat * Math.cos((pan+angle)*d2r) + activeNodeLatLng.lat();
			radar_poly.push(new google.maps.LatLng(y, x));
		}
		// clear old radar
		if (radar) {
			radar.setMap(null);
			radar = null;
		}
		// show radar
		radar = new google.maps.Polygon({
			paths: radar_poly,
			strokeColor: "#000000",
			strokeOpacity: 0.8,
			strokeWeight: 1,
			fillColor: "#000000",
			fillOpacity: 0.35
		});
		
		radar.setMap(map);
	}
  
  	function initMap() {
  	
		var gps=pano.getNodeLatLng("");
		activeNodeLatLng = new google.maps.LatLng(gps[0], gps[1]);
	
		var mapOptions = {
			zoom: 14,
			center: activeNodeLatLng,
			mapTypeId: google.maps.MapTypeId.HYBRID
		};
		map = new google.maps.Map(document.getElementById('mapdiv'), mapOptions);
		var ids=pano.getNodeIds();
		var marker;
		var markerLocation;
		var bounds=new google.maps.LatLngBounds();
		for(var i=0;i<ids.length;i++) {
			var id=ids[i];
			console.log(i + " = "+ id);
			var gps=pano.getNodeLatLng(id);
			if (gps.length>=2) {
				markerLocation = new google.maps.LatLng(gps[0], gps[1]);
				marker = new google.maps.Marker({position: markerLocation,map: map});
				marker.setTitle(pano.getNodeTitle(id));
				console.log("title " + pano.getNodeTitle(id));
				marker.setAnimation(google.maps.Animation.DROP);
				marker.setClickable(true);
				marker.ggId=id;
				bounds.extend(markerLocation);
				google.maps.event.addListener(marker, 'click', function() {
					pano.openNext("{" + this.ggId + "}");
					activeNodeLatLng=this.position;
<?ggs if (formvalue["parseanchor"]=="true") {  ?>
					window.location.hash="#" + this.ggId;
<?ggs } ?>
				});
			}
		}
		if (!bounds.isEmpty()) {
			map.fitBounds(bounds);
		}
		setInterval(function() { updateRadar(); }, 50);
  	}
 </script>
<?ggs } ?>

	</body>
</html>
