<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:components="freeflowingcode.components.*"
    layout="absolute" width="100%" height="100%" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
            import flash.utils.getTimer;
            import mx.controls.Alert;
                        
            // this function will fire while the timer bar ticks
            // pass any function into the timer bar to call
            private function timerTick():void{
                trace("tick function: " + timerbar.getTime());
            }
            
            // this function will fire when the timer bar is complete
            // pass any function into the timer to call
            private function timerComplete():void{
                Alert.show("Timer Finished");
            }
        ]]>
    </mx:Script>
    
    <mx:Style source="/assets/css/yflexskin.css" />
    
    <!--app canvas-->
    <mx:Canvas width="100%" height="100%">
    
        <!--example of component with no modifications-->
        <mx:Label top="25" left="25" fontWeight="bold" text="base component" />
        <components:TimerBar top="60" left="25" creationComplete="event.currentTarget.init()" />        
        
        <!--example of component with full modifications-->
        <mx:Label top="25" left="165" fontWeight="bold" text="customized component" />
        <components:TimerBar id="timerbar" top="60" left="165" creationComplete="event.currentTarget.init()"
            width="{barWidth.value}" height="{barHeight.value}" startOnInit="{timerStart.selected}"
            cornerRadius="{cornerRadius.value}" timerOwner="{tabone}" tick="timerTick" complete="timerComplete"
            totalTime="{timerTotal.value}" delay="{timerDelay.value}" showText="{showText.selected}"
            direction="{timerDirection.selectedItem}" reverseProgress="{reverse.selected}"
            text="{timerText.text}" shake="{shake.selected}" />
                
        <mx:TabNavigator id="tabnav" width="185" height="160" top="25" right="10">
            <mx:VBox id="tabone" label="Tab One" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
                <mx:Text width="100%" text="Tab One is set as the timer bar owner.  When this tab is hidden the timer stops.  Any IUIComponent can be the owner." fontWeight="bold" />
            </mx:VBox>
            <mx:VBox id="tabtwo" label="Tab Two" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
                <mx:Text width="100%" text="The component uses the AutoRefresher class to make this happen" fontWeight="bold" />
            </mx:VBox>            
        </mx:TabNavigator>
        
        <!--demo controls-->
        <mx:HBox top="250" width="100%" height="100%" borderStyle="solid" paddingTop="20" paddingLeft="20">
            <mx:VBox width="100%">
                <mx:HBox width="100%">
                    <mx:Label text="barWidth:" fontWeight="bold" />
                    <mx:HSlider id="barWidth" value="100" snapInterval="1" minimum="30" maximum="350" width="100" liveDragging="false" change="timerbar.init()" />
                </mx:HBox>
                <mx:HBox width="100%">
                    <mx:Label text="barHeight:" fontWeight="bold" />
                    <mx:HSlider id="barHeight" value="30" snapInterval="1" minimum="5" maximum="175" width="100" liveDragging="false" change="timerbar.init()" />
                </mx:HBox>
                <mx:HBox width="100%">
                    <mx:Label text="corderRadius:" fontWeight="bold" />
                    <mx:HSlider id="cornerRadius" value="5" snapInterval="1" minimum="0" maximum="20" width="100" liveDragging="true" />
                </mx:HBox>    
                <mx:HBox width="100%">
                    <mx:Label text="Total Time:" fontWeight="bold" />
                    <mx:HSlider id="timerTotal" value="10" snapInterval="1" minimum="10" maximum="250" width="100" liveDragging="false" change="timerbar.totalTime = event.currentTarget.value; timerbar.init()" />
                </mx:HBox>
                <mx:HBox width="100%">
                    <mx:Label text="Tick Interval:" fontWeight="bold" />
                    <mx:HSlider id="timerDelay" value="1" snapInterval="1" minimum="1" maximum="5" width="100" liveDragging="false" change="timerbar.delay = event.currentTarget.value; timerbar.init()" />
                </mx:HBox>            
            </mx:VBox>
            <mx:VBox width="100%">
                <mx:CheckBox id="shake" label="Shake On Complete" fontWeight="bold" selected="true" />
                <mx:CheckBox id="reverse" label="Reverse Progress" fontWeight="bold" selected="false" change="timerbar.reverseProgress = event.currentTarget.selected; timerbar.init()" />
                <mx:ComboBox id="timerDirection" selectedIndex="0" change="timerbar.init()">
                    <mx:String>horizontal</mx:String>
                    <mx:String>vertical</mx:String>
                </mx:ComboBox>                                
            </mx:VBox>
            <mx:VBox width="100%">
                <mx:CheckBox id="countdown" label="Count Down" fontWeight="bold" selected="true" change="timerbar.countDown = event.currentTarget.selected; timerbar.init()" />
                <mx:CheckBox id="showText" fontWeight="bold" label="Show Text" selected="true" />
                <mx:HBox width="100%">
                    <mx:Label text="Timer Text:" fontWeight="bold" />
                    <mx:TextInput id="timerText" />                    
                </mx:HBox>        
            </mx:VBox>
            <mx:VBox width="100%">
                <mx:CheckBox id="timerStart" fontWeight="bold" label="timer autostart" selected="true" />
                <mx:Button label="Restart Timer" click="timerbar.init()" />            
                <mx:Button label="Pause Timer" click="timerbar.stop()" />            
                <mx:Button label="Start Timer" click="timerbar.start()" />                
            </mx:VBox>
        </mx:HBox>        
    </mx:Canvas>
</mx:Application>