<?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:views="com.flexcapacitor.views.*"
		 xmlns:c="com.flexcapacitor.controls.*"
		 xmlns:fc="com.flexcapacitor.effects.popup.*"
		 xmlns:handlers="com.flexcapacitor.handlers.*" 
		 xmlns:collections="com.flexcapacitor.effects.collections.*"
		 
		 width="100%" 
		 height="100%"
		 implements="com.flexcapacitor.views.IInspector" 
		 >
	
	<fx:Script>
		<![CDATA[
			import com.flexcapacitor.controller.Radiate;
			import com.flexcapacitor.events.RadiateEvent;
			import com.flexcapacitor.model.DocumentData;
			import com.flexcapacitor.model.IDocument;
			import com.flexcapacitor.model.IDocumentData;
			import com.flexcapacitor.model.IProject;
			import com.flexcapacitor.views.IInspector;
			import com.flexcapacitor.views.windows.DeleteDocumentWindow;
			import com.flexcapacitor.views.windows.ImportWindow;
			
			import mx.core.IVisualElement;
			import mx.events.FlexEvent;
			
			import spark.components.RadioButtonGroup;
			import spark.events.IndexChangeEvent;
			
			private var rootDisplayObject:DisplayObject;
			private var displayList:Array = [];
			
			[Bindable]
			private var radiate:Radiate;
			private var designDocument:IEventDispatcher;
			
			public var project:IProject;
			

			public function activate():void {
				radiate = Radiate.instance;
				
				radiate.addEventListener(RadiateEvent.PROJECT_CHANGE, projectChangeHandler, false, 0, true);
				radiate.addEventListener(RadiateEvent.DOCUMENT_ADDED, documentAddedHandler, false, 0, true);
				radiate.addEventListener(RadiateEvent.DOCUMENT_CHANGE, documentChangeHandler, false, 0, true);
				radiate.addEventListener(RadiateEvent.DOCUMENT_OPENING, documentOpeningHandler, false, 0, true);
				radiate.addEventListener(RadiateEvent.DOCUMENT_REMOVED, documentRemovedHandler, false, 0, true);
				radiate.addEventListener(RadiateEvent.DOCUMENT_DELETED, documentRemovedHandler, false, 0, true);
				
				update();
			}
			
			public function deactivate():void {
				if (radiate) {
					radiate.removeEventListener(RadiateEvent.PROJECT_CHANGE, projectChangeHandler);
					radiate.removeEventListener(RadiateEvent.DOCUMENT_ADDED, documentAddedHandler);
					radiate.removeEventListener(RadiateEvent.DOCUMENT_CHANGE, documentChangeHandler);
					radiate.removeEventListener(RadiateEvent.DOCUMENT_OPENING, documentOpeningHandler);
					radiate.removeEventListener(RadiateEvent.DOCUMENT_REMOVED, documentRemovedHandler);
					radiate.removeEventListener(RadiateEvent.DOCUMENT_DELETED, documentRemovedHandler);
				}
			}
			
			public function update():void {
				
				if (radiate.selectedProject) {
					setProjectsDocuments(radiate.selectedProject);
				}
				
				if (radiate.selectedDocument && radiate.selectedDocument) {
					selectDocument(radiate.selectedDocument);
				}
			}
			
			/**
			 * Label of the list
			 * */
			public function labelFunction(data:Object):String {
				return data && data.document ? data.document.name : data.name;
			}
			
			protected function projectChangeHandler(event:RadiateEvent):void {
				if (event.selectedItem as IProject) {
					setProjectsDocuments(event.selectedItem as IProject);
				}
			}
			
			/**
			 * Document was changed from outside of this inspector. Update to reflect that. 
			 * */
			protected function documentChangeHandler(event:RadiateEvent):void {
				var iDocument:IDocumentData = event.selectedItem as IDocumentData;
				//var documentData:IDocumentData = iDocument.documentData;
				
				/*
				if (document && (radiate.project!=document.project || documents.length==0)) {
					setProjectsDocuments(document.project);
				}
				else if (document.project && document.project.documents.length != radiate.selectedDocuments.length) {
					setProjectsDocuments(document.project);
				}
				else if (documents.length==0) {
					setProjectsDocuments(document.project);
				}*/
				
				var selectedDocument:IDocumentData = list.selectedItem as IDocumentData;
				
				if (selectedDocument && iDocument) {
					if (selectedDocument.uid != iDocument.uid) {
						selectDocument(iDocument);
					}
				}
				
				if (selectedDocument==null && iDocument) {
					selectDocument(iDocument);
				}
				/*
				if (selectedDocument) {
					radiate.dispatchObjectSelectedEvent(selectedDocument);
				}*/
			}

			/**
			 * Update document
			 * */
			private function selectDocument(iDocument:IDocumentData):void {
				var jDocument:IDocumentData;
				list.validateNow();
				
				if (list.selectedItem != iDocument) {
					
					var length:int = documentsCollection.length;
					for (var i:int;i<length;i++) {
						jDocument = IDocumentData(documentsCollection.getItemAt(i));
						
						
						if (jDocument.uid==iDocument.uid) {
							list.selectedItem = IDocumentData(documentsCollection.getItemAt(i));
							break;
						}
					}
				}
			}
			
			/**
			 * Update documents
			 * */
			private function setProjectsDocuments(project:IProject, refresh:Boolean = false):void {
				var projectDocuments:Array = project ? project.documents : [];
				var iDocument:IDocumentData = list.selectedItem;
				var uid:String;
				
				if (iDocument) {
					uid = iDocument.uid;
				}
				else {
					iDocument = radiate.getVisibleDocument();
					if (iDocument==null) {
						iDocument = radiate.selectedDocument;
					}
					uid = iDocument ? iDocument.uid : null;
				}
				
				if (documentsCollection.source != projectDocuments) {
					documentsCollection.source = projectDocuments;
					
					documentsCollection.refresh();
					
					// must call validate now so selected index doesn't revert if a new project is selected
					list.validateNow();
					
					if (uid) {
						selectDocumentByUID(uid);
					}
				}
				else if (documentsCollection.source.length != project.documents.length) {
					documentsCollection.refresh();
					
					if (uid) {
						selectDocumentByUID(uid);
					}
				}
				else if (refresh) {
					documentsCollection.refresh();
					
					if (uid) {
						selectDocumentByUID(uid);
					}
				}
			}
			
			/**
			 * Add new document
			 * */
			protected function newDocumentIcon_clickHandler(event:MouseEvent):void {
				var newDocument:IDocument = radiate.addDocument(radiate.createDocument(), radiate.selectedProject, true, true);
				radiate.openDocument(newDocument, DocumentData.INTERNAL_LOCATION, true); 
			}
			
			protected function saveDocumentIcon_clickHandler(event:MouseEvent):void {
				//radiate.saveProject(radiate.project);
				var document:IDocument = list.selectedItem as IDocument;
				
				if (document) {
					var saveRemote:Boolean = radiate.isUserConnected && radiate.isUserLoggedIn;
					var savedLocation:String = saveRemote ? DocumentData.REMOTE_LOCATION : DocumentData.LOCAL_LOCATION;
					
					var savedLocally:Boolean = radiate.saveDocument(document, savedLocation);
					
					//Radiate.log.info("Saved locally: " + savedLocally);
				}
			}
			
			/**
			 * User selected a document in the list
			 * */
			protected function list_changeHandler(event:IndexChangeEvent):void {
				var documentData:IDocumentData = list.selectedItem ? IDocumentData(list.selectedItem) : null;
				
				if (documentData) {
					if (documentData.isOpen) {
						radiate.showDocument(documentData);
					}
					else {
						//radiate.openDocumentByData(documentData);
					}
				}
				
				if (documentData) {
					radiate.dispatchObjectSelectedEvent(documentData);
				}
			}
			
			protected function documentAddedHandler(event:RadiateEvent):void {
				//event.preventDefault();
				//setProjectsDocuments(radiate.project);
				
				setProjectsDocuments(radiate.selectedProject, true);
			}
			
			protected function documentOpeningHandler(event:RadiateEvent):void {
				//event.preventDefault();
				//setProjectsDocuments(radiate.project);
			}
			
			
			protected function deleteDocumentIcon_clickHandler(event:MouseEvent):void {
				var selectedDocument:IDocument = list.selectedItem as IDocument;
				
				if (selectedDocument) {
					radiate.removeDocument(selectedDocument);
				}
				else {
					Radiate.log.info("Please select a document");
				}
			}
			
			protected function documentRemovedHandler(event:Event):void {
				setProjectsDocuments(radiate.selectedProject, true);
			}
			
			
			protected function closeDocumentIcon_clickHandler(event:MouseEvent):void {
				var selectedDocument:IDocument = list.selectedItem as IDocument;
				
				if (selectedDocument) {
					radiate.closeDocument(selectedDocument);
				}
				else {
					Radiate.log.info("Please select a document");
				}
			}
			
			protected function openDocumentIcon_clickHandler(event:MouseEvent):void {
				var selectedDocument:IDocument = list.selectedItem as IDocument;
				
				if (selectedDocument) {
					radiate.openDocument(selectedDocument, DocumentData.REMOTE_LOCATION, true);
				}
				else {
					Radiate.log.info("Please select a document");
				}
			}
			
			protected function importDocumentIcon_clickHandler(event:MouseEvent):void {
				var selectedDocument:IDocument = list.selectedItem as IDocument;
				
				if (selectedDocument) {
					//radiate.importMXMLDocument(radiate.selectedProject, selectedDocument, code);
				}
				else {
					Radiate.log.info("Please select a document");
				}
			}
			
			protected function openpopup1_closeHandler(event:Event):void {
				var selectedDocument:IDocument = list.selectedItem as IDocument;
				var importWindow:ImportWindow = ImportWindow(openPopUp.popUp);
				var code:String = importWindow.code;
				var action:String = importWindow.action;
				var type:String = RadioButtonGroup(importWindow.importLocation).selectedValue as String;
				
				if (action==ImportWindow.IMPORT) {
					if (type==ImportWindow.NEW_DOCUMENT) {
						radiate.importMXMLDocument(radiate.selectedProject, null, null, code);
					}
					else if (type==ImportWindow.CURRENT_DOCUMENT && selectedDocument) {
						radiate.importMXMLDocument(radiate.selectedProject, selectedDocument, null, code);
					}
					else if (type==ImportWindow.CURRENT_SELECTION && radiate.target is IVisualElement) {
						if (radiate.target is IVisualElement) {
							radiate.importMXMLDocument(radiate.selectedProject, selectedDocument, IVisualElement(radiate.target), code);
						}
						Radiate.log.info("Please select a visual element");
					}
					else {
						Radiate.log.info("Please select a document");
					}
				}
			}

			/**
			 * Pressing enter would retrieve the style value.
			 * 
			 * This is no longer necessary since values are updated on property change events. 
			 * */
			protected function searchPropertyInput_enterHandler(event:FlexEvent):void {
				var searchText:String = filterInput.text;
				var item:XML;
				
			}
			
			/**
			 * Move from search text input to properties grid on down arrow key
			 * */
			protected function filterInput_keyUpHandler(event:KeyboardEvent):void {
				/*if (event.keyCode==Keyboard.DOWN) {
					propertiesGrid.setFocus();
					if (propertiesGrid.selectedIndex ==-1) {
						propertiesGrid.setSelectedIndex(0);
					}
				}*/
			}
			
			protected function list_doubleClickHandler(event:MouseEvent):void {
				var documentData:IDocument = list.selectedItem ? IDocument(list.selectedItem) : null;
				
				if (documentData && !documentData.isOpen) {
					radiate.openDocumentByData(documentData, true);
				}
			}
			
			private function selectDocumentByUID(uid:String):void {
				var length:int = documentsCollection.length;
				for (var i:int;i<length;i++) {
					var iDocumentData:IDocumentData = IDocumentData(documentsCollection.getItemAt(i));
					if (iDocumentData.uid==uid) {
						list.selectedItem = iDocumentData;
						break;
					}
				}
				
			}
			
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<s:ArrayCollection id="documentsCollection" />
		
		
		
		<!-- SORT BY NAME -->
		<handlers:EventHandler eventName="creationComplete" >
			<collections:SortCollection target="{documentsCollection}" 
								 fields="{['name']}" />
		</handlers:EventHandler>
		
		<!-- FILTER BY NAME -->
		<handlers:EventHandler eventName="change" 
							   targets="{[filterInput,showAllItemsOnEmpty,caseSensitive,searchAtStart]}"
							   >
			<collections:FilterCollection target="{documentsCollection}" 
								   source="{filterInput}" 
								   sourcePropertyName="text"
								   fieldName="name"
								   showAllItemsOnEmpty="{showAllItemsOnEmpty.selected}"
								   caseSensitive="{caseSensitive.selected}"
								   searchAtStart="{searchAtStart.selected}"
								   />
		</handlers:EventHandler>
		
		
		
		<!--- show import document popup -->		
		<handlers:EventHandler eventName="click" target="{importDocumentIcon}">
			<fc:OpenPopUp id="openPopUp" 
						  popUpType="{ImportWindow}" 
						  modalDuration="250" 
						  percentWidth="75"
						  percentHeight="90"
						  width="600"
						  parent="{parentApplication}"
						  close="openpopup1_closeHandler(event)"/>
		</handlers:EventHandler>
		
		<!--- show delete document popup -->
		<handlers:EventHandler targets="{deleteDocumentIcon}" eventName="click" 
							   enabled="{list.selectedItem!=null}">
			<fc:OpenPopUp id="openDeleteProjectPopUp" 
						  popUpType="{DeleteDocumentWindow}" 
						  modalDuration="100" 
						  percentWidth="75"
						  percentHeight="90"
						  width="600"
						  parent="{parentApplication}"
						  popUpOptions="{{currentState:'document',documentData:list.selectedItem}}"
						  />
		</handlers:EventHandler>
		
		<!--- show save before close document popup. disabled for now -->
		<!--<handlers:EventHandler targets="{closeDocumentIcon}" eventName="click" 
							   enabled="{list.selectedItem!=null}">
			<fc:OpenPopUp id="saveBeforeClosePopUp" 
						  popUpType="{SaveBeforeCloseWindow}" 
						  modalDuration="100" 
						  percentWidth="75"
						  percentHeight="90"
						  width="600"
						  parent="{parentApplication}"
						  popUpOptions="{{currentState:'document',documentData:list.selectedItem}}"
						  />
		</handlers:EventHandler>-->
		
		<fx:Component className="namePopUp">
			
			<s:Group mouseEnabledWhereTransparent="true" 
					 width="100%" height="100%" 
					 >
<!--					 creationComplete="nameInput.setFocus()"-->
				
				<fx:Script>
					<![CDATA[
						import mx.events.FlexEvent;
						protected function nameInput_enterHandler(event:FlexEvent):void {
							
						}
					]]>
				</fx:Script>
				
				
				<fx:Declarations>
					<handlers:EventHandler target="{this}" eventName="mouseDownOutside">
						<!--<popup:ClosePopUp target="{newDocumentPopUp}" />-->
					</handlers:EventHandler>
				</fx:Declarations>
				
				
				<s:Rect width="100%" height="100%" radiusX="0" radiusY="0">
					<s:fill>
						<s:SolidColor color="#ffffff" alpha=".9" />
					</s:fill>
					<s:stroke>
						<s:SolidColorStroke color="#000000" pixelHinting="true" weight="0" />
					</s:stroke>
					<s:filters>
						<s:DropShadowFilter distance="3" strength=".75"/>
					</s:filters>
				</s:Rect>
				
				<s:Group width="100%" height="100%">
					<s:layout>
						<s:HorizontalLayout paddingLeft="5" paddingRight="5"
											paddingTop="5" paddingBottom="5"/>
					</s:layout>
						
					
					<s:Label text="Name:"/>
					
					<s:TextInput id="nameInput" width="100%" enter="nameInput_enterHandler(event)"/>
				</s:Group>
			</s:Group>
		</fx:Component>
	</fx:Declarations>
	
	<s:layout>
		<s:VerticalLayout paddingLeft="8" paddingRight="8" paddingBottom="8"/>
	</s:layout>
	
	<mx:VDividedBox id="verticalContainer" 
					width="100%" height="100%"
					top="0"
					left="8" 
					right="8" 
					bottom="0"
					>
		
		<s:Group height="24" 
				 minHeight="24"
				 width="100%" 
				 >
					
			<c:SearchTextInput id="filterInput" 
							   left="0" right="0" top="0" 
							   width="100%"
							   minWidth="60" 
							   styleName="inputStyles"
							   prompt="Search"
							   enter="searchPropertyInput_enterHandler(event)"
							   keyUp="filterInput_keyUpHandler(event)"
							   />
			<s:HGroup width="100%" top="32" left="4" verticalAlign="baseline">
				<s:CheckBox id="showAllItemsOnEmpty" label="All" selected="true"/>
				<s:CheckBox id="caseSensitive" label="Case" selected="false"/>
				<s:CheckBox id="searchAtStart" label="At start" selected="false"/>
				<s:Spacer width="100%"/>
				<s:Label text="Results: {documentsCollection.length}"/>
			</s:HGroup>
		</s:Group>
		
		
		<s:List id="list" 
				focusAlpha="0"
				minHeight="20"
				width="100%" 
				height="100%"
				labelFunction="labelFunction"
				borderAlpha=".2"
				dataProvider="{documentsCollection}"
				change="list_changeHandler(event)"
				doubleClick="list_doubleClickHandler(event)"
				doubleClickEnabled="true"
				itemRenderer="com.flexcapacitor.views.renderers.EditableDocumentRenderer"
				>
		</s:List>
	
		
	</mx:VDividedBox>
	
	<s:HGroup width="100%"
			 height="24"
			 minHeight="24"
			 verticalAlign="middle"
			 >
		<c:ImageButton id="importDocumentIcon" 
					   source="{Radii8LibraryAssets.importIcon}" 
					   toolTip="Import Document"
					   />
		<s:Spacer width="100%"/>
		<c:ImageButton id="closeDocumentIcon" 
					   source="{Radii8LibraryAssets.closedFolder}" 
					   toolTip="Close Document"
					   click="closeDocumentIcon_clickHandler(event)"
					   />
		<c:ImageButton id="openDocumentIcon" 
					   source="{Radii8LibraryAssets.openFolder}" 
					   toolTip="Open Document"
					   click="openDocumentIcon_clickHandler(event)"
					   />
		<c:ImageButton id="saveDocumentIcon" 
					   source="{Radii8LibraryAssets.save}" 
					   toolTip="Save Document"
					   click="saveDocumentIcon_clickHandler(event)"
					   height="15"
					   />
		<c:ImageButton id="newDocumentIcon" 
					   source="{Radii8LibraryAssets.newFile}" 
					   toolTip="New Document"
					   click="newDocumentIcon_clickHandler(event)"
					   />
		<c:ImageButton id="deleteDocumentIcon" 
					   source="{Radii8LibraryAssets.trashCan}" 
					   toolTip="Remove Document"
					   />
	</s:HGroup>
	

</s:Group>