<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:maps="com.google.maps.*" 
	layout="absolute" 
	width="100%" height="100%" >
  

   <mx:Script>
       <![CDATA[
       	import mx.events.ListEvent;
        import com.google.maps.interfaces.IPolyline;
        import com.google.maps.Map;
        import com.google.maps.MapEvent;
        import com.google.maps.LatLng;
        import com.google.maps.LatLngBounds;
        import com.google.maps.overlays.Marker;
        import com.google.maps.overlays.MarkerOptions;
        import com.google.maps.controls.ControlPosition;
        import com.google.maps.controls.MapTypeControl;
        import com.google.maps.services.*;
        import com.google.maps.MapAction;
        
        import mx.controls.Alert;
        import mx.collections.ArrayCollection;
            
        private var dir:Directions;
        
        
        /**
        * This method is called when the default Map is loaded 
        * 
        */
        private function onMapReady(event:Event):void {
            setupDirections();
            controlPanel.enabled = true;
        }
        
        /**
        * Define Direction class and its listeners 
        * 
        */
        private function setupDirections():void {    
        	
            dir = new Directions();
            dir.addEventListener(DirectionsEvent.DIRECTIONS_SUCCESS, onDirLoad);
            dir.addEventListener(DirectionsEvent.DIRECTIONS_FAILURE, onDirFail);
        }
        
        
        /**
        * Start a GMap Call to get distance between the selected store city and the user city 
        * 
        */
        private function processForm(event:ListEvent=null):void {
        	
        	// Set Directions Options (see GMAP API doc for properties details)
            var opts:DirectionsOptions = new DirectionsOptions({locale: "English", travelMode: "driving", avoidHighways: false})
            dir.setOptions(opts);
            
            // GMAP Query: From ... To ... 
            dir.load("from: " + from.text + " to: " + storeCities.selectedItem.data);
            
            // Disable query panel
            controlPanel.enabled = false;
        }
            
        /**
        * Direction Wrong Query (i.e. a city wasn't found in the db)  
        * 
        */
        private function onDirFail(event:DirectionsEvent):void {
              Alert.show("Status: " + event.directions.status);
              controlPanel.enabled = true;
        }
        
        /**
        * Direction Query SUCCESSFULLY   
        * 
        */
        private function onDirLoad(event:DirectionsEvent):void {
        	
        	// Enable Query Panel
        	controlPanel.enabled = true;
        	
        	// Get Direction object
            var dir:Directions = event.directions;
            
            // Clear previous displayed directions 
            map.clearOverlays(); 
            
            // Display Directions on Map
            var directionsPolyline:IPolyline = dir.createPolyline();
            map.addOverlay(directionsPolyline);
            var directionsBounds:LatLngBounds = directionsPolyline.getLatLngBounds();
            
            // Fix map position
            map.setCenter(directionsBounds.getCenter());
            map.setZoom(map.getBoundsZoomLevel(directionsBounds));
       
       		// Display Markers (start and destination) 
            var numRoutes:Number = dir.numRoutes;
            var startLatLng:LatLng = dir.getRoute(0).getStep(0).latLng;
            var endLatLng:LatLng = dir.getRoute(numRoutes-1).endLatLng;
            map.addOverlay(new Marker(startLatLng));
            map.addOverlay(new Marker(endLatLng));
            
            // Display trip info
            infoTripTxt.htmlText = dir.summaryHtml;
        }
            
        

       ]]>
   </mx:Script>
   
   
   <!--DEBUG KEY: you need to sign up for your own key-->
   <maps:Map 
    id="map" 
    key="ABQIAAAA7QUChpcnvnmXxsjC7s1fCxQGj0PqsCtxKvarsoS-iqLdqZSKfxTd7Xf-2rEc_PC9o8IsJde80Wnj4g" 
    mapevent_mapready="onMapReady(event)"
    width="100%" height="100%"/>

    
 
   <mx:VBox width="395" height="200" id="controlPanel" enabled="false"
 		backgroundAlpha="0.8" backgroundColor="#FFFFFF">
 		
	  <mx:HBox width="100%">
		   <mx:Label text="From (write your city):" fontWeight="bold"/>
		   <mx:TextInput
		     id="from"
		     text="Firenze"
		     width="100%" />
	  </mx:HBox>
	  
	  <mx:HRule width="100%" />
	  
	  <mx:Label fontWeight="bold"
		  text="To (select below the store and check the distance):"/>
			
	  	<mx:HBox width="100%" height="100%" verticalAlign="middle">
		    <mx:List id="storeCities" width="150"
		    	change="processForm(event)" height="121"> 
		        <mx:Object label="Milan - Outlet" data="Milan" />
		        <mx:Object label="Rome - Boutique" data="Rome" />
		        <mx:Object label="Napoli - Outlet" data="Napoli" />
		        <mx:Object label="Venezia - Shop" data="Venezia" />
		        <mx:Object label="Torino - Outlet" data="Torino" />
		    </mx:List>
		    
		    <mx:TextArea width="220" height="60" fontSize="14" id="infoTripTxt" 
		    	backgroundAlpha="0" borderStyle="none"/>	
		    
		</mx:HBox>

  </mx:VBox>

   
</mx:Application>