<!--
Copyright (c) 2007 Stretch Media Group

Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.

Features:

- Provides time entry for hours, minutes and seconds in 24 and 12 hour format  
- Resizable to fit various text sizes, and also allows for styling of stepper buttons, border, and background
- Can use numeric stepper to increase/decrease hour, minute, second, am/pm entries
- Can use keyboard up/down, left/right to increase/decrease hour, minute, second, am/pm entries
- Hour, minute, second, am/pm entries wrap if reaching max/min values
- Can tab through fields
- Can enable/disable component
- Easily provide hour/minute/text values for preset/updatable time

Properties: 

hour : the numeric value of the selected hour (if provided, overrides the defaultHour value)
minute : the numeric value of the selected minute (if provided, overrides the defaultMinute value)
second : the numeric value of the selected second (if provided, overrides the defaultSecond value)
am_pm : the string value of the selected am/pm entry ("am", "pm")
defaultHour : the hour which you want the selector to default to (is overriden if hour argument is provided)
defaultMinute : the minute which you want the selector to default to (is overriden if minute argument is provided)
defaultSecond : the second which you want the selector to default to (is overriden if second argument is provided)
showSeconds : show seconds entry in selector
is24Hour : if false hour selector allows range of 1-12 and am/pm entry is enabled
		   if true hour selector allows range of 0-23 and am/pm entry is disabled

Revisions:

* 2008.3.3 - added accessibility functionality for hours, minutes, and seconds so that it can be read by JAWS reader.

