<?xml version="1.0" encoding="utf-8"?>
<!--

////////////////////////////////////////////////////////////////////////////////
//
//    Copyright 2014 Ardisia Labs LLC. All Rights Reserved.
//
//    This file is licensed under the Apache License, Version 2.0 (the "License");
//    you may not use this file except in compliance with the License.
//    You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
//    Unless required by applicable law or agreed to in writing, software
//    distributed under the License is distributed on an "AS IS" BASIS,
//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//    See the License for the specific language governing permissions and
//    limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////

-->
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/mx" 
          xmlns:containers="containers.*"
          xmlns:data="containers.data.*" 
          xmlns:progressDisplay="ardisia.components.progressDisplay.*"
          xmlns:animatedImage="ardisia.components.animatedImage.*"
          xmlns:separators="ardisia.components.separators.*"
          frameRate="60"
          width="100%" height="100%"
          removedFromStage="removedFromStageHandler(event)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            import flash.utils.getTimer;
            
            import ardisia.components.pane.events.PaneEvent;
            import ardisia.components.progressDisplay.ProgressDisplayDeterminate;
            import ardisia.components.progressDisplay.ProgressDisplayIndeterminate;
            import ardisia.components.progressDisplay.baseClasses.ProgressDisplayBase;
            
            //--------------------------------------
            //  variables
            //--------------------------------------
            
            protected var indeterminate:Boolean;
            
            protected var timer:Timer;
            
            protected var relativeTimer:Number;
            
            protected var progressDisplay:ProgressDisplayBase;
            
            //--------------------------------------
            //  methods
            //--------------------------------------
            
            public function creationComplete():void
            {
                
            }
            
            //--------------------------------------
            //  event handlers
            //--------------------------------------
            
            protected function floatHandler(event:MouseEvent):void
            {
                if (progressDisplay && progressDisplay.isFloating)
                    return;
                
                switch (event.currentTarget)
                {
                    
                    case snakeButton:
                        indeterminate = true;
                        progressDisplay = new ProgressDisplayIndeterminate();
                        progressDisplay.label = "Loading...";
                        progressDisplay.delayBeforeFloat = preDelaySelect.value;
                        progressDisplay.minimumFloatTime = minDisplayTime.value;
                        progressDisplay.delayAfterCloseFloat = postDelaySelect.value;
                        progressDisplay.timeoutDuration = timeoutDurationSelect.value;
                        progressDisplay.show(this, modalSelect.selected, moduleFactory);
                        
                        break;
                    
                    case arcButton:
                        indeterminate = false;
                        progressDisplay = new ProgressDisplayDeterminate();
                        progressDisplay.delayBeforeFloat = preDelaySelectB.value;
                        progressDisplay.minimumFloatTime = minDisplayTimeB.value;
                        progressDisplay.delayAfterCloseFloat = postDelaySelectB.value;
                        progressDisplay.timeoutDuration = timeoutDurationSelectB.value;
                        progressDisplay.show(this, modalSelectB.selected, moduleFactory);
                        
                        break;
                }
                
                relativeTimer = getTimer();
                
                addEventListener(Event.ENTER_FRAME, eventHandler);
                progressDisplay.addEventListener(PaneEvent.CLOSED, eventHandler);
            }
            
            protected function eventHandler(event:Event):void
            {
                switch (event.type)
                {
                    
                    case Event.ENTER_FRAME:
                        if (indeterminate)
                            progressDisplay.label = "Running Time " + String(getTimer() - relativeTimer);
                        if (!indeterminate)
                        {
                            if (progressDisplay is ProgressDisplayDeterminate)
                            {
                                ProgressDisplayDeterminate(progressDisplay).updateProgress((getTimer() - relativeTimer) / runtimeSelect.value);
                            }
                            if (getTimer() - relativeTimer > runtimeSelect.value)
                            {
                                progressDisplay.close();
                            }
                        }
                        
                        break;
                    
                    case PaneEvent.CLOSED:
                        removeEventListener(Event.ENTER_FRAME, eventHandler);
                        progressDisplay.removeEventListener(PaneEvent.CLOSED, eventHandler);
                        
                        break;
                    
                }
                
            }
            
            protected function removedFromStageHandler(event:Event):void
            {
                
            }
            
        ]]>
    </fx:Script>
    
    <!-- declarations -->
    <fx:Declarations>
        
    </fx:Declarations>
    
    <!-- states -->
    <s:states>
        <s:State name="stockholm" />
        <s:State name="london" />
        <s:State name="spark" />
    </s:states>
    
    <!-- application -->
    <containers:DemoApplicationWrapper id="demoAppWrapper" 
                                       width="100%" height="100%"
                                       westRegionTitle="ProgressDisplay Description"
                                       description="The ProgressDisplay Components provide easy and customizable ways to provide feedback to users regarding the progress of some process, most likely a loading process.&#13;&#13;The displays come in two flavors: (i) the ProgressDisplayIndeterminate component, which displays an AnimatedImage with the ability to update a label to display a general message. Developers can display and update the label with any string desired. Since the animation does not change to reflect the progress of a process, the display is 'Indeterminate'. (ii) The ProgressDisplayDeterminate component supports an animation that will display how far along a process has progressed.&#13;&#13;By default, the ProgressDisplayIndeterminate skin uses a snake animation and the ProgressDisplayDeterminate skin draws an arc as the process progresses.&#13;&#13;These components are skinnable and easily customized."
                                       currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
        
        <containers:centerContent>
            
            <!--- example #1 -->
            <data:PrimaryContentData>
                <data:tabLabel>ProgressDisplay - Snake Skin</data:tabLabel>
                <data:exampleDescription>Indeterminate Example. ProgressImage component using a skin with an embedded Snake animation.&#13;&#13;Snake spritesheet template is included.</data:exampleDescription>
                <data:toolbarContent>
                    <s:HGroup verticalAlign="justify">
                        <s:Form>
                            <s:FormItem>
                                <s:Button id="snakeButton" 
                                          label="Float The ProgressDisplay"
                                          click="floatHandler(event)"/>
                            </s:FormItem>
                        </s:Form>
                        <separators:VSeparator height="100%"
                                               paddingLeft="-10" paddingRight="15"/>
                        <s:Form>
                            <s:FormItem label="Timeout">
                                <s:HSlider id="timeoutDurationSelect"
                                           minimum="1000" maximum="20000" value="5000"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The maximum duration the progressDisplay will be popped up and displayed before being removed and closed.&#13;&#13;Useful to hide a progressDisplay in case the process never completes."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Modal">
                                <s:CheckBox id="modalSelect"
                                            selected="true"/>
                            </s:FormItem>
                            <s:FormItem label="Delay Before Float">
                                <s:HSlider id="preDelaySelect"
                                           minimum="0" maximum="5000" value="0"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The delay before the display is floated after floating is requested.&#13;&#13;Useful to prevent display if the duration of the process being tracked is too short."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                        <s:Form>
                            <s:FormItem label="Min Display Time">
                                <s:HSlider id="minDisplayTime"
                                           minimum="0" maximum="10000" value="0"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The minimum time the progressDisplay will be displayed.&#13;&#13;If close is requested before this duration has been reached, the progressDisplay will be displayed until this duration has passed and and then the progressDisplay will be closed."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Delay Post Close">
                                <s:HSlider id="postDelaySelect"
                                           minimum="0" maximum="5000" value="0"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The delay after close is called before the progressDisplay is removed from display."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                    </s:HGroup>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:Group />
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #2 -->
            <data:PrimaryContentData>
                <data:tabLabel>ProgressDisplay - Arc Skin</data:tabLabel>
                <data:exampleDescription>Determinate Example.</data:exampleDescription>
                <data:toolbarContent>
                    <s:HGroup verticalAlign="justify">
                        <s:Form>
                            <s:FormItem label="Run Time">
                                <s:HSlider id="runtimeSelect"
                                           minimum="1000" maximum="60000" value="5000"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="Time this progress display should run."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem>
                                <s:Button id="arcButton" 
                                          label="Float The ProgressDisplay"
                                          click="floatHandler(event)"/>
                            </s:FormItem>
                        </s:Form>
                        <separators:VSeparator height="100%"
                                               paddingLeft="-10" paddingRight="15"/>
                        <s:Form>
                            <s:FormItem label="Timeout">
                                <s:HSlider id="timeoutDurationSelectB"
                                           minimum="1000" maximum="60000" value="30000"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The maximum duration the progressDisplay will be popped up and displayed before being removed and closed.&#13;&#13;Useful to hide a progressDisplay in case the process never completes."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Modal">
                                <s:CheckBox id="modalSelectB"
                                            selected="true"/>
                            </s:FormItem>
                            <s:FormItem label="Delay Before Float">
                                <s:HSlider id="preDelaySelectB"
                                           minimum="0" maximum="5000" value="0"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The delay before the display is floated after floating is requested.&#13;&#13;Useful to prevent display if the duration of the process being tracked is too short."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                        <s:Form>
                            <s:FormItem label="Min Display Time">
                                <s:HSlider id="minDisplayTimeB"
                                           minimum="0" maximum="60000" value="0"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The minimum time the progressDisplay will be displayed.&#13;&#13;If close is requested before this duration has been reached, the progressDisplay will be displayed until this duration has passed and and then the progressDisplay will be closed."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Delay Post Close">
                                <s:HSlider id="postDelaySelectB"
                                           minimum="0" maximum="5000" value="500"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The delay after close is called before the progressDisplay is removed from display."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                    </s:HGroup>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:Group />
                </data:primaryContent>
            </data:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>