package com.dare.vodafone.f1.view {
	
	import com.dare.framework.view.IView;

	import flash.display.Sprite;
	
	import com.dare.vodafone.f1.utils.RaceButton;
	
	import flash.utils.getQualifiedClassName;
	
	import com.dare.vodafone.f1.core.Main;
	import com.dare.vodafone.f1.model.F1Model;
	import com.dare.framework.model.ModelLocator;
	import com.dare.vodafone.f1.utils.TrackingUtil;
	
	import caurina.transitions.Tweener;	

	/**
	 * Displays all the navigation buttons to select the different races
	 * 
	 * @author wijnand.warren
	 */
	public class RaceMainNavView extends Sprite implements IView {
		
		private var buttons:Array;
		private var prevID:int;
		private var f1model:F1Model;
		
		private static var MARGIN:int = 17;
		public static const BOTTOM_MARGIN:int = 65;
		private static var BTTN_WIDTH:Number = 50;
		
		/**
		 * CONSTRUCTOR
		 */
		public function RaceMainNavView() {
			init();
		}
		
		/**
		 * initializes this class
		 */
		private function init():void {
			buttons = new Array();
			prevID = -1;
			f1model = F1Model( ModelLocator.getInstance().getModel(Main.F1_MODEL) );
			this.x = MARGIN;
		}
		
		/**
		 * Called after all necessary data is loaded
		 */
		public function create():void {
			// get race info xml
			var buttonData:XMLList = f1model.localeXML.race;
			
			for (var i : Number = 0;i < buttonData.length(); i++) {
				var bgColor:uint = uint( buttonData.(@id == i).colour );
				var txtColor:uint = 0xffffff;
				var txt:String = buttonData.(@id == i).abbreviation;
				
				var bttn:RaceButton = new RaceButton(i, txt, txtColor, bgColor, txtColor, bgColor, txtColor, bgColor);
				bttn.x = i * BTTN_WIDTH + i;
				buttons.push(bttn);
				addChild(bttn);
			}
			resize();
			activateByID(Number( f1model.activeRace ));
			
			this.y = stage.stageHeight;
			
			// TRACKING
			TrackingUtil.dispatchTrack("home");
		}
		
		/**
		 * Activiates a button based on it's ID, 
		 * deactivates the previous active button
		 * 
		 * @param uid the unique ID for the button
		 */
		public function activateByID(uid:uint):void {
			if(prevID >= 0) {
				RaceButton( buttons[prevID] ).deactivate();
			}
			RaceButton( buttons[uid] ).activate();
			prevID = uid;
		}
		
		/**
		 * Called when the stage is resized
		 */
		public function resize():void {
			this.y = stage.stageHeight - BOTTOM_MARGIN;
			// only resize the width of the buttons
			BTTN_WIDTH = (stage.stageWidth - 2*MARGIN - buttons.length) / buttons.length;
			f1model.raceButtonWidth = BTTN_WIDTH;
			// keep a margin in mind, fixed or percentage?
			for (var i : Number = 0; i < buttons.length; i++) {
				var bttn:RaceButton = RaceButton( buttons[i] );
				bttn.width = BTTN_WIDTH;
				bttn.x = i * BTTN_WIDTH + i;
			}
		}
		
		/**
		 * Shows the buttons
		 */
		public function show() : void {
			visible = true;
			var targetY:Number = stage.stageHeight - BOTTOM_MARGIN;
			Tweener.addTween(this, {y: targetY, time: 15, useFrames: true, transition: "easeInOutCubic"});
		}
		
		/**
		 * Hides the buttons
		 */
		public function hide() : void {
			Tweener.addTween(this, {y: stage.stageHeight, time: 15, useFrames: true, transition: "easeInOutCubic", onComplete: hideComplete});
		}
		
		/**
		 * A string representation of this class
		 */
		override public function toString() : String {
			return getQualifiedClassName( this );
		}
		
		// ============================
		// EVENT HANDLERS
		// ============================
		
		private function hideComplete():void {
			visible = false;
		}
	}
}