/*
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 fl.controls.Button;
	import fl.controls.LabelButton;
	import fl.controls.TextArea;
	import fl.controls.TextInput;

	import com.adobe.as3Validators.as3DataValidation;
	import com.yahoo.astra.containers.formClasses.FormItem;
	import com.yahoo.astra.containers.formClasses.FormLayoutStyle;
	import com.yahoo.astra.events.FormDataManagerEvent;
	import com.yahoo.astra.fl.utils.FlValueParser;
	import com.yahoo.astra.layout.LayoutContainer;
	import com.yahoo.astra.layout.modes.BoxLayout;
	import com.yahoo.astra.managers.FormDataManager;

	import flash.display.DisplayObject;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.TextFormat;	

	/**
	 * @author kayoh
	 */
	public class UsingFormItems extends Sprite {

		public function UsingFormItems() {
			initUI();
			addIntoFormItems();
		}

		private var nameInput : TextInput;
		private var emailInput : TextInput;
		private var addressInput_line_1 : TextInput;
		private var addressInput_line_2 : TextInput;
		private var commentInput : TextArea;
		private var dataResult : TextArea;
		private var submitButton : Button;
		private var labelTextFormat : TextFormat;

		private var manager : FormDataManager;

		//Init input forms
		private function initUI() : void {
			
			labelTextFormat = new TextFormat("_typewriter", 11, 0x333333);
			
			nameInput = new TextInput();
			nameInput.setStyle("textFormat", labelTextFormat);
			nameInput.width = 200;
			
			emailInput = new TextInput();
			emailInput.setStyle("textFormat", labelTextFormat);
			emailInput.width = 200;
			
			addressInput_line_1 = new TextInput();
			addressInput_line_2 = new TextInput();
			addressInput_line_1.setStyle("textFormat", labelTextFormat);
			addressInput_line_2.setStyle("textFormat", labelTextFormat);
			addressInput_line_1.width = 200;
			addressInput_line_2.width = 200;
			
			commentInput = new TextArea();
			commentInput.setStyle("textFormat", labelTextFormat);
			commentInput.width = 200;
			commentInput.height = 100;
			
			submitButton = new Button();
			submitButton.label = "SUBMIT";
			submitButton.setStyle("textFormat", labelTextFormat);
			
			
			dataResult = new TextArea();
			dataResult.setSize(200, 200);
			dataResult.x = 330;
			dataResult.y = 30;
			this.addChild(dataResult);
		}

		private function addIntoFormItems() : void {
			
			/*
			 * Setting FormItems.
			 */

			var nameFormItem : FormItem = new FormItem("Name", nameInput);
			nameFormItem.skin = new graySkin();
			nameFormItem.indicatorLocation = FormLayoutStyle.INDICATOR_RIGHT;
			nameFormItem.labelTextFormat = labelTextFormat;
			nameFormItem.requiredIndicator = new customReqIndicator();
			nameFormItem.required = true;
			nameFormItem.showErrorMessageBox = true;
			nameFormItem.labelWidth = 60;
			
			var addressFormItem : FormItem = new FormItem("Address", addressInput_line_1, addressInput_line_2);
			addressFormItem.skin = new graySkin();
			addressFormItem.itemAlign = FormLayoutStyle.VERTICAL;
			addressFormItem.itemVerticalGap = 6;
			addressFormItem.labelTextFormat = labelTextFormat;
			addressFormItem.labelWidth = 60;
						
			var emailFormItem : FormItem = new FormItem("Email", emailInput);
			emailFormItem.skin = new graySkin();
			emailFormItem.labelTextFormat = labelTextFormat;
			emailFormItem.indicatorLocation = FormLayoutStyle.INDICATOR_RIGHT;
			emailFormItem.requiredIndicator = new customReqIndicator();
			emailFormItem.required = true;
			emailFormItem.showErrorMessageBox = true;
			emailFormItem.showErrorMessageText = true;
			emailFormItem.instructionTextFormat = new TextFormat("_typewriter", 10, 0x494033);
			emailFormItem.instructionText = "We <b>won't</b> save your email.";
			emailFormItem.errorString = "uh-oh.";
			emailFormItem.labelWidth = 60;
			
			
			var msgFormItem : FormItem = new FormItem("Message", commentInput);
			msgFormItem.skin = new graySkin();
			msgFormItem.labelTextFormat = labelTextFormat;
			msgFormItem.labelWidth = 60;
			
			var submitButtonItem : FormItem = new FormItem("", submitButton);
			submitButtonItem.labelWidth = 60;
			
			/*
			 * We'll put the formItems into LayoutContainer for convinience of alignment.
			 * You can add formItems on Stage or any DisplayObjectContainer(Sprite, MovieClip...) instead of the LayoutContainer as you need.
			 */
			var box : BoxLayout = new BoxLayout();
			box.direction = "vertical";
			box.verticalGap = 10;
			
			var itemContainer : LayoutContainer = new LayoutContainer(box);	
			itemContainer.autoMask = false;
			itemContainer.x = itemContainer.y = 30;
			
			
			itemContainer.addChild(nameFormItem);
			itemContainer.addChild(addressFormItem);
			itemContainer.addChild(emailFormItem);
			itemContainer.addChild(msgFormItem);
			itemContainer.addChild(submitButtonItem);
			
			this.addChild(itemContainer);
			
			/*
			 * Init FormDataManager
			 */
			manager = new FormDataManager(FlValueParser);
			manager.functionValidationPassed = handlerValidationPassed;
			manager.functionValidationFailed = handlerValidationFailed;
			manager.errorString = "required field or invalid input";
			
			/*
			 * Add trigger to call FormDataManager.collectData()
			 */
			manager.addTrigger(submitButton, handlerDataCollectionSuccess, handlerDataCollectionFail);	
			
			/*
			 * Define data for FormDataManager.
			 */	
			var validator : as3DataValidation = new as3DataValidation();
			manager.dataSource = [{id:"name", source:nameInput, validator:validator.isNotEmpty, required:true, eventTargetObj:nameFormItem},
			{id:"address_1", source:addressInput_line_1},
			{id:"address_2", source:addressInput_line_2},
			{id:"email", source:emailInput, validator:validator.isEmail, required:true, eventTargetObj:emailFormItem},
			{id:"msg", source:commentInput}];
		}

		
		//-----------------------------------------
		// Event handlers
		//-----------------------------------------
		private function handlerValidationPassed(e : FormDataManagerEvent) : void {
			if(e.target is FormItem) {
				// Let's stop the indicator movieClip.
				var checkBox : DisplayObject = (e.target as FormItem).requiredIndicator;
				if(checkBox is MovieClip) { 
					checkBox["triangleMC"].gotoAndStop(1);
					checkBox.alpha = .3;
				}
				// Or, you can just hide the requiredIndicator : (e.target as FormItem).requiredIndicator.visible = false;
			}
		}

		private function handlerValidationFailed(e : FormDataManagerEvent) : void {
			if(e.target is FormItem) {
				var checkBox : DisplayObject = (e.target as FormItem).requiredIndicator;
				if(checkBox is MovieClip) { 
					checkBox["triangleMC"].gotoAndPlay(1);
					checkBox.alpha = 1;
				}
			}
			// Or, you can just show the requiredIndicator : (e.target as FormItem).requiredIndicator.visible = true;
		}

		private function handlerDataCollectionSuccess(e : FormDataManagerEvent) : void {
			manager.removeTrigger(submitButton);
			submitButton.enabled = false;
			
			dataResult.text = ""; 
			dataResult.appendText("*** SUCCESS ***\n");
			for (var i : String in FormDataManager.collectedData) {
				dataResult.appendText(i + " : " + FormDataManager.collectedData[i] + "\n") ;
			}
		}	

		private function handlerDataCollectionFail(e : FormDataManagerEvent) : void {
			dataResult.text = ""; 
			dataResult.appendText("*** ERROR ***\n");
			for (var i : String in FormDataManager.failedData) {
				dataResult.appendText(i + " : " + FormDataManager.failedData[i] + "\n") ;
			}
		}
	}
}