<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"
    xmlns:comp="Components.*" backgroundGradientColors="[#0080ff, #0000ff]" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
            private function moveMap(clickEvent:MouseEvent):void {
                switch (clickEvent.target.id) {
                    case "btnUp":
                        cmpMap.moveBy(0, -40);
                        break;
                    case "btnDown":
                        cmpMap.moveBy(0, 40);
                        break;
                    case "btnLeft":
                        cmpMap.moveBy(-40, 0);
                        break;
                    case "btnRight":
                        cmpMap.moveBy(40, 0);
                        break;
                    case "btnZoomIn":
                        cmpMap.zoomInBy();
                        break;
                    case "btnZoomOut":
                        cmpMap.zoomOutBy();
                        break;
                    default:
                        break;
                }
            }

            private function mapComplete():void {
                // This step is required to resize
                // the map container after it has 
                // been created
                cmpMap.height = 500;
                cmpMap.width  = 700;
            }
        ]]>
    </mx:Script>

    <mx:Fade id="longFade" duration="3000"/>

    <mx:ViewStack id="vwsMain" width="100%" height="100%">
        <mx:VBox id="introScreen" verticalAlign="middle" horizontalAlign="center">
            <comp:IntroScreen />
            <mx:Button label="Proceed" click="vwsMain.selectedChild=gameScreen"/>
        </mx:VBox>
        <mx:HBox id="gameScreen" verticalAlign="top" horizontalAlign="center">
            <mx:VBox>
                <mx:Button label="Up" id="btnUp" click="moveMap(event)"/>
                <mx:Button label="Down" id="btnDown" click="moveMap(event)"/>
                <mx:Button label="Left" id="btnLeft" click="moveMap(event)"/>
                <mx:Button label="Right" id="btnRight" click="moveMap(event)"/>
                <mx:Button label="Zoom In" id="btnZoomIn" click="moveMap(event)"/>
                <mx:Button label="Zoom Out" id="btnZoomOut" click="moveMap(event)"/>
                <mx:Text id="txtX" text="{cmpMap.viewportXpos}"/>
                <mx:Text id="txtY" text="{cmpMap.viewportYpos}"/>
                <mx:Text id="txtXm" text="{cmpMap.mapXpos}"/>
                <mx:Text id="txtYm" text="{cmpMap.mapYpos}"/>
                <mx:Text id="txtXf" text="{cmpMap.xposfoc}"/>
                <mx:Text id="txtYf" text="{cmpMap.yposfoc}"/>
                <mx:Text id="txtCity" text="{cmpMap.selectedCity}"/>
            </mx:VBox>
            <comp:Map id="cmpMap"
                verticalScrollPolicy="off" horizontalScrollPolicy="off"
                creationComplete="mapComplete()"/>
            <comp:PlayerBar height="100%"/>            
        </mx:HBox>
    </mx:ViewStack>
</mx:Application>