﻿<krpano>

	<!-- splitscreen example
		- use the stereo support for displaying a splitscreen
	-->

	<layer name="flashinfo" style="button" align="center" y="-100" enabled="false" devices="flash"
	       html="This is a HTML5-only example![br]The Flash viewer doesn't support stereo rendering."
	       />

	<display stereo="true" stereooverlap="0.0" />

	<image stereo="true" stereolabels="1|2">
		<cube url="pano%t_%s.jpg" />
	</image>

	<style name="button" type="text"
	       css="text-align:center;"
	       padding="4 8"
	       mergedalpha="false"
	       bgborder="4 0xFFFFFF 1"
	       bgroundedge="1"
	       bgshadow="0 1 4 0x000000 1.0"
	       onover="set(bgcolor, 0xC7E4FC);"
	       onout="calc(bgcolor, pressed ? 0x90CAF9 : 0xFFFFFF);"
	       ondown="set(bgcolor, 0x90CAF9);"
	       onup="calc(bgcolor, hovering ? 0xC7E4FC : 0xFFFFFF);"
	       />

	<style name="button_selected"
	       css="text-align:center; text-decoration:underline;"
	       />

	<layer name="info" type="text" html="Select Mode:" bg="false" align="bottom" y="90" css="color:#FFFFFF;" txtshadow="0 1 2 0x000000 1.0" enabled="false" />

	<layer name="mode_sbs" style="button|button_selected" align="bottom" x="0" y="60" width="100"
		html="Side-by-Side"
		onclick="tween(display.stereooverlap, 0.0, 0.5, default, updatescreen(), updatescreen());
		         layer[mode_sbs].loadstyle(button|button_selected);
		         layer[mode_hlf].loadstyle(button);"
		/>

	<layer name="mode_hlf" style="button" align="bottom" x="0" y="20" width="100"
		html="Split-Screen"
		onclick="tween(display.stereooverlap, 1.0, 0.5, default, updatescreen(), updatescreen());
		         layer[mode_sbs].loadstyle(button);
		         layer[mode_hlf].loadstyle(button|button_selected);"
		/>

	<!-- include the contextmenu from an other example -->
	<include url="../animated-hotspots/contextmenu.xml" />

</krpano>
