<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="left" edge="" enabled="true" scale="1" alpha="1.0" handcursor="true" width="60" height="426" bgcapture="true" x="0" y="0">
		<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 name="btn_fs" enable="true" visible="true" align="lefttop" style="" scale="1.0" alpha="1.0" handcursor="true" x="0" y="366" url="controls.png"  crop="360|0|60|60" onovercrop="360|60|60|60" onclick="switch(fullscreen);" onhover="showtext(full screen, tooltip-style);" devices="fullscreensupport" />
	</layer>

	<layer name="info-panel-wrapper" type="container" style="left_container" devices="all" parent="STAGE" visible="true" enabled="true" handcursor="false" width="30%" capture="true" align="righttop" alpha="1.0" bgshadow="0 0 2 0x000000 0.15" bgcolor="0xF6F6F6" bgalpha="1" bgcapture="true" >

			<layer name="info-inner" type="container" visible="true" x="0" y="0" align="righttop" enabled="true" height="" width="100%" onloaded="">
				<layer name="close-btn" type="image" url="close-btn.png" enable="true" visible="false" align="lefttop" enabled="true" style="" scale="1.0" alpha="1" handcursor="true" x="-60" y="0" ondown="close();" onhover="set(alpha, 0.9);" onout="set(alpha, 1.0);" />
				<layer name="station-name" type="container" capture="true" bgcapture="true" visible="true" x="0" y="0" align="lefttop" enabled="true" height="25%" width="100%" style="" handcursor="false">
					<layer name="stationtxt" type="image" url="" enable="true" visible="false" align="center" enabled="true" style="" scale="1.0" alpha="1.0" handcursor="false" />
				</layer>

				<layer name="button01" type="container" capture="true" bgcapture="true" visible="true" x="0" y="25%" align="lefttop" enabled="true" height="25%" width="100%" handcursor="true" style="" onover="set(bgcolor, 0xd70428);" onout="set(bgcolor, 0x6b717a);" ondown="" onup="" onclick="openurl('http://apple.com',_top);" onloaded="" bgcolor="0x6b717a" bgalpha="1">
					<layer name="topline1" type="container" visible="true" x="0" y="0" align="lefttop" enabled="true" height="1" width="100%" style="" bgcolor="0xa9b3c1" bgalpha="1" />
					<layer name="link01" type="image" url="link01.png" visible="true" align="center" enabled="false" style="" scale="1.0" alpha="1.0" handcursor="" />
					<layer name="btmline1" type="container" visible="true" x="0" y="0" align="leftbottom" enabled="true" height="1" width="100%" style="" bgcolor="0x464a50" bgalpha="1" />
				</layer>

				<layer name="button02" type="container" capture="true" bgcapture="true" visible="true" x="0" y="50%" align="lefttop" enabled="true" height="25%" width="100%" handcursor="true" style="" onover="set(bgcolor, 0xd70428);" onout="set(bgcolor, 0x6b717a);" ondown="" onup="" onclick="" onloaded="" bgcolor="0x6b717a" bgalpha="1">
					<layer name="topline2" type="container" visible="true" x="0" y="0" align="lefttop" enabled="true" height="1" width="100%" style="" bgcolor="0xa9b3c1" bgalpha="1" />
					<layer name="link02" type="image" url="link02.png" visible="true" align="center" enabled="false" style="" scale="1.0" alpha="1.0" handcursor="" />
					<layer name="btmline2" type="container" visible="true" x="0" y="0" align="leftbottom" enabled="true" height="1" width="100%" style="" bgcolor="0x464a50" bgalpha="1" />
				</layer>

				<layer name="button03" type="container" capture="true" bgcapture="true" visible="true" x="0" y="75%" align="lefttop" enabled="true" height="25%" width="100%" handcursor="true" style="" onover="set(bgcolor, 0xd70428);" onout="set(bgcolor, 0x6b717a);" ondown="" onup="" onclick="" onloaded="" bgcolor="0x6b717a" bgalpha="1">
					<layer name="topline3" type="container" visible="true" x="0" y="0" align="lefttop" enabled="true" height="1" width="100%" style="" bgcolor="0xa9b3c1" bgalpha="1" />
					<layer name="link03" type="image" url="link03.png" visible="true" align="center" enabled="false" style="" scale="1.0" alpha="1.0" handcursor="" />
					<layer name="btmline4" type="container" visible="true" x="0" y="0" align="leftbottom" enabled="true" height="1" width="100%" style="" bgcolor="0x464a50" bgalpha="1" />
				</layer>

			</layer>
			<plugin name="map" keep="true"
		        url.html5="%SWFPATH%/plugins/bingmaps.js"
		        url.flash="%SWFPATH%/plugins/bingmaps.swf"
		        align="leftbottom" x="0" y="0" width="100%" height="70%"
		        key="AqAik3Z6B8mlqgNXpP__1g6Wr4jFD5sAseDIlTS3OCCr5c3qUaasfE07ps3lo74z"
		        maptype="hybrid" zoom="16"
		        lat="52.75381" lng="0.403525"
		        mapsapi="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&amp;s=1"
		        >
		        <spotstyle name="hsstyle" url="spot0.png" scale="1" />

			</plugin>

    </layer>

    <action name="open">
    	set(layer[info-panel-wrapper].mapsopened,'true');
    	set(layer[close-btn].visible, 'true');

		if(screenWidth == 'desktop',
			<!-- set(layer[info-panel-wrapper].y, 0);
			set(area.y, 0);
			set(area.height, 100%); -->
			set(layer[close-btn].x, -60);
    		set(layer[close-btn].y, 0);
			
			layer[info-panel-wrapper].loadstyle(left_container);
			tween(layer[info-panel-wrapper].x,0,0.5,easeInOutQuad);
			set(area.align, righttop);
			tween(area.x,30%,0.5,easeInOutQuad);
			tween(area.width,70%,0.5,easeInOutQuad);
		);
		if(screenWidth == 'mobile',
			<!-- set(layer[info-panel-wrapper].x, 0);
			set(area.x, 0);
			set(area.width, 100%); -->
			set(layer[close-btn].x, 0);
    		set(layer[close-btn].y, -60);
			
			layer[info-panel-wrapper].loadstyle(bottom_container);
			tween(layer[info-panel-wrapper].y,0,0.5,easeInOutQuad);
			<!-- set(area.align, top);
			
			area.updatepos();
			sub(mob-area-height,area.pixelheight,240);

			tween(area.y,0,0.5,easeInOutQuad);
			set(area.height,get(mob-area-height)); -->
		);
		set(events[info-click-event].onresize,null);
		delayedcall(0.6, set(events[info-click-event].onresize,update-scene()));

	</action>

	<action name="close">
		set(layer[info-panel-wrapper].mapsopened,'false');
		plugin[map].removeallspots();
		delayedcall(0.5, set(layer[close-btn].visible, 'false'));
		delayedcall(0.5, set(layer[stationtxt].visible, 'false'));

		if(screenWidth == 'desktop',
			
			set(area.y, 0);
			set(area.height, 100%);

			tween(layer[info-panel-wrapper].x,-30%,0.5,easeInOutQuad);
			set(area.align, righttop);
			tween(area.x,0,0.5,easeInOutQuad);
			tween(area.width,100%,0.5,easeInOutQuad);
		);
		if(screenWidth == 'mobile',
			
			set(area.x, 0);
			set(area.width, 100%);

			tween(layer[info-panel-wrapper].y,-240,0.5,easeInOutQuad);
			<!-- set(area.align, leftbottom);
			tween(area.y,0%,0.5,easeInOutQuad);
			tween(area.height,100%,0.5,easeInOutQuad); -->
		);
		set(events[info-click-event].onresize,null);
		delayedcall(0.6, set(events[info-click-event].onresize,update-scene()));
		
	</action>

	<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="hopspot-click-event">	
		set(layer[stationtxt].visible, 'true');
		set(layer[stationtxt].scale, 1);
		delayedcall(0.3,
			if(layer[info-panel-wrapper].pixelwidth LT layer[stationtxt].pixelwidth,
				sub(stationwidth, layer[info-panel-wrapper].pixelwidth, 20);
				div(stationratio, stationwidth, layer[stationtxt].width);
				set(layer[stationtxt].scale, get(stationratio));
				,
				set(layer[stationtxt].scale, 1);
			);
		);
		if(layer[info-panel-wrapper].mapsopened == 'false',
			set(layer[stationtxt].url, get(stationnameurl));

			set(layer[button01].stationinfourl, get(stationinfourl));
			set(layer[button02].timetablesurl, get(timetablesurl));
			set(layer[button03].livedeparturesurl, get(livedeparturesurl));

			set(layer[button01].onclick, openurl(get(stationinfourl),_top));
			set(layer[button02].onclick, openurl(get(timetablesurl),_top));
			set(layer[button03].onclick, openurl(get(livedeparturesurl),_top));
			open();
			plugin[map].addimagespot(spot1, get(lat), get(lng), 0, hsstyle,); 
			plugin[map].pantospot(spot1);
		, 
			
			tween(layer[stationtxt].x, 100%, 0.2,easeInOutQuad);
			delayedcall(0.2, tween(layer[stationtxt].x, 0, 0.4,easeInOutQuad));
			tween(plugin[map].alpha, 0.2, 0.1,easeInOutQuad);
			delayedcall(0.2, tween(plugin[map].alpha, 1, 0.4,easeInOutQuad););

			delayedcall(0.2, set(layer[stationtxt].url, get(stationnameurl)));

			set(layer[button01].stationinfourl, get(stationinfourl));
			set(layer[button02].timetablesurl, get(timetablesurl));
			set(layer[button03].livedeparturesurl, get(livedeparturesurl));

			set(layer[button01].onclick, openurl(get(stationinfourl),_top));
			set(layer[button02].onclick, openurl(get(timetablesurl),_top));
			set(layer[button03].onclick, openurl(get(livedeparturesurl),_top));
			plugin[map].addimagespot(spot1, get(lat), get(lng), 0, hsstyle,); 
			plugin[map].pantospot(spot1));
		);
	</action>

	<action name="update-scene">
		checkReso();
		update-hotspots();
		set(layer[close-btn].visible, "false");
		set(layer[stationtxt].visible, "false");
	
		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[info-panel-wrapper].mapsopened, 'false');
			set(plugin[map].visible, 'true');
			area.updatepos();
			sub(info-height,area.pixelheight,240);
			set(layer[info-inner].height, 240);
			set(plugin[map].height, get(info-height));

			set(layer[controls].visible, "true");
			
			set(layer[close-btn].url, '%CURRENTXML%/skin/close-btn.png');
			set(layer[close-btn].align, 'lefttop');
		);
		if(screenWidth == 'mobile',
			
    		set(layer[close-btn].url, '%CURRENTXML%/skin/close-btn-mob.png');
    		set(layer[close-btn].align, 'righttop');

			layer[info-panel-wrapper].loadstyle(bottom_container);
			set(area.align, leftbottom);
			set(area.x,0);
			set(area.y,0);
			set(area.width,100%);
			set(area.height,100%);
			set(layer[info-panel-wrapper].mapsopened, 'false');
			set(plugin[map].visible, 'false');
			set(layer[info-inner].height, 100%);
			
			set(layer[controls].visible, "false");
			set(layer[controls].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(); update_fs_button();"
	        onenterfullscreen="update_fs_button();"
	        onexitfullscreen="update_fs_button();update-scene();"
	        />

	<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" />



	<!-- update the fullscreen button according to the current state -->
	<action name="update_fs_button">
		if(fullscreen,
			set(layer[btn_fs].crop,       420|0|60|60); 
			set(layer[btn_fs].onovercrop, 420|60|60|60);
		  ,
			set(layer[btn_fs].crop,       360|0|60|60);
			set(layer[btn_fs].onovercrop, 360|60|60|60);
		  );
	</action>

</krpano>
