<krpano>
	<!-- krpano 1.18 default buttons skin -->

	<!-- default mouse control mode (moveto or drag2d) -->
	<control mousetype="moveto" />

	<!-- control buttons style -->
	<style name="left_container" x="-30%" y="0" align="righttop" width="30%" height="100%" />
    <style name="bottom_container" x="0" y="-240" align="leftbottom" width="100%" height="240" />

    <textstyle name="tooltip-style" origin="cursor" edge="bottom" xoffset="0" yoffset="-14" font="Ariel" fontsize="14.0" bold="false" italic="false"
        	   textcolor="0xFFFFFF" textalign="none" padding="2 8" background="true" backgroundcolor="0xd70428" backgroundalpha="0.8" border="true"
           	   bordercolor="0x000000" borderalpha="0.8" borderwidth="1.0" roundedge="0" alpha="1.0" blendmode="screen" showtime="0.2" />

	<layer name="controls" type="container"	 enable="true" visible="true" align="lefttop" edge="" enabled="true" scale="1" alpha="1.0" handcursor="true" width="60" height="426" bgcapture="true" x="0" y="15%">
		<layer name="zoomin" type="image" url="controls.png" enable="true" visible="true" align="lefttop" enabled="true" style="" scale="1.0" alpha="1.0" handcursor="true" x="0" y="0" crop="300|0|60|60" onovercrop="300|60|60|60" ondown="set(fov_moveforce, -1);" onup="set(fov_moveforce, 0);" onhover="showtext(zoom in, tooltip-style);" />
		<layer name="zoomout" type="image" url="controls.png" enable="true" visible="true" align="lefttop" enabled="true" style="" scale="1.0" alpha="1.0" handcursor="true" x="0" y="61" crop="240|0|60|60" onovercrop="240|60|60|60" ondown="set(fov_moveforce, +1);" onup="set(fov_moveforce, 0);" onhover="showtext(zoom out, tooltip-style);" />
		<layer name="up" type="image" url="controls.png" enable="true" visible="true" align="lefttop" enabled="true" style="" scale="1.0" alpha="1.0" handcursor="true" x="0" y="122" crop="60|0|60|60" onovercrop="60|60|60|60" ondown="set(vlookat_moveforce, -1);" onup="set(vlookat_moveforce, 0);" onhover="showtext(pan up, tooltip-style);" />
		<layer name="down" type="image" url="controls.png" enable="true" visible="true" align="lefttop" enabled="true" style="" scale="1.0" alpha="1.0" handcursor="true" x="0" y="183" crop="120|0|60|60" onovercrop="120|60|60|60" ondown="set(vlookat_moveforce, +1);" onup="set(vlookat_moveforce, 0);" onhover="showtext(pan down, tooltip-style);" />
		<layer name="right" type="image" url="controls.png" enable="true" visible="true" align="lefttop" enabled="true" style="" scale="1.0" alpha="1.0" handcursor="true" x="0" y="244" crop="180|0|60|60" onovercrop="180|60|60|60" ondown="set(hlookat_moveforce, +1);" onup="set(hlookat_moveforce, 0);" onhover="showtext(pan right, tooltip-style);" />
		<layer name="left" type="image" url="controls.png" enable="true" visible="true" align="lefttop" enabled="true" style="" scale="1.0" alpha="1.0" handcursor="true" x="0" y="305" crop="0|0|60|60" onovercrop="0|60|60|60" ondown="set(hlookat_moveforce, -1);" onup="set(hlookat_moveforce, 0);" onhover="showtext(pan left, tooltip-style);" />
	</layer>

	<action name="checkReso" devices="!mobile">	
		if(stagewidth GT 697,
			set(screenWidth, 'desktop');
		);
		if(stagewidth LT 698, 
			set(screenWidth, 'mobile');
		);
	</action>
	<action name="checkReso" devices="mobile"> 
		set(screenWidth, 'mobile');
	</action>

	<action name="update-scene">
		checkReso();

		if(screenWidth == 'desktop',

			layer[info-panel-wrapper].loadstyle(left_container);
			set(area.align, righttop);
			set(area.x,0);
			set(area.y,0);
			set(area.width,100%);
			set(area.height,100%);
			set(layer[up].visible, "true");
			set(layer[down].visible, "true");
			set(layer[left].visible, "true");
			set(layer[right].visible, "true");
		);
		if(screenWidth == 'mobile',

			set(area.width,100%);
			set(area.height,100%);

			set(layer[up].visible, "false");
			set(layer[down].visible, "false");
			set(layer[left].visible, "false");
			set(layer[right].visible, "false");

		);

	</action>

	<events name="info-click-event" onresize="update-scene();" />

	<!-- events for handling dynamic changes -->
	<events name="defaultskin_buttons" keep="true"
	        onxmlcomplete="update_ctrl_mode();"
	        />

	<layer name="skin_loadingtext" keep="true" url="%SWFPATH%/plugins/textfield.swf" align="center" x="5" y="-5" html="loading..." visible="false" autoheight="true" background="false" border="false" enabled="false" css="text-align:center; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:22px; font-style:italic;" textshadow="2" />

</krpano>
