<?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"
		 xmlns:utils="com.flexcapacitor.utils.*" 
		 xmlns:handlers="com.flexcapacitor.handlers.*"
		 xmlns:supportClasses="com.flexcapacitor.effects.supportClasses.*"
		 
		 styleName="constraintStyles"
		 creationComplete="creationCompleteHandler(event)"
		 width="100%"
		 height="100%"
		 >

	<fx:Script>
		<![CDATA[
			import com.flexcapacitor.controller.Radiate;
			import com.flexcapacitor.events.RadiateEvent;
			
			import mx.collections.ArrayList;
			import mx.core.IVisualElement;
			import mx.core.UIComponent;
			import mx.events.FlexEvent;
			
			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 targetBaseline: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;
			
			/**
			 * Select all the text in an input on focus in.
			 * */
			public var selectOnFocusIn:Boolean;
			
			public var radiate:Radiate = Radiate.instance;
			
			protected function creationCompleteHandler(event:FlexEvent):void {
				target = null;
				radiate = Radiate.getInstance();
				radiate.addEventListener(RadiateEvent.TARGET_CHANGE, targetChangeHandler);
				radiate.addEventListener(RadiateEvent.PROPERTY_CHANGED, propertyChangeHandler);
				radiate.addEventListener(RadiateEvent.HISTORY_CHANGE, historyChangeHandler);
				
				if (radiate.targets.length>0) {
					target = radiate.target;
				}
			}
			
			/**
			 * 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;
				targetBaseline = 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);
					targetBaseline = Number(element.baseline);
					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);
					
					// not all changes update the selection 
					// maybe add to system manager 
					// NOTE: This is not the place to do it
					// Should be added as a flag to radiate instance
					if (target.parent) {
						target.parent.addEventListener(FlexEvent.UPDATE_COMPLETE, updateTargetOutline, false, 0, true);
					}
				}*/
				
				updateTargetDimensionsLayout();

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

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

				if (_target) {
					initializeProperties();
				}
				else {
					updateTargetDimensionsLayout();
				}
				
			}

			/**
			 * Updates the 
			 * */
			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;
						}
					}
				}
				
				// not sure of way to validate an IVisualElement
				// 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();
				
			}
			
			/**
			 * Updates the visual components to reflect the current values
			 * */
			public function updateView():void {
				
				// update UI
				updateXProperty();
				updateYProperty();
				
				updateTopConstraint();
				updateBottomConstraint();
				updateLeftConstraint();
				updateRightConstraint();
				
				updateHorizontalCenterConstraint();
				updateVerticalCenterConstraint();
				updateBaselineConstraint();
				
				updateWidthProperty();
				updateHeightProperty();
				
				updateVisibleControls();
				
				
			}
			
			/**
			 * Applies properties when enter key is pressed on text components
			 * */
			protected function applyPropertiesToTargetHandler(event:Event):void {
				var currentTarget:UIComponent = event.currentTarget as UIComponent;
				var textInput:TextInput = event.currentTarget as TextInput;
				var combobox:ComboBox = event.currentTarget as ComboBox;
				var checkbox:CheckBox = event.currentTarget as CheckBox;
				var property:String;
				
				if (!target) return;
				
				if (combobox && combobox.selectedIndex != -1) { // not used
					//TypeUtils.applyProperty(combobox, combobox.selectedItem.name, combobox.selectedItem.label, combobox.selectedItem.type);
				}

				else if (textInput) {
					property = textInput.name.indexOf(":") ? textInput.name.split(":")[0]:textInput.name;
					
					// handle percents
					if (property=="width" && textInput.text.indexOf("%")!=-1) {
						property = "percentWidth";
						textInput.text = textInput.text.split("%")[0];
					}
					else if (property=="height" && textInput.text.indexOf("%")!=-1) {
						property = "percentHeight";
						textInput.text = textInput.text.split("%")[0];
					}
					
					if (textInput.text=="") {
						Radiate.setProperty(DisplayObject(target), property, undefined);
					}
					else {
						Radiate.setProperty(DisplayObject(target), property, textInput.text);
					}
					
				}

				else if (checkbox) {
					var value:Boolean = checkbox.selected;
					property = checkbox.name.indexOf(":") ? checkbox.name.split(":")[0]:checkbox.name;
					Radiate.setProperty(DisplayObject(target), property, value);
				}

				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;
				
				// naming convention is important leftConstraint becomes "left"
				constraint = constraint.split("Constraint")[0];

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

			/**
			 * Convert constraint to property
			 * Note: Setting a constraint to undefined
			 * causes Flex to update the non constraint values
			 * */
			protected function convertFromConstraint(constraint:String):void {
				var focusComponent:UIComponent;
				var enabled:Boolean = false;
				var constraint:String;
				var value:Object;
				
				if (!target) return;

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

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

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

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

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

				// convert from Horizontal Center to X
				if (constraint == HORIZONTAL_CENTER) {
					//value = Object(element.horizontalCenter);
					value = undefined;
					constraint = "horizontalCenter";
					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 = undefined;
					constraint = "baseline";
					baselineText.text = "";
					focusComponent = yText;
				}


				Radiate.setProperty(target, constraint, value);
				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;

				if (!target) return;
				
				// 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 = baselineText;
				}

				// not sure of way to validate an IVisualElement
				//target[constraint] = value;
				Radiate.setProperty(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 = "";
					heightText.prompt = String(element.percentHeight) + "%";
				}
				else {
					
					if ("explicitHeight" in target && target.height==target.explicitHeight) {
						heightText.text = String(target.height);
					}
					else {
						heightText.text = "";
						heightText.prompt = 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 = "";
					widthText.prompt = String(element.percentWidth) + "%";
				}
				else {
					if ("explicitWidth" in target && target.width==target.explicitWidth) {
						widthText.text = String(target.width);
					}
					else {
						widthText.text = "";
						widthText.prompt = 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!=null || element.right!=null 
						|| element.horizontalCenter!=null)) {
					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!=null || element.bottom!=null
						|| element.verticalCenter!=null || element.baseline!=null)) {
					hasConstraints = true;
				}

				return hasConstraints;
			}

			/**
			 * Selects all the text in the text field
			 * */
			protected function selectInputText(event:Event):void {
				if (selectOnFocusIn && event.currentTarget is TextInput) {
					TextInput(event.currentTarget).selectAll();
				}
			}
			
			/**
			 * Sets the top constraint
			 * */
			protected function setTopConstraint(value:Object):void {
				element.top = 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 bottom constraint
			 * */
			protected function setBottomConstraint(value:Object):void {
				element.bottom = value ? value : undefined;
			}

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


			/**
			 * Updates the display with the value of the baseline position
			 * NOTE! This is not implemented or tested
			 * */
			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!=null) {
					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!=null) {
					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!=null) {
					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!=null) {
					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!=null) {
					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!=null) {
						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!=null) {
					verticalCenterText.text = String(verticalCenterValue);

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

			}

			/**
			 * 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;
				bottomConstraint.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;
				
				// update position of preview target
				copyConstraints(constrainedTarget, element, 0);
			}
			
			/**
			 * Updates the preview target
			 * */
			protected function copyConstraints(target:IVisualElement, source:IVisualElement, setValue:Object=null):void {
				setValue = setValue!=null ? 1 : setValue; // this doesn't make sense
				
				// 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;
				
				if (target.top==null 
					&& target.bottom==null 
					&& target.left==null 
					&& target.right==null 
					&& target.horizontalCenter==null 
					&& target.verticalCenter==null 
					&& target.baseline==null) {
					target.visible = false;
				}
				else {
					target.visible = true;
				}
			}

			/**
			 * 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 = "";
				verticalCenterText.text = "";
				horizontalCenterText.text = "";
				baselineText.text = "";
				
				widthText.text = "";
				heightText.text = "";
				
				topConstraint.selected = false;
				leftConstraint.selected = false;
				rightConstraint.selected = false;
				bottomConstraint.selected = false;
				verticalCenterConstraint.selected = false;
				horizontalCenterConstraint.selected = false;
				baselineConstraint.selected = false;
				
				topRule.visible = false;
				leftRule.visible = false;
				rightRule.visible = false;
				bottomRule.visible = false;
				verticalCenterRule.visible = false;
				horizontalCenterRule.visible = false;
				baselineRule.visible = false;
				
			}
			
			/**
			 * Get current target
			 * */
			protected function targetChangeHandler(event:RadiateEvent):void {
				target = event.selectedItem;
			}
			
			/**
			 * Updates the view when a property is changed externally
			 * */
			protected function propertyChangeHandler(event:RadiateEvent):void {
				var properties:Array = event.properties;
				var length:int = event.properties.length;
				
				if (target!=event.selectedItem) {
					target = event.selectedItem;
				}
				
				if (!target) return;
				
				for (var i:int;i<length;i++) {
					if (relevantProperties.indexOf(properties[i])!=-1) {
						updateView();
						break;
					}
				}
			}
			
			protected function historyChangeHandler(event:RadiateEvent):void {
				if (event.newIndex==-1 || !event.historyEventItem) return;
				var properties:Array = event.historyEventItem.properties;
				var length:int = properties ? properties.length : 0;
				
				if (!target) return;
				
				for (var i:int;i<length;i++) {
					if (relevantProperties.indexOf(properties[i])!=-1) {
						updateView();
						break;
					}
				}
			}
			
			private const relevantProperties:Array = [ "width", "height", "percentWidth", "percentHeight", "x",
													"y", "top", "left", "right", "bottom", "verticalCenter",
													"horizontalCenter", "baseline"]
			
		]]>
	</fx:Script>

	<fx:Declarations>
		<!--<handlers:EventHandler eventName="{SearchTextInput.CLEAR_TEXT}"
							   targets="{[
							   topText, 
							   bottomText, 
							   rightText, 
							   leftText, 
							   widthText, 
							   heightText, 
							   xText, 
							   yText,
							   verticalCenterText, 
							   horizontalCenterText, 
							   baselineText]}"
							   keepEvent="true"
							   id="clearTextHandler">
			<handlers:eventStart>
				<![CDATA[
				applyPropertiesToTargetHandler(event.currentTarget.event);
				]]>
			</handlers:eventStart>
		</handlers:EventHandler>-->
		
		<handlers:EventHandler eventName="{FlexEvent.ENTER}"
							   targets="{[
							   topText, 
							   bottomText, 
							   rightText, 
							   leftText, 
							   widthText, 
							   heightText, 
							   xText, 
							   yText,
							   verticalCenterText, 
							   horizontalCenterText, 
							   baselineText]}"
							   keepEvent="true"
							   id="enterHandler">
			<handlers:eventStart>
				<![CDATA[
				applyPropertiesToTargetHandler(event.currentTarget.event);
				]]>
			</handlers:eventStart>
		</handlers:EventHandler>
		
		<!-- FOCUS OUT HANDLER 
		
		named focusOutHandler2 because conflict between UIComponent handler of the same name
		-->
		<handlers:EventHandler eventName="{FocusEvent.FOCUS_OUT}"
							   targets="{[
							   topText, 
							   bottomText, 
							   rightText, 
							   leftText, 
							   widthText, 
							   heightText, 
							   xText, 
							   yText,
							   verticalCenterText, 
							   horizontalCenterText, 
							   baselineText]}"
							   keepEvent="true"
							   id="focusOutHandler2">
			<handlers:eventStart>
				<![CDATA[
				applyPropertiesToTargetHandler(event.currentTarget.event);
				]]>
			</handlers:eventStart>
		</handlers:EventHandler>

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

		
		<handlers:EventHandler eventName="{MouseEvent.CLICK}"
							   targets="{[
							   leftConstraint, 
							   rightConstraint, 
							   bottomConstraint, 
							   topConstraint, 
							   baselineConstraint,
							   horizontalCenterConstraint, 
							   verticalCenterConstraint]}"
							   keepEvent="true"
							   id="clickHandler">
			
			<handlers:eventStart>
					<![CDATA[
					constraintHandler(event.currentTarget.event);
					]]>
			</handlers:eventStart>
			
		</handlers:EventHandler>
		
		<s:SolidColorStroke id="stroke1" weight="1" color="#00AA00"/>
		
	</fx:Declarations>
	
	<!-- NAMING CONVENTION IS USED -->
	
	<!-- POSITIONING -->
	<s:Group horizontalCenter="0" y="30" 
			 styleName="constraintStyles">
		<s:TextInput id="widthText" 
					 fontSize="12"
					 styleName="inputStyles"
					 width="70" x="44" y="0"
					 restrict="0-9%"
					 name="width:Number"/>
		<s:TextInput id="heightText"
					 fontSize="12"
					 styleName="inputStyles" 
					 width="70" x="174" y="0"
					 restrict="0-9%"
					 name="height:Number"/>
		<s:TextInput id="xText" 
					 fontSize="12"
					 styleName="inputStyles"
					 width="70" x="44" y="35"
					 restrict="0-9-"
					 name="x:Number"/>
		<s:TextInput id="yText" 
					 fontSize="12"
					 styleName="inputStyles"
					 width="70" x="174" y="35"
					 restrict="0-9-"
					 name="y:Number"/>
		<s:Label text="Height:" 
				 styleName="constraintStyles"
				 x="126" y="7"/>
		<s:Label text="Width:" 
				 styleName="constraintStyles"
				 x="2" y="7"/>
		<s:Label text="X:" 
				 styleName="constraintStyles"
				 x="30" y="42"/>
		<s:Label text="Y:" 
				 styleName="constraintStyles"
				 x="160" y="42"/>
	</s:Group>

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

		<!-- CONSTRAINTS -->
		<s:TextInput id="topText"
					 styleName="inputStyles"
					 width="40" x="205" y="47"
					 restrict="0-9-"
					 name="top:style"/>
		<s:TextInput id="verticalCenterText"
					 styleName="inputStyles"
					 width="40" x="205" y="95"
					 restrict="0-9-"
					 name="verticalCenter:style"/>
		<s:TextInput id="bottomText"
					 styleName="inputStyles"
					 width="40" x="205" y="143"
					 restrict="0-9"
					 name="bottom:style"/>
		<s:TextInput id="baselineText"
					 styleName="inputStyles"
					 width="40" x="205" y="165"
					 restrict="0-9"
					 visible="false"
					 name="baseline:style"/>
		
		<s:TextInput id="rightText"
					 styleName="inputStyles"
					 width="40" x="147" y="189"
					 restrict="0-9"
					 name="right:style"/>
		<s:TextInput id="horizontalCenterText"
					 styleName="inputStyles"
					 width="40" x="99" y="189"
					 restrict="0-9"
					 name="horizontalCenter:style"/>
		<s:TextInput id="leftText"
					 styleName="inputStyles"
					 width="40" x="50" y="189"
					 restrict="0-9"
					 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"
					visible="false"
					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" 
						 visible="false"
						 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="106" alpha=".5">
		<s:stroke>
			<s:SolidColorStroke/>
		</s:stroke>
	</s:Line>
	
	<s:Line left="23.5" right="23.5"
			y="10" alpha=".5">
		<s:stroke>
			<s:SolidColorStroke/>
		</s:stroke>
	</s:Line>-->
	
	<s:Label left="0"
			 y="5"
			 text="Size and Position" 
			 color="#585858"
			 width="100%" 
			 styleName="formItem" 
			 />

	<s:Label text="Constraints" 
			 left="0"
			 y="101"
			 color="#585858"
			 width="100%" 
			 styleName="formItem" 
			 />

	<s:ComboBox id="layoutLayoutComboBox"
				styleName="constraintStyles"
				horizontalCenter="0"
				includeInLayout="false"
				visible="false" width="250" y="346"
				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>