-->

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"  
           creationComplete="createComplete();" tabChildren="true">

    <mx:NumberValidator id="hourValidator" source="{hourText}" exceedsMaxError="" lowerThanMinError="" integerError=""
                        property="text" maxValue="{maxHour}" minValue="{minHour}"
                        trigger="{hourText}" triggerEvent="change" invalid="hourText.text = String(maxHour); hourText.errorString = '';" />
    <mx:NumberValidator id="minuteValidator" source="{minuteText}" exceedsMaxError="" lowerThanMinError="" integerError=""
                        property="text" maxValue="59" minValue="0" 
                        trigger="{minuteText}" triggerEvent="change" invalid="minuteText.text = '59'" allowNegative="false"  />
    <mx:NumberValidator id="secondValidator" source="{secondText}" exceedsMaxError="" lowerThanMinError="" integerError=""
                        property="text" maxValue="59" minValue="0" 
                        trigger="{secondText}" triggerEvent="change" invalid="secondText.text = '59'" allowNegative="false"  />
    
    <mx:NumericStepper id="timeStepper" x="0" y="0" height="80%" width="100" fontSize="0" textAlign="right" paddingLeft="100"
                       focusAlpha="0" borderThickness="0" borderStyle="none" maximum="99" minimum="-99"
                       change="changeStepValue(event)" backgroundAlpha="0" color="{this.getStyle('backgroundColor')}"
                       click="_focusArea.setFocus();" focusEnabled="false"/>
       
    <mx:HBox id="timeBox" 
    	     horizontalGap="0" 
    	     verticalAlign="center" 
    	     height="100%"
             horizontalScrollPolicy="off"
             verticalScrollPolicy="off" 
             backgroundAlpha="0" 
             creationComplete="setTimeStepperPosition();">
            
            
        <mx:TextInput id="hourText" 
        	          initialize="{AccessibilityTools.accessComponentName(hourText,'Enter Hours')}" 
        	          height="100%" 
        	          borderThickness="0" 
        	          borderStyle="none" 
        	          backgroundAlpha="0" 
                      textAlign="center" 
                      maxChars="2"
                      editable="false"
                      text="{formatText(String(hour), 'hourText')}" 
                      keyDown="keyHandler(event)" 
                      mouseUp="setTextFocus(event)" 
                      mouseDown="setTextFocus(event)" 
                      focusOut="fixText(event)" 
                      tabIndex="{_tabIndexBase}"
                      focusIn="setTextFocus(event)" 
                      change="setValues(event)"
                      focusAlpha="0" 
                      errorString=""/>
                          
                      <mx:Spacer width="-8" /><mx:Label text=":" /><mx:Spacer width="-16" />
            
        <mx:TextInput id="minuteText" 
        	          initialize="{AccessibilityTools.accessComponentName(minuteText,'Enter Minutes')}"
        	          height="100%" 
        	          borderThickness="0" 
        	          borderStyle="none" 
        	          backgroundAlpha="0" 
                      textAlign="center" 
                      maxChars="2" 
                      editable="false"
                      text="{formatText(String(minute), 'minuteText')}" 
                      keyDown="keyHandler(event)" 
                      mouseUp="setTextFocus(event)" 
                      mouseDown="setTextFocus(event)"
                      focusOut="fixText(event)" 
                      focusIn="setTextFocus(event)" 
                      tabIndex="{_tabIndexBase + 1}"
                      change="setValues(event)"
                      focusAlpha="0"   />
            
                      <mx:Spacer width="-8" includeInLayout="{showSeconds}" visible="{showSeconds}" />
                      <mx:Label text=":" includeInLayout="{showSeconds}" visible="{showSeconds}" />
                      <mx:Spacer width="-16" includeInLayout="{showSeconds}" visible="{showSeconds}" />
            
        <mx:TextInput id="secondText" 
        	          initialize="{AccessibilityTools.accessComponentName(secondText,'Enter Seconds')}"
        	          height="100%" 
        	          borderThickness="0"
        	          borderStyle="none" 
        	          backgroundAlpha="0" 
                      textAlign="center" 
                      maxChars="2"
                      text="{formatText(String(second), 'secondText')}"
                      keyDown="keyHandler(event)" 
                      mouseUp="setTextFocus(event)" 
                      mouseDown="setTextFocus(event)" 
                      focusOut="fixText(event)" 
                      focusIn="setTextFocus(event)" 
                      change="setValues(event)"
                      focusAlpha="0" 
                      includeInLayout="{showSeconds}" 
                      visible="{showSeconds}" />
        
                      <mx:Spacer width="-8" includeInLayout="{!is24Hour}" visible="{!is24Hour}" />
            
        
        <mx:TextInput id="amPMText" 
        	          height="100%" 
        	          borderThickness="0" 
        	          borderStyle="none" 
        	          backgroundAlpha="0" 
                      textAlign="center" 
                      maxChars="2"
                      text="{this.am_pm}" 
                      keyDown="amPMKeyHandler(event)" 
                      mouseUp="setTextFocus(event)" 
                      mouseDown="setTextFocus(event)" 
                      focusAlpha="0" 
                      focusIn="setTextFocus(event)" 
                      editable="false" 
                      includeInLayout="{!is24Hour}" 
                      visible="{!is24Hour}"  />
                      
                      <mx:Spacer width="-5" includeInLayout="{!is24Hour}" visible="{!is24Hour}" />
                        
    </mx:HBox> 
    
       
       <mx:Script>
           <![CDATA[
           	import mx.events.DateChooserEvent;
            import mx.controls.NumericStepper;
            import mx.events.NumericStepperEvent;
            import mx.core.UITextField;
            import flash.events.MouseEvent;
            import gov.va.med.edp.util.AccessibilityTools;
            
            
            private var _timeValue:Object;
            private var _focusArea:TextInput;
            private var _focusText:TextField;
            private var _currentStepValue:Number;
            [Bindable] private var maxHour:Number;
            [Bindable] private var minHour:Number;
           
           
            [Bindable] public var hour:Number = 0;
			[Bindable] public var minute:Number = 0;
            [Bindable] public var second:Number = 0;
            [Bindable] public var am_pm:String = 'am';
            [Bindable] public var showSeconds:Boolean;
            [Bindable] public var is24Hour:Boolean;
            public var defaultHour:Number;
            public var defaultMinute:Number = 0;
            public var defaultSecond:Number = 0;
            
/*             [Bindable]
            public function get totalSeconds(): int
            {
            	return ((this.hour * 3600) + (this.minute * 60) + this.second);
            }
            
            public function set totalSeconds(value: int): void
            {
            	this.hour = int(value / 3600);
            	this.minute = int((value % 3600) / 60);
            	this.second = int(value % 60);
            } */
            
			[Bindable]
			private var _tabIndexBase:int = -1;            

	        public function set tabIndexBase(value:int):void {
	        	_tabIndexBase = value;
	        }
	
	        public function get tabIndexBase():int {
	            return _tabIndexBase;
	        }

            public function get timeValue():Object
            {
            	var tmpTime:Object = new Object();
            	tmpTime.hour = this.hour;
            	tmpTime.minute = this.minute;
            	tmpTime.second = this.second;
            	return tmpTime;
            }
            
            public function set timeValue(value:Object):void
            {
            	this._timeValue = value;
            }
            
            override public function setFocus():void
            {
            	_focusArea.setFocus();
            }
            
            private function createComplete():void
            {
            	this.focusEnabled = true;
                this.tabEnabled = true;
                this.mouseFocusEnabled = true;
                
                if(!this.hour) 
                {
                	String(this.hour);
                    this.hour = Number(hourText.text);
                }
                else
                {
                	if(defaultHour)
                	{
                		hourText.text = String(defaultHour);
                	}
                	else
                	{
                		(is24Hour) ? hourText.text = "12" : hourText.text = "1";
                	}  
                }
                if(!this.minute)
                {
                    minuteText.text = (defaultMinute < 10) ? "0" + String(defaultMinute) : String(defaultMinute);
                    this.minute = Number(minuteText.text);
                }
                if(!this.second)
                {
                    secondText.text = (defaultSecond < 10) ? "0" + String(defaultSecond) : String(defaultSecond);
                    this.second = Number(secondText.text);
                }
                
                if(!this.am_pm)
                {
                    this.am_pm = (is24Hour) ? 'pm' : "am";;
                }
                
                (is24Hour) ? maxHour = 23 : maxHour = 12;
                (is24Hour) ? minHour = 0 : minHour = 1;
                
                if(!_focusArea) 
                {
                    _focusArea = hourText;
                    _currentStepValue = Number(_focusArea.text);
                    timeStepper.value = _currentStepValue;
                }    
                
            }
            private function setTextFocus(event:Event):void
            {
                _focusArea = event.currentTarget as TextInput;
                _focusText = event.target as TextField;
                TextField(event.target).setSelection(0, 2);
                if(event.currentTarget != amPMText)
                {
                    _currentStepValue = Number(_focusArea.text);
                    timeStepper.value = _currentStepValue;
                }
                setStepValue();
                
            }
            
            private function setTimeStepperPosition():void
            {
                if(timeBox) timeStepper.x = (!is24Hour) ? (timeBox.width - (timeStepper.width * 0.72)) : timeBox.width - (timeStepper.width * 0.8);
            }
            
            private function setStepValue():void
            {
                if(_focusArea == amPMText)
                {
                    timeStepper.minimum = -99;
                    timeStepper.maximum = 99;
                }
            }
            
            private function changeStepValue(event:Event):void
            {
                if(_focusArea != amPMText)
                {
                    if(_focusArea == hourText)
                    {
                        var tmpMinValue:Number = (is24Hour) ? 0 : 1;
                        if(NumericStepper(event.target).value > maxHour)
                        {
                            NumericStepper(event.target).value = (is24Hour) ? 0 : 1;
                        }
                        else if(NumericStepper(event.target).value < tmpMinValue)
                        {
                            NumericStepper(event.target).value = (is24Hour) ? 23 : 12;
                        }
                    }
                    if(_focusArea == minuteText || _focusArea == secondText)
                    {
                        if(NumericStepper(event.target).value > 59)
                        {
                            NumericStepper(event.target).value = 0;
                        }
                        else if(NumericStepper(event.target).value < 0)
                        {
                            NumericStepper(event.target).value = 59;
                        }
                    }
                    
                    _focusArea.setFocus();
                    if(_focusArea == hourText) this.hour = NumericStepper(event.target).value;
                    if(_focusArea == minuteText) this.minute = NumericStepper(event.target).value;
                    if(_focusArea == secondText) this.second = NumericStepper(event.target).value;
                }
                else
                {
                    amPMText.text = (amPMText.text == "am") ? "pm" : "am";
                    this.am_pm = amPMText.text;
                }
            }
            
            private function fixText(event:Event):void
            {
                if(!(event.currentTarget == hourText && !is24Hour))
                {
                    _focusArea.text = (_focusArea.text.length < 2) ? "0" + _focusArea.text : _focusArea.text;
                }
                _focusArea.setSelection(0, 2);
                if(event.currentTarget == hourText) this.hour = Number(event.currentTarget.text);
                if(event.currentTarget == minuteText) this.minute = Number(timeStepper.value);
                if(event.currentTarget == secondText) this.second = Number(timeStepper.value);
            }
            
            private function setValues(event:Event):void
            {
                if(event.currentTarget == hourText)
                {
                    if(hourValidator.validate(Number(event.currentTarget.text))){
                     	timeStepper.value = Number(event.currentTarget.text);
                     	this.hour = Number(event.currentTarget.text);
                    }
                }
                if(event.currentTarget == minuteText)
                {
                    if(minuteValidator.validate(Number(event.currentTarget.text))) {
                    	timeStepper.value = Number(event.currentTarget.text);
                    	this.minute = Number(event.currentTarget.text);
                    }
                }
                if(event.currentTarget == secondText)
                {
                    if(secondValidator.validate(Number(event.currentTarget.text))) timeStepper.value = Number(event.currentTarget.text);
                }
                                
            }
            
            private function formatText(value:String, theField:String):String
            {
                if(_focusArea) _focusArea.setSelection(0, 2);
                if(Number(value) > 12 && !is24Hour && theField == 'hourText')
                {
                    value = String(Number(value) % 12);
                }
                if(theField == 'hourText' && !is24Hour)
                {
                    return value;
                }
                else
                {
                    return (value.length < 2) ? ("0" + value) : value;
                }
            }
            
            private function keyHandler(event:KeyboardEvent):void
            {
                if(event.keyCode == 39 || event.keyCode == 38) 
                {
                    if(_focusArea == hourText)
                    {
                        _currentStepValue++;
                        var tmpMaxValue:Number = (is24Hour) ? (maxHour) : maxHour;
                        if(_currentStepValue > tmpMaxValue)
                        {
                            _currentStepValue = (is24Hour) ? 0 : 1;
                        }

                      }
                    else if(_focusArea == minuteText || _focusArea == secondText )
                    {
                        _currentStepValue++;
                        if(_currentStepValue > 59)
                        {
                            _currentStepValue = 0;
                        }
                        
                    }
                    timeStepper.value = _currentStepValue;
                    timeStepper.dispatchEvent(new NumericStepperEvent('change'));
                    _focusArea.setSelection(0, 2);
                }
                if(event.keyCode == 37 || event.keyCode == 40) 
                {
                    if(_focusArea == hourText)
                    {
                        _currentStepValue--;
                        var tmpMinValue:Number = (is24Hour) ? 0 : 1;
                        if(_currentStepValue < tmpMinValue)
                        {
                            _currentStepValue = (is24Hour) ? 23 : 12;
                        }
                    }
                    else if(_focusArea == minuteText || _focusArea == secondText )
                    {
                        _currentStepValue--;
                        if(_currentStepValue < 0)
                        {
                            _currentStepValue = 59;
                        }
                    }
                    timeStepper.value = _currentStepValue;
                    timeStepper.dispatchEvent(new NumericStepperEvent('change'));
                    
                    _focusArea.setSelection(0, 2);
                }
            }
            
            private function amPMKeyHandler(event:KeyboardEvent):void
            {
                if(event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 37 || event.keyCode == 39) 
                {
                    amPMText.text = (amPMText.text == "am") ? "pm" : "am";
                    this.am_pm = amPMText.text;
                    _focusArea.setSelection(0, 2);
                }
                
            }
           ]]>
       </mx:Script>
       
</mx:Canvas>