<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    backgroundColor="#FFFFFF"
    backgroundAlpha="0.2"
    xmlns:esri="http://www.esri.com/2008/ags"
    borderColor="0xFC6D1D" borderStyle="solid" borderThickness="2" cornerRadius="5"    
     viewSourceURL="srcview/index.html">
    <mx:Image source="@Embed('epicentermarker.png')" id="imgEpicentermarker"/>
    <mx:Image source="@Embed('heartmarker.png')" id="imgHeartmarker"/>
    <mx:Script>
        <![CDATA[
            import com.google.maps.controls.ZoomControl;
            import com.google.maps.controls.PositionControl;
            import com.google.maps.controls.MapTypeControl;
        import mx.controls.Image;
        import com.google.maps.overlays.MarkerOptions;
        import com.google.maps.overlays.Marker;
        import com.google.maps.InfoWindowOptions;
        
        import flash.events.Event;
        import com.google.maps.MapEvent;
        import com.google.maps.MapMoveEvent;
        import com.google.maps.Map;
        import com.google.maps.MapType;
        import com.google.maps.LatLng;
        
        private var map:Map;        
        public var epicenter:LatLng = new LatLng(31.015,103.365);
        public var inicenter:LatLng = new LatLng(31.015,30);
        public var timerInt:int = 4000;
        public var donationPoints:Array;
        [Bindable]
        public var curInfo:String;
        
        public var curPoint:uint = 0;
        public var timer:Timer = new Timer(timerInt, 0);
        
        [Bindable]
        public var donationList:XML;

        public function startMap(event:Event):void {
            map = new Map();
            map.key = "ABQIAAAAcGu3TkTHXT4sSuRoFiQkYhTv8ls813JagqmhqVkMhta-Y5xi_BRKLMkgZ2F7CYKtgq6fica01hQq8w";
            //map.key = "ABQIAAAAcGu3TkTHXT4sSuRoFiQkYhThWPnqB00MKXfOuK3lf2T0DUppxxTO0Jbu70omyRBQMmDOuk4kdKXFiA"; //moxie1.esri.com
            //map.key = "ABQIAAAAcGu3TkTHXT4sSuRoFiQkYhSlQfigMENzdcUiowBuukdL7aA69xTESDMUI1O5Ht8FYG1ANlBWRYituQ"; //flex888
            map.addEventListener(MapEvent.MAP_READY, onMapReady);
            
            mapContainer.addChild(map);
        }
        
      private function onMapReady(event:MapEvent):void {
        map.setCenter(epicenter, 4,  MapType.PHYSICAL_MAP_TYPE);
                
        var markerOption:MarkerOptions = new MarkerOptions();
        markerOption.icon = this.imgEpicentermarker;
        markerOption.hasShadow = false;
        
        map.enableContinuousZoom();
        map.enableScrollWheelZoom();
        map.addControl(new ZoomControl());
        map.addControl(new MapTypeControl());        
          
        var epicenterMarker:Marker = new Marker(epicenter,markerOption);
        map.addOverlay(epicenterMarker);
        
        initData();
      }
      public function onResized(event:Event):void {
        map.setSize(new Point(mapContainer.width, mapContainer.height));
      }        
        public function initData():void{
            var request:URLRequest = new URLRequest("http://china-earthquake-relief.com/donations.xml");
            //var request:URLRequest = new URLRequest("donations.xml");
            var loader:URLLoader = new URLLoader();
            var variables:URLVariables = new URLVariables();
            variables.nocache = new Date().getTime();
            request.data = variables;
            loader.dataFormat = URLLoaderDataFormat.TEXT;
            loader.addEventListener(Event.COMPLETE, loaderHandler);
            try
            {
                loader.load(request);
            } 
            catch (error:Error)
            {
                trace("Unable to load URL: " + error);
            }
            
        }        
        
        private function loaderHandler(event:Event):void
        {
            var loader:URLLoader = URLLoader(event.target);
            
            donationList = new XML(loader.data);
            addPoints();
        }            

        public function addPoints():void{                
            this.donationPoints = new Array();
            var markerOption:MarkerOptions = new MarkerOptions();
            markerOption.icon = this.imgHeartmarker;
            markerOption.hasShadow = false;
                                
            for each ( var donation:XML in donationList.donation) {                
                
                var point:LatLng = 
                    new LatLng(Number(donation.lat),Number(donation.lon));
                var aGraphic:Marker = new Marker(point);
                
                donationPoints.push(point);
                map.addOverlay(aGraphic);

            }    
            
            startTimer();
        }

        
        public function startTimer():void{
            timer.addEventListener(TimerEvent.TIMER, timerHandler);
            map.setZoom(4);
            timer.start();
        }
        
        public function timerHandler(event:TimerEvent):void {
            map.closeInfoWindow();
            
            map.addEventListener(MapMoveEvent.MOVE_END, showInfo);
            
            if (curPoint >= donationPoints.length){
                curPoint = 0;
            } 
            map.setCenter(donationPoints[curPoint]);
            

        }
        
        public function showInfo(event:MapMoveEvent):void{
            curInfo = donationList.donation.name[curPoint];
            var infoContent:InfoWindowOptions = 
                  new InfoWindowOptions({title: curInfo, content: ""})
                  
            map.openInfoWindow(donationPoints[curPoint], infoContent);
            
            map.removeEventListener(MapMoveEvent.MOVE_END,showInfo);        
            curPoint++;
                    
        }
        
        public function stopTimer():void{
            timer.stop();
            map.setCenter(epicenter);
        }
      
        ]]>
    </mx:Script>

    <mx:Canvas width="450" height="300">
        <mx:UIComponent id="mapContainer" width="100%" height="100%" 
                        initialize="startMap(event)"
                        resize="onResized(event)">
        </mx:UIComponent>
        <mx:Button x="20" y="10" label="Stop" click="stopTimer()"/>
    </mx:Canvas>
    
</mx:Application>