<krpano version="1.18">
	
	<!-- the skin -->
	<include url="skin/defaultskin.xml" />
	
	<!-- view settings -->
	<view hlookat="90" vlookat="0" maxpixelzoom="1.0" fovmax="150" limitview="auto" />
	

<!-- vignetting style - preload mask, then load real pano -->
	<plugin name="mask" url="vignetting.png" width="100%" height="100%" enabled="false" alpha="0" zorder="0" onloaded="tween(alpha,1);" />
	
		<plugin name="gyro" devices="html5" url="gyro.js" enabled="false" camroll="true" friction="0" velastic="0" 
	        onavailable="set(layer[gyrobutton].visible,true); set(layer[infotext].html,'Gyroscope available, press the gyro button...');"
	        onloaded="delayedcall(1,ifnot(available, showgyrowarning() ));"
	        />
	
	<events onxmlcomplete="showgyrowarning();" devices="flash" />
		
	<action name="showgyrowarning">
		set(layer[infotext].html,'Gyroscope NOT available...'))
	</action>
	
	
	<!-- events, show a infotext on start, and call the "onviewchange" action on a view change -->
	<events onxmlcomplete="startup();"
	        onviewchange="rotatecompasses();"
			/>


	<!-- show info, set heading, create hotpots -->
	<action name="startup">
		<!-- SET HEADING -->
		set(heading, 0);

		action(add_compass_spots);
	</action>

	<!-- change the rotation of the compass pointer / compass plate image -->
	<action name="rotatecompasses">
		sub(plugin[compass_pointer].rotate, view.hlookat, heading);
		sub(plugin[compass2_plate].rotate,  heading, view.hlookat);
	</action>



	<preview url="cam_01.tiles/preview.jpg" />

	<image type="CUBE" multires="true" tilesize="512">
		<level tiledimagewidth="4776" tiledimageheight="4776">
			<cube url="cam_01.tiles/mres_%s/l4/%0v/l4_%s_%0v_%0h.jpg" />
		</level>
		<level tiledimagewidth="2388" tiledimageheight="2388">
			<cube url="cam_01.tiles/mres_%s/l3/%0v/l3_%s_%0v_%0h.jpg" />
		</level>
		<level tiledimagewidth="1194" tiledimageheight="1194">
			<cube url="cam_01.tiles/mres_%s/l2/%0v/l2_%s_%0v_%0h.jpg" />
		</level>
		<level tiledimagewidth="598" tiledimageheight="598">
			<cube url="cam_01.tiles/mres_%s/l1/%0v/l1_%s_%0v_%0h.jpg" />
		</level>
		<mobile>
			<cube url="cam_01.tiles/mobile_%s.jpg" />
		</mobile>
	</image>
	
	
	<!-- enable autorotation -->
	<autorotate enabled="true" waittime="3.0" accel="0.5" speed="3" horizon="0" tofov="100" />



	<!-- first compass (the one on the right side) -->


	<!-- compass with rotating pointer -->
	<plugin name="compass" devices="html5" url="compass.png" keep="true" zorder="1" children="false"
	        align="righttop" x="10" y="10"
	        scale="1.0" scalechildren="true"
	        destscale="1.0"
	        onclick="switch(destscale,1.0,0.5);tween(scale,get(destscale));"
	        heading="0"
	        />

	<!-- compass pointer, the rotation will be changed in the "onviewchange" action -->
	<plugin name="compass_pointer" url="compass_pointer.png" keep="true" handcursor="false"
			parent="compass" zorder="1"
			align="center"
			/>

	<!-- compass glass cap (flash only, because there is no blendmode in html5) -->
	<plugin name="glass" devices="flash"  url="glass.jpg" keep="true" enabled="false"
	        blendmode="screen" alpha="0.5"
	        parent="compass" zorder="2"
	        align="center"
	        />




	<!-- second compass (left side) -->


	<!-- compass2 with rotating plate -->
	<plugin name="compass2" url="compass.png" keep="true" zorder="1" children="false"
	        align="lefttop" x="10" y="10"
	        scale="1.0" scalechildren="true"
	        destscale="1.0"
	        onclick="switch(destscale,1.0,0.5);tween(scale,get(destscale));"
	        />

	<!-- compass2 plate, the rotation will be changed in the "onviewchange" action -->
	<plugin name="compass2_plate" url="compass_plate.png" keep="true" handcursor="false"
			parent="compass2" zorder="1"
			align="center"
			/>

	<!-- compass2 fixed pointer -->
	<plugin name="compass2_pointer" url="compass_pointer.png" keep="true" handcursor="false"
			parent="compass2" zorder="2"
			align="center"
			/>

	<!-- compass2 fixed outer ring -->
	<plugin name="compass2_ring" url="compass_ring.png" keep="true" handcursor="false"
			parent="compass2" zorder="3"
			align="center"
			/>

	<!-- compass2 glass cap (flash only, because there is no blendmode in html5) -->
	<plugin name="glass2" devices="flash" url="glass.jpg" keep="true" enabled="false"
	        blendmode="screen" alpha="0.5"
	        parent="compass2" zorder="4"
	        align="center"
	        />



	<!-- use only a grid preview pano (to save download space) -->
	<preview type="grid(cube,16,16,512,0xCCCCCC,0xFFFFFF,0x999999);" details="16" />



	<!-- compass direction hotspots, created dynamically -->

	<action name="addspot">
		addhotspot(%1);
		set(hotspot[%1].url,%CURRENTXML%/hotspots.png);
		set(hotspot[%1].crop,%3);
		add(hotspot[%1].ath,%2,heading);
		set(hotspot[%1].atv,0);
		set(hotspot[%1].scale,%4);
		set(hotspot[%1].scale1,%4);
		mul(hotspot[%1].scale2,%4,2);
		set(hotspot[%1].zoom,true);
		set(hotspot[%1].onover,tween(scale,get(scale2)));
		set(hotspot[%1].onout,tween(scale,get(scale1)));
		set(hotspot[%1].onclick,lookto(get(ath),get(atv),90,smooth(),true,true));
	</action>

	<action name="add_compass_spots">
		addspot(n,  0,     0|0| 76|76, 1.0);
		addspot(no, 45,   78|0|118|76, 0.5);
		addspot(o,  90,  202|0| 71|76, 1.0);
		addspot(so, 135, 281|0|109|76, 0.5);
		addspot(s,  180, 400|0| 69|76, 1.0);
		addspot(sw, 225, 469|0|134|76, 0.5);
		addspot(w,  270, 603|0| 86|76, 1.0);
		addspot(nw, 315, 689|0|141|76, 0.5);
	</action>
	

<layer name="bottombar" type="container" bgcolor="0x000000" bgalpha="0.5" align="leftbottom" width="100%" height="40">
		
		<layer name="infotext" url="textfield.swf"
		       background="false" border="false" enabled="false"
		       html=""
		       css="text-align:left; color:#FFFFFF; font-family:Arial; font-size:14px; font-weight:bold;"
		       align="left" x="10" height="100%" vcenter="true"
		       />
			
		<layer name="gyrobutton" url="gyroicon.png" scale="0.5" align="right" x="10" visible="false" 
		       onclick="switch(plugin[gyro].enabled);"
		       />
		       
	</layer>

	<!-- bigger mobile layout -->	
	<layer name="bottombar" height="80" devices="mobile">
		<layer name="infotext" css="text-align:left; color:#FFFFFF; font-family:Arial; font-size:22px; font-weight:bold;" />
		<layer name="gyrobutton" scale="1.0" />
	</layer>
	
	
	<!-- adjust the examples backbutton position (if available) -->
	<events name="backbutton_adjust" onxmlcomplete="if(layer[backbutton], if(device.mobile, set(layer[backbutton].y,110), set(layer[backbutton].y,70)));" />

</krpano>
