<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
	invalid="invalid()" valid="valid()">	
	
	<mx:XMLListCollection id="collection"/>
	
	<mx:Metadata>
        [Event(name="change", type="mx.events.ListEvent")]
    </mx:Metadata>
	
	<mx:Script>
		<![CDATA[
			import mx.validators.NumberValidator;
			import mx.events.ValidationResultEvent;
			import mx.validators.Validator;			
			import mx.events.ListEvent;
			import mx.controls.listClasses.IListItemRenderer;
			import mx.core.Container;
			import mx.events.FlexEvent;
			import mx.controls.Spacer;
			import mx.controls.Alert;
			import mx.controls.TextInput
			import mx.containers.VBox;
			import mx.containers.TitleWindow;
			import mx.containers.Form;
			import mx.managers.PopUpManager;
			import mx.binding.utils.*;
			import mx.utils.ObjectUtil;
			
			private var window:TitleWindow;
			private var textInput:TextInput;
			private var _itemName:String = "Item";			
			
			private var _editor:EditableListEditor = null;
			private var _editorFactory:IFactory = new ClassFactory(EditableListTextInputEditor);
			
			[Bindable]
			public var editable:Boolean = false;		
						
			private var _labelFunction:Function = null;
			
			public function set dataProvider(list:XMLList):void {
				collection.source = list;
			}
			
			public function set itemName(itemName:String):void {
				_itemName = itemName;
			}
			
			public function get itemEditor():IFactory {
				return _editorFactory;
			}
			
			[Bindable]
			public function set itemEditor(itemEditor:IFactory):void {
				_editorFactory = itemEditor;
				subContainer.removeAllChildren();
				_editor = _editorFactory.newInstance();
				subContainer.addChild(_editor);				
			}
			
			public function set listItemEditor(itemEditor:IFactory):void {
				list.itemEditor = itemEditor;
				list.editorDataField = "data";
			}
			
			[Bindable]
			public function set labelFunction(labelFunction:Function):void {
				_labelFunction = labelFunction;
			}			
			
			public function get labelFunction():Function {
				return _labelFunction;
			}
			
			private function add():void {
				addButton.enabled = false;
				removeButton.enabled = false;
				list.enabled = false;				
				addBox.visible = true;
				addBox.enabled = true;
				addBox.includeInLayout = true;
				_editor.update(collection.list);
				list.selectedIndex = -1;
				_editor.setFocus();
			}	
			
			private function remove():void {
				var index:Number = list.selectedIndex;				
				collection.removeItemAt(index);
				_editor.update(collection.list);
				if(_editor.hasContent()) {
					addButton.enabled = true;
				}
				this.dispatchEvent(new ListEvent("change"));
			}
			
			private function addOk():void {
				var newItem:Object = _editor.data;							
				if(_editor.isValid()) {									
					if(!(newItem is XML) || newItem.localName() != _itemName) {
						newItem = XML("<" + _itemName + "/>")
							.appendChild(_editor.data);
					}							
					collection.addItem(newItem);
					addCancel();
					_editor.update(collection.list);
					if(!_editor.hasContent()) {
						addButton.enabled = false;
					}
					this.dispatchEvent(new ListEvent("change"));
				}				 
			}
			
			private function addCancel():void {
				addBox.visible = false;
				addBox.enabled = false;
				addBox.includeInLayout = false;				
				addButton.enabled = true;
				removeButton.enabled = list.selectedItem != null;
				list.enabled = true;
			}
			
			override protected function createChildren():void {
				super.createChildren();
				_editor = _editorFactory.newInstance();
				subContainer.addChild(_editor);
			}
			
			private function listChanged():void {
				if(list.editable) 
				{ 
					dispatchEvent(new ListEvent('change'))
				}
			}
			
			private function init():void {
				list.addEventListener(ListEvent.ITEM_EDIT_END, function():void
				{
					if(list.itemEditorInstance is EditableListEditor && EditableListEditor(list.itemEditorInstance).isValid()) 
					{
						XML(list.selectedItem).setChildren(list.itemEditorInstance.data);
						listChanged();														
					} 
				});
			}
			
			public function get firstItem():String {
				if(collection.length == 0) {
					return "";
				} else {
					return collection.children()[0];
				}
			}
			
			private function invalid():void {
				setStyle("oldBorderStyle", getStyle("borderStyle"));					
				setStyle("oldBorderColor", getStyle("borderColor"));
				setStyle("borderStyle", "solid");			
				setStyle("borderColor", getStyle("errorColor"));
			}
			
			private function valid():void {
				setStyle("borderStyle", getStyle("oldBorderStyle"));					
				setStyle("borderColor", getStyle("oldBorderColor"));
			}
		]]>
	</mx:Script>
		
	<mx:HBox id="listBox" width="100%" height="100%">		
		<mx:VBox width="100%" height="100%">
			<mx:List id="list" dataProvider="{collection}"
				width="100%" height="100%" editable="{editable}"
				change="{listChanged()}"
				labelFunction="{labelFunction}"
				editorDataField="text"
				initialize="init()"/>						
		</mx:VBox>
		<mx:VBox height="100%">
			<mx:Button id="addButton" label="{resourceManager.getString('language', 'Btn_ItemAdd')}" width="100%"
				click="add()"/>
			<mx:Button id="removeButton" label="{resourceManager.getString('language', 'Btn_ItemRemove')}" width="100%"
				enabled="{list.selectedItem != null}"
				click="remove()"/>
		</mx:VBox>
	</mx:HBox>
	<mx:HBox id="addBox" visible="false" enabled="false" includeInLayout="false" 
		width="100%" height="100%"
		borderStyle="solid"
		paddingTop="8" paddingBottom="5" paddingLeft="5" paddingRight="5">
		<mx:Box id="subContainer" width="100%" height="100%"/>
		<mx:Button label="{resourceManager.getString('language', 'Btn_OK')}"
			click="addOk()"/>
		<mx:Button label="{resourceManager.getString('language', 'Btn_Cancel')}"
			click="addCancel()"/>
	</mx:HBox>
</mx:VBox>