<?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:gauges="ardisia.components.gauges.*"
          xmlns:containers="containers.*"
          xmlns:data="containers.data.*"
          xmlns:separators="ardisia.components.separators.*"
          xmlns:colorPicker="ardisia.components.colorPicker.*"
          frameRate="60"
          width="100%" height="100%"
          removedFromStage="removedFromStageHandler(event)" 
          currentState="london">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            
            //--------------------------------------
            //  methods
            //--------------------------------------
            
            public function creationComplete():void
            {
                demoAppWrapper.topLevelCompassContainer.centerRegionInstance.addEventListener(MouseEvent.ROLL_OVER, function(event:MouseEvent):void
                {
                    demoAppWrapper.topLevelCompassContainer.centerRegionInstance.setFocus();
                });
            }
            
            protected function labelsFormatFunction(value:Number):Object
            {
                return nf.format(value) + "%";
            }
            
            //--------------------------------------
            //  event handlers
            //--------------------------------------
            
            protected function removedFromStageHandler(event:Event):void
            {
                
            }
            
        ]]>
    </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="LinearGauges Description"
                                       eastRegionTitle="Bound Values"
                                       description="Linear Gauges that support labels, tick marks, multiple thumbs, and a range button between multiple thumbs.&#13;&#13;At first, these gauges may appear to be much heavier than the Flex SDK SliderBase classes, but the additional functionality is optional. Therefore, you only pay in performance for functionality you want."
                                       currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
        
        <containers:expandingContainerContent>
            
            <!--- expanding container #1 -->
            <data:ExpandingContainerData>
                <data:label>API</data:label>
                <data:content>
                    <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."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Data Tip:">
                        <s:CheckBox id="showDataTipSelect"
                                    selected="false"/>
                    </s:FormItem>
                    <s:FormItem label="Format Fn:">
                        <s:CheckBox id="labelsFormatFunctionSelect"
                                    selected="false"
                                    change="if(labelsFormatFunctionSelect.selected){vLinearGauge.labelsFormatFunction=hLinearGauge.labelsFormatFunction=labelsFormatFunction}else{vLinearGauge.labelsFormatFunction=hLinearGauge.labelsFormatFunction=null;}"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The callback function used to format the labels.  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="9" snapInterval="1" value="1"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Default precision for the number formatter used to format the tick labels if a labelsFormatFunction is not provided.&#13;&#13;Only relevant for fractional values for the major ticks."/>
                        </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="6" snapInterval="1"/>
                    </s:FormItem>
                    <s:FormItem enabled="{showTicksSelect.selected}" 
                                label="Minor Ticks:">
                        <s:NumericStepper id="minorTickCountSelect"
                                          width="100"
                                          minimum="0" maximum="10" value="1" 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>
                    <s:FormItem label="MultiThumb:">
                        <s:CheckBox id="useMultiThumbsSelect"
                                    selected="true"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="True to display 2 thumbs. False to create only 1 thumb like a vanilla slider.&#13;&#13;Must be true to display the range button."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem enabled="{useMultiThumbsSelect.selected}"
                                label="Min Range:">
                        <s:HSlider id="minRangeSelect"
                                   width="100"
                                   minimum="0" maximum="50" snapInterval="10" value="0"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The minimum allowed numerical difference between the values of each thumb. In other words, the minimum allowable difference between values[0] and values[1].&#13;&#13;Only relevant if the 'useMultiThumbs' property is true."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem enabled="{useMultiThumbsSelect.selected}"
                                label="Max Range:">
                        <s:HSlider id="maxRangeSelect"
                                   width="100"
                                   minimum="{minRangeSelect.value + 10}" maximum="200" snapInterval="10" value="200"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The maximum allowed numerical difference between the values of each thumb. In other words, the maximum allowable difference between values[0] and values[1].&#13;&#13;Only relevant if the 'useMultiThumbs' property is true."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem enabled="{useMultiThumbsSelect.selected}" 
                                label="Show Range:">
                        <s:CheckBox id="showRangeSelect"
                                    selected="true"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Display a draggable button between the thumbs.&#13;&#13;Only relevant if the 'useMultiThumbs' property is true."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Thumb Labels:">
                        <s:CheckBox id="showThumbLabelsSelect"
                                    selected="true"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="True to display labels along with the thumbs."/>
                        </s:helpContent>
                    </s:FormItem>
                </data:content>
            </data:ExpandingContainerData>
            
            <!--- expanding container #2 -->
            <data:ExpandingContainerData>
                <data:label>Styling</data:label>
                <data:content>
                    <s:FormHeading label="Major Tick"/>
                    <s:FormItem label="Color:">
                        <colorPicker:ColorPicker id="majorTickColorSelect"
                                                 selectedColor.spark="#000000" selectedColor.stockholm="#454545" selectedColor.london="#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="1"/>
                    </s:FormItem>
                    <s:FormHeading label="Minor Tick"/>
                    <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.stockholm="#BCBCBC" selectedColor.london="#BCBCBC"/>
                    </s:FormItem>
                    <s:FormItem enabled="{showTicksSelect.selected}" 
                                label="Length:">
                        <s:HSlider id="minorTickLengthSelect"
                                   width="100"
                                   minimum="1" maximum="20" snapInterval="1" 
                                   value.spark="5" value="10"/>
                    </s:FormItem>
                    <s:FormItem enabled="{showTicksSelect.selected}" 
                                label="Weight:">
                        <s:HSlider id="minorTickThicknessSelect"
                                   width="100"
                                   minimum="1" maximum="10" 
                                   snapInterval="1" 
                                   value="1"/>
                    </s:FormItem>
                    
                    <separators:HSeparator width="100%"
                                           paddingTop="5" paddingBottom="5"/>
                    <s:FormItem enabled="{showTicksSelect.selected}" 
                                label="TickOffset:">
                        <s:HSlider id="tickOffsetSelect"
                                   width="100"
                                   minimum="-10" maximum="20" snapInterval="1" 
                                   value.stockholm="10" value.london="5" value.spark="1"/>
                    </s:FormItem>
                    <s:FormItem label="Label Offset:">
                        <s:HSlider id="labelOffsetSelect"
                                   width="100"
                                   minimum="1" maximum="10" snapInterval="1" 
                                   value="5" value.spark="12"/>
                    </s:FormItem>
                    <s:FormItem enabled="{showThumbLabelsSelect.selected}"
                                label="H Label Offset:">
                        <s:HSlider id="hThumbLabelOffsetSelect"
                                   width="100"
                                   minimum="-20" maximum="20" snapInterval="1" 
                                   value="-3"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Amount to offset the horizontal thumb label."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem enabled="{showThumbLabelsSelect.selected}"
                                label="V Label Offset:">
                        <s:HSlider id="vThumbLabelOffsetSelect"
                                   width="100"
                                   minimum="-20" maximum="20" snapInterval="1" 
                                   value="-2"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Amount to offset the vertical thumb label."/>
                        </s:helpContent>
                    </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 slide animation when the track is clicked and a thumb animates to the new value."/>
                        </s:helpContent>
                    </s:FormItem>
                </data:content>
            </data:ExpandingContainerData>
            
        </containers:expandingContainerContent>
        
        <!--- east content -->
        <containers:eastContent>
            <s:VGroup top="10" left="10" horizontalAlign="justify">
                <s:Form>
                    <s:FormHeading label="HLinearGauge"/>
                    <s:FormItem label="Value">
                        <s:Label text="{String(hLinearGauge.value)}"
                                 paddingTop="5"/>
                    </s:FormItem>
                    <s:FormItem label="Values[0]">
                        <s:Label text="{String(hLinearGauge.values.getItemAt(0))}"
                                 paddingTop="5"/>
                    </s:FormItem>
                    <s:FormItem label="Values[1]">
                        <s:Label text="{String(hLinearGauge.values.getItemAt(1))}"
                                 paddingTop="5"/>
                    </s:FormItem>
                </s:Form>
                <s:Form>
                    <s:FormHeading label="VLinearGauge"/>
                    <s:FormItem label="Value">
                        <s:Label text="{String(vLinearGauge.value)}"
                                 paddingTop="5"/>
                    </s:FormItem>
                    <s:FormItem label="Values[0]">
                        <s:Label text="{String(vLinearGauge.values.getItemAt(0))}"
                                 paddingTop="5"/>
                    </s:FormItem>
                    <s:FormItem label="Values[1]">
                        <s:Label text="{String(vLinearGauge.values.getItemAt(1))}"
                                 paddingTop="5"/>
                    </s:FormItem>
                </s:Form>
            </s:VGroup>
        </containers:eastContent>
        
        <containers:centerContent>
            
            <!--- example #1 -->
            <data:PrimaryContentData>
                <data:tabLabel>Examples</data:tabLabel>
                <data:exampleDescription>Both the horizontal and vertical linear gauges are below.&#13;&#13;Try dragging one of the thumbs, or drag the range between the thumbs, or click directly on the track and the closest thumb will animate to the new value.&#13;&#13;Supports keyboard interaction when focused.</data:exampleDescription>
                <data:primaryContent>
                    <s:HGroup horizontalCenter="0" verticalCenter="0"
                              gap="20"
                              verticalAlign="justify">
                        <gauges:HLinearGauge id="hLinearGauge" 
                                             width="250" height="100"
                                             verticalCenter="0"
                                             showTicks="{showTicksSelect.selected}"
                                             maximumRangeValue="{maxRangeSelect.value}"
                                             minimumRangeValue="{minRangeSelect.value}"
                                             values="{new ArrayCollection([-25, 25])}"
                                             showDataTip="{showDataTipSelect.selected}"
                                             editable="{editableSelect.selected}" 
                                             majorTickCount="{majorTickCountSelect.value}" 
                                             minorTickCount="{minorTickCountSelect.value}" 
                                             showTickLabels="{showTickLabelsSelect.selected}" 
                                             snapInterval="{snapIntervalSelect.value}" 
                                             minimum="{minimumSelect.value}" 
                                             maximum="{maximumSelect.value}" 
                                             useMultiThumbs="{useMultiThumbsSelect.selected}"
                                             showRange="{showRangeSelect.selected}"
                                             showThumbLabels="{showThumbLabelsSelect.selected}"
                                             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}"
                                             labelDefaultPrecision="{labelDefaultPrecisionSelect.value}" 
                                             thumbLabelOffset="{hThumbLabelOffsetSelect.value}"
                                             labelOffset="{labelOffsetSelect.value}"/>
                        <gauges:VLinearGauge  id="vLinearGauge" 
                                              height="250" width="100"
                                              showTicks="{showTicksSelect.selected}"
                                              maximumRangeValue="{maxRangeSelect.value}"
                                              minimumRangeValue="{minRangeSelect.value}"
                                              values="{new ArrayCollection([-25, 25])}"
                                              showDataTip="{showDataTipSelect.selected}"
                                              editable="{editableSelect.selected}" 
                                              majorTickCount="{majorTickCountSelect.value}" 
                                              minorTickCount="{minorTickCountSelect.value}" 
                                              showTickLabels="{showTickLabelsSelect.selected}" 
                                              snapInterval="{snapIntervalSelect.value}" 
                                              minimum="{minimumSelect.value}" 
                                              maximum="{maximumSelect.value}" 
                                              useMultiThumbs="{useMultiThumbsSelect.selected}"
                                              showRange="{showRangeSelect.selected}"
                                              showThumbLabels="{showThumbLabelsSelect.selected}"
                                              slideDuration="{slideDurationSelect.value}"
                                              majorTickColor="{majorTickColorSelect.selectedColor}"
                                              majorTickLength="{majorTickLengthSelect.value}"
                                              majorTickForm="{majorTickFormSelect.selectedItem}"
                                              minorTickColor="{minorTickColorSelect.selectedColor}"
                                              minorTickLength="{minorTickLengthSelect.value}"
                                              minorTickForm="{minorTickFormSelect.selectedItem}"
                                              labelDefaultPrecision="{labelDefaultPrecisionSelect.value}" 
                                              majorTickThickness="{majorTickThicknessSelect.value}"
                                              minorTickThickness="{minorTickThicknessSelect.value}"
                                              tickOffset="{tickOffsetSelect.value}"
                                              thumbLabelOffset="{vThumbLabelOffsetSelect.value}"
                                              labelOffset="{labelOffsetSelect.value}"/>
                        
                    </s:HGroup>
                </data:primaryContent>
            </data:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>