<?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" 
		 xmlns:controls="com.flexcapacitor.controls.*"
		 xmlns:components="com.flexcapacitor.components.*"
		 xmlns:supportClasses="spark.components.supportClasses.*" 
		 xmlns:handlers="com.flexcapacitor.handlers.*" 
		 xmlns:core="com.flexcapacitor.effects.core.*"
		 xmlns:flexiframe="com.google.code.flexiframe.*" 
		 xmlns:views="com.flexcapacitor.views.*"
		 xmlns:panels="com.flexcapacitor.views.panels.*"
		 xmlns:fc="com.flexcapacitor.effects.popup.*"
		 xmlns:ns1="*" 
		 
		 width="400" 
		 height="100%" 
		 creationComplete="creationCompleteHandler(event)" 
		 >
		
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		@namespace controls "com.flexcapacitor.controls.*";
		@namespace inspectors "com.flexcapacitor.inspectors.*";
		@namespace ns1 "*";
		@namespace supportClasses "spark.components.supportClasses.*";
		
		.formItem {
			/* backgroundColor:#e6e6e6; */
			backgroundColor:#a2a2a2;
			backgroundAlpha:.25;
			paddingLeft:6;
			paddingTop:5;
			paddingBottom:3;
			fontSize:10;
			fontWeight:bold;
			textAlpha:.75;
			typographicCase:uppercase;
		}
	</fx:Style>
	
	<fx:Script>
		<![CDATA[
			import com.flexcapacitor.controller.Radiate;
			import com.flexcapacitor.events.RadiateEvent;
			import com.flexcapacitor.model.IDocument;
			import com.flexcapacitor.utils.ClassUtils;
			import com.flexcapacitor.views.IInspector;
			import com.flexcapacitor.views.windows.ContactWindow;
			import com.flexcapacitor.views.windows.SaveBeforeCloseWindow;
			
			import mx.core.UIComponent;
			import mx.events.FlexEvent;
			import mx.events.IndexChangedEvent;
			
			import spark.events.IndexChangeEvent;
			
			
			[Bindable]
			private var radiate:Radiate;
			
			protected function panelsLabelFunction(item:Object):String {
				var name:String = item is Label ? Label(item).text : " • ";
				return name;
			}
			
			protected function list1_changeHandler(event:IndexChangeEvent):void {
				/*var point:Point = panels.layout.getScrollPositionDeltaToElement(event.newIndex +1);
				
				// if going up get the selected item
				if (point && point.y<0) {
					point = panels.layout.getScrollPositionDeltaToElement(event.newIndex);
					scrollMotionPath.valueBy = point.y;
					scrollPanelsAnimation.play();
				}
				else if (point) {
					//panels.layout.verticalScrollPosition = panels.layout.verticalScrollPosition + point.y;
					scrollMotionPath.valueBy = point.y;
					scrollPanelsAnimation.play();
				}
				
				event.preventDefault();*/
			}
			
			protected function closeDocumentIcon_clickHandler():void {
				radiate.closeVisibleDocument();
			}
			
			protected function navigatorContent_changeHandler(event:IndexChangedEvent):void {
				var index:int = event.newIndex;
				var document:IDocument;
				
				document = radiate.getDocumentAtIndex(event.newIndex);
				radiate.setProject(document.project);
				radiate.setDocument(document, true);
				return;
				
				/*
				if (index==1) {
					//Radiate.desetDocuments(true);
					radiate.isPreviewVisible = true;
				}
				else {
					document = NavigatorContent(documentsTagNavigator.getItemAt(0)).getElementAt(0) as DocumentContainer;
					
					if (document) {
						Radiate.setDocuments(document.targetApplication);
						radiate.isPreviewVisible = false;
					}
				}
				*/
			}
			
			protected function creationCompleteHandler(event:FlexEvent):void {
				radiate = Radiate.getInstance();
				
				radiate.documentsTabNavigator = documentsTagNavigator;
				radiate.addEventListener(RadiateEvent.TARGET_CHANGE, targetChange, false, 0, true);
			}
			
			private var previewCreated:Boolean;
			private var initialDocument:Boolean;


			private var navigatorContent:NavigatorContent;
			
			
			protected function documentsTagNavigator_clickHandler(event:MouseEvent):void {
				/*var target:Object = radiate.target;
				var navigatorContent:INavigatorContent = documentsTagNavigator.selectedChild;
				
				if (target && "setFocus" in target) {
					target["setFocus"]();
				}
				
				if (navigatorContent is DisplayObject) {
					var filter:BorderStrokeFilter = new BorderStrokeFilter();
					navigatorContent.filters = [filter];
				}*/
			}
			
			/**
			 * Activate selected inspector and deactivate hidden inspectors
			 * */
			public function activateInspector(viewstack:ViewStack, selectedNavigator:NavigatorContent):void {
				var navigatorItem:NavigatorContent;
				var selectedNavigatorContent:IInspector;
				var navigatorInspector:IInspector;
				
				if (selectedNavigator && selectedNavigator.numElements>0) {
					selectedNavigatorContent = selectedNavigator.getElementAt(0) as IInspector;
				}
				
				var length:int = viewstack.numElements;
				
				// deactivate hidden inspectors
				for (var i:int;i<length;i++) {
					navigatorItem = viewstack.getElementAt(i) as NavigatorContent;
					
					if (navigatorItem && navigatorItem.numElements>0) {
						navigatorInspector = navigatorItem.getElementAt(0) as IInspector;
						
						if (navigatorInspector) {
							navigatorInspector.deactivate();
						}
					}
				}
				
				// activate the current inspector
				if (selectedNavigatorContent) {
					UIComponent(selectedNavigatorContent).validateNow();// make sure everythings created
					selectedNavigatorContent.activate();
				}
			}

			/**
			 * 
			 * This error occured on switching from design view to the home screen
			TypeError: Error #1009: Cannot access a property or method of a null object reference.
				at mx.containers::TabNavigator/keyDownHandler()[E:\dev\4.y\frameworks\projects\mx\src\mx\containers\TabNavigator.as:895]
				 * 
			    override protected function keyDownHandler(event:KeyboardEvent):void
			    {
			        if (focusManager.getFocus() == this) // error here line 895
			        {
			            // Redispatch the event from the TabBar so that it can handle it.
			            tabBar.dispatchEvent(event);
			        }
			    }

			*/
			
			protected function firstViewStack_changeHandler(event:IndexChangedEvent):void {
				activateInspector(firstViewStack, event.relatedObject as NavigatorContent);
			}
			
			protected function secondViewStack_changeHandler(event:IndexChangedEvent):void {
				activateInspector(secondViewStack, event.relatedObject as NavigatorContent);
			}
			
			protected function thirdViewStack_changeHandler(event:IndexChangedEvent):void {				
				activateInspector(thirdViewStack, event.relatedObject as NavigatorContent);
			}
			
			protected function forthViewStack_changeHandler(event:IndexChangedEvent):void {
				activateInspector(forthViewStack, event.relatedObject as NavigatorContent);
			}
			
			protected function firstViewStack_creationCompleteHandler(event:FlexEvent):void {
				activateInspector(firstViewStack, firstViewStack.selectedChild as NavigatorContent);
			}
			
			protected function secondViewStack_creationCompleteHandler(event:FlexEvent):void {
				activateInspector(secondViewStack, secondViewStack.selectedChild as NavigatorContent);
			}
			
			protected function thirdViewStack_creationCompleteHandler(event:FlexEvent):void {
				activateInspector(thirdViewStack, thirdViewStack.selectedChild as NavigatorContent);
			}
			
			protected function forthViewStack_creationCompleteHandler(event:FlexEvent):void {
				activateInspector(forthViewStack, forthViewStack.selectedChild as NavigatorContent);
			}
			
			protected function targetChange(event:RadiateEvent):void {
				var targetNameValue:String = ClassUtils.getClassNameOrID(event.selectedItem);
				
				if (targetNameValue) {
					targetName = targetNameValue;
				}
				else {
					targetName = null;
				}
			}
			
			/**
			 * Name or class name of target
			 * */
			[Bindable]
			public var targetName:String;
		]]>
	</fx:Script>
	
	
	<fx:Declarations>
		
		<!--<s:Animate id="scrollPanelsAnimation" target="{panels.layout}" >
			<s:SimpleMotionPath id="scrollMotionPath" property="verticalScrollPosition" />
		</s:Animate>-->
		
		<!-- FADE IN APPLICATION -->
		<!--<s:Sequence id="fadeIn">
			
			<s:SetAction target="{radiateScroller}" property="alpha" value="0"/>
			
			<s:Fade target="{applicationGroup}" alphaFrom="0" alphaTo="1" duration="0"/>
			
			<s:SetAction target="{radiateScroller}" property="alpha" value="0"/>
			
			<s:Animate target="{applicationGroup}" startDelay="500" >
				<s:SimpleMotionPath valueFrom="0" valueTo="270" property="left" />
			</s:Animate>
			
			<s:SetAction target="{radiateScroller}" property="alpha" value="1"/>
			
			<s:Animate target="{radiateScroller.viewport}" duration="750">
				<s:SimpleMotionPath valueFrom="0" valueTo="1" property="alpha"/>
				<s:SimpleMotionPath valueFrom="{radiateScroller.viewport.contentHeight}" 
									valueTo="0" property="verticalScrollPosition" />
			</s:Animate>
			
		</s:Sequence>-->
		
		<!--<handlers:EventHandler eventName="creationComplete" target="{this}">
			<core:PlayEffect effect="{fadeIn}"/>
		</handlers:EventHandler>-->
		
		
		<!--- show contact popup -->
		<handlers:EventHandler target="{closeDocument}" eventName="click" >
			<fc:OpenPopUp id="openSaveBeforeClosePopUp" 
						  popUpType="{SaveBeforeCloseWindow}" 
						  modalDuration="100" 
						  percentWidth="75"
						  percentHeight="90"
						  width="600"
						  parent="{parentApplication}"/>
		</handlers:EventHandler>
	</fx:Declarations>
	
	
	<s:Group width="100%" height="100%" bottom="35" left="5" right="5">
		
		<s:HGroup id="toolBarGroup" width="100%" height="26" >
			<s:BitmapImage source="{Radii8LibraryToolAssets.DragStripIcon}"/>
			<views:SelectedToolToolBar />
			<s:BitmapImage source="{Radii8LibraryToolAssets.DragStripIcon}"/>
			<views:HistoryToolBar />
			<s:Spacer width="100%"/>
			<views:SizesInspector showRestoreSize="true" height="100%"/>
			<views:ZoomInspector showActualSize="false" height="100%"/>
		</s:HGroup>
	
		<mx:HDividedBox width="100%" height="100%" 
						top="32">
				
			<!-- EXAMPLE RADIATE CONTAINER -->
			<!--<s:Scroller id="radiateScroller" 
						width="300"  
						height="100%"
						left="0"
						top="0" 
						bottom="0">
				
				<s:DataGroup id="panels" width="100%" height="100%" >
					<s:layout>
						<s:VerticalLayout paddingRight="4" variableRowHeight="true"/>
					</s:layout>
					<s:ArrayCollection>-->
						<!--<ns1:Panel width="100%" >
						<s:Button label="hello"/>
						</ns1:Panel>-->
						
						<!-- SELECTION -->
						<!--<s:Label text="SELECTION" width="100%" styleName="formItem"/>
						<inspectors:Selection height="100%" width="100%" />-->
			
			
			<mx:VDividedBox width="350" height="100%">
				<!--<s:layout>
					<s:VerticalLayout gap="0" />
				</s:layout>-->
				
				<!-- TOOLS -->
				<s:VGroup width="100%" height="48" minHeight="48">
					<s:Label text="TOOLS" width="100%" styleName="formItem"/>
					<views:Tools width="100%" height="24"/>
				</s:VGroup>
				
				<!--<s:Spacer height="8"/>-->
				
				<!--<s:TabBar dataProvider="{firstViewStack}" width="100%" height="22"/>-->
				
				<mx:TabNavigator id="firstViewStack" 
								 width="100%"
								 height="100%"
								 clipContent="true"
								 change="firstViewStack_changeHandler(event)"
								 creationComplete="firstViewStack_creationCompleteHandler(event)">
					
					<!-- PROJECT -->
					<s:NavigatorContent label="PROJECTS"  >
						<panels:ProjectInspector width="100%" />
					</s:NavigatorContent>
					
					<!-- COMPONENTS -->
					<s:NavigatorContent label="COMPONENTS">
						<panels:ComponentsInspector height="100%" width="100%" />
					</s:NavigatorContent>
					
					<!-- LAYERS -->
					<s:NavigatorContent label="LAYERS"  >
						<views:LayersInspector width="100%" minHeight="180"/>
					</s:NavigatorContent>
					
					<!-- HISTORY -->
					<s:NavigatorContent label="HISTORY">
						<panels:HistoryInspector id="history" minHeight="100" 
											clearOnTargetChange="false"
											height="100%" width="100%"/>
					</s:NavigatorContent>
					
					<!-- OTHER -->
					<s:NavigatorContent label="OTHERS">
						
						<s:Scroller width="100%"  
									height="100%"
									left="0"
									top="0" 
									bottom="0">
				
						<s:Group id="panels" width="100%" height="100%" >
							<s:layout>
								<s:VerticalLayout paddingRight="4" variableRowHeight="true"/>
							</s:layout>
						
							<!-- BLEND MODES -->
							<!--<s:Label text="BLEND MODE" width="100%" styleName="formItem"/>
							<inspectors:BlendMode height="100%" width="100%" />-->
							
							<!-- SNAPSHOT -->
							<s:Label text="SNAPSHOT" width="100%" styleName="formItem" />
							<views:Snapshot height="100%" width="100%" />
							
							<!-- EDIT DECISION LIST -->
							<s:Label text="CHANGE LOG" width="100%" styleName="formItem"/>
							<views:ChangeHistory minHeight="22" height="100%" width="100%" removeDuplicates="false"/>
							
							
							<!-- SEARCH EXPRESSION -->
							<s:Label text="SEARCH EXPRESSION" width="100%" styleName="formItem"/>
							<views:SearchExpression height="100%" width="100%"/>
							
							<!-- REDRAW REGIONS -->
							<s:Label text="REDRAW REGIONS" width="100%" styleName="formItem"/>
							<views:RedrawRegions width="20" height="20" />
							
							<!-- FRAMERATE -->
							<s:Label text="FRAMERATE" width="100%"
									 styleName="formItem"/>
							<views:FrameRate />
							
							<!-- MEMORY -->
							<s:Label text="MEMORY" width="100%" styleName="formItem"/>
							<views:Memory height="100%" width="100%" 
											   showCurrentlyUsedPlayerMemory="true"/>
							<s:Spacer height="10"/>
						</s:Group>
						</s:Scroller>
					</s:NavigatorContent>
				</mx:TabNavigator>
				
				<mx:TabNavigator id="secondViewStack" 
								 borderStyle="solid"
								 width="100%"
								 height="100%"
								 selectedIndex="0"
								 change="secondViewStack_changeHandler(event)"
								 creationComplete="secondViewStack_creationCompleteHandler(event)">
					
					<!-- DOCUMENTS -->
					<s:NavigatorContent width="100%" height="100%" label="DOCUMENTS">
						<panels:DocumentsInspector height="100%" width="100%"/>
					</s:NavigatorContent>
					
					<!-- LIBRARY -->
					<s:NavigatorContent label="LIBRARY">
						<panels:LibraryInspector minHeight="180" height="100%" width="100%"/>
					</s:NavigatorContent>
					
					<!-- LAYOUT CONSTRAINTS -->
					<s:NavigatorContent label="LAYOUT">
						<s:Scroller width="100%" height="100%">
							<panels:ConstraintsInspector height="100%" width="100%" />
						</s:Scroller>
					</s:NavigatorContent>
					
					<!-- PROPERTIES -->
					<s:NavigatorContent label="PROPERTIES">
						<!-- TODO Convert this into a composite component -->
						<s:HGroup width="100%" verticalAlign="baseline">
							<s:Label width="100%" text="{targetName}" paddingLeft="6" color="#888888"/>
							<s:Spacer width="100%" />
							<mx:LinkBar dataProvider="{forthViewStack}" right="0"/>
						</s:HGroup>
						
						<mx:ViewStack id="forthViewStack" 
										 width="100%"
										 height="100%"
										 minHeight="24"
										 top="28"
										 change="forthViewStack_changeHandler(event)"
										 creationComplete="forthViewStack_creationCompleteHandler(event)">
							
							<!-- DYNAMIC INSPECTOR -->
							<s:NavigatorContent label="COMMON">
								<panels:DynamicComponentInspector width="100%" height="100%"/>
							</s:NavigatorContent>
							
							<!-- PROPERTY INSPECTOR -->
							<s:NavigatorContent label="ALL">
								<panels:PropertyInspector minHeight="180" height="100%" width="100%"/>
							</s:NavigatorContent>
						</mx:ViewStack>
						<!--<mx:TabNavigator id="forthViewStack" 
										 borderStyle="none"
										 width="100%"
										 height="100%"
										 minHeight="24">
						</mx:TabNavigator>-->
					</s:NavigatorContent>
					
					<!-- EVENTS -->
					<s:NavigatorContent label="EVENTS">
						<s:Scroller width="100%" height="100%">
							<panels:Events height="100%" width="100%"/>
						</s:Scroller>
					</s:NavigatorContent>
					
					<!-- EVENT LISTENERS -->
					<!--<s:NavigatorContent label="EVENTS">
						<s:Scroller width="100%" height="100%">
							<inspectors:EventListeners height="100%" width="100%"/>
						</s:Scroller>
					</s:NavigatorContent>-->
					
					<!-- STATES -->
					<s:NavigatorContent label="STATES">
						<s:Scroller width="100%" height="100%">
							<panels:States height="100%" width="100%" />
						</s:Scroller>
					</s:NavigatorContent>
					
					<!-- PROFILING -->
					<s:NavigatorContent width="100%" height="100%" label="PROFILE">
						<panels:Profiling height="100%" width="100%"/>
					</s:NavigatorContent>
					
				</mx:TabNavigator>
				
			</mx:VDividedBox>
						
					<!-- DESCRIPTION -->
					<!--<s:Label text="DESCRIPTION" width="100%" styleName="formItem"/>-->
					<!--<inspectors:Description showDescriptionLabel="false" left="10" right="10" top="10"/>-->
					<!--</s:ArrayCollection>
				</s:DataGroup>
				
			</s:Scroller>-->
			
			<!-- EXAMPLE APPLICATION -->
			<mx:VDividedBox id="documentsGroup" width="100%" height="100%" >
		
				
				<mx:TabNavigator id="documentsTagNavigator" width="100%" height="100%"
								  change="navigatorContent_changeHandler(event)"
								  click="documentsTagNavigator_clickHandler(event)"
								  >
					<!--<s:NavigatorContent width="100%" height="100%" label="HELL0!">
						<ns1:StartPage id="startPage" width="100%" height="100%" />
					</s:NavigatorContent>-->
					<!--<s:NavigatorContent width="100%" height="100%" label="DOCUMENT">
						<components:DocumentContainer id="document1" width="100%" height="100%" />
					</s:NavigatorContent>-->
					<!--<s:NavigatorContent width="100%" height="100%" label="PREVIEW" creationPolicy="all">
						<flexiframe:IFrame id="iframe" 
										   top="20"
										   left="20"
										   width="100%" height="100%" 
										   debug="false"
										   />
					</s:NavigatorContent>-->
					
					<!--<s:NavigatorContent width="100%" height="100%" label="" >
						<ns1:Document id="document2" width="100%" height="100%" />
					</s:NavigatorContent>-->
				</mx:TabNavigator>
				
				<!--<s:Label id="noDocumentsLabel"
						 text="To create a new project or document select File > New Project or File > New Document."
						 visible="{documentsTagNavigator.length==0}" 
						 height="100%"/>-->
				
				<!-- BREADCRUMBS -->
				<!--<s:Label text="BREADCRUMBS" width="100%" styleName="formItem"/>-->
				
				<!--<s:HGroup width="100%" paddingTop="8" >
					<s:Label id="showConsoleLabel" 
							 text="Console" 
							 typographicCase="uppercase" 
							 textAlign="center"
							 verticalAlign="middle"
							 paddingLeft="5"
							 paddingRight="5"
							 paddingBottom="5"
							 paddingTop="5"
							 fontWeight="bold"
							 fontSize="10"
							 backgroundAlpha=".75"
							 backgroundColor="#FFFFFF"
							 useHandCursor="true"
							 buttonMode="true"
							 click="showConsoleHandler(event)"
							 />
				</s:HGroup>-->
				<s:VGroup width="100%" height="45%" minHeight="12">
					<views:Breadcrumbs width="100%" />
				
					<mx:TabNavigator id="thirdViewStack" 
									 borderStyle="solid"
									 width="100%"
									 height="100%"
									 minHeight="24"
									 change="thirdViewStack_changeHandler(event)"
									 creationComplete="thirdViewStack_creationCompleteHandler(event)">
						
						<!-- DYNAMIC INSPECTOR -->
						<!--<s:NavigatorContent label="INSPECTOR">
							<panels:DynamicComponentInspector width="100%" height="100%"/>
						</s:NavigatorContent>-->
						
						<!-- CONSOLE -->
						<s:NavigatorContent label="CONSOLE">
							<panels:ConsoleInspector width="100%" height="100%"/>
						</s:NavigatorContent>
					
						<!-- CODE INSPECTOR -->
						<s:NavigatorContent width="100%" height="100%" label="CODE">
							<panels:CodeInspector id="code1" width="100%" height="100%" />
						</s:NavigatorContent>
					
						<!-- METADATA INSPECTOR -->
						<s:NavigatorContent width="100%" height="100%" label="METADATA">
							<panels:MetaDataInspector id="metadataInspector" width="100%" height="100%" />
						</s:NavigatorContent>
					
						<!-- DOCS INSPECTOR -->
						<s:NavigatorContent width="100%" height="100%" label="DOCS">
							<panels:DocumentationInspector id="docsInspector" width="100%" height="100%" />
						</s:NavigatorContent>
					
						<!-- FEATURE INSPECTOR -->
						<!--<s:NavigatorContent width="100%" height="100%" label="FEATURE">
							<views:Features id="featureInspector" width="100%" height="100%" />
						</s:NavigatorContent>-->
					
						
						<!-- PROPERTY INSPECTOR -->
						<!--<s:NavigatorContent label="PROPERTY INSPECTOR">
						</s:NavigatorContent>-->
					</mx:TabNavigator>
				</s:VGroup>
				
				
			</mx:VDividedBox>
		
		</mx:HDividedBox>
		
			
		<controls:ImageButton id="closeDocument" 
							  source="{Radii8LibraryAssets.clear}" 
							  toolTip="Closes the visible document. Use the open button to reopen the document."
							  right="8"
							  top="34"
							  width="16"
							  height="16"
							  horizontalAlign="center"
							  verticalAlign="middle"
							  />
	</s:Group>

					
	<!--<s:List id="shortcutList" 
			width="100%" 
			height="14" 
			bottom="8" 
			left="10"
			contentBackgroundAlpha="0"
			labelFunction="panelsLabelFunction"
			borderVisible="false"
			fontSize="8"
			color="#dddddd"
			rollOverColor="#222222"
			changing="list1_changeHandler(event)"
			horizontalScrollPolicy="off"
			dataProvider="{panels.dataProvider}"
			>
		<s:layout>
			<s:HorizontalLayout variableColumnWidth="true" 
								verticalAlign="middle"/>
		</s:layout>
	</s:List>-->
	
</s:Group>