<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">

<mx:Script>
		<![CDATA[
		import mx.collections.Sort;
		import mx.collections.SortField;
		import mx.collections.XMLListCollection;
		
		[Bindable]
		public var labelField:String = null;
		
		[Bindable]
		public var dataTipField:String = null;
		
		[Bindable]
		public var dataTipFunction:Function = null;
		
		[Bindable]
		public var collection1:XMLListCollection = null;	
		
		[Bindable]
		public var collection2:XMLListCollection = null;
		
		private function sortCollection(col:XMLListCollection){
			    var nameSort:Sort = new Sort();
                nameSort.fields = [new SortField(labelField, true)];
                col.sort = nameSort;
                col.refresh();
		}
		
		private function moveRight():void{
			for each(var item:Object in list1.selectedItems){
				collection2.addItem(item.copy());
				
			}	
			sortCollection(collection2);
			for each(var index:Number in list1.selectedIndices){
				collection1.removeItemAt(index);

			}		
		}
		
		private function moveLeft():void{
			for each(var item:Object in list2.selectedItems){
				collection1.addItem(item.copy());
			}	
			for each(var index:Number in list2.selectedIndices){
				collection2.removeItemAt(index);
			}	
		}	
		
		private function moveAllRight():void{
			while(collection1.length > 0) {
				collection2.addItem(collection1.getItemAt(0).copy());
				collection1.removeItemAt(0);
			}
		}
		
		
		private function moveAllLeft():void{
			while(collection2.length > 0) {
				collection1.addItem(collection2.getItemAt(0).copy());
				collection2.removeItemAt(0);
			}
		}
			
		]]>
	</mx:Script>

	<mx:List id="list1"
		dataProvider="{collection1}"
		width="45%" height="100%"
		dragEnabled = "true" 
		dragMoveEnabled="true"
		dropEnabled="true"
		allowMultipleSelection="true"
		>
		<mx:itemRenderer>
		<mx:Component>
			<mx:Label text="{data.child(outerDocument.labelField)[0]}"
				 toolTip="{outerDocument.dataTipFunction == null ? data.child(outerDocument.dataTipField)[0] 
				 	: outerDocument.dataTipFunction(data)}">
			</mx:Label>
         </mx:Component>
         </mx:itemRenderer>
	</mx:List> 
	<mx:VBox width="40">
		<mx:Button id="forwardButton" click="moveRight()"
			enabled="{list1.selectedItem!=null}">
			<mx:icon>@Embed(source='../assets/control_forward_blue.png')</mx:icon>	
		</mx:Button>
		<mx:Button  id="backwardButton" click="moveLeft()"
			enabled="{list2.selectedItem!=null}">
			<mx:icon>@Embed(source='../assets/control_backward_blue.png')</mx:icon>
		</mx:Button>	
		<mx:Button  id="forwardAllButton" click="moveAllRight()"
			enabled="{collection1.length>0}">
			<mx:icon>@Embed(source='../assets/control_fastforward_blue.png')</mx:icon>	
		</mx:Button>
		<mx:Button  id="backwardAllButton" click="moveAllLeft()"
			enabled="{collection2.length>0}">
			<mx:icon>@Embed(source='../assets/control_fastbackward_blue.png')</mx:icon>
		</mx:Button>
	</mx:VBox>
	<mx:List id="list2" 
		dataProvider="{collection2}"
		width="45%" height="100%" 		
		dragEnabled = "false" 
		dragMoveEnabled="false"
		dropEnabled="false"
		allowMultipleSelection="true"
		>
		<mx:itemRenderer>
		<mx:Component>
			<mx:Label  text="{data.child(outerDocument.labelField)[0]}"
				 toolTip="{outerDocument.dataTipFunction == null ? data.child(outerDocument.dataTipField)[0] 
				 	: outerDocument.dataTipFunction(data)}">
			</mx:Label>
         </mx:Component>
         </mx:itemRenderer>
	</mx:List>
</mx:HBox>