<?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:iconButton="ardisia.components.iconButton.*" 
          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)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            import mx.core.IVisualElementContainer;
            
            import ardisia.components.iconButton.themes.spark.skins.IconButtonBlackSkin;
            
            //--------------------------------------
            //  methods
            //--------------------------------------
            
            public function creationComplete():void
            {
                
            }
            
            //--------------------------------------
            //  event handlers
            //--------------------------------------
            
            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="IconButton Description"
                                       description="A button optimized to display an icon and display its label using a flyout animation.&#13;&#13;For the default skin, the color of the icon is automatically changed to black by default and to white on rollover via a ColorTransform filter in the skin."
                                       currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
        
        <containers:centerContent>
            
            <!--- example #1 -->
            <data:PrimaryContentData>
                <data:tabLabel>Single Button Example</data:tabLabel>
                <data:exampleDescription>A single IconButton.&#13;&#13;The icon changes color to white on rollover via a ColorTransform filter so only one icon is necessary.</data:exampleDescription>
                <data:toolbarContent>
                    <s:HGroup gap="20">
                        <s:Form>
                            <s:FormHeading label="Properties"/>
                            <s:FormItem label="Label:">
                                <s:TextInput id="labelA" 
                                             width="100"
                                             text="Button label goes here"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The label to display on hover."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Icon:">
                                <s:DropDownList id="iconSelectA"
                                                width="100"
                                                selectedIndex="0"
                                                labelField="label">
                                    <s:ArrayCollection>
                                        <fx:Object label="cross" icon="@Embed(source='icons/cross.png')" />
                                        <fx:Object label="plus" icon="@Embed(source='icons/plus.png')" />
                                        <fx:Object label="arrow left" icon="@Embed(source='icons/arrow-left.png')" />
                                        <fx:Object label="arrow right" icon="@Embed(source='icons/arrow-right.png')" />
                                        <fx:Object label="arrow down" icon="@Embed(source='icons/arrow-down.png')" />
                                        <fx:Object label="arrow up" icon="@Embed(source='icons/arrow-up.png')" />
                                        <fx:Object label="globe" icon="@Embed(source='icons/open-iconic-master/globe-2x.png')" />
                                        <fx:Object label="paperclip" icon="@Embed(source='icons/open-iconic-master/paperclip-2x.png')" />
                                    </s:ArrayCollection>
                                </s:DropDownList>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="Can set any arbitrary icon, but a few sample ones are provided here.&#13;&#13;By default, the skin will use a ColorTransform filter to make each icon solid black by default and solid white on rollover."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Icon Offset X:">
                                <s:HSlider id="iconOffsetXA"
                                           width="100"
                                           minimum="-10" maximum="10" value="0"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="Custom style to offset the icon along the x axis."/>
                                </s:helpContent>
                            </s:FormItem>
                            
                            <s:FormItem label="Icon Offset Y:">
                                <s:HSlider id="iconOffsetYA"
                                           width="100"
                                           minimum="-10" maximum="10" value="0"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="Custom style to offset the icon along the y axis"/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Show Flyout Label:">
                                <s:CheckBox id="showFlyoutSelect"
                                            selected="true"/>
                            </s:FormItem>
                        </s:Form>
                        <s:Form enabled="{showFlyoutSelect.selected}">
                            <s:FormHeading label="Flyout Properties"/>
                            <s:FormItem label="Flyout Direction:">
                                <s:DropDownList id="flyoutDirectionASelect"
                                                width="100"
                                                selectedIndex="1">
                                    <s:ArrayCollection>
                                        <fx:String>above</fx:String>
                                        <fx:String>right</fx:String>
                                        <fx:String>below</fx:String>
                                        <fx:String>left</fx:String>
                                    </s:ArrayCollection>
                                </s:DropDownList>
                            </s:FormItem>
                            <s:FormItem label="Flyout Distance:">
                                <s:HSlider id="flyoutDistanceSelectA"
                                           width="100"
                                           minimum="0" maximum="200" value="20"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The number of pixels for the flyout label to move."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Duration:">
                                <s:HSlider id="durationSelectA" 
                                           width="100"
                                           minimum="0" maximum="1000" value="500"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The duration of the flyout animation.&#13;&#13;Set to 0 to skip the animation altogether."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                        <s:Form enabled="{showFlyoutSelect.selected}">
                            <s:FormHeading label="Flyout Styles"/>
                            
                            <s:FormItem label="Flyout Background Color:">
                                <colorPicker:ColorPicker id="flyoutBackgroundColorSelectA" 
                                                         selectedColor="#FFFFFF"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The background color of the flyout label."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Flyout Background Alpha:">
                                <s:HSlider id="flyoutBackgroundAlphaSelectA" 
                                           width="100"
                                           minimum="0" maximum="1" value="1" snapInterval="0"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The background alpha of the flyout label."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem label="Flyout Text Color:">
                                <colorPicker:ColorPicker id="flyoutColorSelectA" 
                                                         selectedColor="#000000"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The color of the text for the flyout label."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                    </s:HGroup>
                </data:toolbarContent>
                <data:primaryContent>
                    <iconButton:IconButton horizontalCenter="0" verticalCenter="0"
                                           icon="{iconSelectA.selectedItem.icon}"
                                           label="{labelA.text}"
                                           iconOffsetX="{iconOffsetXA.value}"
                                           iconOffsetY="{iconOffsetYA.value}"
                                           flyoutBackgroundColor="{flyoutBackgroundColorSelectA.selectedColor}"
                                           flyoutBackgroundAlpha="{flyoutBackgroundAlphaSelectA.value}"
                                           flyoutColor="{flyoutColorSelectA.selectedColor}"
                                           duration="{durationSelectA.value}"
                                           showFlyoutLabel="{showFlyoutSelect.selected}"
                                           flyoutDirection="{flyoutDirectionASelect.selectedItem}"
                                           flyoutDistance="{flyoutDistanceSelectA.value}"/>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #2 -->
            <data:PrimaryContentData>
                <data:tabLabel>Multiple Buttons Example</data:tabLabel>
                <data:exampleDescription>Example of multiple IconButtons each with a different value for the 'flyoutDirection' property.</data:exampleDescription>
                <data:primaryContent>
                    <s:HGroup horizontalCenter="0" verticalCenter="0">
                        <iconButton:IconButton icon="@Embed(source='icons/arrow-left.png')"
                                               label="Flyout label for the button"
                                               flyoutDirection="left"/>
                        <iconButton:IconButton icon="@Embed(source='icons/arrow-up.png')"
                                               label="Flyout label for the button"
                                               flyoutDirection="above"/>
                        <iconButton:IconButton icon="@Embed(source='icons/arrow-down.png')"
                                               label="Flyout label for the button"
                                               flyoutDirection="below"/>
                        <iconButton:IconButton icon="@Embed(source='icons/arrow-right.png')"
                                               label="Flyout label for the button"
                                               flyoutDirection="right"/>
                    </s:HGroup>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #3 -->
            <data:PrimaryContentData>
                <data:tabLabel>Overflow Example</data:tabLabel>
                <data:exampleDescription>Example of how the flyout direction will flip if the label will overflow the screen.&#13;&#13;For this example, the 'flyoutDirection' property is set to 'right', but since it will overflow the screen, the direction is automatically flipped to 'left'.</data:exampleDescription>
                <data:primaryContent>
                    <iconButton:IconButton verticalCenter="0"
                                           right="10"
                                           icon="@Embed(source='icons/cross.png')"
                                           label="Flyout direction automatically flipped from right to left to avoid screen overflow"
                                           flyoutDirection="right"/>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #4 -->
            <data:PrimaryContentData>
                <data:tabLabel>Black Style</data:tabLabel>
                <data:exampleDescription>The IconButton can be customized via Spark skinning.&#13;&#13;For this example, the color transform applied to the icon on rollover is black instead of white like in the earlier examples.</data:exampleDescription>
                <data:primaryContent>
                    <iconButton:IconButton id="blackIconButtonA" 
                                           verticalCenter="0" horizontalCenter="0"
                                           icon="@Embed(source='icons/arrow-left.png')"
                                           label="Different color transform on this button."
                                           skinClass="ardisia.components.iconButton.themes.spark.skins.IconButtonBlackSkin"/>
                </data:primaryContent>
            </data:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>