<?xml version="1.0" encoding="utf-8"?>
<!--

Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements.  See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License.  You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

-->
<s:Group xmlns:fc="com.flexcapacitor.controls.*"
		 xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:local="*"
		 xmlns:mx="library://ns.adobe.com/flex/mx"
		 xmlns:s="library://ns.adobe.com/flex/spark"
		 width="100%" 
		 xmlns:utils="com.flexcapacitor.utils.*" 
		 xmlns:handlers="com.flexcapacitor.handlers.*"
		 xmlns:supportClasses="com.flexcapacitor.effects.supportClasses.*"
		 creationComplete="group1_creationCompleteHandler(event)" >

	<fx:Script>
		<![CDATA[
			import com.flexcapacitor.controller.Radiate;
			import com.flexcapacitor.events.RadiateEvent;
			import com.flexcapacitor.utils.InspectorUtils;
			import com.flexcapacitor.utils.TypeUtils;
			
			import mx.collections.ArrayList;
			import mx.core.IVisualElement;
			import mx.core.UIComponent;
			import mx.events.FlexEvent;
			import mx.managers.SystemManager;
			
			import spark.components.Image;
			import spark.components.supportClasses.GroupBase;
			import spark.primitives.BitmapImage;

			public static const BASELINE:String = "baseline";
			public static const BOTTOM:String = "bottom";
			public static const HORIZONTAL_CENTER:String = "horizontalCenter";
			public static const LEFT:String = "left";

			public static const PERCENT_HEIGHT:String = "percentHeight";
			public static const PERCENT_WIDTH:String = "percentWidth";
			public static const RIGHT:String = "right";
			public static const TOP:String = "top";
			public static const VERTICAL_CENTER:String = "verticalCenter";

			public static const X:String = "x";
			public static const Y:String = "y";

			[Bindable]
			public var targetActualHeight:Number;

			[Bindable]
			public var targetActualWidth:Number;

			[Bindable]
			public var targetBottom:Number;

			[Bindable]
			public var targetHeight:Number;

			[Bindable]
			public var targetHorizontal:Number;

			[Bindable]
			public var targetLeft:Number;

			[Bindable]
			public var targetPercentHeight:Number;

			[Bindable]
			public var targetPercentWidth:Number;

			[Bindable]
			public var targetRight:Number;

			[Bindable]
			public var targetTop:Number;

			[Bindable]
			public var targetVertical:Number;

			[Bindable]
			public var targetWidth:Number;

			[Bindable]
			public var targetX:Number;

			[Bindable]
			public var targetY:Number;


			private var _target:DisplayObject;
			private var _visualElement:IVisualElement;
			
			[Bindable]
			public var isVisualElement:Boolean;
			
			/**
			 * Clears the target dimension variables which updates any element
			 * bound to them
			 * */
			public function clearTargetDimensions():void {
				
				if (_target) {
					if (target is SystemManager) {
						target.removeEventListener(Event.RESIZE, updateTargetOutline);
					}
					else {
						_target.removeEventListener(FlexEvent.UPDATE_COMPLETE, updateTargetOutline);
						if (_target.parent) {
							_target.parent.removeEventListener(FlexEvent.UPDATE_COMPLETE, updateTargetOutline);
						}
					}
					InspectorUtils.clearSelection(_target, systemManager);
				}

				targetWidth = undefined;
				targetHeight = undefined;
				targetX = undefined;
				targetY = undefined;

				targetTop = undefined;
				targetBottom = undefined;
				targetLeft = undefined;
				targetRight = undefined;
				targetVertical = undefined;
				targetHorizontal = undefined;
				targetPercentWidth = undefined;
				targetPercentHeight = undefined;
				
			}

			/**
			 * Gets the current properties of the target and updates the properties inspector
			 * with those values
			 * */
			public function initializeProperties():void {
				var bitmap:BitmapImage;
				var image:Image;
				
				if (isVisualElement) {
					constraintsContainer.enabled = true;
					
					// get constraints
					targetTop = Number(element.top);
					targetBottom = Number(element.bottom);
					targetLeft = Number(element.left);
					targetRight = Number(element.right);
					targetVertical = Number(element.verticalCenter);
					targetHorizontal = Number(element.horizontalCenter);
					targetPercentWidth = Number(element.percentWidth);
					targetPercentHeight = Number(element.percentHeight);
				}
				else {
					constraintsContainer.enabled = false;
				}

				if (target.width == 0 || target.height == 0) {

					if (target is BitmapImage) {
						bitmap = BitmapImage(target);
						targetWidth = bitmap.sourceWidth;
						targetHeight = bitmap.sourceHeight;
						targetActualWidth = bitmap.sourceWidth;
						targetActualHeight = bitmap.sourceHeight;
					}
					else if (target is Image) {
						image = Image(target);
						targetWidth = image.sourceWidth;
						targetHeight = image.sourceHeight;
						targetActualWidth = image.sourceWidth;
						targetActualHeight = image.sourceHeight;
					}
				}
				else {
					targetWidth = target.width;
					targetHeight = target.height;
				}

				targetX = target.x;
				targetY = target.y;
				
				if (target is SystemManager) {
					target.addEventListener(Event.RESIZE, updateTargetOutline, false, 0, true);
				}
				else {
					target.addEventListener(FlexEvent.UPDATE_COMPLETE, updateTargetOutline, false, 0, true);
					if (target.parent) {
						target.parent.addEventListener(FlexEvent.UPDATE_COMPLETE, updateTargetOutline, false, 0, true);
					}
				}
				
				updateTargetDimensionsLayout();

			}
			
			public function get target():Object {
				return _target;
			}
			
			public function get element():IVisualElement {
				return _visualElement;
			}

			[Bindable]
			public function set target(value:Object):void {
				
				if (!(value is DisplayObject)) {
					_target = null;
					clearForm();
					clearTargetDimensions();
					return;
				}
				
				clearForm();
				clearTargetDimensions();
				
				_target = value as DisplayObject;
				
				if (value is IVisualElement) {
					isVisualElement = true;
					_visualElement = IVisualElement(value);
				}
				else {
					isVisualElement = false;
					_visualElement = undefined;
				}

				if (value) {
					initializeProperties();
				}
				
				updateTargetDimensionsLayout();
				
			}

			public function update():void {
				updateTargetDimensionsLayout();
			}

			/**
			 * Updates the target dimension layout inspector
			 * */
			public function updateTargetDimensionsLayout():void {

				// check if the layout panel has been created yet
				if (target == null) {
					return;
				}

				// if target is a container we show the layout options
				if (target is GroupBase) {
					var layoutName:String = flash.utils.getQualifiedClassName(GroupBase(target).layout);
					
					for each (var item:Object in ArrayList(layoutLayoutComboBox.dataProvider).source) {
						if (item.label == layoutName) {
							layoutLayoutComboBox.selectedItem = item;
						}
					}
				}
				
				// new values aren't always committed on the same frame 
				if (target.parent is UIComponent) {
					UIComponent(target.parent).validateNow();
				}
				else if (target is UIComponent) {
					UIComponent(target).validateNow();
				}
				
				updateView();
				//callLater(updateView);
				
			}
			
			public function updateView():void {
				
				// update UI
				updateXProperty();
				updateYProperty();
				
				updateTopConstraint();
				updateBottomConstraint();
				updateLeftConstraint();
				updateRightConstraint();
				
				updateHorizontalCenterConstraint();
				updateVerticalCenterConstraint();
				
				updateWidthProperty();
				updateHeightProperty();
				
				updateVisibleControls();
				
				updateTargetOutline();
				
				visibleCheckbox.selected = target.visible;
			}

			protected function applyPropertiesToTargetHandler(event:Event):void {
				if (event.currentTarget is ComboBox && event.currentTarget.selectedIndex != -1) {
					TypeUtils.applyProperty(DisplayObject(target), event.currentTarget.selectedItem.name, event.currentTarget.selectedItem.label, event.currentTarget.selectedItem.type);
				}

				if (event.currentTarget is TextInput) {
					TypeUtils.applyProperty(DisplayObject(target), event.currentTarget.name, event.currentTarget.text);
				}

				if (event.currentTarget is CheckBox) {
					var value:Boolean = event.currentTarget.selected;
					TypeUtils.applyProperty(DisplayObject(target), event.currentTarget.name, value, "Boolean");
				}

				updateTargetDimensionsLayout();
			}


			/**
			 * Handles when a constraint checkbox is enabled or disabled
			 * */
			protected function constraintHandler(event:Event):void {
				var enabled:Boolean = event.currentTarget.selected;
				var constraint:String = event.currentTarget.id;
				
				constraint = constraint.split("Constraint")[0];

				if (isVisualElement) {
					if (enabled) {
						convertToConstraint(constraint);
					}
					else {
						convertFromConstraint(constraint);
					}
				}
			}

			/**
			 * Convert constraint to property
			 * */
			protected function convertFromConstraint(constraint:String):void {
				var focusComponent:UIComponent;
				var enabled:Boolean = false;
				var value:Object;

				// convert Right to X
				if (constraint == RIGHT) {
					element.right = undefined; // relying on flex
					rightText.text = "";
					focusComponent = xText;
				}

				// convert from Left to X
				else if (constraint == LEFT) {
					element.left = undefined;
					leftText.text = "";
					focusComponent = xText;
				}

				// convert from Bottom to Y
				else if (constraint == BOTTOM) {
					element.bottom = undefined;
					bottomText.text = "";
					focusComponent = yText;
				}

				// convert from Top to Y
				if (constraint == TOP) {
					element.top = undefined;
					topText.text = "";
					focusComponent = yText;
				}

				// convert from Vertical Center to Y
				if (constraint == VERTICAL_CENTER) {
					element.verticalCenter = undefined;
					verticalCenterText.text = "";
					focusComponent = yText;
				}

				// convert from Horizontal Center to X
				if (constraint == HORIZONTAL_CENTER) {
					value = Object(element.horizontalCenter);
					element.horizontalCenter = undefined;
					horizontalCenterText.text = "";
					value = String(target.parent.width / 2 - target.width / 2 + Number(value));
					target.x = Number(value);
					focusComponent = xText;
				}

				// convert from Baseline to Y
				if (constraint == BASELINE) {
					element.baseline = undefined;
					value = String(target.y);
					baselineText.text = "";
					focusComponent = yText;
				}


				// not sure of way to validate an IVisualElement
				updateTargetDimensionsLayout();
				callLater(focusComponent.setFocus);
			}

			/**
			 * Convert property value to constraint value
			 * NOTE: Does not take into account all options - could be incorrect
			 * */
			protected function convertToConstraint(constraint:String):void {
				var value:String;
				var enabled:Boolean = true;
				var focusComponent:UIComponent;

				// convert from X to Right
				if (constraint == RIGHT) {
					value = String(Number(target.parent.width) - Number(target.width) - Number(target.x));
					focusComponent = rightText;
				}

				// convert from X to Left
				else if (constraint == LEFT) {
					value = String(target.x);
					focusComponent = leftText;
				}

				// convert from Y to Bottom
				else if (constraint == BOTTOM) {
					value = String(Number(target.parent.height) - Number(target.height) - Number(target.y));
					focusComponent = bottomText;
				}

				// convert from Y to Top
				else if (constraint == TOP) {
					value = String(target.y);
					focusComponent = topText;
				}

				// convert from Y to Vertical Center
				else if (constraint == VERTICAL_CENTER) {
					value = String(target.y - target.parent.height / 2 + target.height / 2);
					focusComponent = verticalCenterText;
				}

				// convert from X to Horizontal Center
				else if (constraint == HORIZONTAL_CENTER) {
					value = String(target.x - target.parent.width / 2 + target.width / 2);
					focusComponent = horizontalCenterText;
				}

				// convert from Y to Baseline
				else if (constraint == BASELINE) {
					value = String(target.y);
					focusComponent = rightText;
				}

				// not sure of way to validate an IVisualElement
				target[constraint] = value;
				updateTargetDimensionsLayout();
				callLater(focusComponent.setFocus);

				// we may need to take into account width and height and percentages
			}

			/**
			 * Displays height value taking into account percent height
			 * */
			protected function displayCorrectHeight():void {
				var isPercentHeight:Boolean;
				
				if (isVisualElement) {
					isPercentHeight = Boolean(element.percentHeight);
				}
				
				if (isPercentHeight) {
					heightText.text = String(element.percentHeight) + "%";
				}
				else {
					heightText.text = String(target.height);
				}
			}

			/**
			 * Displays width value taking into account percent width
			 * */
			protected function displayCorrectWidth():void {
				var isPercentWidth:Boolean;
				
				if (isVisualElement) {
					isPercentWidth = Boolean(element.percentWidth);
				}
				
				if (isPercentWidth) {
					widthText.text = String(element.percentWidth) + "%";
				}
				else {
					widthText.text = String(target.width);
				}
			}

			/**
			 * Casts the value to the correct type
			 * NOTE: May not work for colors
			 * Also supports casting to specific class. use ClassDefinition as type
			 * returns instance of flash.utils.getDefinitionByName(className)
			 * */
			protected function getCorrectType(value:String, type:String):* {
				if (type == "Boolean" && value.toLowerCase() == "false") {
					return false;
				}
				else if (type == "Boolean" && value.toLowerCase() == "true") {
					return true;
				}
				else if (type == "Number") {
					if (value == null || value == "") {
						return undefined
					};
					return Number(value);
				}
				else if (type == "int") {
					if (value == null || value == "") {
						return undefined
					};
					return int(value);
				}
				else if (type == "String") {
					return String(value);
				}
				// TODO: Return color type
				else if (type == "Color") {
					return String(value);
				}
				else if (type == "ClassDefinition") {
					if (value) {
						var ClassDefinition:Class = flash.utils.getDefinitionByName(value) as Class;
						return new ClassDefinition();
					}
					return new Object();
				}
				else {
					return value;
				}
			}

			/**
			 * Returns true if left, right or horizontalCenter is set
			 * */
			protected function get hasHorizontalConstraints():Boolean {
				var hasConstraints:Boolean;

				if (isVisualElement && (element.left || element.right || element.horizontalCenter)) {
					hasConstraints = true;
				}

				return hasConstraints;
			}

			/**
			 * Returns true if top, bottom, verticalCenter or baseline is set
			 * */
			protected function get hasVerticalConstraints():Boolean {
				var hasConstraints:Boolean;

				if (isVisualElement && (element.top || element.bottom || element.verticalCenter || element.baseline)) {
					hasConstraints = true;
				}

				return hasConstraints;
			}

			/**
			 * Selects all the text in the text field
			 * */
			protected function selectInputText(event:Event):void {
				TextInput(event.currentTarget).selectAll();
			}

			/**
			 * Sets the baseline constraint
			 * */
			protected function setBaselineConstraint(value:Object):void {
				element.baseline = value ? value : undefined;
			}

			/**
			 * Sets the bottom constraint
			 * */
			protected function setBottomConstraint(value:Object):void {
				element.bottom = value ? value : undefined;
			}

			/**
			 * Sets the horizontal center constraint
			 * */
			protected function setHorizontalCenterConstraint(value:Object):void {
				element.horizontalCenter = value ? value : undefined;
			}

			/**
			 * Sets the left constraint
			 * */
			protected function setLeftConstraint(value:Object):void {
				element.left = value ? value : undefined;
			}

			/**
			 * Sets the right constraint
			 * */
			protected function setRightConstraint(value:Object):void {
				element.right = value ? value : undefined;
			}

			/**
			 * Sets the top constraint
			 * */
			protected function setTopConstraint(value:Object):void {
				element.top = value ? value : undefined;
			}

			/**
			 * Sets the vertical center constraint
			 * */
			protected function setVerticalCenterConstraint(value:Object):void {
				element.verticalCenter = value ? value : undefined;
			}

			/**
			 * Updates the display with the value of the baseline position
			 * */
			protected function updateBaselineConstraint():void {
				var baselineValue:Object;
				
				if (!isVisualElement) {
					baselineText.text = "";
					return;
				}
				
				baselineValue = element.baseline;
				
				/**
				 * If baseline is set then set Y to nothing
				 * If baseline and bottom are set then set height to nothing
				 * If verticalCenter is set then set baseline to nothing
				 * Otherwise set baseline to nothing
				 * */
				if (baselineValue) {
					baselineText.text = String(baselineValue);

					// baseline is set so do not display Y
					yText.text = "";
				}
				else {
					baselineText.text = "";
				}

			}

			/**
			 * Updates the display with the value of the bottom position
			 * */
			protected function updateBottomConstraint():void {
				var bottomValue:Object;
				
				if (!isVisualElement) {
					bottomText.text = "";
					return;
				}
				
				bottomValue = element.bottom;
				
				/**
				 * If bottom is set then set Y to nothing
				 * If bottom and bottom are set then set height to nothing
				 * If verticalCenter is set then set bottom to nothing
				 * Otherwise set bottom to nothing
				 * */
				if (bottomValue) {
					bottomText.text = String(bottomValue);

					// if top and bottom are set then hide height
					if (element.top) {
						heightText.text = "";
					}

					// bottom is set so do not display Y
					yText.text = "";
				}
				else {
					bottomText.text = "";
				}

			}

			/**
			 * Updates the display with the value of the height
			 * */
			protected function updateHeightProperty():void {
				var isPercentHeight:Boolean;

				/**
				 * If visual element and top is set and bottom is set then do not display height
				 * */
				if (isVisualElement && element.top != null && element.bottom != null) {
					heightText.text = "";
				}
				else {
					displayCorrectHeight();
				}
			}

			/**
			 * Updates the display with the value of the left constraint
			 * */
			protected function updateHorizontalCenterConstraint():void {
				var value:String;
				var horizontalCenterValue:Object;
				
				if (!isVisualElement) {
					horizontalCenterText.text = "";
					return;
				}
				
				horizontalCenterValue = element.horizontalCenter;

				/**
				 * If left is set then set x to nothing
				 * If left and right are set then set width to nothing
				 * If horizontalCenter is set than set left and right to nothing
				 * Otherwise set left to nothing
				 * */
				if (horizontalCenterValue) {
					horizontalCenterText.text = String(horizontalCenterValue);

					// left is set so do not display X
					xText.text = "";
				}
				else {
					horizontalCenterText.text = "";
				}

			}

			/**
			 * Updates the display with the value of the left constraint
			 * */
			protected function updateLeftConstraint():void {
				var value:String;
				var leftValue:Object;
				
				if (!isVisualElement) {
					leftText.text = "";
					return;
				}
				
				leftValue = element.left;

				/**
				 * If left is set then set x to nothing
				 * If left and right are set then set width to nothing
				 * If horizontalCenter is set than set left and right to nothing
				 * Otherwise set left to nothing
				 * */
				if (leftValue) {
					leftText.text = String(leftValue);

					// if left and right are set then hide width
					if (element.right) {
						widthText.text = "";
					}

					// left is set so do not display X
					xText.text = "";
				}
				else {
					leftText.text = "";
				}

			}

			/**
			 * Updates the display with the value of the right position
			 * */
			protected function updateRightConstraint():void {
				var value:String;
				var rightValue:Object;
				
				if (!isVisualElement) {
					rightText.text = "";
					return;
				}
				
				rightValue = element.right;

				/**
				 * If horizontalCenter is set then set right to nothing
				 * If left and right are set then set width to nothing
				 * If horizontalCenter is set than set left and right to nothing
				 * Otherwise set right to nothing
				 * */
				if (rightValue) {
					rightText.text = String(rightValue);

					// if left and right are set then hide width
					if (element.left) {
						widthText.text = "";
					}

					// right is set so do not display X
					xText.text = "";
				}
				else {
					rightText.text = "";
				}

			}

			/**
			 * Updates the display with the value of the top position
			 * */
			protected function updateTopConstraint():void {
				var value:String;
				var topValue:Object;
				
				if (!isVisualElement) {
					topText.text = "";
					return;
				}

				topValue = element.top;

				/**
				 * If top is set then set Y to nothing
				 * If top and bottom are set then set height to nothing
				 * If verticalCenter is set then set top to nothing
				 * Otherwise set top to nothing
				 * */
				if (topValue != null) {
					topText.text = String(topValue);

					// if top and bottom are set then do not display height
					if (element.bottom) {
						heightText.text = "";
					}

					// top is set so do not display Y
					yText.text = "";
				}
				else {
					topText.text = "";
				}

			}

			/**
			 * Updates the display with the value of the vertical center position
			 * */
			protected function updateVerticalCenterConstraint():void {
				var verticalCenterValue:Object;
				
				if (!isVisualElement) {
					verticalCenterText.text = "";
					return;
				}
				
				verticalCenterValue = element.verticalCenter;
				
				if (verticalCenterValue) {
					verticalCenterText.text = String(verticalCenterValue);

					// vertical center is set so do not display Y
					yText.text = "";
				}
				else {
					verticalCenterText.text = "";
				}

			}
			
			/**
			 * Updates the visibility of the outline in the contraint box
			 * */
			public function updateTargetOutline(event:Event=null):void {
				InspectorUtils.drawSelection(target, systemManager);
			}

			/**
			 * Updates the visibility of the rulers and text boxes in the contraints container
			 * and checks or unchecks the constraint checkboxes
			 * */
			protected function updateVisibleControls():void {
				var visible:Boolean = true;

				topConstraint.selected = topRule.visible = topText.visible = (isVisualElement && element.top != null) ? visible : !visible;

				rightConstraint.selected = bottomRule.visible = bottomText.visible = (isVisualElement && element.bottom != null) ? visible : !visible;

				leftConstraint.selected = leftRule.visible = leftText.visible = (isVisualElement && element.left != null) ? visible : !visible;

				rightConstraint.selected = rightRule.visible = rightText.visible = (isVisualElement && element.right != null) ? visible : !visible;

				horizontalCenterConstraint.selected = horizontalCenterRule.visible = horizontalCenterText.visible = (isVisualElement && element.horizontalCenter != null) ? visible : !visible;

				verticalCenterConstraint.selected = verticalCenterRule.visible = verticalCenterText.visible = (isVisualElement && element.verticalCenter != null) ? visible : !visible;

				baselineConstraint.selected = baselineRule.visible = baselineText.visible = (isVisualElement && element.baseline != null) ? visible : !visible;
				
				// this throws an error, element is null, when target is system manager
				// we should disable constraints if not supported
				copyConstraints(constrainedTarget, element, 0);
			}
			
			protected function copyConstraints(target:IVisualElement, source:IVisualElement, setValue:Object=null):void {
				setValue = setValue!=null ? 1 : setValue;
				
				// this throws an error when target is system manager
				// we should disable constraints if not supported
				if (element == null) return; 
				
				target.top = (element.top != null) ? setValue || element.top : undefined;
				
				target.bottom = (element.bottom != null) ? setValue || element.bottom : undefined;
				
				target.left = (element.left != null) ? setValue || element.left : undefined;
				
				target.right = (element.right != null) ? setValue || element.right : undefined;
				
				target.horizontalCenter = (element.horizontalCenter != null) ? setValue || element.horizontalCenter : undefined;
				
				target.verticalCenter = (element.verticalCenter != null) ? setValue || element.verticalCenter : undefined;
				
				target.baseline = (element.baseline != null) ? setValue || element.baseline : undefined;
				
			}

			/**
			 * Updates the display with the value of the width
			 * */
			protected function updateWidthProperty():void {
				var isPercentWidth:Boolean;

				/**
				 * If left is set and right is set then set to nothing
				 * */
				if (isVisualElement && element.left != null && element.right != null) {
					widthText.text = "";
				}
				else {
					displayCorrectWidth();
				}
			}

			/**
			 * Updates the displayed with the value of the X position
			 * */
			protected function updateXProperty():void {

				/**
				 * If horizontalCenter is set then set to nothing
				 * If left is set then set to nothing
				 * If right is set then set to nothing
				 * */
				if (hasHorizontalConstraints) {
					xText.text = "";
				}
				else {
					xText.text = String(target.x);
				}
			}

			/**
			 * Updates the display with the value of the Y position
			 * */
			protected function updateYProperty():void {

				/**
				 * If verticalCenter is set then set to nothing
				 * If top is set then set to nothing
				 * If bottom is set then set to nothing
				 *
				 * if int is 0 will it return false? if (target.top) vs if (target.top!=null)
				 * */
				if (hasVerticalConstraints) {
					// hide Y text
					yText.text = "";
				}
				else {
					yText.text = String(target.y);
				}

			}
			
			public function clearForm():void {
				xText.text = "";
				yText.text = "";
				
				topText.text = "";
				leftText.text = "";
				rightText.text = "";
				bottomText.text = "";
				
				topConstraint.selected = false;
				leftConstraint.selected = false;
				rightConstraint.selected = false;
				bottomConstraint.selected = false;
				
				widthText.text = "";
				heightText.text = "";
				
				xText.text = "";
				xText.text = "";
				xText.text = "";
				xText.text = "";
				xText.text = "";
				xText.text = "";
				xText.text = "";
				
				visibleCheckbox.selected = false;
			}
			
			public var radiate:Radiate = Radiate.instance;
			protected function group1_creationCompleteHandler(event:FlexEvent):void {
				radiate.addEventListener(RadiateEvent.TARGET_CHANGE, targetChangeHandler);
			}
			
			protected function targetChangeHandler(event:RadiateEvent):void {
				target = event.selectedItem;
			}
			
		]]>
	</fx:Script>

	<fx:Declarations>
		<handlers:EventHandler eventName="{FlexEvent.ENTER}"
							   targets="{[
							   topText, 
							   bottomText, 
							   rightText, 
							   leftText, 
							   widthText, 
							   heightText, 
							   xText, 
							   yText,
							   verticalCenterText, 
							   horizontalCenterText, 
							   baselineText]}"
							   keepEvent="true"
							   id="enterHandler">
			<supportClasses:ActionEffect >
				<supportClasses:effectStart>
					<![CDATA[
						applyPropertiesToTargetHandler(enterHandler.event);
						//EffectEvent(event).effectInstance.finish();
					]]>
				</supportClasses:effectStart>
			</supportClasses:ActionEffect>
		</handlers:EventHandler>

		<handlers:EventHandler eventName="{FocusEvent.FOCUS_IN}"
							   targets="{[
							   topText, 
							   bottomText, 
							   rightText, 
							   leftText, 
							   widthText, 
							   heightText, 
							   xText, 
							   yText,
							   verticalCenterText, 
							   horizontalCenterText, 
							   baselineText]}"
							   keepEvent="true"
							   id="focusInEventHandler">
			
			<supportClasses:ActionEffect >
				<supportClasses:effectStart>
					<![CDATA[
					selectInputText(focusInEventHandler.event);
					]]>
				</supportClasses:effectStart>
			</supportClasses:ActionEffect>
		</handlers:EventHandler>

		
		<handlers:EventHandler eventName="{MouseEvent.CLICK}"
							   targets="{[
							   leftConstraint, 
							   rightConstraint, 
							   bottomConstraint, 
							   topConstraint, 
							   baselineConstraint,
							   horizontalCenterConstraint, 
							   verticalCenterConstraint]}"
							   keepEvent="true"
							   id="clickHandler">
			
			<supportClasses:ActionEffect >
				<supportClasses:effectStart>
					<![CDATA[
					constraintHandler(clickHandler.event);
					]]>
				</supportClasses:effectStart>
			</supportClasses:ActionEffect>
			
		</handlers:EventHandler>
		
		<s:SolidColorStroke id="stroke1" weight="1" color="#00AA00"/>
		
	</fx:Declarations>

	<!-- POSITIONING -->
	<s:Group horizontalCenter="0" y="60">
		<s:TextInput id="heightText"
					 width="50" x="154" y="0"
					 name="height:Number"/>
		<s:TextInput id="yText"
					 width="50" x="154" y="35"
					 name="y:Number"/>
		<s:TextInput id="xText"
					 width="50" x="45" y="35"
					 name="x:Number"/>
		<s:TextInput id="widthText"
					 width="50" x="44" y="0"
					 name="width:Number"/>
		<s:RichText text="Height:" x="110" y="7"
							   tabFocusEnabled="false"/>
		<s:RichText text="Width:" x="2" y="7"
							   tabFocusEnabled="false"/>
		<s:RichText text="X:" x="26" y="42"
							   tabFocusEnabled="false"/>
		<s:RichText text="Y:" x="138" y="42"
							   tabFocusEnabled="false"/>
	</s:Group>

	
	<!-- CONSTRAINTS PANEL -->
	<s:BorderContainer id="constraintsContainer" 
					   horizontalCenter="0"
					   y="149"
					   borderVisible="false">

		<!-- CONSTRAINTS -->
		<s:TextInput id="topText"
					 width="40" x="205" y="47"
					 name="top:style"/>
		<s:TextInput id="verticalCenterText"
					 width="40" x="205" y="95"
					 name="verticalCenter:style"/>
		<s:TextInput id="bottomText"
					 width="40" x="205" y="143"
					 name="bottom:style"/>
		<s:TextInput id="baselineText"
					 width="40" x="205" y="165"
					 name="baseline:style"/>
		
		<s:TextInput id="rightText"
					 width="40" x="147" y="189"
					 name="right:style"/>
		<s:TextInput id="horizontalCenterText"
					 width="40" x="99" y="189"
					 name="horizontalCenter:style"/>
		<s:TextInput id="leftText"
					 width="40" x="50" y="189"
					 name="left:style"/>
		
		<s:CheckBox id="leftConstraint"
					toolTip="Left"
					x="64" y="8"/>
		<s:CheckBox id="horizontalCenterConstraint"
					toolTip="Horizontal Center"
					x="114" y="8"/>
		<s:CheckBox id="bottomConstraint"
					toolTip="Bottom"
					x="23" y="145"/>
		<s:CheckBox id="topConstraint"
					toolTip="Top"
					x="23" y="48"/>
		<s:CheckBox id="verticalCenterConstraint"
					toolTip="Vertical Center"
					x="23" y="97"/>
		<s:CheckBox id="rightConstraint"
					toolTip="Right"
					x="162" y="8"/>
		<s:CheckBox id="baselineConstraint" 
					toolTip="Baseline"
					x="23" y="165"/>

		<!-- CONSTRAINTS PANEL BOX -->
		<s:BorderContainer height="150" width="150" 
						   x="44" y="31"
						   borderAlpha=".4">

			<s:BorderContainer borderColor="#9E9E9E"
							   height="98" width="98" 
							   x="25" y="25"
							   borderVisible="true" 
							   borderWeight="2">

				<s:Group id="constrainedTarget" 
						 width="40" height="20">
					
					<s:Rect width="100%" height="100%" 
							x="0" y="0">
						<s:fill>
							<s:SolidColor color="gray"/>
						</s:fill>
					</s:Rect>
					
				</s:Group>
				
			</s:BorderContainer>
			
			<!-- HORIZONTAL -->
			<s:Line id="topRule" 
					  left="0" right="0" 
					  top="25"
					  width="100%"
					  stroke="{stroke1}"
					  visible="false"/>
			<s:Line id="verticalCenterRule"
					  left="0" right="0" 
					  width="100%"
					  verticalCenter="0"
					  stroke="{stroke1}"
					  visible="false"/>
			<s:Line id="bottomRule"
					  left="0" right="0" 
					  bottom="25" 
					  width="100%"
					  stroke="{stroke1}"
					  visible="false"/>
			<s:Line id="baselineRule"
					left="0" right="0" 
					bottom="4" 
					width="100%"
					stroke="{stroke1}"
					visible="false"/>
			
			<!-- VERTICAL -->
			<s:Line id="leftRule"
					  bottom="0" left="25" 
					  top="0"
					  height="100%"
					  stroke="{stroke1}"
					  visible="false"/>
			<s:Line id="horizontalCenterRule"
					  bottom="0" horizontalCenter="0" 
					  top="0"
					  height="100%"
					  stroke="{stroke1}"
					  visible="false"/>
			<s:Line id="rightRule"
					  bottom="0" right="25" 
					  top="0"
					  height="100%"
					  stroke="{stroke1}"
					  visible="false"/>
		</s:BorderContainer>

	</s:BorderContainer>

	<s:Line left="23.5" right="23.5"
			y="136" alpha=".5">
		<s:stroke>
			<s:SolidColorStroke/>
		</s:stroke>
	</s:Line>
	
	<s:Line left="23.5" right="23.5"
			y="40" alpha=".5">
		<s:stroke>
			<s:SolidColorStroke/>
		</s:stroke>
	</s:Line>
	
	<s:Label backgroundColor="#FFFFFF" horizontalCenter="0"
						   text="Size and Position" y="35"/>

	<s:Label backgroundColor="#FFFFFF" horizontalCenter="0"
						   text="Constraints" y="131"/>

	<s:CheckBox id="visibleCheckbox"
				label="Visible" x="10" y="5"
				click="applyPropertiesToTargetHandler(event)"
				name="visible"/>

	<s:ComboBox id="layoutLayoutComboBox"
				horizontalCenter="0"
				visible="false" width="250" y="376"
				change="applyPropertiesToTargetHandler(event)"
				focusOut="applyPropertiesToTargetHandler(event)">
		<s:dataProvider>
			<mx:ArrayList>
				<fx:Object label=""
						   name="layout" type="ClassDefinition"/>
				<fx:Object label="spark.layouts::BasicLayout"
						   name="layout" type="ClassDefinition"/>
				<fx:Object label="spark.layouts::HorizontalLayout"
						   name="layout" type="ClassDefinition"/>
				<fx:Object label="spark.layouts::TileLayout"
						   name="layout" type="ClassDefinition"/>
				<fx:Object label="spark.layouts::VerticalLayout"
						   name="layout" type="ClassDefinition"/>
			</mx:ArrayList>
		</s:dataProvider>
	</s:ComboBox>

</s:Group>