/*
Copyright (c) 2009 Yahoo! Inc.  All rights reserved.  
The copyrights embodied in the content of this file are licensed under the BSD (revised) open source license
*/
package
{
	import com.yahoo.astra.animation.Animation;
	import com.yahoo.astra.animation.AnimationEvent;
	
	import fl.transitions.easing.Back;
	
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;

	/**
	 * Demonstrates how to use the Animation utility to manipulated some text.
	 * 
	 * Document Class for AnimateText.fla
	 * 
	 * @author Josh Tynjala
	 */
	public class AnimateText extends Sprite
	{
		
	//--------------------------------------
	//  Static Properties
	//--------------------------------------
	
		/**
		 * @private
		 * The message that will be displayed using animation.
		 */
		private static const MESSAGE:String = "YAHOO!";
	
	//--------------------------------------
	//  Constructor
	//--------------------------------------
		
		/**
		 * Constructor
		 */
		public function AnimateText()
		{
			super();
			
			//some simple stage initialization
			if(this.stage)
			{
				this.stage.scaleMode = StageScaleMode.NO_SCALE;
				this.stage.align = StageAlign.TOP_LEFT;
			}
			
			//hide the reset button (already created on stage)
			this.resetButton.visible = false;
			//show the hand cursor using buttonMode
			this.resetButton.buttonMode = true;
			//listen for the click event so that we can reset the animation
			this.resetButton.addEventListener(MouseEvent.CLICK, resetButtonClickHandler);
			
			var xPosition:Number = 60;
			var yPosition:Number = 15;
			var messageLength:int = MESSAGE.length;
			for(var i:int = 0; i < messageLength; i++)
			{	
				//create a separate text field for each letter in the message
				var letter:TextField = new TextField();
				letter.autoSize = TextFieldAutoSize.LEFT;
				
				//since we're tweening the alpha, we have to embed the font.
				//the font is defined in the related FLA file.
				letter.embedFonts = true;
				letter.defaultTextFormat = new TextFormat("Arial Black", 40, 0xffffff);
				letter.text = MESSAGE.charAt(i);
				
				//we don't want the user selecting this text
				letter.selectable = false;
				
				//hide the letter for now
				letter.alpha = 0;
				
				this.addChild(letter);
				
				//initialize the position
				letter.x = xPosition;
				letter.y = yPosition;
				xPosition += letter.textWidth;
				
				this._letters.push(letter);
			}
			
			//display the first letter
			this.showNextLetter();
		}
		
	//--------------------------------------
	//  Properties
	//--------------------------------------
	
		/**
		 * @private
		 * A button to reset the animation and play it again.
		 * 
		 * Defined on stage in the FLA file.
		 */
		public var resetButton:MovieClip;
		
		/**
		 * @private
		 * Storage for the letter TextFields.
		 */
		private var _letters:Array = [];
		
		/**
		 * @private
		 * The index of the current letter that is being displayed.
		 */
		private var _messageIndex:int = 0;
		
	//--------------------------------------
	//  Private Methods
	//--------------------------------------
	
		/**
		 * @private
		 * Display one of the letters in the message.
		 */
		private function showNextLetter():void
		{
			//grab the current letter
			var letter:TextField = TextField(this._letters[this._messageIndex]);
			
			//in addition to fading each letter's alpha in, we also want it to grow
			//and stay centered. we'll use the bounds of the letter to adjust the x
			//and y values while the scaleX and scaleY values are changed
			var letterBounds:Rectangle = letter.getBounds(this);
			letter.scaleX = letter.scaleY = 0.1;
			
			//center it based on the smaller scale
			letter.x = letterBounds.x + (letterBounds.width - letter.width) / 2;
			letter.y = letterBounds.y + (letterBounds.height - letter.height) / 2;
			
			//over 400 milliseconds, adjust the alpha, scaleX, scaleY, x, and y values
			var letterAnimation:Animation = Animation.create(letter, 400, {alpha: 1, scaleX: 1, scaleY: 1, x: letterBounds.x, y: letterBounds.y});
			//set an easing equation to ease out the animation
			letterAnimation.easingFunction = Back.easeOut;
			
			//listen for the complete event so that we can show the following letter
			letterAnimation.addEventListener(AnimationEvent.COMPLETE, letterCompleteHandler);	
		}
		
	//--------------------------------------
	//  Private Event Handlers
	//--------------------------------------
	
		/**
		 * @private
		 * When a letter finishes displaying, move on to the next
		 * or show the reset button.
		 */
		private function letterCompleteHandler(event:AnimationEvent):void
		{
			this._messageIndex++;
			if(this._messageIndex < MESSAGE.length)
			{
				//go to the next letter if another exists
				this.showNextLetter();
			}
			else
			{
				//if we've reached the end of the letter animations,
				//fade in the reset button
				this.resetButton.visible = true;
				this.resetButton.alpha = 0;
				Animation.create(this.resetButton, 150, {alpha: 1}, true, true);
			}
		}
		
		/**
		 * @private
		 * When the reset button is clicked, hide it and restart the letter
		 * animations from the beginning.
		 */
		private function resetButtonClickHandler(event:MouseEvent):void
		{
			//hide the reset button
			this.resetButton.visible = false;
			
			//hide each of the letters so that we can show them again
			var messageLength:int = MESSAGE.length;
			for(var i:int = 0; i < messageLength; i++)
			{	
				var letter:TextField = TextField(this._letters[i]);
				letter.alpha = 0;
			}
			
			//reset the message index
			this._messageIndex = 0;
			
			//show the first letter
			this.showNextLetter();
		}
		
	}
}