<?xml version="1.0" encoding="utf-8"?>
<!-- ColorSelector.mxml assumes a listcontrol passes in a "color" property -->

<mx:HBox
	xmlns:mx="http://www.adobe.com/2006/mxml"
	horizontalScrollPolicy="off" verticalScrollPolicy="off"
	horizontalGap="3" creationComplete="setCorrectState()" xmlns:accessibility="flash.accessibility.*">
	<mx:Metadata>
		[Event(name="colorChange", type="gov.va.med.edp.control.config.ColorChangedEvent")]
	</mx:Metadata>
	<mx:Script>
	<![CDATA[
		import gov.va.med.edp.util.AccessibilityTools;
		import gov.va.med.edp.control.config.ColorChangedEvent;
		import gov.va.med.edp.control.config.ConfigurationEvent;
		import mx.controls.dataGridClasses.DataGridListData;
		import gov.va.med.edp.vo.ColorSelectionVO;
		
		private var _data: Object;
		
		private var _color:ColorSelectionVO = new ColorSelectionVO();
	
		[Bindable]
		private var _baseTabIndex:int;
	
		[Bindable]
		public function get color():ColorSelectionVO {
			return _color;
		}
	
		public function set color(c:ColorSelectionVO):void {
			initColor(c);
		}
	
		[Bindable]
		public override function get tabIndex():int {
			return super.tabIndex;
		}
		
		public override function set tabIndex(index:int):void {
			super.tabIndex = index;
			_baseTabIndex = index;
		}
	
		override public function set data(value:Object):void
		{
			if (value == null) return;
			_data = value;
			var curColor: ColorSelectionVO = value["color"] as ColorSelectionVO;
			initColor(curColor);	
		}
		
		private function initColor(c:ColorSelectionVO):void {
				if (c == null) {
				_color.ignore = true;
				_color.text = 0;
				_color.back = 0xffffff;
			} else {
				_color.ignore = c.ignore;
				_color.text = c.text;
				_color.back = c.back;
			}
			
			useColor.selected = !_color.ignore;
			if (_color.ignore) {
				_color.back = 0xFFFFFF;
				_color.text = 0;
			}
			textColor.selectedColor = _color.text;
			backColor.selectedColor = _color.back;
			textColorTxt.text = rgbToHex(_color.text);
			backColorTxt.text = rgbToHex(_color.back);	
		}
		
		override public function get data(): Object
		{
			return _data;
			
		}
		
		private function changeIgnore(): void
		{
			_color.ignore = !useColor.selected;
			_color.back = 0xFFFFFF;
			_color.text = 0;
			
			backColorTxt.visible = useColor.selected;
			textColorTxt.visible = useColor.selected;
			dispatchEvent(new ColorChangedEvent(_color));
		}
		
		private function changeColor(): void
		{
			if (AccessibilityTools.isAccessibilityActive()){
				if (textColorTxt.text.length == 6){
				_color.text = uint("0x" + textColorTxt.text);
				_color.back = uint("0x" + backColorTxt.text);
				dispatchEvent(new ColorChangedEvent(_color));
				} else {
					return;
				}
			} else {
				_color.text = textColor.selectedColor;
				_color.back = backColor.selectedColor;
				dispatchEvent(new ColorChangedEvent(_color));
			}
			
		}
		
		private function setCorrectState(): void
		{
			if (AccessibilityTools.isAccessibilityActive()) currentState = 'accessible'
			else currentState = '';
		}		
		
	    private function rgbToHex(color:uint):String
	    {
	        // Find hex number in the RGB offset
	        var colorInHex:String = color.toString(16);
	        var c:String = "00000" + colorInHex;
	        var e:int = c.length;
	        c = c.substring(e - 6, e);
	        return c.toUpperCase();
	    }		
			
	]]>
	</mx:Script>

	<mx:CheckBox id="useColor" accessibilityProperties="{useColorProps}" label="Use Color" selected="false" paddingTop="2" change="changeIgnore()" tabIndex="{_baseTabIndex + 1}"/>
	<mx:Label id="textLbl" text="Text" paddingTop="2" visible="{useColor.selected}" />
	<mx:ColorPicker id="textColor" change="changeColor()" editable="false" showTextField="false" visible="{useColor.selected}" tabIndex="{_baseTabIndex + 2}"/>
	<mx:Label id="backLbl" text="Back" paddingTop="2" visible="{useColor.selected}" />
	<mx:ColorPicker id="backColor" change="changeColor()" editable="false" showTextField="false" visible="{useColor.selected}" tabIndex="{_baseTabIndex + 3}"/>
	
	<accessibility:AccessibilityProperties id="useColorProps" name="use color" />
	<accessibility:AccessibilityProperties id="backColorProps" name="enter background color in 6 digit hex string format" />
	<accessibility:AccessibilityProperties id="textColorProps" name="enter text color in 6 digit hex string format" />
	
    <mx:states>
        <mx:State name="accessible">
        	 <mx:RemoveChild target="{textColor}"/>
            <mx:AddChild relativeTo="{textLbl}" position="after">
                <mx:target>
                        <mx:TextInput maxChars="6" id="textColorTxt" accessibilityProperties="{textColorProps}" change="changeColor()" width="55" restrict="#xabcdefABCDEF0123456789" visible="{useColor.selected}" tabIndex="{_baseTabIndex + 2}"/>
                </mx:target>
            </mx:AddChild>
            <mx:SetProperty target="{textColorTxt}" name="text" value="{rgbToHex(color.text)}"/>
            <mx:RemoveChild target="{backColor}"/>
            <mx:AddChild relativeTo="{backLbl}" position="after">
                <mx:target>
                    <mx:TextInput id="backColorTxt" maxChars="6" change="changeColor()" accessibilityProperties="{backColorProps}" width="55" restrict="#xXabcdefABCDEF0123456789" visible="{useColor.selected}" tabIndex="{_baseTabIndex + 3}"/>
                </mx:target>
            </mx:AddChild>
            <mx:SetProperty target="{backColorTxt}" name="text" value="{rgbToHex(color.back)}"/>
        </mx:State>
    </mx:states>	
	
</mx:HBox>