﻿<krpano>

	<!-- krpano 1.20.11 - Virtual Tour Skin -->


	<!-- skin settings (can be overridden in the tour.xml) -->
	<skin_settings maps="false"
	               maps_type="google"
	               maps_bing_api_key=""
	               maps_google_api_key=""
	               maps_zoombuttons="false"
	               maps_loadonfirstuse="true"
	               gyro="true"
	               gyro_keeplookingdirection="false"
	               webvr="false"
	               webvr_keeplookingdirection="true"
	               webvr_prev_next_hotspots="true"
	               autotour="false"
	               littleplanetintro="false"
	               followmousecontrol="false"
	               title="true"
	               thumbs="true"
	               thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160"
	               thumbs_opened="false"
	               thumbs_text="false"
	               thumbs_dragging="true"
	               thumbs_onhoverscrolling="false"
	               thumbs_scrollbuttons="false"
	               thumbs_scrollindicator="false"
	               thumbs_loop="false"
	               tooltips_buttons="false"
	               tooltips_thumbs="false"
	               tooltips_hotspots="false"
	               tooltips_mapspots="false"
	               deeplinking="false"
	               loadscene_flags="MERGE"
	               loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)"
	               loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)"
	               loadscene_blend_next="SLIDEBLEND(0.5,   0, 0.75, linear)"
	               loadingtext=""
	               layout_width="100%"
	               layout_maxwidth="814"
	               controlbar_width="-24"
	               controlbar_height="40"
	               controlbar_offset="20"
	               controlbar_offset_closed="-40"
	               controlbar_overlap.no-fractionalscaling="10"
	               controlbar_overlap.fractionalscaling="0"
	               design_skin_images="vtourskin.png"
	               design_bgcolor="0x2D3E50"
	               design_bgalpha="0.8"
	               design_bgborder="0"
	               design_bgroundedge="1"
	               design_bgshadow="0 4 10 0x000000 0.3"
	               design_thumbborder_bgborder="3 0xFFFFFF 1.0"
	               design_thumbborder_padding="2"
	               design_thumbborder_bgroundedge="0"
	               design_text_css="color:#FFFFFF; font-family:Arial;"
	               design_text_shadow="1"
	               />


	<!-- save the url path of this xml file (the url value will be adjusted during xml parsing) -->
	<vtourskinxmlpath url="./" />

	<!-- iPhone X safe-area support: use the horizontal safe-area only -->	
	<display safearea="h-only" />

	<!-- mouse / touch / keyboard(button) control settings - https://krpano.com/docu/xml/#control -->
	<control mouse="drag"
	         touch="drag"
	         zoomtocursor="false"
	         zoomoutcursor="false"
	         draginertia="0.1"
	         dragfriction="0.9"
	         movetoaccelerate="1.0"
	         movetospeed="10.0"
	         movetofriction="0.8"
	         keybaccelerate="0.09"
	         keybfriction="0.94"
	         keybfovchange="0.25"
	         mousefovchange="1.0"
	         fovspeed="3.0"
	         fovfriction="0.9"
	         bouncinglimits="true"
	         />

	<!-- mouse cursors - https://krpano.com/docu/xml/#cursors -->
	<cursors standard="default"
	         dragging="move"
	         moving="move"
	         />


	<!-- ensure stagescale 2x for mobile devices (regardless if mobilescale is 0.5 or 1.0) -->
	<krpano stagescale="calc:stagescale * 2" if="stagescale LT 1.0" devices="mobile" />

	<!-- skin styles -->
	<!-- skin_hotspotstyle - style for the hotspots -->
	<style name="skin_hotspotstyle" url="vtourskin_hotspot.png" edge="bottom" distorted="false"
	       tooltip=""
	       linkedscene=""
	       linkedscene_lookat=""
	       onclick=""
	       depth="1000"
	       scale="0.5"
	       onover.addevent="tween(scale,0.55, 0.3);"
	       onout.addevent="tween(scale,0.5,0.35);"
	       onloaded.addevent="skin_hotspotstyle_setup();"
	       />

	<action name="skin_hotspotstyle_setup" scope="local">
		if(isvalue(caller.linkedscene) AND skin_settings.tooltips_hotspots,
			copy(caller.tooltip, scene[get(caller.linkedscene)].title);
			caller.loadstyle(skin_tooltips);
		);
	</action>

	<action name="skin_hotspotstyle_click" scope="local">
		if(isvalue(caller.linkedscene),
			copy(hs_linkedscene, caller.linkedscene);
			if(caller.linkedscene_lookat, txtsplit(caller.linkedscene_lookat, ',', hs_lookat_h, hs_lookat_v, hs_lookat_fov); );
			set(caller.enabled, false);
			tween(caller.depth|caller.alpha|caller.oy|caller.rx, 4000|0.0|-50|-60, 0.5, default,
				skin_loadscene(get(hs_linkedscene), get(skin_settings.loadscene_blend));
				if(hs_lookat_h !== null, skin_lookat(get(hs_lookat_h), get(hs_lookat_v), get(hs_lookat_fov)); );
			);
		);
	</action>
	


	<!-- gyro plugin -->
	<plugin name="skin_gyro" keep="true" url="" html5_url="%VIEWER%/plugins/gyro2.js" softstart="1.0" desktopsupport="false" enabled="false" onavailable="skin_arrange_buttons();" devices="html5" />



	<!-- skin actions -->
	
	<action name="skin_onstart_loadscene" scope="local" autorun="onstart">
		
		<!-- load first scene -->
		loadscene(calc(isset(startscene) ? startscene : 0), null, MERGE);
	
		<!-- set optional startup lookat -->
		if(isset(startlookat),
			txtsplit(startlookat, ',', hlookat,vlookat,fov,distortion,architectural);
			lookat(get(hlookat),get(vlookat),get(fov),get(distortion),get(architectural));
		);

	</action>
	
	
	<action name="skin_startup" scope="local">
		if(skin_settings.gyro AND !device.desktop AND device.html5,
			copy(plugin[skin_gyro].url, plugin[skin_gyro].html5_url);
		);

		set(layer[skin_layer].visible, true);
	</action>

	
	<action name="skin_loadscene" scope="local" args="newscenenameorindex, blendmode">
		loadscene(get(scene[get(newscenenameorindex)].name), null, get(skin_settings.loadscene_flags), get(blendmode));
	</action>
 	

	<!-- context menu - https://krpano.com/docu/xml/#contextmenu -->
	<contextmenu>
		<item name="kr" caption="KRPANO"     />
		<item name="fs" caption="FULLSCREEN" />
		<item name="cc" caption="Change Controlmode" onclick="skin_changecontrolmode();"  separator="above" />
		<item name="nv" caption="Normal View"        onclick="skin_view_normal();"        showif="view.vlookatrange == 180" separator="above"     />
		<item name="fv" caption="Fisheye View"       onclick="skin_view_fisheye();"       showif="view.vlookatrange == 180" devices="flash|webgl" />
		<item name="sv" caption="Stereographic View" onclick="skin_view_stereographic();" showif="view.vlookatrange == 180" devices="flash|webgl" />
		<item name="av" caption="Architectural View" onclick="skin_view_architectural();" showif="view.vlookatrange == 180"                       />
		<item name="pv" caption="Pannini View"       onclick="skin_view_pannini();"       showif="view.vlookatrange == 180" devices="flash|webgl" />
		<item name="lp" caption="Little Planet View" onclick="skin_view_littleplanet();"  showif="view.vlookatrange == 180" devices="flash|webgl" />
		<item name="sa" caption="Start Autotour"     onclick="autorotate.start();" separator="both" showif="autorotate.isrotating == false" visible="calc:skin_settings.autotour == true" />
		<item name="ta" caption="Stop Autotour"      onclick="autorotate.stop();"  separator="both" showif="autorotate.isrotating == true"  visible="calc:skin_settings.autotour == true" />
	</contextmenu>


	<action name="skin_changecontrolmode">
		if(device.html5,
			switch(control.mode, moveto, drag, follow);
			skin_changecontrolmode_updatecaption();
		  ,
			switch(control.mode, moveto, drag);
		);
	</action>
		
	<action name="skin_changecontrolmode_updatecaption" autorun="onstart" devices="html5">
		txtadd(contextmenu.item[cc].caption,
			"Controlmode: ",
			"[span style=[sq]", calc(control.mode == 'drag' ? "text-decoration:underline" :""), "[sq]]",
			"Drag",
			"[/span]",
			" | ",
			"[span style=[sq]", calc(control.mode == 'follow' ? "text-decoration:underline" :""), "[sq]]",
			"Follow",
			"[/span]",
			" | ",
			"[span style=[sq]", calc(control.mode == 'moveto' ? "text-decoration:underline" :""), "[sq]]",
			"MoveTo",
			"[/span]",
			);
	</action>

	<action name="skin_view_normal">
		skin_view_look_straight();
		tween(view.architectural, 0.0, distance(1.0,0.5));
		tween(view.pannini,       0.0, distance(1.0,0.5));
		tween(view.distortion,    0.0, distance(1.0,0.5));
	</action>

	<action name="skin_view_fisheye">
		skin_view_look_straight();
		tween(view.architectural, 0.0,  distance(1.0,0.5));
		tween(view.pannini,       0.0,  distance(1.0,0.5));
		tween(view.distortion,    0.35, distance(1.0,0.5));
	</action>

	<action name="skin_view_architectural">
		skin_view_look_straight();
		tween(view.architectural, 1.0, distance(1.0,0.5));
		tween(view.pannini,       0.0, distance(1.0,0.5));
		tween(view.distortion,    0.0, distance(1.0,0.5));
	</action>

	<action name="skin_view_stereographic">
		skin_view_look_straight();
		tween(view.architectural, 0.0, distance(1.0,0.5));
		tween(view.pannini,       0.0, distance(1.0,0.5));
		tween(view.distortion,    1.0, distance(1.0,0.8));
	</action>

	<action name="skin_view_pannini">
		skin_view_look_straight();
		tween(view.architectural, 0.0, distance(1.0,0.5));
		tween(view.pannini,       1.0, distance(1.0,0.8));
		if(view.distortion LT 0.1,
			tween(view.distortion, 1.0, distance(1.0,0.8));
		);
	</action>

	<action name="skin_view_littleplanet">
		tween(view.architectural, 0.0, distance(1.0,0.5));
		tween(view.pannini,       0.0, distance(1.0,0.5));
		tween(view.distortion,    1.0, distance(1.0,0.8));
		tween(view.fov,           150, distance(150,0.8));
		tween(view.vlookat,        90, distance(100,0.8));
		tween(view.hlookat, calc(view.hlookat + 100.0 + 45.0*random), distance(100,0.8));
		skin_deeplinking_update_url(1.0);
	</action>
	
	
	<action name="skin_followmouse_init" scope="private:skinfollowmouse" autorun="onstart" devices="desktop.and.no-touch">
		if(global.skin_settings.followmousecontrol,
			set(followspeed, 0.05);
			set(followrange, 10);
			set(followfactor, 1.0);
			set(track_ry, 0);
			set(track_rx, 0);
			set(global.events[skin_followmouse].keep, true);
			set(global.events[skin_followmouse].onviewchanged, set(global.view.haschanged,true); );
			set(global.events[skin_followmouse].onviewchange, skin_followmouse_onviewchange() );
			set(global.events[skin_followmouse].onmousedown, scope(private:skinfollowmouse, stopdelayedcall(followmouse_reenable); tween(followfactor,0.0,0.2); ); );
			set(global.events[skin_followmouse].onmouseup, scope(private:skinfollowmouse, delayedcall(followmouse_reenable, 1.0, tween(followfactor,1.0,3.0) ); ); );
		  );
	</action>
	
	<action name="skin_followmouse_onviewchange" scope="private:skinfollowmouse">
		if(global.mouse.x != 0 AND global.mouse.y != 0,
			Math.tan(zoomscale, calc(global.view.vfov * 0.5 * Math.PI / 180.0));
			calc(zoomscale, 1.0 / zoomscale);
			Math.max(zoomscale, 1.0);
			calc(new_ry, followfactor/zoomscale * followrange * (global.mouse.x / global.stagewidth - 0.5));
			calc(new_rx, followfactor/zoomscale * followrange * (global.mouse.y / global.stageheight - 0.5));
			calc(track_ry, track_ry*(1.0-followspeed) + new_ry*followspeed);
			calc(track_rx, track_rx*(1.0-followspeed) + new_rx*followspeed);
			copy(global.view.ry, track_ry);
			copy(global.view.rx, track_rx);
		);
	</action>
	
	
	
	<!-- A helper script for getting into fullscreen mode on the iPhone. -->
	
	<events name="iphone_fullscreen_swipe" keep="true" devices="iphone"
			oniphonefullscreen="iphone_fullscreen_swipe();"
			/>
		
	<action name="iphone_fullscreen_swipe" scope="localonly">
		if(global.display.iphonefullscreen GT 0,
			if(!global.layer[iphone_fullscreen_info],
				addlayer('iphone_fullscreen_info', infolayer);
				set(infolayer, type=text, css='color:#FFFFFF; font-size:26px; font-weight:bold; text-align:center;', txtshadow='0 0 8 0x000000 1', mergedalpha=false, bgcolor=0x000000, bgalpha=0.7, bgcapture=true, align=lefttop, x=0, y=0, width=100%, height=100%, vcenter=true, keep=true, zorder=9999, safearea=false);
				if(global.display.iphonefullscreen == 1,
					set(infolayer.html, '[span style="font-size:60px;"]⇡[/span][br]Swipe Up');
				  ,
					set(infolayer.html, '[span style="font-size:60px;"]⇣ ⇡[/span][br]Swipe Down and Up');
				);
			);
		  ,
			removelayer('iphone_fullscreen_info');
		);
	</action>
	

</krpano>
