<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:maps="com.google.maps.*" 
	implements="tripvisUI.visualisationtabs.IVisualisationTab">
	
	<mx:Style>
        @font-face {
            src: local("Arial");
            font-family: EmbeddedArial;
        }
    </mx:Style>
    
	<mx:Script>
		<![CDATA[
			import tripvisUI.languages.LanguageDirector;
			import mx.formatters.DateFormatter;
			import tripvisModel.TripVisModel;
			import tripvisModel.controllers.CircleVisController;
			import com.google.maps.LatLngBounds;
			import com.google.maps.LatLng;
			import mx.events.CalendarLayoutChangeEvent;
			import tripvisModel.controllers.CircleVisControllerEvent;
			import com.google.maps.overlays.Marker;
			import com.google.maps.overlays.MarkerOptions;
			import com.google.maps.controls.MapTypeControl;
			import com.google.maps.controls.ZoomControl;
			import tripvisModel.TripItem;
			import tripvisModel.TripItemType;
			import tripvisModel.Coordinates;
			import tripvisModel.SimpleTripItem;
			import mx.collections.ArrayCollection;
		
	      	private var _circleVisController: CircleVisController;
	       	private var _circleOverlay: CircleOverlay;
	       	
	       	private var _markers: ArrayCollection = new ArrayCollection(); // geplaatste markers bijhouden om ze te kunnen wegsmijten
	       
			private var _addListenersOnMapReady: Boolean = false;
			private var _mapReady: Boolean = false;
				    
	    	override protected function createChildren(): void
	    	{
	    		super.createChildren();
	    		
				comboboxTypechooser.dataProvider = CircleType.ALL_TYPES;
				comboboxTypechooser.labelFunction = function(item:Object): String
				{
					return LanguageDirector.instance.language.circlevisShow + " " + (item as CircleType).name;
				};
	    	}
	    	
	    	public function activate(): void
	    	{
	    		if (_mapReady)
	    		{
	    			_circleVisController.addEventListener(CircleVisControllerEvent.DATERANGE_CHANGED, circleVisController_daterangeChanged);
		    		_circleVisController.addEventListener(CircleVisControllerEvent.TIMELINE_CHANGED, circleVisController_timelineChanged);
	    		
	    			updateDateChooser();
					showVisualisation();
	    		}
	    		else
	    		{
	    			_addListenersOnMapReady = true;
	    		}
	
	    	}
	    	
	    	public function deactivate(): void
	    	{	
	    		if (_mapReady)
	    		{
		    		_circleVisController.removeEventListener(CircleVisControllerEvent.DATERANGE_CHANGED, circleVisController_daterangeChanged);
			    	_circleVisController.removeEventListener(CircleVisControllerEvent.TIMELINE_CHANGED, circleVisController_timelineChanged);	
	    		}
	    		else
	    		{
	    			_addListenersOnMapReady = false;
	    		}

	    	}

		     
		    private function onMapReady(event:Event): void
		    {
		        map.addControl(new ZoomControl());
		        map.addControl(new MapTypeControl());
		        map.enableScrollWheelZoom();
			 	map.enableContinuousZoom();
			 	
			 	_circleVisController = TripVisModel.instance.circleVisController;
			 	
			 	if (_addListenersOnMapReady)
			 	{
		    		_circleVisController.addEventListener(CircleVisControllerEvent.DATERANGE_CHANGED, circleVisController_daterangeChanged);
		    		_circleVisController.addEventListener(CircleVisControllerEvent.TIMELINE_CHANGED, circleVisController_timelineChanged);	
			 		_addListenersOnMapReady = false;
			 	}
			 	_mapReady = true;
			    
		    	// de circleOverlay al toevoegen, maar er zal wss nog niets te renderen vallen:
				_circleOverlay = new CircleOverlay();
		        _circleOverlay.circleType = CircleType.DURATION; // nog aan te passen via UI
		        map.addOverlay(_circleOverlay);
		        
		        updateDateChooser();
		    }
		    
		    private function updateDateChooser(): void
		    {
		    	if (_circleVisController.hasDateRange())
		    	{
		    		dateChooser.enabled = true;
		    		dateChooser.selectableRange = {rangeStart : _circleVisController.lowestDate , rangeEnd : _circleVisController.highestDate};
		    		
		    		if ( 	(dateChooser.selectedDate != null)
		    		  	 && (dateChooser.selectedDate.getTime() >= _circleVisController.lowestDate.getTime() && dateChooser.selectedDate.getTime() <= _circleVisController.highestDate.getTime() )
		    			)
		    		{
		    			//showVisualisation();
		    		}
		    		else
		    		{
		    			dateChooser.selectedDate = _circleVisController.lowestDate;
		    			//showVisualisation();
		    		}
		    	}
		    	else
		    	{
		    		dateChooser.enabled = false;
		    	}
		    }
		    
		    private function circleVisController_daterangeChanged(event: CircleVisControllerEvent): void
		    {
		    	updateDateChooser();
		    }
		    
		    private function circleVisController_timelineChanged(event: CircleVisControllerEvent): void
		    {
		    	showVisualisation();
		    }
		    
		    private function dateChooser_change(event: CalendarLayoutChangeEvent): void
		    {
		    	showVisualisation();
		    }
		    
		    private function typechooser_change(event: Event): void
		    {
				showVisualisation();
		    }
		    
		    private function showVisualisation(): void
		    {
		    	labelDay.text = "";
		    	
		    	var selectedDate: Date = dateChooser.selectedDate;
		    	var circleType: CircleType = comboboxTypechooser.selectedItem as CircleType;
		    	
		    	if (selectedDate == null)
		    	{
		    		_circleOverlay.clear();
		    		return;
		    	}
		    		
		    		
		    	if (circleType == null)
		    	{
		    		_circleOverlay.clear();
		    		return;
		    	}
						    	
		    	var tripItems: ArrayCollection = _circleVisController.getTripItems(selectedDate);
		    	
		    	if (tripItems.length == 0)
		    	{
		    		_circleOverlay.clear();
		    		return;
		    	}
	    			
	    		// dag links boven weergeven:
	    		var dateformatter: DateFormatter = new DateFormatter();
	    		dateformatter.formatString = "EEE D MMM YYYY";
	    		labelDay.text = dateformatter.format(selectedDate) + ":";
	    	
	    		// map centeren:
	    		var boundingBox: LatLngBounds = getBoundingBox(tripItems);
				var zoom: Number = map.getBoundsZoomLevel(boundingBox);
				map.setCenter(boundingBox.getCenter(), zoom-3);
				
		        _circleOverlay.tripItems = tripItems;
		        _circleOverlay.circleType = circleType;
		        _circleOverlay.update();
	
		        
		        // eerst vorige markers verwijderen:
		        for each (var prevMarker: Marker in _markers)
		        {
		        	map.removeOverlay(prevMarker);
		        }
		        
		        // nieuwe markers zetten, om over een locatie te kunnen hooveren:
		        for each (var tripItem: TripItem in tripItems)
		        {
		        	var circleDotPlaceholder: CircleDotPlaceholder = new CircleDotPlaceholder(tripItem);
		        	
		        	var markerOptions: MarkerOptions = new MarkerOptions();
		        	markerOptions.icon = circleDotPlaceholder;
					markerOptions.iconAlignment = MarkerOptions.ALIGN_HORIZONTAL_CENTER + MarkerOptions.ALIGN_VERTICAL_CENTER;	
		        	var marker: Marker = new Marker(tripItem.location.getLatLng(), markerOptions);
					map.addOverlay(marker);
					_markers.addItem(marker);
		        }
		        
				
				
	
		    }
		    
	
		    
			private function getBoundingBox(tripItems: ArrayCollection): LatLngBounds
			{
				var firstTripItem: TripItem = tripItems[0];
				var firstLatLng: LatLng = firstTripItem.location.getLatLng();
				var latlngbounds: LatLngBounds = new LatLngBounds(firstLatLng, firstLatLng);
				
				for (var i: uint = 1; i < tripItems.length; i++)
				{
					var tripItem: TripItem = tripItems[i];
					latlngbounds.extend(tripItem.location.getLatLng());
				}
				
				return latlngbounds;
			}

		]]>
	</mx:Script>
	

	<maps:Map 
	    id="map" 
	    key="ABQIAAAARn-9VZzi9b6hoik-_GFUuBRHqkFQ33Y2cju3AGmX5-jY3cJ1bRSDYkX_fwR2r56iIbMCdmcJYm3rNQ"
	    url="http://neat.be/adobe_air_thesis/"
	    language="{LanguageDirector.instance.language.mapGoogleLanguage}"
	    mapevent_mapready="onMapReady(event)"
	    width="100%" height="100%"/>
	<mx:DateChooser id="dateChooser" change="dateChooser_change(event)"
 		right="10" top="34" />
 	
	<mx:ComboBox id="comboboxTypechooser" change="typechooser_change(event)" width="174" right="10" top="222" selectedIndex="0" editable="false"></mx:ComboBox>
	<mx:Label id="labelDay" x="10" y="10" fontWeight="bold" fontSize="14"/>
  
    
</mx:Canvas>