<?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:expandingContainer="ardisia.components.expandingContainer.*"
          xmlns:textInput="ardisia.components.textInput.*" 
          xmlns:containers="containers.*" 
          xmlns:data="containers.data.*" 
          xmlns:scroller="ardisia.components.scroller.*"
          frameRate="60"
          width="100%" height="100%"
          removedFromStage="removedFromStageHandler(event)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            import mx.binding.utils.BindingUtils;
            
            import spark.effects.easing.Bounce;
            import spark.effects.easing.Elastic;
            import spark.effects.easing.Linear;
            import spark.effects.easing.Power;
            import spark.effects.easing.Sine;
            
            //--------------------------------------
            //  methods
            //--------------------------------------
            
            public function creationComplete():void
            {
                
            }
            
            protected function addContainerHandler(event:MouseEvent):void
            {
                var newContent:Label = new Label();
                newContent.text = labelSelect.text;
                newContent.top = newContent.right = newContent.bottom = newContent.left = 5;
                newContent.height = 125;
                newContent.horizontalCenter = newContent.verticalCenter = 0;
                newContent.setStyle("fontSize", 20);
                newContent.setStyle("verticalAlign", "middle");
                newContent.setStyle("textAlign", "center");
                
                var ct:ExpandingContainer = new ExpandingContainer();
                ct.setStyle("fontSize", fontSizeSelect.value);
                ct.label = labelSelect.text;
                
                if (iconSelect.selectedItem.icon)
                {
                    ct.icon = iconSelect.selectedItem.icon;
                }
                ct.addElement(newContent);
                
                vGroupCt.addElementAt(ct, 0);
                
                // bind animation properties to new content
                BindingUtils.bindSetter(function(val:Number){ct.duration=animationDurationSelect.value}, animationDurationSelect, "value");
                BindingUtils.bindSetter(function(val:Object){ct.easer=animationEaserSelect.selectedItem.easer}, animationEaserSelect, "selectedItem");
            }
            
            //--------------------------------------
            //  event handlers
            //--------------------------------------
            
            protected function removedFromStageHandler(event:Event):void
            {
                
            }
            
        ]]>
    </fx:Script>
    
    <!-- declarations -->
    <fx:Declarations>
        
        <fx:Object id="icon" icon="@Embed(source='icons/open-iconic-master/home-2x.png')"/>
        
    </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="ExpandingContainer Example"
                                       description="Skinnable container that expands/contracts in response to clicks on the header.&#13;&#13;Easy to chain these components together into an accordion like control.&#13;&#13;Can also be expanded/contracted via tabbing to the header button and depressing the spacebar.&#13;&#13;Component is fully skinnable."
                                       currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
        
        <containers:expandingContainerContent>
            
            <!--- expanding container #1 -->
            <data:ExpandingContainerData>
                <data:label>Animation Properties</data:label>
                <data:content>
                    <s:FormItem label="Duration:">
                        <s:HSlider id="animationDurationSelect"
                                   width="100"
                                   minimum="0" maximum="1000" value="150"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Duration of the expand/collapse animation in milliseconds. Set to 0 to skip the animation."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Easer:">
                        <s:DropDownList id="animationEaserSelect"
                                        width="100"
                                        labelField="name"
                                        selectedIndex="0">
                            <s:ArrayCollection>
                                <fx:Object name="Sine" easer="{new Sine()}"/>
                                <fx:Object name="Linear" easer="{new Linear()}"/>
                                <fx:Object name="Power" easer="{new Power()}"/>
                                <fx:Object name="Bounce" easer="{new Bounce()}"/> 
                                <fx:Object name="Elastic" easer="{new Elastic()}"/>
                            </s:ArrayCollection>
                        </s:DropDownList>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The easer to use with the animation."/>
                        </s:helpContent>
                    </s:FormItem>
                </data:content>
            </data:ExpandingContainerData>
            
        </containers:expandingContainerContent>
        
        <containers:centerContent>
            
            <!--- example #1 -->
            <data:PrimaryContentData>
                <data:tabLabel>Example</data:tabLabel>
                <data:exampleDescription>Use the form below to add additional expanding containers to the panel below.  Notice that the collapse/expand header button will resize to accommodate large fonts and/or large icons in the header button.</data:exampleDescription>
                <data:toolbarContent>
                    <s:Form>
                        <s:FormHeading label="Add a New ExpandingContainer"/>
                        <s:FormItem label="Label:">
                            <textInput:TextInput id="labelSelect"
                                                 width="100"
                                                 iconClass="{null}"
                                                 text="New Container"/>
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="The string to display in the header button part."/>
                            </s:helpContent>
                        </s:FormItem>
                        <s:FormItem label="Label Font Size:">
                            <s:NumericStepper id="fontSizeSelect"
                                              width="100"
                                              value="30" minimum="6" maximum="60"/>
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="Font size for the header label. Notice that the header will expand to fit large font sizes."/>
                            </s:helpContent>
                        </s:FormItem>
                        <s:FormItem label="Header Icon:">
                            <s:DropDownList id="iconSelect"
                                            width="120" 
                                            selectedIndex="2"
                                            requireSelection="true">
                                <s:ArrayCollection>
                                    <fx:Object label="No Icon" icon="" />
                                    <fx:Object id="smallIcon" label="Small Icon" icon="@Embed(source='icons/open-iconic-master/globe-2x.png')" />
                                    <fx:Object label="Large Icon" icon="@Embed(source='icons/open-iconic-master/clock-6x.png')" />
                                </s:ArrayCollection>
                            </s:DropDownList>
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="An optional icon to display in the header button part."/>
                            </s:helpContent>
                        </s:FormItem>
                        <s:FormItem>
                            <s:Button width="120" 
                                      label="Add Container"
                                      click="addContainerHandler(event)"/>
                        </s:FormItem>
                    </s:Form>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:Panel width="300"
                             top="20" bottom="20"
                             horizontalCenter="0" 
                             title="Example Panel">
                        <scroller:Scroller id="scroller" 
                                           top="0"
                                           right="0" bottom="0" left="0"
                                           minViewportInset="0">
                            <s:VGroup id="vGroupCt" 
                                      horizontalAlign="justify"
                                      gap="-1"
                                      paddingTop="0" paddingTop.london="-2">
                                <expandingContainer:ExpandingContainer id="ec1" 
                                                                       label="{ec1Label.text}"
                                                                       icon="{icon.icon}"
                                                                       easer="{animationEaserSelect.selectedItem.easer}"
                                                                       duration="{animationDurationSelect.value}">
                                    
                                    <s:Form top="20" bottom="20" left="10">
                                        <s:FormItem label="Collapse">
                                            <s:Button width="100" 
                                                      label="Collapse"
                                                      click="ec1.open = !ec1.open"/>
                                        </s:FormItem>
                                        <s:FormItem label="Update Label">
                                            <s:TextInput id="ec1Label"
                                                         width="150" 
                                                         prompt="asdasd"
                                                         text="ExpandingContainer A:"/>
                                        </s:FormItem>
                                        <s:FormItem label="Label Binding">
                                            <s:Label width="100%" 
                                                     text="{ec1.label}"
                                                     paddingTop="5"/>
                                        </s:FormItem>
                                        <s:FormItem label="Show Icon">
                                            <s:CheckBox id="showIcon"
                                                        selected="true"
                                                        change="if(showIcon.selected){ec1.icon=icon.icon;}else{ec1.icon=null}"/>
                                        </s:FormItem>
                                    </s:Form>
                                </expandingContainer:ExpandingContainer>
                                <expandingContainer:ExpandingContainer id="panelB" 
                                                                       label="ExpandingContainer B"
                                                                       open="false"
                                                                       easer="{animationEaserSelect.selectedItem.easer}"
                                                                       duration="{animationDurationSelect.value}">
                                    <s:RichText top="10" right="10" bottom="10" left="10"
                                                text="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur"/>
                                </expandingContainer:ExpandingContainer>
                                <expandingContainer:ExpandingContainer label="ExpandingContainer C"
                                                                       open="true"
                                                                       easer="{animationEaserSelect.selectedItem.easer}"
                                                                       duration="{animationDurationSelect.value}">
                                    <s:Image top="10" right="10" bottom="10" left="10"
                                             source="@Embed(source='images/crazy-eyes.jpg')"
                                             scaleMode="stretch"/>
                                </expandingContainer:ExpandingContainer>
                            </s:VGroup>
                        </scroller:Scroller>
                    </s:Panel>
                </data:primaryContent>
            </data:PrimaryContentData>        
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>