<?xml version="1.0" encoding="utf-8"?>
<!-- Navigator is a UIComponent that encapsulates a viewStack containing different UIComponents
	 belonging to different (E4X) data types. The correct UIComponent in the viewStack is
	 automatically selected according to the name() of the selectedItem --> 
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" xmlns:components="components.*">
	<mx:Script>
		<![CDATA[
			import mx.events.CollectionEvent;
			import mx.collections.XMLListCollection;
			import components.tree.NodeTest;
			import mx.core.Container;
			import mx.binding.utils.ChangeWatcher;
			
			import components.navigator.Element;
			
			[Bindable]
			public var resizeToMaxWidth:Boolean = true;
			
			[Bindable]
			public var resizeToMaxHeight:Boolean = false;
			
			[Bindable]
			public var resizeToContent:Boolean = true;
			
			/**
			 * The UIComponent selected when none of the containers match.
			 */
			public var defaultContainer:Container;
			/**
			 * An Array containing Element objects.
			 */
			public var containers:Array;
			
			/**
			 * An internal copy of the containers array that only contains objects of the
			 * correct (ie. Element) type.
			 */
			private var _containers:Array;
			/**
			 * The container currently being displayed.
			 */
			private var _currentContainer:Container;
			
			[Bindable]
			/**
			 * The selectedItem.
			 */
			public var selectedItem:XML = null;
			
			/**
			 * The elementName (only used when selectedItem == null)
			 */
			[Bindable]
			public var elementName:Object = null;
			
			/**
			 * A collection used to monitor changes to the selected item.
			 */
			private var selectedItemCollection:XMLListCollection;
			
			/**
			 * The title of the current container.
			 */ 
			[Bindable(event="containerSwitch")]
			public function get title() : String {
				if(_currentContainer is Element) {
					return Element(_currentContainer).title;
				} else {
					return null;
				}
			}
			
			/**
			 * Initializes the component.
			 */
			private function init():void {				
				_containers = new Array();
				
				// Copy the containers array (ignoring non Element objects)
				// and add every container to the viewStack
				for each(var obj:Object in containers) {
					if(obj is Element) {						
						_containers.push(obj);
						viewStack.addChild(DisplayObject(obj));
					}
				}
				
				if(!defaultContainer) {
					defaultContainer = new Container();
				}
				
				// Display default container
				_currentContainer = defaultContainer;
				viewStack.addChild(defaultContainer);
				viewStack.selectedChild = defaultContainer;
				
				// Set change watcher on 'selectedItem'
				ChangeWatcher.watch(this, "selectedItem", setForm);
				
				// Set change watcher on 'elementName'
				ChangeWatcher.watch(this, "elementName", setForm);
				
				
				ChangeWatcher.watch(this, "selectedItem", function(event:Event): void 
				{
					if(selectedItemCollection != null) {
						selectedItemCollection.removeEventListener(CollectionEvent.COLLECTION_CHANGE, setForm);
					}
					
					if(selectedItem == null) {
						selectedItemCollection = null;						
					} else {
						selectedItemCollection = new XMLListCollection();
						selectedItemCollection.addItem(selectedItem);
						selectedItemCollection.addEventListener(CollectionEvent.COLLECTION_CHANGE, setForm);
					}
				});
				
				if(selectedItem || elementName) {
					setForm(null);
				}
			} 
			
			/**
			 * Handler called by the ChangeWatcher. It determines which
			 * container should be displayed for the selectedItem.
			 */
			private function setForm(event:Object):void {				 
				var newForm:Container = defaultContainer;
				
				// No selectedItem -> Try elementName -> No elementName -> show default
				if(selectedItem != null) {
					containersLoop: for each(var obj:Object in _containers) {
						var form:Element = Element(obj);
						var elements:Array = form.element is Array ? form.element as Array : [form.element];
						for each(var currentElement:Object in elements) {
							if(currentElement is NodeTest) {
								if(NodeTest(currentElement).doTest(selectedItem)) {
									newForm = form;
									break containersLoop;
								}
							} else if(currentElement == selectedItem.name()) {
								newForm = form;
								break containersLoop;
							}
						}
					}
				} else {
					if(elementName) {
						containersLoop: for each(obj in _containers) {
						form = Element(obj);
						elements = form.element is Array ? form.element as Array : [form.element];
						for each(currentElement in elements) {
							if(currentElement == elementName) {
								newForm = form;
								break containersLoop;
							}
						}
					}
					}
				}
				
				if(newForm != _currentContainer) {
					viewStack.selectedChild = newForm;
					createComponents(newForm);
					//ExtendedForm.createForms(newForm);					
					_currentContainer = newForm;
					dispatchEvent(new Event("containerSwitch"));
				}
				
				// _currentContainer might be set to defaultContainer
				// which is not necessarily an object of class Element.
				if(_currentContainer is Element) {
					Element(_currentContainer).selectedItem = selectedItem;
				}
			}
			
			public function get currentContainer() : Container {
				return _currentContainer;
			}
			
			private function createComponents(container:Container) : void {
				if(container.childDescriptors && container.childDescriptors.length > 0 &&
					container.numChildren == 0) {
					container.createComponentsFromDescriptors();
				}
				
				for each(var component:Object in container.getChildren()) {
					if(component is Container) {
						createComponents(component as Container);
					}
				}
			}
		]]>
	</mx:Script>
	
	<mx:Metadata>
		[Event(name="containerSwitch")]
	</mx:Metadata>
	
	<components:ExtendedViewStack id="viewStack" width="100%" height="100%" 
		resizeToMaxWidth="{resizeToMaxWidth}" resizeToMaxHeight="{resizeToMaxHeight}" resizeToContent="{resizeToContent}"/>
</mx:Box>