<?xml version="1.0" encoding="utf-8"?>
<viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"
    			   xmlns:s="library://ns.adobe.com/flex/spark"
				   xmlns:mx="library://ns.adobe.com/flex/mx"
				   xmlns:ShowTyphoon="widgets.ShowTyphoon.*"
				   xmlns:viewer="com.esri.viewer.*"
				   widgetConfigLoaded="init()" xmlns:esri="http://www.esri.com/2008/ags">
	
	<viewer:states>
		<s:State name="tflist"/>
		<s:State name="tftrail"/>
	</viewer:states>
	
	<viewer:transitions>
		<s:Transition autoReverse="true" toState="*">
			<s:Fade targets="{[data1, data2]}"/>
		</s:Transition>
	</viewer:transitions>
	
	<fx:Script>
		<![CDATA[
			import com.esri.ags.Graphic;
			import com.esri.ags.SpatialReference;
			import com.esri.ags.geometry.Geometry;
			import com.esri.ags.geometry.MapPoint;
			import com.esri.ags.geometry.Polyline;
			import com.esri.ags.layers.GraphicsLayer;
			import com.esri.ags.symbols.SimpleLineSymbol;
			import com.esri.ags.symbols.SimpleMarkerSymbol;
			import com.esri.viewer.ViewerContainer;
			
			import mx.collections.ArrayCollection;
			import mx.controls.DataGrid;
			
			import spark.primitives.Line;
			
			private var graphicsLayer:GraphicsLayer = new GraphicsLayer;
			private var timer:Timer;
			private var polyline:Polyline;
			private var graphic1:Graphic;
			private var graphic2:Graphic;
			private var tfcoordinates:Array=new Array;
			
			private var tfcoordinates01:Array=
				[new MapPoint(122.605,27.675,new SpatialReference(5326)),
					new MapPoint(122.505,27.805,new SpatialReference(5326)),
					new MapPoint(122.405,28.005,new SpatialReference(5326)),
					new MapPoint(122.305,28.205,new SpatialReference(5326)),
					new MapPoint(122.205,28.505,new SpatialReference(5326)),
					new MapPoint(122.105,28.705,new SpatialReference(5326))
				];
			
			private var tfcoordinatesinfo01:ArrayCollection=new ArrayCollection([
				{time:"2010-09-01 17时",latlon:"122.605/27.675",windpower:"5"},				
				{time:"2010-09-01 18时",latlon:"122.505/27.805",windpower:"6"},
				{time:"2010-09-01 19时",latlon:"122.405/28.005",windpower:"7"},
				{time:"2010-09-01 20时",latlon:"122.305/28.205",windpower:"8"},
				{time:"2010-09-01 21时",latlon:"122.205/28.505",windpower:"9"},
				{time:"2010-09-01 22时",latlon:"122.105/28.705",windpower:"6"}
			]);
			
			private var tfcoordinates02:Array=
				[new MapPoint(122.705,27.675,new SpatialReference(5326)),
					new MapPoint(122.605,28.805,new SpatialReference(5326)),
					new MapPoint(122.505,29.005,new SpatialReference(5326)),
					new MapPoint(122.405,29.205,new SpatialReference(5326)),
					new MapPoint(122.305,29.505,new SpatialReference(5326)),
					new MapPoint(122.205,29.705,new SpatialReference(5326))
				];
			
			private var tfcoordinatesinfo02:ArrayCollection=new ArrayCollection([
				{time:"2010-09-01 17时",latlon:"122.705/27.675",windpower:"5"},				
				{time:"2010-09-01 18时",latlon:"122.605/28.805",windpower:"6"},
				{time:"2010-09-01 19时",latlon:"122.505/29.005",windpower:"7"},
				{time:"2010-09-01 20时",latlon:"122.405/29.205",windpower:"8"},
				{time:"2010-09-01 21时",latlon:"122.305/29.505",windpower:"9"},
				{time:"2010-09-01 22时",latlon:"122.205/29.705",windpower:"6"}				
			]);
			
			private var tfcoordinates03:Array=
				[new MapPoint(121.705,27.675,new SpatialReference(5326)),
					new MapPoint(121.605,28.805,new SpatialReference(5326)),
					new MapPoint(121.505,29.005,new SpatialReference(5326)),
					new MapPoint(121.405,29.205,new SpatialReference(5326)),
					new MapPoint(121.305,29.505,new SpatialReference(5326)),
					new MapPoint(121.205,29.705,new SpatialReference(5326))
				];
			private var tfcoordinatesinfo03:ArrayCollection=new ArrayCollection([
				{time:"2011-09-01 17时",latlon:"121.705/27.675",windpower:"5"},
				{time:"2011-09-01 18时",latlon:"121.605/28.805",windpower:"6"},
				{time:"2011-09-01 19时",latlon:"121.505/29.005",windpower:"7"},
				{time:"2011-09-01 20时",latlon:"121.405/29.205",windpower:"8"},
				{time:"2011-09-01 21时",latlon:"121.305/29.505",windpower:"9"},
				{time:"2011-09-01 22时",latlon:"121.205/29.705",windpower:"6"}
			]);
			
			private var zyttfcoordinates:Array=				
				[new MapPoint(121.905,28.805,new SpatialReference(5326)),
				new MapPoint(121.805,28.905,new SpatialReference(5326)),
				new MapPoint(121.705,29.005,new SpatialReference(5326))
			];
			
			private var zyttffcoordinatesinfo:ArrayCollection = new ArrayCollection([
				{time:"2011-09-01 23时",latlon:"121.905/28.805",windpower:"5"},
				{time:"2011-09-01 24时",latlon:"121.805/28.905",windpower:"4"},
				{time:"2011-09-02 01时",latlon:"121.705/29.005",windpower:"3"}
			]);
			
			private var gdtfcoordinates:Array=				
				[new MapPoint(121.985,28.875,new SpatialReference(5326)),
					new MapPoint(121.835,28.805,new SpatialReference(5326)),
					new MapPoint(121.755,29.005,new SpatialReference(5326))
				];
			
			private var gdtffcoordinatesinfo:ArrayCollection = new ArrayCollection([
				{time:"2011-09-01 23时",latlon:"121.985/28.875",windpower:"5"},
				{time:"2011-09-01 24时",latlon:"121.835/28.805",windpower:"4"},
				{time:"2011-09-01 01时",latlon:"121.755/29.005",windpower:"3"}
			]);
			
			[Bindable]
			private var tflist:ArrayCollection = new ArrayCollection([
				{Number:"1101",ChineseName:"米雷",EnglishName:"milei"},{Number:"1102",ChineseName:"褐虎",EnglishName:"hehu"},{Number:"1103",ChineseName:"马鞍",EnglishName:"maan"}
			]);
			
			[Bindable]
			private var tfcoordinatesinfo:ArrayCollection = new ArrayCollection();
			[Bindable]
			private var tffcoordinatesinfo:ArrayCollection = new ArrayCollection();
			
			private const ICON_URL:String = "assets/images/";
			private var tfl:String;
			private var tft:String;
			
			private function init():void
			{
				wTemplate.addTitlebarButton(ICON_URL + "i_searchgraphical.png", tfl, showTFList);
				wTemplate.addTitlebarButton(ICON_URL + "i_searchtext.png", tft, showTFTrail);
			}
			
			private function defineTf(event:MouseEvent):void{
				if(dg1.selectedItem == null){
					return;
				}
				switch(dg1.selectedItem.ChineseName){
					case "米雷":
						this.currentState="tftrail";
						tfcoordinatesinfo=tfcoordinatesinfo01;
						tfcoordinates=tfcoordinates01;
						tflabel.text+="米雷";
						break;
					case "褐虎":
						this.currentState="tftrail";
						tfcoordinatesinfo=tfcoordinatesinfo02;
						tfcoordinates=tfcoordinates02;
						tflabel.text+="褐虎";
						break;
					case "马鞍":
						this.currentState="tftrail";
						tfcoordinatesinfo=tfcoordinatesinfo03;
						tfcoordinates=tfcoordinates03;
						tflabel.text+="马鞍";
						break;
					default:
						break;
				}		
			}
			
			private function showTFList():void
			{
				this.currentState = "tflist";
				dg1.selectedItem = null;
				tflabel.text="台风:  ";
				map.infoWindow.hide();
				graphicsLayer.clear();
				timer1.stop();
				tfindex = 0;
				stoptf.enabled = false;
				pretf.enabled = false;
				nexttf.enabled = false;
				dg2.enabled = false;
			}
			
			private function showTFTrail():void
			{
				this.currentState = "tftrail";				
			}
			
			private function widgetClosedHandler():void{
				timer1.stop();
				graphicsLayer.clear();
				map.infoWindow.hide();
				tfcoordinates = [];
				tfindex = 0;
				dg1.selectedItem = null;
				this.currentState = "tflist";
				tflabel.text = "台风： ";
				stoptf.enabled = false;
				pretf.enabled = false;
				nexttf.enabled = false;
				dg2.enabled = false;
			}
			
			private function widgetOpenedHandler(event:Event):void{

			}
			
			private var tfindex:int = 0;
			private var timer1:Timer = new Timer(800);
			
			private function playTf(event:MouseEvent):void{
				stoptf.enabled = true;
				dg2.enabled = false;
				map.infoWindow.hide();
				polyline= new Polyline();
				timer1.addEventListener(TimerEvent.TIMER,Timer1Method);
				timer1.start();
			}

			private function Timer1Method(event:TimerEvent):void{				
//				trace("------");
				var mps:Array = new Array();
				if(pretf.enabled == true && stoptf.enabled == true){
					tfindex = 0;
				}
				if(tfindex == 0|| tfindex > 5){
				graphicsLayer.clear();
				tfindex = 0;
				pretf.enabled=false;
				nexttf.enabled=false;
				var mpend:MapPoint=tfcoordinates[tfindex] as MapPoint;
				graphic1=new Graphic(mpend,new SimpleMarkerSymbol("circle",6,6));		
				graphicsLayer.add(graphic1);
				map.addLayer(graphicsLayer);
				tfindex++;
				}else if(tfindex > 0&& tfindex < 5){
				var mpstart:MapPoint = tfcoordinates[tfindex-1] as MapPoint;
				mpend = tfcoordinates[tfindex] as MapPoint;
				mps.push(mpstart);
				mps.push(mpend);
				polyline.addPath(mps);
				graphic1=new Graphic(mpend,new SimpleMarkerSymbol("circle",6,6));	
				graphic2=new Graphic(polyline,new SimpleLineSymbol("",0xFF3300,1,2));						
				graphicsLayer.add(graphic1);
				graphicsLayer.add(graphic2);
       			map.addLayer(graphicsLayer);
				tfindex++;
				}else if(tfindex == 5){
				mpstart = tfcoordinates[tfindex-1] as MapPoint;
				mpend = tfcoordinates[tfindex] as MapPoint;
				mps.push(mpstart);
				mps.push(mpend);
				polyline.addPath(mps);
				graphic1=new Graphic(mpend,new SimpleMarkerSymbol("circle",6,6));	
				graphic2=new Graphic(polyline,new SimpleLineSymbol("",0xFF3300,1,2));						
				graphicsLayer.add(graphic1);
				graphicsLayer.add(graphic2);
				map.addLayer(graphicsLayer);
				pretf.enabled=true;
				nexttf.enabled=true;
				dg2.enabled = true;
				timer1.stop();
				tfindex++;
				}
			}				

			private function stopTf(event:MouseEvent):void{
				timer1.stop();				
			}
			
			private function preTf(event:MouseEvent):void{
				if(tfindex == 0){
					tfindex = tfcoordinates.length-1;
				}else if(tfindex > 0&& tfindex < 6){
					tfindex--;			
				}else if(tfindex == 6){
					tfindex-=2;
				}   
					var mpPoint:MapPoint = new MapPoint;
					mpPoint = tfcoordinates[tfindex] as MapPoint;
					map.infoWindow.show(mpPoint);
					map.infoWindow.label = "时间:"+tfcoordinatesinfo[tfindex].time+"\r\n";
					map.infoWindow.label += "经纬度:"+tfcoordinatesinfo[tfindex].latlon+"\r\n";
					map.infoWindow.label += "中心风力():"+tfcoordinatesinfo[tfindex].windpower+"\r\n";
					graphic1=new Graphic(mpPoint,new SimpleMarkerSymbol("circle",5,5));						
					graphicsLayer.add(graphic1);
					map.addLayer(graphicsLayer);	
			}
			
			private function nextTf(event:MouseEvent):void{
				if(tfindex == tfcoordinates.length-1|| tfindex == tfcoordinates.length){
					tfindex = 0;
				}else if(tfindex < tfcoordinates.length-1){
					tfindex++;		
				}
				var mpPoint:MapPoint = new MapPoint;
				mpPoint = tfcoordinates[tfindex] as MapPoint;
				map.infoWindow.show(mpPoint);
				map.infoWindow.label = "时间:"+tfcoordinatesinfo[tfindex].time+"\r\n";
				map.infoWindow.label += "经纬度:"+tfcoordinatesinfo[tfindex].latlon+"\r\n";
				map.infoWindow.label += "中心风力():"+tfcoordinatesinfo[tfindex].windpower+"\r\n";
				graphic1=new Graphic(mpPoint,new SimpleMarkerSymbol("circle",5,5));						
				graphicsLayer.add(graphic1);
				map.addLayer(graphicsLayer);
			}
			
			private function showTfInfoWindow(event:MouseEvent):void{
				var mpPoint:MapPoint = new MapPoint;
				for(var j:int = 0;j<tfcoordinatesinfo.length;j++){
					while(dg2.selectedIndex == j){
						mpPoint = tfcoordinates[j] as MapPoint;	
						var graphic1:Graphic = new Graphic(mpPoint,new SimpleMarkerSymbol("circle",5,5));	
						graphicsLayer.add(graphic1);
						map.addLayer(graphicsLayer);
						map.infoWindow.show(mpPoint);
						map.infoWindow.label = "时间:"+tfcoordinatesinfo[j].time+"\r\n";
						map.infoWindow.label += "经纬度:"+tfcoordinatesinfo[j].latlon+"\r\n";
						map.infoWindow.label += "中心风力():"+tfcoordinatesinfo[j].windpower+"\r\n";
						tfindex = j;
						break;
					}
				}
		    }
			
			private function changeLabel(event:MouseEvent):void{
				playtf.label = "开始";
			}						
			
			private function tfybzyt(event:MouseEvent):void{
				
			}
			
			private function tfybgd(event:MouseEvent):void{
				
			}

		]]>
	</fx:Script>	
	
	<viewer:WidgetTemplate id="wTemplate"  closed="widgetClosedHandler()" open="widgetOpenedHandler(event)">
		<s:VGroup id="data1" width="100%" height="100%" visible="false" visible.tflist="true">
			<s:Label text="台风列表"/>
			<mx:DataGrid id="dg1" dataProvider="{tflist}" click="defineTf(event)"/>
		</s:VGroup>			
		<s:VGroup id="data2" visible="false" visible.tftrail="true">
			<s:HGroup gap="5">				
				<s:Label id="tflabel" text="台风:  " color="red"/>
				<mx:LinkButton id="playtf" label="显示路径" mouseOver="changeLabel(event)" click="playTf(event)"/>
				<mx:LinkButton id="stoptf" label="暂停" click="stopTf(event)" enabled="false"/>
				<mx:LinkButton id="pretf" label="后退" click="preTf(event)" enabled="false"/>
				<mx:LinkButton id="nexttf" label="前进" click="nextTf(event)" enabled="false"/>				
			</s:HGroup> 
			<mx:DataGrid id="dg2" dataProvider="{tfcoordinatesinfo}" visible.tftrail="true" enabled="false" click="showTfInfoWindow(event)"/>
			<s:HGroup gap="5">
				<s:Button id="tfyb1" label="中央台预报" click="tfybzyt(event)"/>
				<s:Button id="tfyb2" label="关岛预报" click="tfybgd(event)"/>
			</s:HGroup>
		</s:VGroup>
	</viewer:WidgetTemplate>
</viewer:BaseWidget>