<?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:separators="ardisia.components.separators.*"
          xmlns:colorPicker="ardisia.components.colorPicker.*"
          frameRate="60"
          width="100%" height="100%"
          removedFromStage="removedFromStageHandler(event)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            
            //--------------------------------------
            //  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="Separators Description"
                                       description="Visual elements that display vertical and horizontal separator lines.&#13;&#13;The Separator components enable developers to provide visually appealing breaks between layout elements and alter the spacing between elements without changing the gap in the layout.&#13;&#13;Replacement for the Flex SDK Spacer component and similar to the HR tag in HTML.&#13;&#13;Not skinned to be extremely lightweight and performant."
                                       currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
        
        <containers:expandingContainerContent>
            
            <!--- expanding container #1 -->
            <data:ExpandingContainerData>
                <data:label>Styling</data:label>
                <data:content>
                    <s:Form>
                        <s:FormHeading label="Primary Stroke:"/>
                        <s:FormItem label="Color:">
                            <colorPicker:ColorPicker id="primaryColorSelect" 
                                                     selectedColor.stockholm="#CDCDCD" selectedColor.london="#000000" selectedColor.spark="#000000"/>
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="The color of the primary stroke."/>
                            </s:helpContent>
                        </s:FormItem>
                        <s:FormItem label="Alpha:">
                            <s:HSlider id="primaryAlphaSelect" 
                                       width="100"
                                       minimum="0" maximum="1" snapInterval="0.05" stepSize="0.05" 
                                       value="1" value.london="0.15" value.spark="0.5"/>
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="The alpha of the primary stroke."/>
                            </s:helpContent>
                        </s:FormItem>
                        <s:FormItem label="Thickness:">
                            <s:HSlider id="primaryThicknessSelect" 
                                       width="100"
                                       minimum="0" maximum="10" snapInterval="1" stepSize="1" 
                                       value="1"/>
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="The thickness of the primary stroke."/>
                            </s:helpContent>
                        </s:FormItem>
                        
                        <separators:HSeparator width="100%"
                                               paddingBottom="6" paddingTop="6"/>
                        
                        <s:FormHeading label="Secondary Stroke:"/>
                        <s:FormItem label="Color:">
                            <colorPicker:ColorPicker id="secondaryColorSelect" 
                                                     selectedColor="#FFFFFF" selectedColor.spark="#000000"/>
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="The color of the secondary stroke."/>
                            </s:helpContent>
                        </s:FormItem>
                        <s:FormItem label="Alpha:">
                            <s:HSlider id="secondaryAlphaSelect" 
                                       width="100"
                                       minimum="0" maximum="1" 
                                       snapInterval="0.1" stepSize="0.1" 
                                       value="1" value.spark="0.2"/>
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="The alpha of the secondary stroke."/>
                            </s:helpContent>
                        </s:FormItem>
                        <s:FormItem label="Thickness:">
                            <s:HSlider id="secondaryThicknessSelect" 
                                       width="100"
                                       minimum="0" maximum="10" 
                                       snapInterval="1" stepSize="1" 
                                       value="1"/>
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="The thickness of the secondary stroke."/>
                            </s:helpContent>
                        </s:FormItem>
                    </s:Form>
                </data:content>
            </data:ExpandingContainerData>
            
        </containers:expandingContainerContent>
        
        <containers:centerContent>
            
            <!--- example #1 -->
            <data:PrimaryContentData>
                <data:tabLabel>Vertical Example</data:tabLabel>
                <data:exampleDescription>The vertical separator. Use the padding sliders below to adjust layout.</data:exampleDescription>
                <data:toolbarContent>
                    <s:Form>
                        <s:FormHeading label="Padding:"/>
                        <s:FormItem label="top:">
                            <s:HSlider id="topPaddingSelect1" 
                                       width="100"
                                       minimum="-10" maximum="50" value="0" />
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="The top padding to apply to the separator."/>
                            </s:helpContent>
                        </s:FormItem>
                        <s:FormItem label="right:">
                            <s:HSlider id="rightPaddingSelect1" 
                                       width="100"
                                       minimum="-10" maximum="50" value="20"/>
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="The right padding to apply to the separator."/>
                            </s:helpContent>
                        </s:FormItem>
                        <s:FormItem label="bottom:">
                            <s:HSlider id="bottomPaddingSelect1" 
                                       width="100"
                                       minimum="-10" maximum="50" value="0" />
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="The bottom padding to apply to the separator."/>
                            </s:helpContent>
                        </s:FormItem>
                        <s:FormItem label="left:">
                            <s:HSlider id="leftPaddingSelect1" 
                                       width="100"
                                       minimum="-10" maximum="50" value="20" />
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="The left padding to apply to the separator."/>
                            </s:helpContent>
                        </s:FormItem>
                    </s:Form>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:BorderContainer horizontalCenter="0" verticalCenter="0"
                                       backgroundColor="{getStyle('contentBackgroundColor')}">
                        <s:HGroup top="20" right="20" bottom="20" left="20" 
                                  verticalAlign="justify"
                                  gap="0">
                            <s:VGroup verticalAlign="middle"
                                      horizontalAlign="justify">
                                <s:Label text="Lorem Ipsum"
                                         fontWeight="bold"/>
                                <s:HGroup verticalAlign="middle">
                                    <s:Label width="75" 
                                             text="sit amet"/>
                                    <s:TextInput width="100"/>
                                </s:HGroup>
                                <s:HGroup verticalAlign="middle">
                                    <s:Label width="75" 
                                             text="consectetur"/>
                                    <s:TextInput width="100"/>
                                </s:HGroup>
                                <s:HGroup verticalAlign="middle">
                                    <s:Label width="75" 
                                             text="adipisicing"/>
                                    <s:TextInput width="100"/>
                                </s:HGroup>
                                <s:HGroup verticalAlign="middle">
                                    <s:Label width="75" 
                                             text="sed do"/>
                                    <s:TextInput width="100"/>
                                </s:HGroup>
                            </s:VGroup>
                            <separators:VSeparator depth="1" 
                                                   primaryStrokeColor="{primaryColorSelect.selectedColor}"
                                                   primaryStrokeAlpha="{primaryAlphaSelect.value}"
                                                   primaryStrokeThickness="{primaryThicknessSelect.value}"
                                                   secondaryStrokeAlpha="{secondaryAlphaSelect.value}"
                                                   secondaryStrokeColor="{secondaryColorSelect.selectedColor}"
                                                   secondaryStrokeThickness="{secondaryThicknessSelect.value}"
                                                   paddingTop="{topPaddingSelect1.value}"
                                                   paddingRight="{rightPaddingSelect1.value}"
                                                   paddingBottom="{bottomPaddingSelect1.value}"
                                                   paddingLeft="{leftPaddingSelect1.value}"/>
                            <s:VGroup verticalAlign="middle"
                                      horizontalAlign="justify">
                                <s:Label text="Lorem Ipsum"
                                         fontWeight="bold"/>
                                <s:HGroup verticalAlign="middle">
                                    <s:Label width="75" 
                                             text="sit amet"/>
                                    <s:TextInput width="100"/>
                                </s:HGroup>
                                <s:HGroup verticalAlign="middle">
                                    <s:Label width="75" 
                                             text="consectetur"/>
                                    <s:TextInput width="100"/>
                                </s:HGroup>
                                <s:HGroup verticalAlign="middle">
                                    <s:Label width="75" 
                                             text="adipisicing"/>
                                    <s:TextInput width="100"/>
                                </s:HGroup>
                                <s:HGroup verticalAlign="middle">
                                    <s:Label width="75" 
                                             text="sed do"/>
                                    <s:TextInput width="100"/>
                                </s:HGroup>
                            </s:VGroup>
                            <separators:VSeparator depth="1" 
                                                   primaryStrokeColor="{primaryColorSelect.selectedColor}"
                                                   primaryStrokeAlpha="{primaryAlphaSelect.value}"
                                                   primaryStrokeThickness="{primaryThicknessSelect.value}"
                                                   secondaryStrokeAlpha="{secondaryAlphaSelect.value}"
                                                   secondaryStrokeColor="{secondaryColorSelect.selectedColor}"
                                                   secondaryStrokeThickness="{secondaryThicknessSelect.value}"
                                                   paddingTop="{topPaddingSelect1.value}"
                                                   paddingRight="{rightPaddingSelect1.value}"
                                                   paddingBottom="{bottomPaddingSelect1.value}"
                                                   paddingLeft="{leftPaddingSelect1.value}"/>
                            <s:Label width="200" 
                                     text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet."/>
                        </s:HGroup>
                    </s:BorderContainer>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #2 -->
            <data:PrimaryContentData>
                <data:tabLabel>Horizontal Example</data:tabLabel>
                <data:exampleDescription>The horizontal example. Use the padding sliders below to adjust layout.</data:exampleDescription>
                <data:toolbarContent>
                    <s:Form>
                        <s:FormHeading label="Padding:"/>
                        <s:FormItem label="top:">
                            <s:HSlider id="topPaddingSelect2" 
                                       width="100"
                                       minimum="-10" maximum="50" value="20"/>
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="The top padding to apply to the separator."/>
                            </s:helpContent>
                        </s:FormItem>
                        <s:FormItem label="right:">
                            <s:HSlider id="rightPaddingSelect2" 
                                       width="100"
                                       minimum="-10" maximum="50" value="0" />
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="The right padding to apply to the separator."/>
                            </s:helpContent>
                        </s:FormItem>
                        <s:FormItem label="bottom:">
                            <s:HSlider id="bottomPaddingSelect2" 
                                       width="100"
                                       minimum="-10" maximum="50" value="20"/>
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="The bottom padding to apply to the separator."/>
                            </s:helpContent>
                        </s:FormItem>
                        <s:FormItem label="left:">
                            <s:HSlider id="leftPaddingSelect2" 
                                       width="100"
                                       minimum="-10" maximum="50" value="0" />
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="The left padding to apply to the separator."/>
                            </s:helpContent>
                        </s:FormItem>
                    </s:Form>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:BorderContainer horizontalCenter="0" verticalCenter="0"
                                       backgroundColor="{getStyle('contentBackgroundColor')}">
                        <s:VGroup top="20" right="20" bottom="20" left="20" 
                                  horizontalAlign="justify"
                                  gap="0">
                            <s:VGroup verticalAlign="middle"
                                      horizontalAlign="justify">
                                <s:Label text="Lorem Ipsum"
                                         fontWeight="bold"/>
                                <s:HGroup verticalAlign="middle">
                                    <s:Label width="75" 
                                             text="sit amet"/>
                                    <s:TextInput width="100"/>
                                </s:HGroup>
                                <s:HGroup verticalAlign="middle">
                                    <s:Label width="75" 
                                             text="consectetur"/>
                                    <s:TextInput width="100"/>
                                </s:HGroup>
                            </s:VGroup>
                            <separators:HSeparator depth="1" 
                                                   primaryStrokeColor="{primaryColorSelect.selectedColor}"
                                                   primaryStrokeAlpha="{primaryAlphaSelect.value}"
                                                   primaryStrokeThickness="{primaryThicknessSelect.value}"
                                                   secondaryStrokeAlpha="{secondaryAlphaSelect.value}"
                                                   secondaryStrokeColor="{secondaryColorSelect.selectedColor}"
                                                   secondaryStrokeThickness="{secondaryThicknessSelect.value}"
                                                   paddingTop="{topPaddingSelect2.value}"
                                                   paddingRight="{rightPaddingSelect2.value}"
                                                   paddingBottom="{bottomPaddingSelect2.value}"
                                                   paddingLeft="{leftPaddingSelect2.value}"/>
                            <s:VGroup verticalAlign="middle"
                                      horizontalAlign="justify">
                                <s:Label text="Lorem Ipsum"
                                         fontWeight="bold"/>
                                <s:HGroup verticalAlign="middle">
                                    <s:Label width="75" 
                                             text="sit amet"/>
                                    <s:TextInput width="100"/>
                                </s:HGroup>
                                <s:HGroup verticalAlign="middle">
                                    <s:Label width="75" 
                                             text="consectetur"/>
                                    <s:TextInput width="100"/>
                                </s:HGroup>
                            </s:VGroup>
                            <separators:HSeparator depth="1" 
                                                   primaryStrokeColor="{primaryColorSelect.selectedColor}"
                                                   primaryStrokeAlpha="{primaryAlphaSelect.value}"
                                                   primaryStrokeThickness="{primaryThicknessSelect.value}"
                                                   secondaryStrokeAlpha="{secondaryAlphaSelect.value}"
                                                   secondaryStrokeColor="{secondaryColorSelect.selectedColor}"
                                                   secondaryStrokeThickness="{secondaryThicknessSelect.value}"
                                                   paddingTop="{topPaddingSelect2.value}"
                                                   paddingRight="{rightPaddingSelect2.value}"
                                                   paddingBottom="{bottomPaddingSelect2.value}"
                                                   paddingLeft="{leftPaddingSelect2.value}"/>
                            <s:Label width="200" 
                                     text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor."/>
                        </s:VGroup>
                    </s:BorderContainer>
                </data:primaryContent>
            </data:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>