<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
	xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:widget="gov.va.med.edp.widget.*"
	xmlns:accessibility="flash.accessibility.*"
	width="100%" height="100%"
	show="providerSrc.setFocus();"
	paddingTop="6" paddingBottom="6" paddingLeft="12" paddingRight="12"
	currentState="{getState(model.appViewState)}"
	styleName="contentArea" >

	<mx:Script>
		<![CDATA[
			import gov.va.med.edp.control.config.ColorChangedEvent;
			import gov.va.med.edp.widget.InfoDialog;
			import mx.collections.ICollectionView;
			import gov.va.med.edp.control.config.MatchPersonEvent;
			import mx.events.DataGridEvent;
			import gov.va.med.edp.widget.AutoComplete;
            import gov.va.med.edp.widget.ColorSelector;
            import mx.controls.DataGrid;
			import gov.va.med.edp.vo.StaffMemberVO;
			import gov.va.med.edp.control.config.UpdateStaffEvent;
			import gov.va.med.edp.control.config.ConfigurationEvent;
			import gov.va.med.edp.model.TrackingModelLocator;
			import gov.va.med.edp.util.AccessibilityTools;
            import gov.va.med.edp.util.KeyUtils;
            import mx.core.UIComponent;

            [Bindable]
			private var model: TrackingModelLocator = TrackingModelLocator.getInstance();
			
			[Bindable]
			private var selectedProvider:StaffMemberVO;	
			[Bindable]
			private var selectedResident:StaffMemberVO;	
			[Bindable]
			private var selectedNurse:StaffMemberVO;									

			private static const WIDTH:int = 320;

			private var curStaffSrc: AutoComplete;
			private var keyTimer: Timer;
			private var lastRoot: String = "";

			private function getState(state: int): String
			// monitor state instead of using show event, since show not called on initial view
			{
				if (model.appViewState == TrackingModelLocator.VIEW_APP_ASSIGN_STAFF) {
					loadStaffLists();
				}
				return "";
			}

			private function setStaffSrc(src: AutoComplete): void
			{
				// clear the control we are leaving
				if (curStaffSrc != null) {
					curStaffSrc.typedText = "";
				}
				if (src == null) {
					var e:MatchPersonEvent = new MatchPersonEvent(MatchPersonEvent.EVENT_MATCH_PERSON);
					e.partial = "";
					e.personType = "";
				}

				// set to the new control or null
				curStaffSrc = src;
				lastRoot = "";
				if ((keyTimer != null) && keyTimer.running) {
					keyTimer.stop();
				}
			}

			private function setTimer(event: Event): void
			{
				// stop the running timer, if we come back here too soon
				if ((keyTimer != null) && keyTimer.running) {
					keyTimer.stop();
				}
				// don't start the timer if we already have the subset of choices
				if ((lastRoot.length > 0) && (curStaffSrc.typedText.substr(0, lastRoot.length) == lastRoot)) {
					return;
				}
				// only search for inputs of length 3 or more
				if (curStaffSrc != null && curStaffSrc.typedText.length > 2) {
					keyTimer = new Timer(500,1);
					keyTimer.addEventListener("timer", refreshStaffSrc);
					keyTimer.start();
				}
			}

			private function refreshStaffSrc(event: TimerEvent): void
			{
				lastRoot = curStaffSrc.typedText.toUpperCase();
				var e: MatchPersonEvent = new MatchPersonEvent(MatchPersonEvent.EVENT_MATCH_PERSON);
				e.partial = lastRoot;
				if (curStaffSrc == providerSrc) {e.personType = "P"}
				if (curStaffSrc == residentSrc) {e.personType = "R"}
				if (curStaffSrc == nurseSrc) {e.personType = "N"}
				e.dispatch();
			}

			private function set staffSrcReady(isReady: Boolean): void
			{
				if (isReady == false) return;
				curStaffSrc.dataProvider = model.config.srcStaff;
				curStaffSrc.open();
				if (model.config.srcStaff.length > 0) curStaffSrc.selectedIndex = 0;
			}

			private function loadStaffLists(): void
			{
				if (model.config.staffConfigLoaded) return;
				var loadEvent: ConfigurationEvent =
					new ConfigurationEvent(ConfigurationEvent.EVENT_LOAD_STAFF_CONFIG);
				loadEvent.dispatch();
			}

			private function addStaff(list: AutoComplete, role: String, grid: DataGrid): void
			{
				var staff:StaffMemberVO = null;
				if (list!= null && list.selectedItem != null) {
					staff = list.selectedItem as StaffMemberVO;
					UpdateStaffEvent.dispatchAdd(staff, role);
					grid.setFocus();
		  	    } else {
					var selectedStaffMemberName:String = list.typedText;
					if (selectedStaffMemberName != null && selectedStaffMemberName != ""){
					var ac:ICollectionView = list.dataProvider as ICollectionView;
					for each (var item:StaffMemberVO in ac){
							if (selectedStaffMemberName == item.displayName){
								staff = item;
								UpdateStaffEvent.dispatchAdd(staff, role);
							    grid.setFocus();
							   	break;
							}
					}	
				  }
				}						
				resetAutoComplete(list);
				
			}
			
			
			private function resetAutoComplete(list:AutoComplete):void{
				list.selectedIndex = -1;
				list.typedText = "";
			}

			private function handleRemoveAndEscKeys(event:KeyboardEvent, grid: DataGrid):void{
				if (KeyUtils.isRemoveKey(event)){
					removeStaff(grid);
				} else if (event.keyCode == Keyboard.ESCAPE){
					grid.selectedIndex = -1;
					btnSaveStaff.setFocus();
				}
			}


			private function removeStaff(grid: DataGrid): void
			{
				if (grid.selectedIndex < 0 || grid.selectedItem == null) return;
				var selectedIndx:int = grid.selectedIndex;
				var staff:StaffMemberVO = grid.selectedItem as StaffMemberVO;
			    UpdateStaffEvent.dispatchRemove(staff);
			    if (AccessibilityTools.isAccessibilityActive())InfoDialog.show("removed successfully", "Message", true, grid);
			    grid.setFocus();
			    if (grid.dataProvider.length > 0){
					grid.selectedIndex = selectedIndx - 1;
			    } 
			}

			private function saveStaff(): void
			{
				var saveEvent: ConfigurationEvent =
					new ConfigurationEvent(ConfigurationEvent.EVENT_SAVE_STAFF_CONFIG);
				saveEvent.dispatch();
				
				providerDest.selectedIndex = -1;
				residentDest.selectedIndex = -1;
				nurseDest.selectedIndex = -1;
			}
			

			private function enableButton(list: AutoComplete,component:UIComponent):void
			{
				var enableFlag:Boolean = false;
				
				if (list.typedText == "") 
				{
					enableFlag = false;
				}	
				else
				{ 
				    if ((list.selectedIndex > -1) || ((list.text.length > 0) && (list.text != null)))
				    {
					    enableFlag = true;
				    }
				}    
				
				component.enabled = enableFlag;
			}	
			
			private function fireColorChange(event:ColorChangedEvent):void {
				var staffMember:StaffMemberVO = null;
				if (event.currentTarget === providerColorSelector) {
					staffMember = selectedProvider;
					if (staffMember.color != providerColorSelector.color) {
						staffMember.color.ignore = providerColorSelector.color.ignore;
						staffMember.color.text = providerColorSelector.color.text;
						staffMember.color.back = providerColorSelector.color.back;						
						staffMember.colorChanged = true;
						new ConfigurationEvent(ConfigurationEvent.EVENT_STAFF_MODIFIED).dispatch();
						model.config.providers.refresh();
					}			
				} else if (event.currentTarget === residentColorSelector) {
					staffMember = selectedResident;
					if (staffMember.color != residentColorSelector.color) {
						staffMember.color.ignore = residentColorSelector.color.ignore;
						staffMember.color.text = residentColorSelector.color.text;
						staffMember.color.back = residentColorSelector.color.back;
						staffMember.colorChanged = true;
						new ConfigurationEvent(ConfigurationEvent.EVENT_STAFF_MODIFIED).dispatch();
						model.config.residents.refresh();
					}			
				} else if (event.currentTarget === nurseColorSelector) {
					staffMember = selectedNurse;
					if (staffMember.color != nurseColorSelector.color) {
						staffMember.color.ignore = nurseColorSelector.color.ignore;
						staffMember.color.text = nurseColorSelector.color.text;
						staffMember.color.back = nurseColorSelector.color.back;
						staffMember.colorChanged = true;
						new ConfigurationEvent(ConfigurationEvent.EVENT_STAFF_MODIFIED).dispatch();
						model.config.nurses.refresh();
					}			
				} 
			}			
		]]>
	</mx:Script>

	<mx:HBox width="100%" height="100%">
		<mx:VBox verticalGap="0">
			<mx:Label id="mdLabel" text="Providers" styleName="controlLabel" />
			<widget:AutoComplete
				id="providerSrc"
				name="Autocomplete Provider Name"
				focusIn="{setStaffSrc(providerSrc); enableButton(providerSrc,addProvider)}" 
				focusOut="{setStaffSrc(null); enableButton(providerSrc,addProvider)}"
				keyUp="enableButton(providerSrc,addProvider)"
				typedTextChange="setTimer(event)"
				selectedIndex="-1"
				prompt="(type provider name)"
				labelField="displayName"
				width="190"
				enter="{addStaff(providerSrc, 'P', providerDest)}"
                tabIndex="1001"/>
		</mx:VBox>
		<mx:Canvas height="100%">
			<mx:Button
				label="Add &gt;&gt;"
				id="addProvider"
				initialize="{AccessibilityTools.accessComponentDescription(addProvider,'Press button to add provider to the list.')}"
				top="{mdLabel.height}" horizontalCenter="0"
				click="addStaff(providerSrc, 'P', providerDest); enableButton(providerSrc,addProvider)"
                enabled="{false}"
                tabIndex="1002"
                focusEnabled="false"/>
			<mx:Button
				label="Remove"
				id="removeProvider"
				initialize="{AccessibilityTools.accessComponentDescription(removeProvider,'Press button to remove provider from the list.')}"
				verticalCenter="0" horizontalCenter="0"
				click="removeStaff(providerDest)"
                enabled="{providerDest.selectedItem != null}"
                tabIndex="1004"
                focusEnabled="false"/>
		</mx:Canvas>
		<mx:DataGrid
			id="providerDest"
			accessibilityProperties="{providerAccProps}"
			height="100%"
			editable="false"
			keyDown="handleRemoveAndEscKeys(event,providerDest)"
			dataProvider="{model.config.providers}"
			headerStyleName="controlLabel"
            tabIndex="1003">
			<mx:columns>
				<mx:DataGridColumn
					headerText="Provider"
					dataField="name"
					width="190"/>
				<mx:DataGridColumn
					headerText="Initials"
					dataField="initials"
					width="60"/>
				<mx:DataGridColumn
					editable="true"
					headerText="Color"
					width="90"
					dataField="color"
					itemRenderer="gov.va.med.edp.widget.ColorSampleRenderer" />
			</mx:columns>
		</mx:DataGrid>
        <mx:VBox
        	verticalGap="2"
        	height="100%"
        	id="providerColorSelectorFrm"
        	visible="{providerDest.selectedItem != null}">
            <mx:Label text="Change Color"/>
            <widget:ColorSelector id="providerColorSelector" tabIndex="1004" color="{selectedProvider.color}" colorChange="fireColorChange(event)"/>
        </mx:VBox>
	</mx:HBox>

	<mx:HBox width="100%" height="100%" paddingTop="18">
		<mx:VBox verticalGap="0">
			<mx:Label text="Residents" styleName="controlLabel" />
			<widget:AutoComplete
				id="residentSrc"
				name="Autocomplete resident name"
				focusIn="setStaffSrc(residentSrc); enableButton(residentSrc,addResident)" 
				focusOut="setStaffSrc(null); enableButton(residentSrc,addResident)"
				keyUp="enableButton(residentSrc,addResident)"
				typedTextChange="setTimer(event)"
				selectedIndex="-1"
				prompt="(type resident name)"
				labelField="displayName"
				width="190"
				enter="addStaff(residentSrc, 'R', residentDest)"
                tabIndex="1010"/>
		</mx:VBox>
		<mx:Canvas height="100%">
			<mx:Button
				label="Add &gt;&gt;"
				id="addResident"
				initialize="{AccessibilityTools.accessComponentDescription(addResident,'Press button to add resident to the list.')}"
				top="{mdLabel.height}" horizontalCenter="0"
				click="addStaff(residentSrc, 'R', residentDest); enableButton(residentSrc,addResident)"
                tabIndex="1011"
                enabled="{false}"
                focusEnabled="false"/>
			<mx:Button
				label="Remove"
				id="remResident"
				initialize="{AccessibilityTools.accessComponentDescription(remResident,'Press button to remove resident from the list.')}"
				verticalCenter="0" horizontalCenter="0"
				click="removeStaff(residentDest)"
                tabIndex="1013"
                enabled="{residentDest.selectedItem != null}"
                    focusEnabled="false"/>
		</mx:Canvas>

		<mx:DataGrid
			id="residentDest"
			accessibilityProperties="{residentAccProps}"
			height="100%"
			editable="false"
			keyDown="handleRemoveAndEscKeys(event,residentDest)"
			dataProvider="{model.config.residents}"
			headerStyleName="controlLabel"
            tabIndex="1012">
			<mx:columns>
				<mx:DataGridColumn
					headerText="Resident"
					dataField="name"
					width="190"/>
				<mx:DataGridColumn
					headerText="Initials"
					dataField="initials"
					width="60"/>
				<mx:DataGridColumn
					editable="true"
					headerText="Color"
					width="90"
					dataField="color"
					itemRenderer="gov.va.med.edp.widget.ColorSampleRenderer" />
			</mx:columns>
		</mx:DataGrid>
        <mx:VBox
        	verticalGap="2"
        	height="100%"
        	id="residentColorSelectorFrm"
        	visible="{residentDest.selectedItem != null}">
            <mx:Label text="Change Color"/>
            <widget:ColorSelector id="residentColorSelector" tabIndex="1013" color="{selectedResident.color}" colorChange="fireColorChange(event)"/>
        </mx:VBox>		
	</mx:HBox>

	<mx:HBox width="100%" height="100%" paddingTop="18">
		<mx:VBox verticalGap="0">
			<mx:Label text="Nurses" styleName="controlLabel" />
			<widget:AutoComplete
				id="nurseSrc"
				name="Autocomplete nurse name"
				focusIn="setStaffSrc(nurseSrc); enableButton(nurseSrc,addNurse)" 
				focusOut="setStaffSrc(null); enableButton(nurseSrc,addNurse)"
				keyUp="enableButton(nurseSrc,addNurse)"
				typedTextChange="setTimer(event)"
				selectedIndex="-1"
				prompt="(type nurse name)"
				labelField="displayName"
				width="190"
				enter="addStaff(nurseSrc, 'N', nurseDest)"
                tabIndex="1020"/>
		</mx:VBox>
		<mx:Canvas height="100%">
			<mx:Button
				label="Add &gt;&gt;"
				id="addNurse"
				initialize="{AccessibilityTools.accessComponentDescription(addNurse,'Press button to add nurse to the list.')}"
				top="{mdLabel.height}" horizontalCenter="0"
				click="addStaff(nurseSrc, 'N', nurseDest); enableButton(nurseSrc,addNurse)"      
                enabled="{false}"
                tabIndex="1021"
                focusEnabled="false"/>
            <mx:Button
				label="Remove"
				id="remNurse"
                initialize="{AccessibilityTools.accessComponentDescription(remNurse,'Press button to remove nurse from the list.')}"
            	verticalCenter="0" horizontalCenter="0"
				click="removeStaff(nurseDest)"
                enabled="{nurseDest.selectedItem != null}"
                tabIndex="1023"
                focusEnabled="false"/>
		</mx:Canvas>
		<mx:DataGrid
			id="nurseDest"
			accessibilityProperties="{nurseAccProps}"
			height="100%"
			editable="false"	
			keyDown="handleRemoveAndEscKeys(event,nurseDest)"
			dataProvider="{model.config.nurses}"
			headerStyleName="controlLabel"
            tabIndex="1022">
			<mx:columns>
				<mx:DataGridColumn
					headerText="Nurse"
					dataField="name"
					width="190"/>
				<mx:DataGridColumn
					headerText="Initials"
					dataField="initials"
					width="60"/>
				<mx:DataGridColumn
					editable="true"
					headerText="Color"
					width="90"
					dataField="color"
					itemRenderer="gov.va.med.edp.widget.ColorSampleRenderer" />
			</mx:columns>
		</mx:DataGrid>
        <mx:VBox
        	verticalGap="2"
        	height="100%"
        	id="nurseColorSelectorFrm"
        	visible="{nurseDest.selectedItem != null}">
            <mx:Label text="Change Color"/>
            <widget:ColorSelector id="nurseColorSelector" tabIndex="1023" color="{selectedNurse.color}" colorChange="fireColorChange(event)"/>
        </mx:VBox>			
	</mx:HBox>

	<mx:Canvas width="100%" >
		<mx:Button
			id = "btnSaveStaff"
			label="Save Staff Changes"
			enabled="{(model.config.staffMods &amp;&amp; model.config.staffConfigLoaded)}"
			horizontalCenter="0" top="6" bottom="6"
			click="saveStaff()"
            tabIndex="1100"/>
	</mx:Canvas>
	<accessibility:AccessibilityProperties id="residentAccProps" name="active residents list"/>
	<accessibility:AccessibilityProperties id="providerAccProps" name="active providers list"/>
	<accessibility:AccessibilityProperties id="nurseAccProps" name="active nurses list"/>
	<mx:Binding source="model.config.srcStaffReady" destination="staffSrcReady" />
 	<mx:Binding source="StaffMemberVO(providerDest.selectedItem)" destination="selectedProvider"/>  	
 	<mx:Binding source="StaffMemberVO(residentDest.selectedItem)" destination="selectedResident"/>  	
 	<mx:Binding source="StaffMemberVO(nurseDest.selectedItem)" destination="selectedNurse"/>  	
</mx:VBox>