<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:modest="com.modestmaps.flex.*" 
    layout="absolute" 
    applicationComplete="windowedapplication1_applicationCompleteHandler(event)"
    frameRate="60" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
            import flash.utils.getTimer;
            import mx.events.FlexEvent;

            private static const IDLE_THRESHOLD : int = 300;
            protected var mapProviders : Array = ["MICROSOFT_AERIAL","MICROSOFT_HYBRID", "MICROSOFT_ROAD"];
            protected var currentProvider : int = 0;
            protected var lastUpdate : uint = 0;

            protected function windowedapplication1_applicationCompleteHandler(event:FlexEvent):void
            {
                stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
                addEventListener( TransformGestureEvent.GESTURE_PAN, onGesturePan );
                addEventListener( TransformGestureEvent.GESTURE_ZOOM, onGestureZoom );
            }
            
            private function onGesturePan( event : TransformGestureEvent ) : void
            {
                if ( getTimer()-lastUpdate > IDLE_THRESHOLD )
                {
                    if ( event.offsetX > 25 )
                        currentProvider ++;
                    else if ( event.offsetX < -25 )
                        currentProvider --;
                    
                    if ( currentProvider <= -1 )
                        currentProvider = mapProviders.length-1;
                        
                    currentProvider = currentProvider % mapProviders.length;
                    mainMap.provider = mapProviders[ currentProvider ];
                    mapLabel.text = mapProviders[ currentProvider ];
                    
                    action.text = "update provider";
                    fadeAction.play();
                    
                    if ( event.offsetX > 50 || event.offsetX < -50 )
                        lastUpdate = getTimer();
                }
            }
            
            private function onGestureZoom( event : TransformGestureEvent ) : void
            {
                if ( getTimer()-lastUpdate > IDLE_THRESHOLD )
                {
                    if ( event.scaleX > 1.03 && event.scaleY > 1.03 )
                    {
                        mainMap.map.zoomIn();
                        action.text = "zoom in";
                        fadeAction.play();
                        lastUpdate = getTimer();
                    } 
                    else if ( event.scaleX < .97 && event.scaleY < .97 )
                    {
                        mainMap.map.zoomOut();
                        action.text = "zoom out";
                        fadeAction.play();
                        lastUpdate = getTimer();
                    } 
                }
            }
            
            private function doubleClickZoom( event : MouseEvent ) : void
            {
                mainMap.map.onDoubleClick(event);
                action.text = "zoom in";
                fadeAction.play();
            }

        ]]>
    </mx:Script>
    
    <mx:Fade id="fadeAction" target="{ action }" alphaFrom="1" alphaTo="0" duration="2000" />
    
    <!-- map example from openscales.org -->
    <modest:MapComponent id="mainMap" zoom="2"
        width="100%" height="100%" draggable="true" 
        provider="MICROSOFT_AERIAL"     
        doubleClick="doubleClickZoom(event)"/>
        
    <mx:Text id="mapLabel" color="#FFFFFF" text="MICROSOFT_AERIAL" fontSize="35">
        <mx:filters>
            <mx:DropShadowFilter />
        </mx:filters>
    </mx:Text>
    
    <mx:Text id="action" color="#FFFFFF" alpha="0" right="0" fontSize="35">
        <mx:filters>
            <mx:DropShadowFilter />
        </mx:filters>
    </mx:Text>
    
</mx:WindowedApplication>