<?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:colorPicker="ardisia.components.colorPicker.*" 
          xmlns:gauges="ardisia.components.gauges.*"
          xmlns:containers="containers.*"
          xmlns:data="containers.data.*"
          xmlns:separators="ardisia.components.separators.*"
          frameRate="60"
          width="100%" height="100%"
          removedFromStage="removedFromStageHandler(event)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            import mx.core.UIComponent;
            
            import spark.effects.Animate;
            import spark.effects.animation.MotionPath;
            import spark.effects.animation.SimpleMotionPath;
            import spark.effects.easing.Power;
            import spark.events.IndexChangeEvent;
            
            import ardisia.components.expandingContainer.ExpandingContainer;
            
            //--------------------------------------
            //  variables
            //--------------------------------------
            
            protected var timer:Timer;
            
            protected var animator:Animate;
            
            protected var motionPath:SimpleMotionPath;
            
            //--------------------------------------
            //  methods
            //--------------------------------------
            
            public function creationComplete():void
            {
                demoAppWrapper.topLevelCompassContainer.centerRegionInstance.addEventListener(MouseEvent.ROLL_OVER, function(event:MouseEvent):void
                {
                    demoAppWrapper.topLevelCompassContainer.centerRegionInstance.setFocus();
                });
                demoAppWrapper.viewstack.addEventListener(IndexChangeEvent.CHANGE, function(event:IndexChangeEvent):void
                {
                    if (demoAppWrapper.viewstack.selectedIndex == 2)
                    {
                        if (timer && timer.running)
                            return;
                        
                        if (!animator)
                        {
                            timer = new Timer(1000);
                            timer.addEventListener(TimerEvent.TIMER, timerHandler);
                            animator = new Animate();
                            animator.duration = 500;
                            animator.easer = new Power();
                            motionPath = new SimpleMotionPath("value");
                            animator.motionPaths = new <MotionPath>[;
                            animator.target = dashboardGuage;
                        }
                        
                        motionPath.valueFrom = 0;
                        motionPath.valueTo = 500;
                        
                        animator.play();
                        timer.start();
                    }
                    var enabled:Boolean = demoAppWrapper.viewstack.selectedIndex == 0;
                    demoAppWrapper.topLevelCompassContainer.eastRegionInstance.enabled = enabled;
                    for (var i:int = 0; i < demoAppWrapper.westVerticalGroup.numElements; i++)
                    {
                        var child:UIComponent = demoAppWrapper.westVerticalGroup.getElementAt(i) as UIComponent;
                        if (child is ExpandingContainer)
                            child.enabled = enabled;
                    }
                });
            }
            
            protected function labelsFormatFunction(value:Number):Object
            {
                return nf.format(value) + "%";
            }
            
            //--------------------------------------
            //  event handlers
            //--------------------------------------
            
            protected function timerHandler(event:TimerEvent):void
            {
                var rand:Number = Math.round(Math.random() * 1000);
                
                motionPath.valueFrom = dashboardGuage.value;
                motionPath.valueTo = rand;
                
                animator.play();
                
                downloadsLabel.text = String(rand);
            }
            
            protected function removedFromStageHandler(event:Event):void
            {
                if (animator)
                    animator.stop();
                if (timer)
                    timer.stop();
            }
            
        ]]>
    </fx:Script>
    
    <!-- declarations -->
    <fx:Declarations>
        
        <s:NumberFormatter id="nf"
                           fractionalDigits="1"
                           trailingZeros="false"/>
        
    </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="RadialGauge Description"
                                       eastRegionTitle="Bound Values"
                                       description="Radial gauge that supports labels, tick marks, and start and end angles.&#13;&#13;Supports an extensive API.  See the examples."
                                       currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
        
        <!--- east content -->
        <containers:eastContent>
            
            <s:VGroup top="10" left="10" horizontalAlign="justify">
                <s:Form id="formC">
                    <s:FormHeading label="RadialGauge"/>
                    <s:FormItem label="Value">
                        <s:Label text="{String(RadialGauge.value)}"
                                 paddingTop="5"/>
                    </s:FormItem>
                </s:Form>
            </s:VGroup>
            
        </containers:eastContent>
        
        <containers:expandingContainerContent>
            
            <!--- expanding container #1 -->
            <data:ExpandingContainerData>
                <data:label>API</data:label>
                <data:content>
                    <s:FormItem label="Angle Start:">
                        <s:HSlider id="angleStartSelect"
                                   width="100"
                                   minimum="0" maximum="360" value="135"/>
                        
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The angle at which to begin drawing the gauge arc in degrees"/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Angle End:">
                        <s:HSlider id="angleEndSelect"
                                   width="100"
                                   minimum="0" maximum="360" value="45"/>
                        
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The angle at which to end the drawing of the gauge arc in degrees"/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Width:">
                        <s:HSlider id="widthSelect"
                                   width="100"
                                   minimum="50" maximum="400" value="300" snapInterval="10"/>
                    </s:FormItem>
                    <s:FormItem label="Height:">
                        <s:HSlider id="heightSelect"
                                   width="100"
                                   minimum="50" maximum="400" value="300" snapInterval="10"/>
                    </s:FormItem>
                    <s:FormItem label="Editable:">
                        <s:CheckBox id="editableSelect"
                                    selected="true"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Whether the value can be changed via user interaction.&#13;&#13;If false, can be used to statically display information without disabling the control.&#13;&#13;For example, could display download speed."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Data Tip:">
                        <s:CheckBox id="showDataTipSelect"
                                    selected="true"/>
                        
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Display a data tip when dragging the needle (thumb)."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Format Fn:">
                        <s:CheckBox id="labelsFormatFunctionSelect"
                                    selected="false"
                                    change="if(labelsFormatFunctionSelect.selected){RadialGauge.labelsFormatFunction=labelsFormatFunction}else{RadialGauge.labelsFormatFunction=null;}"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The callback function used to format the labels and data tip.  Use this property to parse numerical values into strings if desired."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Precision:"
                                enabled="{!labelsFormatFunctionSelect.selected}">
                        <s:NumericStepper id="labelDefaultPrecisionSelect"
                                          width="100"
                                          minimum="0" maximum="10" snapInterval="1" value="1"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Default precision for the number formatter if a labelsFormatFunction is not provided."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Show Ticks:">
                        <s:CheckBox id="showTicksSelect"
                                    selected="true"/>
                    </s:FormItem>
                    <s:FormItem enabled="{showTicksSelect.selected}" 
                                label="Major Ticks:">
                        <s:NumericStepper id="majorTickCountSelect"
                                          width="100"
                                          minimum="2" maximum="20" value="9" snapInterval="1"/>
                    </s:FormItem>
                    <s:FormItem enabled="{showTicksSelect.selected}" 
                                label="Minor Ticks:">
                        <s:NumericStepper id="minorTickCountSelect"
                                          width="100"
                                          minimum="0" maximum="10" value="4" snapInterval="1"/>
                    </s:FormItem>
                    <s:FormItem enabled="{showTicksSelect.selected}" 
                                label="Tick Labels:">
                        <s:CheckBox id="showTickLabelsSelect"
                                    selected="true"/>
                    </s:FormItem>
                    
                    <s:FormItem label="Snap Interval:">
                        <s:NumericStepper id="snapIntervalSelect"
                                          width="100"
                                          minimum="0" maximum="10" snapInterval="0" value="1"/>
                    </s:FormItem>
                    <s:FormItem label="Minimum:">
                        <s:HSlider id="minimumSelect"
                                   width="100"
                                   minimum="-100" maximum="{maximumSelect.minimum-10}" snapInterval="10" value="-100"/>
                    </s:FormItem>
                    <s:FormItem label="Maximum:">
                        <s:HSlider id="maximumSelect"
                                   width="100"
                                   minimum="{minimumSelect.maximum+10}" maximum="100" snapInterval="10" value="100"/>
                    </s:FormItem>
                </data:content>
            </data:ExpandingContainerData>
            
            <!--- expanding container #2 -->
            <data:ExpandingContainerData>
                <data:label>Styling</data:label>
                <data:content>
                    <s:FormHeading label="Major Ticks"/>
                    <s:FormItem enabled="{showTicksSelect.selected}" 
                                label="Color:">
                        <colorPicker:ColorPicker id="majorTickColorSelect"
                                                 selectedColor.spark="#000000" selectedColor="#454545" />
                    </s:FormItem>
                    <s:FormItem enabled="{showTicksSelect.selected}" 
                                label="Form:">
                        <s:DropDownList id="majorTickFormSelect"
                                        width="100"
                                        selectedIndex="0"
                                        requireSelection="true">
                            <s:ArrayCollection>
                                <fx:String>line</fx:String>
                                <fx:String>circle</fx:String>
                            </s:ArrayCollection>
                        </s:DropDownList>
                    </s:FormItem>
                    <s:FormItem enabled="{showTicksSelect.selected}" 
                                label="Length:">
                        <s:HSlider id="majorTickLengthSelect"
                                   width="100"
                                   minimum="1" maximum="20" snapInterval="1" value="10"/>
                    </s:FormItem>
                    <s:FormItem enabled="{showTicksSelect.selected}" 
                                label="Weight:">
                        <s:HSlider id="majorTickThicknessSelect"
                                   width="100"
                                   minimum="1" maximum="10" snapInterval="1" value="4"/>
                    </s:FormItem>
                    <s:FormHeading label="Minor Ticks"/>
                    <s:FormItem enabled="{showTicksSelect.selected}" 
                                label="Form:">
                        <s:DropDownList id="minorTickFormSelect"
                                        width="100"
                                        selectedIndex="0"
                                        requireSelection="true">
                            <s:ArrayCollection>
                                <fx:String>line</fx:String>
                                <fx:String>circle</fx:String>
                            </s:ArrayCollection>
                        </s:DropDownList>
                    </s:FormItem>
                    <s:FormItem enabled="{showTicksSelect.selected}" 
                                label="Color:">
                        <colorPicker:ColorPicker id="minorTickColorSelect"
                                                 selectedColor.spark="#999999" selectedColor="#BCBCBC"/>
                    </s:FormItem>
                    <s:FormItem enabled="{showTicksSelect.selected}" 
                                label="Length:">
                        <s:HSlider id="minorTickLengthSelect"
                                   width="100"
                                   minimum="1" maximum="20" snapInterval="1" value="10"/>
                    </s:FormItem>
                    <s:FormItem enabled="{showTicksSelect.selected}" 
                                label="Weight:">
                        <s:HSlider id="minorTickThicknessSelect"
                                   width="100"
                                   minimum="1" maximum="10" snapInterval="1" value="2"/>
                    </s:FormItem>
                    <separators:HSeparator width="100%"
                                           paddingTop="5" paddingBottom="5"/>
                    <s:FormItem enabled="{showTicksSelect.selected}" 
                                label="TickOffset:">
                        <s:HSlider id="tickOffsetSelect"
                                   width="100"
                                   minimum="0" maximum="10" 
                                   snapInterval="1" 
                                   value="2"/>
                    </s:FormItem>
                    <s:FormItem enabled="{showTicksSelect.selected}" 
                                label="Label Offset:">
                        <s:HSlider id="labelOffsetSelect"
                                   width="100"
                                   minimum="0" maximum="10" 
                                   snapInterval="1" 
                                   value="8"/>
                    </s:FormItem>
                    <s:FormItem enabled="{showTicksSelect.selected}" 
                                label="Thumb Inset:">
                        <s:HSlider id="thumbInsetSelect"
                                   width="100"
                                   minimum="0" maximum="50" 
                                   snapInterval="1" 
                                   value="20"/>
                    </s:FormItem>
                    <s:FormItem label="Guage Inset:">
                        <s:HSlider id="insetSelect"
                                   width="100"
                                   minimum="1" maximum="30"
                                   snapInterval="1"
                                   value="2"/>
                    </s:FormItem>
                    
                    <s:FormHeading label="Animation"/>
                    <s:FormItem label="Duration:">
                        <s:HSlider id="slideDurationSelect"
                                   width="100"
                                   minimum="0" maximum="1000"
                                   snapInterval="1"
                                   value="500"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Duration of the needle animation when the track is clicked and the needle animates to the new value.">
                                <s:filters>
                                    <s:GlowFilter color="#000000"
                                                  alpha="0.35"
                                                  blurX="6" blurY="6"/>
                                </s:filters>
                            </s:Image>
                        </s:helpContent>
                    </s:FormItem>
                </data:content>
            </data:ExpandingContainerData>
            
        </containers:expandingContainerContent>
        
        <containers:centerContent>
            
            <!--- example #1 -->
            <data:PrimaryContentData>
                <data:tabLabel>Simple Example</data:tabLabel>
                <data:exampleDescription>Customizable example below.  Use the forms to the left to interact with the gauge.&#13;&#13;Can drag the thumb by mousing down over it and dragging.&#13;&#13;Supports keyboard interaction when focused.</data:exampleDescription>
                <data:primaryContent>
                    <s:BorderContainer horizontalCenter="0" verticalCenter="0">
                        <gauges:RadialGauge id="RadialGauge" 
                                            value="50"
                                            width="{widthSelect.value}" height="{heightSelect.value}"
                                            showTicks="{showTicksSelect.selected}"
                                            angleStart="{angleStartSelect.value}"
                                            angleEnd="{angleEndSelect.value}"
                                            showDataTip="{showDataTipSelect.selected}"
                                            editable="{editableSelect.selected}"
                                            labelDefaultPrecision="{labelDefaultPrecisionSelect.value}"
                                            majorTickCount="{majorTickCountSelect.value}"
                                            minorTickCount="{minorTickCountSelect.value}"
                                            showTickLabels="{showTickLabelsSelect.selected}"
                                            snapInterval="{snapIntervalSelect.value}"
                                            minimum="{minimumSelect.value}"
                                            maximum="{maximumSelect.value}"
                                            slideDuration="{slideDurationSelect.value}"
                                            majorTickColor="{majorTickColorSelect.selectedColor}"
                                            majorTickLength="{majorTickLengthSelect.value}"
                                            majorTickForm="{majorTickFormSelect.selectedItem}"
                                            minorTickColor="{minorTickColorSelect.selectedColor}"
                                            minorTickLength="{minorTickLengthSelect.value}"
                                            minorTickForm="{minorTickFormSelect.selectedItem}"
                                            majorTickThickness="{majorTickThicknessSelect.value}"
                                            minorTickThickness="{minorTickThicknessSelect.value}"
                                            tickOffset="{tickOffsetSelect.value}"
                                            labelOffset="{labelOffsetSelect.value}"
                                            thumbInset="{thumbInsetSelect.value}"
                                            inset="{insetSelect.value}"/>
                    </s:BorderContainer>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #2 -->
            <data:PrimaryContentData>
                <data:tabLabel>Multiple Gauges Example</data:tabLabel>
                <data:exampleDescription>Illustrative examples of possible angular configurations of the RadialGauge component.</data:exampleDescription>
                <data:primaryContent>
                    <s:TileGroup top="20" right="20" bottom="20" left="20"
                                 columnAlign="justifyUsingWidth" rowAlign="justifyUsingHeight"
                                 horizontalAlign="justify" verticalAlign="justify"
                                 requestedColumnCount="4">
                        <s:BorderContainer>
                            <gauges:RadialGauge width="100%" height="100%" 
                                                angleStart="-90" angleEnd="0"/>
                        </s:BorderContainer>
                        <s:BorderContainer>
                            <gauges:RadialGauge width="100%" height="100%" 
                                                angleStart="0" angleEnd="90"/>
                        </s:BorderContainer>
                        <s:BorderContainer>
                            <gauges:RadialGauge width="100%" height="100%" 
                                                angleStart="90" angleEnd="180"/>
                        </s:BorderContainer>
                        <s:BorderContainer>
                            <gauges:RadialGauge width="100%" height="100%" 
                                                angleStart="180" angleEnd="270"/>
                        </s:BorderContainer>
                        <s:BorderContainer>
                            <gauges:RadialGauge width="100%" height="100%" 
                                                angleStart="-45" angleEnd="45"/>
                        </s:BorderContainer>
                        <s:BorderContainer>
                            <gauges:RadialGauge width="100%" height="100%" 
                                                angleStart="45" angleEnd="90"/>
                        </s:BorderContainer>
                        <s:BorderContainer>
                            <gauges:RadialGauge width="100%" height="100%" 
                                                angleStart="135" angleEnd="180"/>
                        </s:BorderContainer>
                        <s:BorderContainer>
                            <gauges:RadialGauge width="100%" height="100%" 
                                                angleStart="235" angleEnd="270"/>
                        </s:BorderContainer>
                        <s:BorderContainer>
                            <gauges:RadialGauge width="100%" height="100%" 
                                                angleStart="-90" angleEnd="90"/>
                        </s:BorderContainer>
                        <s:BorderContainer>
                            <gauges:RadialGauge width="100%" height="100%" 
                                                angleStart="0" angleEnd="180"/>
                        </s:BorderContainer>
                        <s:BorderContainer>
                            <gauges:RadialGauge width="100%" height="100%" 
                                                angleStart="90" angleEnd="270"/>
                        </s:BorderContainer>
                        <s:BorderContainer>
                            <gauges:RadialGauge width="100%" height="100%" 
                                                angleStart="180" angleEnd="0"/>
                        </s:BorderContainer>
                    </s:TileGroup>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #3 -->
            <data:PrimaryContentData>
                <data:tabLabel>Dashboard Example</data:tabLabel>
                <data:exampleDescription>Illustrates the use of a RadialGauge as a non-interactive static infometric. The RadialGauge below has its 'editable' property set to false.&#13;&#13;Example is a fictional dashboard for the number of concurrent downloads occurring on a hypothetical website.</data:exampleDescription>
                <data:primaryContent>
                    <s:VGroup horizontalCenter="0" verticalCenter="0">
                        <s:HGroup verticalAlign="middle">
                            <s:Label text="Concurrent Downloads:"
                                     fontWeight="bold"/>
                            <s:Label id="downloadsLabel" 
                                     text="0"/>
                        </s:HGroup>
                        <gauges:RadialGauge id="dashboardGuage" 
                                            width="350" height="350"
                                            majorTickForm="circle"
                                            majorTickThickness="4"
                                            minorTickThickness="2"
                                            minorTickForm="line"
                                            minorTickCount="4"
                                            majorTickCount="9"
                                            labelOffset="12"
                                            editable="false"
                                            minimum="0" maximum="1000" value="0"/>
                    </s:VGroup>
                </data:primaryContent>
            </data:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>