package tripvisUI.infoboxes
{
	import comp.DateTimePicker;
	
	import flash.events.Event;
	
	import mx.containers.Form;
	import mx.containers.FormItem;
	
	import tripvisModel.TripItem;
	import tripvisModel.TripVisModel;
	import tripvisModel.controllers.BasketController;
	import tripvisModel.controllers.TimelineController;
	import tripvisModel.controllers.TimelineControllerEvent;
	
	import tripvisUI.TripItemColors;
	import tripvisUI.languages.LanguageDirector;


	public class TimelineInfobox extends AbstractVisualisingInfobox
	{
		private var datePickerStart: DateTimePicker;
		private var datePickerEnd: DateTimePicker;
		
		private var _basketController: BasketController;
		
		public function TimelineInfobox(tripItem: TripItem)
		{
			super(tripItem);
		}
		
		override protected function createChildren():void
		{
			super.createChildren();
			
			//scrolltext inkorten
			this.scrolltext.height -= 32;
			
			// we willen een form met daarin 2 elementen: van en tot tijdstippen
			var form: Form = new Form();
			form.percentWidth = 100;
			form.setStyle( "backgroundColor", TripItemColors.getTripItemColor(_tripItem.type) );
			
			var formItemStart: FormItem = new FormItem();
			formItemStart.label = LanguageDirector.instance.language.infoboxFrom + ":";
			
			datePickerStart = new DateTimePicker(); //bovenaan gedefinieerd omdat hij via een event moet knn worden aangepast
			datePickerStart.selectedDate = this._tripItem.timePeriod.startDate; //startDate
			datePickerStart.addEventListener(Event.CHANGE, datePickerStart_change);
			formItemStart.addChild(datePickerStart);
			
			var formItemEnd: FormItem = new FormItem();
			formItemEnd.label = LanguageDirector.instance.language.infoboxTo + ":";
			
			datePickerEnd = new DateTimePicker();
			datePickerEnd.selectedDate = this._tripItem.timePeriod.endDate; //endDate;
			datePickerEnd.addEventListener(Event.CHANGE, datePickerEnd_change);
			formItemEnd.addChild(datePickerEnd);
			
			form.setStyle('backgroundAlpha', 0.5);
			form.setStyle('paddingLeft', 2);
			form.setStyle('paddingRight', 2);
			form.setStyle('paddingTop', 4);
			form.setStyle('paddingBottom', 4);
			
			form.addChild(formItemStart);
			form.addChild(formItemEnd);
			
			this.addChild(form);

			_basketController = TripVisModel.instance.basketController;
			var timelineController: TimelineController = TripVisModel.instance.timelineController;
			timelineController.addEventListener(TimelineControllerEvent.TRIP_ITEM_UPDATED, timelineController_tripItemUpdated);
		}
		
		// Updates komende van de tijdslijn:
		private function timelineController_tripItemUpdated(event: TimelineControllerEvent): void
		{
			// eerst controleren of het aangepaste TripItem wel het TripItem is die wordt weergegeven
			if (event.tripItem == this._tripItem)
			{
				// het enige wat kan ge-update zijn is start en end date:
				datePickerStart.selectedDate = this._tripItem.timePeriod.startDate;
				datePickerEnd.selectedDate = this._tripItem.timePeriod.endDate;
			}
		}		
		
		// Handlers komende van de infobox zelf:
		private function datePickerStart_change(event: Event): void
		{
			var startDate: Date = DateTimePicker(event.currentTarget).selectedDate;
			_basketController.updateTripItemStartDate(this._tripItem, startDate);
		}
		
		private function datePickerEnd_change(event: Event): void
		{
			var endDate: Date = DateTimePicker(event.currentTarget).selectedDate;
			_basketController.updateTripItemEndDate(this._tripItem, endDate);
		}
		

	}
}