<krpano>

	<!--
		This is an example that shows:

		- How to load custom tiles by using the 'customParseTilePath' API:
		  - https://krpano.com/docu/plugininterface/#customParseTilePath

		- How to extend krpano with Latitude/Longitude (lat/lng) coordinate support
		  - (for the view, hotspots, polygons)
		  
		- How to embed another krpano inside krpano.
	-->

	<include url="%VIEWER%/plugins/iphone_fullscreen_swipe.xml" />
	<include url="%VIEWER%/plugins/combobox.xml" />

	<view limitview="fullrange" maxpixelzoom="2" />
	<control zoomtocursor="true" zoomoutcursor="true" />
	
	<!-- enable keyboard zooming with the SHIFT/CTRL, +/- and A/Z/Y keys -->
	<control keycodesin="16,65,107" keycodesout="17,89,90,109" />

	<!-- ignore tile loading errors, e.g. for non-existing map parts -->
	<network retrycount="0" />
	<events name="ignoreloadingerrors" keep="true" onloaderror=" " />


	<scene name="openstreetmaps"  autoload="true" onstart="set(view.fovmax,1);">
		<view limitview="range" maxpixelzoom="2" />
		<image maptype="osm" hfov="0.001">
			<flat url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" multires="256,512x512,1024x1024,2048x2048,4096x4096,8192x8192,16384x16384,32768x32768,65536x65536,131072x131072,262144x262144,524288x524288,1048576x1048576,2097152x2097152,4194304x4194304,8388608x8388608,16777216x16777216,33554432x33554432,67108864x67108864,134217728x134217728" />
		</image>
		<layer name="attribution" type="text" html="&amp;copy; [a href='http://www.openstreetmap.org/copyright' target='_blank']OpenStreetMap[/a]" align="rightbottom" />
	</scene>

	<scene name="basemap_at" onstart="set(view.fovmax,0.000017);">
		<krpano bgcolor="0xFFFFFF "/>
		<view fovtype="VFOV" fov="0.000017" fovmax="0.000017" limitview="range" hlookatmin="0.0000258" hlookatmax="0.0000478" vlookatmin="-0.000157039" vlookatmax="-0.00014523" maxpixelzoom="2" />
		<image maptype="basemap_at" hfov="0.001">
			<flat url="https://maps{s}.wien.gv.at/basemap/bmaporthofoto30cm/normal/google3857/{z}/{y}/{x}.jpeg" multires="256,4096x4096,8192x8192,16384x16384,32768x32768,65536x65536,131072x131072,262144x262144,524288x524288,1048576x1048576,2097152x2097152,4194304x4194304,8388608x8388608,16777216x16777216,33554432x33554432,67108864x67108864,134217728x134217728" />
		</image>
		<layer name="attribution" type="text" html="Datenquelle: [a href='https://www.basemap.at' target='_blank']basemap.at[/a]" align="rightbottom" />
	</scene>

	<scene name="arcgis_worldmap" onstart="set(view.fovmax,1);">
		<krpano bgcolor="0xFFFFFF "/>
		<view limitview="range" maxpixelzoom="2" />
		<image maptype="osm" hfov="0.001">
			<flat url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.jpg" multires="256,512x512,1024x1024,2048x2048,4096x4096,8192x8192,16384x16384,32768x32768,65536x65536,131072x131072,262144x262144,524288x524288,1048576x1048576,2097152x2097152,4194304x4194304,8388608x8388608,16777216x16777216,33554432x33554432,67108864x67108864,134217728x134217728" />
		</image>
		<layer name="attribution" type="text" html="&amp;copy; [a href='http://goto.arcgisonline.com/maps/World_Street_Map' target='_blank']ArcGIS World Imagery[/a]" align="rightbottom" />
	</scene>

	<scene name="arcgis_streetmap" onstart="set(view.fovmax,1);">
		<krpano bgcolor="0xFFFFFF "/>
		<view limitview="range" maxpixelzoom="2" />
		<image maptype="osm" hfov="0.001">
			<flat url="https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}" multires="256,512x512,1024x1024,2048x2048,4096x4096,8192x8192,16384x16384,32768x32768,65536x65536,131072x131072,262144x262144,524288x524288,1048576x1048576,2097152x2097152,4194304x4194304,8388608x8388608,16777216x16777216,33554432x33554432,67108864x67108864,134217728x134217728" />
		</image>
		<layer name="attribution" type="text" html="&amp;copy; [a href='http://goto.arcgisonline.com/maps/World_Street_Map' target='_blank']ArcGIS Street Map[/a]" align="rightbottom" />
	</scene>

	<scene name="earth_at_night" onstart="set(view.fovmax,1);">
		<krpano bgcolor="0xFFFFFF "/>
		<view limitview="range" maxpixelzoom="2" />
		<image maptype="osm" hfov="0.001">
			<flat url="https://map1.vis.earthdata.nasa.gov/wmts-webmerc/VIIRS_CityLights_2012/default/GoogleMapsCompatible_Level8/{z}/{y}/{x}.jpg" multires="256,512x512,1024x1024,2048x2048,4096x4096,8192x8192,16384x16384,32768x32768,65536x65536" />
		</image>
		<layer name="attribution" type="text" html="&amp;copy; [a href='https://earthdata.nasa.gov/' target='_blank']NASA Earth at Night[/a]" align="rightbottom" />
	</scene>


	<!-- select the different tile providers -->
	<combobox name="mapsselection" align="righttop" x="10" y="10">
		<item name="item1" caption="OpenStreetMaps"       onclick="loadscene(openstreetmaps,null,MERGE|KEEPVIEW,BLEND(0.5));" />
		<item name="item2" caption="ArcGIS World Imagery" onclick="loadscene(arcgis_worldmap,null,MERGE|KEEPVIEW,BLEND(0.5));" />
		<item name="item3" caption="ArcGIS Street Map"    onclick="loadscene(arcgis_streetmap,null,MERGE|KEEPVIEW,BLEND(0.5));" />
		<item name="item4" caption="Earth at Night"       onclick="loadscene(earth_at_night,null,MERGE|KEEPVIEW,BLEND(0.5));" />
		<item name="item5" caption="basemap.at"           onclick="loadscene(basemap_at,null,MERGE|KEEPVIEW,BLEND(0.5));" />
	</combobox>



	<!--
		Extend krpano with support for:
		- loading map tiles
		- lat/lng/zoom attributes for view and hotspots
		- map panning actions
		- hotspots dragging
	-->
	<action type="Javascript" autorun="preinit"><![CDATA[

		// parse tile urls
		krpano.customParseTilePath = function(path, cubeside, level, h, v, stereo, image)
		{
			if (image.maptype == "wiki")
			{
				// WikiMaps tile placeholders
				path = path.split("${x}").join(1*h-1);
				path = path.split("${y}").join(1*v-1);
				path = path.split("${z}").join(1*level);
			}
			else if (image.maptype == "osm")
			{
				// OpenStreetMap tile placeholders
				path = path.split("{s}").join( "abc"[(Math.random()*3)|0] );
				path = path.split("{x}").join(1*h-1);
				path = path.split("{y}").join(1*v-1);
				path = path.split("{z}").join(1*level);
			}
			else if (image.maptype == "basemap_at")
			{
				// Basemap.at tile placeholders
				path = path.split("{s}").join( ["","1","2","3","4"][(Math.random()*5)|0] );
				path = path.split("{x}").join(1*h-1);
				path = path.split("{y}").join(1*v-1);
				path = path.split("{z}").join(1*level+3);
			}

			return path;
		}


		// lat/lng/zoom conversion functions
		function lat_to_atv(lat){ return ((1.0 - Math.asinh(Math.tan(lat * Math.PI/180)) / Math.PI) / 2.0 - 0.5) * krpano.image.hfov; }
		function atv_to_lat(atv){ return Math.atan(Math.sinh(Math.PI * (1.0 - ((atv / krpano.image.hfov) + 0.5) * 2.0))) * 180.0/Math.PI; }
		function lng_to_ath(lng){ return lng / 360.0 * krpano.image.hfov; }
		function ath_to_lng(ath){ return ath / krpano.image.hfov * 360.0; }
		function hfov_to_zoom(hfov){ return 1.0 + Math.log(krpano.image.hfov / hfov) / Math.log(2.0); }
		function zoom_to_hfov(zoom){ return krpano.image.hfov / Math.exp((zoom - 1.0) * Math.log(2.0)); }


		// generate xml/js apis
		krpano.inlinefunctions.lat_to_atv = lat_to_atv;
		krpano.inlinefunctions.atv_to_lat = atv_to_lat;
		krpano.inlinefunctions.lng_to_ath = lng_to_ath;
		krpano.inlinefunctions.ath_to_lng = ath_to_lng;
		krpano.inlinefunctions.hfov_to_zoom = hfov_to_zoom;
		krpano.inlinefunctions.zoom_to_hfov = zoom_to_hfov;

		function make_action_function(fu){ return function(input,outvar){ var result = fu( resolve(input) );  if (outvar) krpano.set(outvar,result); return result; }; }
		krpano.actions.lat_to_atv = make_action_function(lat_to_atv);
		krpano.actions.atv_to_lat = make_action_function(atv_to_lat);
		krpano.actions.lng_to_ath = make_action_function(lng_to_ath);
		krpano.actions.ath_to_lng = make_action_function(ath_to_lng);
		krpano.actions.hfov_to_zoom = make_action_function(hfov_to_zoom);
		krpano.actions.zoom_to_hfov = make_action_function(zoom_to_hfov);

		var view_lng = krpano.view.lng;
		var view_lat = krpano.view.lat;
		var view_zoom = krpano.view.zoom;
		krpano.view.__defineGetter__("lng", function(){ return ath_to_lng(krpano.view.hlookat); });
		krpano.view.__defineSetter__("lng", function(lng){ krpano.view.hlookat = lng_to_ath(lng); });
		krpano.view.__defineGetter__("lat", function(){ return atv_to_lat(krpano.view.vlookat); });
		krpano.view.__defineSetter__("lat", function(lat){ krpano.view.vlookat = lat_to_atv(lat); });
		krpano.view.__defineGetter__("zoom", function(){ return hfov_to_zoom(krpano.view.fov); });
		krpano.view.__defineSetter__("zoom", function(z){ krpano.view.fov = zoom_to_hfov(z); });
		if (view_lng !== undefined) krpano.view.lng = view_lng;
		if (view_lat !== undefined) krpano.view.lat = view_lat;
		if (view_zoom !== undefined) krpano.view.zoom = view_zoom;

		krpano.actions.panto = function(lat, lng, zoom, time, tweentype, loaddone)
		{
			var view = krpano.view;

			// defaults for optional parameters:
			if (zoom == null) zoom = view.zoom;
			if (time == null) time = 1.0;
			if (tweentype == null) tweentype = "easeoutquint|easeoutquint|easeoutcubic";

			var fov = zoom_to_hfov(zoom);

			// adjust the time for very near or very far targets
			time *= Math.pow(Math.sqrt(Math.pow(view.lat - lat,2) + Math.pow(view.lng - lng,2) + Math.pow(view.fov - fov,2)),0.2);

			krpano.actions.tween("view.lat|view.lng|view.fov", [lat,lng,fov].join("|"), time, tweentype, loaddone);

			// stop the tween on clicking/touching
			krpano.events.onmousedown = function()
			{
				krpano.actions.stoptween("view.lat|view.lng|view.fov");
				krpano.events.onmousedown = null;
			}
		}

		krpano.actions.mappoly_convert_lat_lng_attributes = function()
		{
			var hs = krpano.actions.actioncaller;
			var points = hs.point.getArray();
			var i, cnt = points.length;

			for (i=0; i < cnt; i++)
			{
				var pt = points[i];
				pt.ath = lng_to_ath(pt.lng);
				pt.atv = lat_to_atv(pt.lat);
			}
		}

		krpano.actions.mapspot_create_lat_lng_attributes = function()
		{
			var hs = krpano.actions.actioncaller;

			hs.registerattribute("lat", hs.lat, function(lat){ hs.atv = lat_to_atv(lat); }, function(){ return atv_to_lat(hs.atv); });
			hs.registerattribute("lng", hs.lng, function(lng){ hs.ath = lng_to_ath(lng); }, function(){ return ath_to_lng(hs.ath); });

			hs.addevent("ondown", function()
			{
				if (hs.dragable)
				{
					var hs_screen = krpano.spheretoscreen(hs.ath, hs.atv);

					var offsetx = krpano.mouse.stagex - hs_screen.x;
					var offsety = krpano.mouse.stagey - hs_screen.y;

					krpano.actions.asyncloop(
						function(){ return hs.pressed; },	// loop as long the mouse is pressed
						function()
						{
							var pt = krpano.screentosphere(krpano.mouse.stagex - offsetx, krpano.mouse.stagey - offsety);
							hs.ath = pt.x;
							hs.atv = pt.y;

							// show the new coordinates when dragging
							krpano.trace(1,'lat="' + hs.lat.toFixed(6) + '" lng="' + hs.lng.toFixed(6) + '"');
						}
					);
				}
			});
		}
	]]></action>


	<!-- a hotspot style for adding lat/lng attributes -->
	<style name="mapspot"
		zorder="2"
		url="vtourskin_mapspot.png"
		scale="0.5"
		x="-4" y="-7" edge="bottom"
		dragable.bool="false"
		onloaded.addevent="mapspot_create_lat_lng_attributes();"
		/>

	<!-- a style for polygonal hotspots for adding lat/lng attributes to the points -->
	<style name="mappoly"
		onloaded.addevent="mappoly_convert_lat_lng_attributes();"
		/>


	<!-- info text box with the current coordinates -->
	<layer name="lookat" keep="true"
		type="text" padding="4 8" bgcolor="0xFFFFFF" bgborder="0 0xFFFFFF 1" bgroundedge="1" bgshadow="0 1 4 0x000000 1.0"
		align="leftbottom" x="10" y="10" zorder="2"
		onloaded="renderloop( calc(html,' lat=' + roundval(view.lat,6) + ' lng=' + roundval(view.lng,6) + ' zoom=' + roundval(view.zoom,1)); );"
		selectable="true"
		/>


	<!-- get the current geo location, zoom there and add a hotspot -->
	<action name="get_geo_location" type="Javascript"><![CDATA[

		// https://developer.mozilla.org/en/docs/Web/API/Geolocation_API

		if ("geolocation" in navigator)
		{
			navigator.geolocation.getCurrentPosition(
				function(position)
				{
					var lat = position.coords.latitude;
					var lng = position.coords.longitude;
					var heading = position.coords.heading;

					krpano.actions.panto(lat, lng, 17, 3.0);

					var hs = krpano.addhotspot("home");
					hs.loadstyle("mapspot");
					hs.lat = lat;
					hs.lng = lng;
					hs.keep = true;
				},
				function(err)
				{
					error("Geolocation Error:[br]"+err.message);
				}
			);
		}
		else
		{
			error("No geolocation support by the browser");
		}

		function error(msg)
		{
			var l = krpano.addlayer();
			l.type = "text";
			l.align = "center";
			l.html = msg;
			l.css = "text-align:center; font-size:20px; font-weight:bold; color:red;"
			l.bg = false;
			l.enabled = true;
			l.onloaded = "delayedcall(2,tween(alpha,0.0,1.0,default,removelayer(get(name))));"
		}

	]]></action>


	<style name="button"
		type="text" padding="4 8" bgcolor="0xFFFFFF" bgborder="0 0xFFFFFF 1" bgroundedge="1" bgshadow="0 1 4 0x000000 1.0"
		vcenter="true"
		css="text-align:center;"
		ondown.addevent="set(bgcolor,0xDDDDDD);"
		onup.addevent="if(!hovering,set(bgcolor,0xFFFFFF),set(bgcolor,0xEEEEEE));"
		onover.addevent="if(!pressed,set(bgcolor,0xEEEEEE));"
		onout.addevent="if(!pressed,set(bgcolor,0xFFFFFF));"
		/>

	<layer name="get_geo_location" style="button" keep="true"
		type="text"
		html="Get Geo Location"
		align="center" y="20%"
		onclick="get_geo_location();"
		/>

	<layer name="zoomout" style="button" keep="true"
		type="text"
		html="Zoom out"
		align="bottom" y="10"
		onclick="panto(41,16,3,1,easeinquart);"
		/>

	<!-- set the startup view -->
	<view lat="41" lng="16" zoom="3" />


	<!-- example spots that open an embedded krpano viewer -->

	<hotspot name="rome" style="mapspot" keep="true"
		lat="41.898761" lng="12.473094"
		onclick="panto(get(lat),get(lng),15,null,null, showpano(cube, '%CURRENTXML%/../googlemaps/pano_%s.jpg'); );"
		/>

	<hotspot name="oldapartment" style="mapspot" keep="true"
		lat="47.834338" lng="16.519840"
		onclick="panto(get(lat),get(lng),15,null,null, showpano(cube, '%CURRENTXML%/../splitscreen/pano2_%s.jpg'); );"
		/>

	<hotspot name="croatia" style="mapspot" keep="true"
		lat="45.0820942" lng="14.1589635"
		onclick="panto(get(lat),get(lng),15,null,null, showpano(cube, '%CURRENTXML%/../gyro/pano_%s.jpg'); );"
		/>

	<hotspot name="abusimbel" style="mapspot" keep="true"
		lat="22.336880" lng="31.625902"
		onclick="panto(get(lat),get(lng),15,null,null, showpano(xml, '%CURRENTXML%/../depthmap/abu-simbel-tempel-tour/tour.xml'); );"
		/>

	<hotspot name="corfutour" style="mapspot" keep="true"
		lat="39.744036" lng="19.790112"
		onclick="panto(get(lat),get(lng),15,null,null, showpano(xml, '%CURRENTXML%/../demotour-corfu/tour.xml'); );"
		/>

	<action name="showpano" type="Javascript"><![CDATA[

		// showpano(xml, url) - a load a xml
		// showpano(panotype, url) - a load a pano image
		var panotype = args[1];
		var url = args[2];

		var bg = krpano.addlayer();
		bg.type = "container";
		bg.width = "100%";
		bg.height = "100%";
		bg.safearea = false;
		bg.bgalpha = 0.3;
		bg.bgcapture = true;
		bg.handcursor = false;
		bg.zorder = 1;
		bg.alpha = 0;
		bg.onloaded = "tween(alpha,1);"
		bg.onclick = "set(enabled,false); tween(alpha,0.0,0.5,default,removelayer("+bg.name+",true));";

		var l = krpano.addlayer();
		l.type = "krpano";
		l.width = "80%";
		l.height = "80%";
		l.align = "center";
		l.bgroundedge = 17;
		l.maskchildren = true;
		l.bgcolor = 0;
		l.bgalpha = 0.5;
		l.bgshadow = "0 0 20 0 1.0";
		l.parent = bg.getfullpath();
		l.onloaded = function()
		{
			if (panotype == "xml")
			{
				l.krpano.actions.loadpano(url);
			}
			else
			{
				l.krpano.image.reset();
				l.krpano.image[panotype] = {url:url};
				l.krpano.actions.loadpanoimage();
			}
		}
	]]></action>

</krpano>
