<?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:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" 
		 width="400" height="250"
		 creationComplete="group1_creationCompleteHandler(event)"
		 >
	
	<!---
	
	// TypeError: Error #1034: Type Coercion failed: cannot convert mx.states::State@13223d179 to mx.states.State.
	-->
	
	<fx:Script>
		<![CDATA[
			import com.flexcapacitor.controller.Radiate;
			import com.flexcapacitor.events.RadiateEvent;
			import com.flexcapacitor.utils.ClassUtils;
			import com.flexcapacitor.utils.DisplayObjectUtils;
			
			import mx.collections.ArrayCollection;
			import mx.events.FlexEvent;
			import mx.states.AddItems;
			import mx.states.SetProperty;
			
			import spark.components.List;
			import spark.events.IndexChangeEvent;
			import spark.layouts.VerticalLayout;
			
			private var radiate:Radiate = Radiate.instance;
			
			private var target:Object;
			
			// TypeError: Error #1034: Type Coercion failed: cannot convert mx.states::State@13223d179 to mx.states.State.
			private var selectedState:Object;
			private var selectedStateName:String;
			private var usingSkinStates:Boolean;
			private var statesFound:Boolean;
			private var componentStates:Array;
			
			[Bindable]
			public var statesCollection:ArrayCollection;
			[Bindable]
			public var overridesCollection:ArrayCollection;
			[Bindable]
			public var groupsCollection:ArrayCollection;
			
			protected function group1_creationCompleteHandler(event:FlexEvent):void {
				radiate.addEventListener(RadiateEvent.TARGET_CHANGE, targetChangeHandler);
				
				if (radiate.target) {
					updateTarget(radiate.target);
				}
			}
			
			protected function targetChangeHandler(event:RadiateEvent):void {
				updateTarget(event.selectedItem);
				
			}
			
			protected function updateTarget(selectedItem:Object):void {
				// TypeError: Error #1034: Type Coercion failed: cannot convert mx.states::State@13223d179 to mx.states.State.
				// changing to Object type 
				var state:Object;
				
				//if (target==selectedItem) return;
				
				target = selectedItem;
				
				if (!statesCollection) {
					statesCollection = new ArrayCollection();
					overridesCollection = new ArrayCollection();
					groupsCollection = new ArrayCollection();
				}
				
				statesCollection.source = [];
				overridesCollection.source = [];
				groupsCollection.source = [];
				selectedState = null;
				selectedStateName = "";
				componentStates = [];
				usingSkinStates = false;
				statesFound = false;
				
				if (!target) {
					return;
				}
				
				if ("states" in target) {
					componentStates = target.states as Array;
					if ("currentState" in target) {
						selectedStateName = target.currentState;
					}
				}
				
				if ((!componentStates || componentStates.length==0) && "skin" in target && target.skin) {
					componentStates = target.skin.states as Array;
					
					if ("currentState" in target.skin) {
						selectedStateName = target.skin.currentState;
					}
					usingSkinStates = true;
				}
				
				if (componentStates.length>0) {
					statesFound = true;
					statesCollection.source = componentStates;
					
					// TypeError: Error #1034: Type Coercion failed: cannot convert mx.states::State@13223d179 to mx.states.State.
					for each (state in componentStates) {
						if (state.name == selectedStateName) {
							selectedState = state;
							break;
						}
					}
					
					list.selectedItem = selectedState;
					
					updateState(selectedState);
				}
				else {
					
					statesFound = false;
					statesCollection.source = [];
					
				}
				
				if (statesCollection.length) {
					list.validateNow();
					
					if (VerticalLayout(list.layout).rowHeight) {
						list.height = VerticalLayout(list.layout).rowHeight * statesCollection.length;
					}
					else {
						list.height = 80;
					}
				}
				else {
					list.height = 30;
				}
			}
			
			
			protected function list_changeHandler(event:IndexChangeEvent):void {
				var state:Object = list.selectedItem;
				
				if (statesFound && state) {
					updateState(state);
					//dividerGroup.visible = true;
				}
				else {
					//dividerGroup.visible = false;
				}
				
			}
			
			public function updateState(state:Object):void {
				
				if (usingSkinStates) {
					if ("hasState" in target.skin && target.skin.hasState(state.name)) {
						Radiate.setProperty(target.skin, "currentState", state.name);
						//target.skin.currentState = state.name;
					}
				}
				else {
					// ArgumentError: Undefined state 'normal'.
					if ("hasState" in target && target.hasState(state.name)) {
						Radiate.setProperty(target, "currentState", state.name);
						//target.currentState = state.name;
					}
				}
				
				overridesCollection.source = state.overrides;
				groupsCollection.source = state.stateGroups;
			}
			
			public function groupsLabelFunction(item:Object):String {
				var item2:Object = item;
				
				return "";
			}
			
			public function overridesLabelFunction(item:Object):String {
				var addItems:AddItems = item as AddItems;
				var setProperty:SetProperty = item as SetProperty;
				var currentTarget:String;
				var label:String;
				
				if (addItems) {
					label = "Add " + ClassUtils.getClassNameOrID(addItems.items) + " to " + ClassUtils.getClassNameOrID(addItems.destination);
				}
				else if (item is SetProperty) {
					var value:* = setProperty.value;
					currentTarget = setProperty.target ?  ClassUtils.getClassNameOrID(setProperty.target) + "." : "";
					if (setProperty.name.toLowerCase().indexOf("color")!=-1) {
						value = DisplayObjectUtils.getColorInHex(setProperty.value, true);
					}
					label = "Set " + currentTarget + setProperty.name + " to " + value;
				}
				else {
					label = ClassUtils.getClassName(item);
				}
				
				return label;
			}
		]]>
	</fx:Script>
	
	<s:VGroup width="100%" height="100%" paddingLeft="6" paddingRight="6" paddingBottom="6">
		<s:Label text="No states defined" 
				 color="#585858"
				 alpha="1"
				 fontStyle="italic"
				 backgroundColor="#ffffff" 
				 backgroundAlpha="1"
				 visible="{statesCollection.length==0}"
				 includeInLayout="{statesCollection.length==0}"
				 />
		
		<s:List id="list" 
				minHeight="20"
				width="100%" 
				labelField="name" 
				borderAlpha=".2"
				rollOverColor="#ffffff"
				selectionColor="#d8d8d8"
				visible="{statesCollection.length!=0}"
				dataProvider="{statesCollection}"
				change="list_changeHandler(event);"
				verticalScrollPolicy="off"
				>
		</s:List>
		
		<s:Label text="OVERRIDES" 
				 color="#585858"
				 alpha="1"
				 width="100%" 
				 styleName="formItem" 
				 />
		
		<s:Scroller width="100%" height="100%" >
			<s:Group width="100%"  >
				
				<s:Label text="No overrides defined" 
						 color="#585858"
						 alpha="1"
						 fontStyle="italic"
						 backgroundColor="#ffffff" 
						 backgroundAlpha="1"
						 visible="{statesCollection.length==0}"
						 includeInLayout="{statesCollection.length==0}"
						 />
				
				<s:List id="overrides" 
						minHeight="40"
						height="100%"
						width="100%" 
						borderAlpha=".2"
						rollOverColor="#ffffff"
						selectionColor="#d8d8d8"
						visible="{overridesCollection.length!=0}"
						labelFunction="overridesLabelFunction"
						dataProvider="{overridesCollection}"
						change="list_changeHandler(event)"
						>
				</s:List>
			</s:Group>
		</s:Scroller>
		
	</s:VGroup>  
	
	
	
	
</s:Group>