<?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:pane="ardisia.components.pane.*" 
          xmlns:containers="containers.*"
          xmlns:data="containers.data.*"
          xmlns:separators="ardisia.components.separators.*"
          xmlns:scroller="ardisia.components.scroller.*" 
          xmlns:colorPicker="ardisia.components.colorPicker.*"
          frameRate="60"
          width="100%" height="100%"
          removedFromStage="removedFromStageHandler(event)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.core.FlexGlobals;
            import mx.core.IVisualElementContainer;
            
            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;
            import spark.events.IndexChangeEvent;
            
            import ardisia.components.pane.events.PaneEvent;
            
            //--------------------------------------
            //  methods
            //--------------------------------------
            
            public function creationComplete():void
            {
                demoAppWrapper.viewstack.addEventListener(IndexChangeEvent.CHANGE, viewstack_changeHandler)
            }
            
            //--------------------------------------
            //  event handlers
            //--------------------------------------
            
            protected function basicPaneFloatHandler(event:MouseEvent):void
            {
                if (event.currentTarget == basicFloat1)
                {
                    var label:Label = basicPane1Label;
                    var button:Button = basicFloat1;
                    var pane:Pane = basicPane;
                    var form:Form = basicForm;
                    var ct:IVisualElementContainer = basicPane1Ct;
                    var offset:Number = -200;
                }
                else
                {
                    label = basicPane2Label;
                    button = basicFloat2;
                    pane = basicPane2;
                    form = basicForm2;
                    ct = basicPane2Ct;
                    offset = 200;
                }
                
                if (!pane.isFloating)
                {
                    form.visible = form.includeInLayout = true;
                    pane.width = 350;
                    var handler:Function = function(event:PaneEvent):void
                    {
                        pane.removeEventListener(PaneEvent.READY_TO_ANIMATE, handler);
                        pane.move(pane.x + offset, pane.y);
                    }
                    pane.addEventListener(PaneEvent.READY_TO_ANIMATE, handler);
                    pane.floatPane(DisplayObject(FlexGlobals.topLevelApplication), false, true, true, null, moduleFactory);
                    
                    label.text = "I am now a floated Pane.\n\nYou can un-float me using the button below or experiment with my API using the form below.";
                    button.label = "Un-Float this Pane";
                    pane.minimizeButtonPart.addEventListener(MouseEvent.CLICK, clickHandler, false, 1000);
                    pane.maximizeButtonPart.addEventListener(MouseEvent.CLICK, clickHandler, false, 1000);
                    pane.closeButtonPart.addEventListener(MouseEvent.CLICK, clickHandler, false, 1000);
                }
                else 
                {
                    pane.minimizeButtonPart.removeEventListener(MouseEvent.CLICK, clickHandler);
                    pane.maximizeButtonPart.removeEventListener(MouseEvent.CLICK, clickHandler);
                    pane.closeButtonPart.removeEventListener(MouseEvent.CLICK, clickHandler);
                    
                    form.visible = form.includeInLayout = false;
                    pane.addEventListener(PaneEvent.CLOSED, function(event:PaneEvent):void
                    {
                        pane.percentHeight = pane.percentWidth = 100;
                        label.text = "I am a Simple Pane.\n\nIn my 'normal' skin state I am a humble SkinnableContainer. But if you call float() on me I become a floated window.";
                        button.label = "Float this Pane";
                        ct.addElement(pane);
                    })
                    pane.closeFloatedPane(false);
                }
                
            }
            
            protected function clickHandler(event:MouseEvent):void
            {
                switch (event.currentTarget.id)
                {
                    case "minimizeButtonPart":
                        // intercept to prevent 
                        event.stopImmediatePropagation();
                        Alert.show('No Minimization for this demo', 'Minimize Click', 4, demoAppWrapper.topLevelCompassContainer, null, null, 4, moduleFactory);
                        
                        break;
                    
                    case "maximizeButtonPart":
                        // intercept to prevent losing drop shadow
                        event.stopImmediatePropagation();
                        Alert.show('No Maximization or Restore for this demo', 'Maximize/Restore Click', 4, demoAppWrapper.topLevelCompassContainer, null, null, 4, moduleFactory);
                        
                        break;
                    
                    case "closeButtonPart":
                        // intercept to prevent close
                        event.stopImmediatePropagation();
                        Alert.show("No close for this demo.  Hit the 'Un-Float this Button' button instead.", 'Close Click', 4, demoAppWrapper.topLevelCompassContainer, null, null, 4, moduleFactory);
                        
                        break;
                    
                }
            }
            
            protected function viewstack_changeHandler(event:IndexChangeEvent):void
            {
                if (demoAppWrapper.tabBar.selectedItem.label == "Overview Example")
                {
                    if (basicPane)
                        basicPane.visible = true;
                    if (basicPane2)
                        basicPane2.visible = true;
                    if (controlContentPaneA)
                        controlContentPaneA.visible = false;
                    if (controlContentPaneB)
                        controlContentPaneB.visible = false;
                } 
                else if (demoAppWrapper.tabBar.selectedItem.label == "Modal Example")
                {
                    if (basicPane)
                        basicPane.visible = false;
                    if (basicPane2)
                        basicPane2.visible = false;
                    if (controlContentPaneA)
                        controlContentPaneA.visible = false;
                    if (controlContentPaneB)
                        controlContentPaneB.visible = false;
                }
                else if (demoAppWrapper.tabBar.selectedItem.label == "ControlBar Content Example")
                {
                    if (basicPane)
                        basicPane.visible = false;
                    if (basicPane2)
                        basicPane2.visible = false;
                    if (controlContentPaneA.isFloating)
                        controlContentPaneA.visible = true;
                    if (controlContentPaneB.isFloating)
                        controlContentPaneB.visible = true;
                }
                
                
            }
            
            protected function removedFromStageHandler(event:Event):void
            {
                if (basicPane)
                    basicPane.closeFloatedPane(true);
                if (basicPane2)
                    basicPane2.closeFloatedPane(true);
                if (controlContentPaneA)
                    controlContentPaneA.closeFloatedPane(true);
                if (controlContentPaneB)
                    controlContentPaneB.closeFloatedPane(true);
            }
            
        ]]>
    </fx:Script>
    
    <!-- declarations -->
    <fx:Declarations>
        
        <fx:Component className="ModalPaneFactory">
            <pane:Pane width="300" height="400"
                       title="Modal Floated Pane"
                       displayCloseButton="true" displayMinimizedButton="false" displayMaximizedButton="false" canBeResized="true"
                       boundingMode="boundEntirePane"
                       backgroundColor="{outerDocument.backgroundColorSelect.selectedColor}"
                       backgroundAlpha="{outerDocument.backgroundAlphaSelect.value}">
                
                <fx:Script>
                    <![CDATA[
                        import mx.core.FlexGlobals;
                    ]]>
                </fx:Script>
                
                <pane:controlBarContent>
                    <s:Button width="100" 
                              label="Close"
                              click="closeFloatedPane()"/>
                </pane:controlBarContent>
                <s:VGroup top="20" right="20" bottom="20" left="20"
                          horizontalAlign="justify">
                    <s:Label width="100%"
                             text="If the user clicks anywhere but over the modal Pane, the Pane will shake and an alert sound will play.&#13;&#13;Try clicking outside this modal Pane."/>
                    <s:Label paddingTop="22"
                             text="Also, an unlimited number of modal Panes can be added on top of one another.  Only the top level Pane accepts input.&#13;&#13;Test by adding new modal windows via the button below."/>
                    <s:Group>
                        <s:Button label="Open New Modal Pane"
                                  click="var modalPane:Pane = new ModalPaneFactory();modalPane.width=300;modalPane.height=400;modalPane.floatPane(DisplayObject(FlexGlobals.topLevelApplication), true, true, true, null, moduleFactory);" />
                    </s:Group>
                </s:VGroup>
                
            </pane:Pane>
        </fx:Component>
        
    </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="Pane Description"
                                       description="Panes are lightweight containers that are ordinary containers in their default state, and can also be floated and behave like a typical 'window' if desired.&#13;&#13;All the window chrome (close icon, maximize icon, minimize icon, resize icon, etc.) can be displayed or hidden simply by setting properties so developers do not need to create custom skins for each permutation of what window chrome needs to be displayed. Also, panes are fully skinnable and skins can control all visuals. Further, the window chrome is only added as needed so panes are very lightweight containers.&#13;&#13;Floated panes automatically detect when they are focused and can be skinned to display differently when focused/unfocused.&#13;&#13;Floated panes can be resized like typical OS windows. See the demos.&#13;&#13;To reiterate, a Pane is no different than a SkinnableContainer when not floated; you add content in MXML, styling, etc. This makes it easy to work with the Pane class."
                                       currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
        
        <containers:centerContent>
            
            <!--- example #1 -->
            <data:PrimaryContentData>
                <data:tabLabel>Overview Example</data:tabLabel>
                <data:exampleDescription>Below are two panes that are initially in their 'normal' skin state and therefore are simple SkinnableContainers.  Use the respective buttons to float them. Notice that window chrome can be added/removed via properties instead of re-skinning the Pane.&#13;&#13;Notice that when clicked, each floated Pane will focus and update its color and drop shadow automatically.</data:exampleDescription>
                <data:toolbarContent>
                    <s:Form>
                        <s:FormItem enabled.london="false"
                                    label="Pane Chrome (When Floated)">
                            <colorPicker:ColorPicker id="paneChromeSelect"
                                                     showColorSpacePicker="true"
                                                     selectedColor="#A2CEF4" selectedColor.london="#DDDDDD" selectedColor.spark="#DEDEDE"/>
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="Color of the chrome for floated panes."/>
                            </s:helpContent>
                        </s:FormItem>
                        <s:FormItem enabled.london="false"
                                    label="Background Color (When Floated)">
                            <colorPicker:ColorPicker id="backgroundColorSelect"
                                                     showColorSpacePicker="true"
                                                     selectedColor="#FFFFFF"/>
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="Color of the background for floated panes."/>
                            </s:helpContent>
                        </s:FormItem>
                        <s:FormItem enabled.london="false"
                                    label="Background Alpha">
                            <s:HSlider id="backgroundAlphaSelect"
                                       minimum="0" maximum="1" snapInterval="0"
                                       value="1"/>
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="Alpha of the background for floated panes."/>
                            </s:helpContent>
                        </s:FormItem>
                    </s:Form>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:HGroup horizontalCenter="0" verticalCenter="0"
                              gap="20">
                        <s:VGroup gap="10">
                            <s:Label text="Pane #1"
                                     fontWeight="bold"/>
                            <s:BorderContainer id="basicPane1Ct" 
                                               width="300" height="300">
                                <pane:Pane id="basicPane"
                                           width="100%" height="100%"
                                           title="{basicTitleSelect1.text}"
                                           draggable="{basicDraggableSelect1.selected}"
                                           boundingMode="{basicBoundingModeSelect1.selectedItem.mode}"
                                           icon="{basicIconSelect1.selectedItem.icon}"
                                           displayCloseButton="{basicCanBeClosedSelect1.selected}"
                                           displayMaximizedButton="{basicCanBeMaximizedSelect1.selected}"
                                           displayMinimizedButton="{basicCanBeMinimizedSelect1.selected}"
                                           canBeResized="{basicCanBeResizedSelect1.selected}"
                                           paneChrome="{paneChromeSelect.selectedColor}"
                                           backgroundColor="{backgroundColorSelect.selectedColor}"
                                           backgroundAlpha="{backgroundAlphaSelect.value}">
                                    <scroller:Scroller width="100%" height="100%">
                                        <s:Group>
                                            <s:VGroup top="20" right="20" bottom="20" left="20">
                                                <s:Label id="basicPane1Label" 
                                                         width="100%" 
                                                         text="Pane #1&#13;&#13;I am a Simple Pane.&#13;&#13;In my 'normal' skin state I am a humble SkinnableContainer. But if you call float() on me I become a floated window."/>
                                                <separators:HSeparator width="100%" />
                                                <s:Button id="basicFloat1" 
                                                          label="Float This Pane"
                                                          click="basicPaneFloatHandler(event)" />
                                                <separators:HSeparator width="100%" />
                                                <s:Form id="basicForm" 
                                                        visible="false" includeInLayout="false">
                                                    <s:FormHeading label="Floated Pane #1 API:" />
                                                    <s:FormItem label="Title">
                                                        <s:TextInput id="basicTitleSelect1"
                                                                     width="100"
                                                                     text="Pane #1"/>
                                                        <s:helpContent>
                                                            <s:Image source="@Embed(source='icons/question.png')"
                                                                     toolTip="The Pane title."/>
                                                        </s:helpContent>
                                                    </s:FormItem>
                                                    <s:FormItem label="Include Icon">
                                                        <s:DropDownList id="basicIconSelect1" 
                                                                        width="100"
                                                                        selectedIndex="0"
                                                                        labelField="label">
                                                            <s:dataProvider>
                                                                <s:ArrayCollection>
                                                                    <fx:Object label="No Icon" icon="{null}" />
                                                                    <fx:Object label="Task Icon" icon="@Embed(source='icons/open-iconic-master/task-2x.png')" />
                                                                    <fx:Object label="Cross Icon" icon="@Embed(source='icons/cross.png')" />
                                                                    <fx:Object label="Folder" icon="@Embed(source='icons/folder-open.png')" />
                                                                    <fx:Object label="Home Icon" icon="@Embed(source='icons/open-iconic-master/home-2x.png')" />
                                                                    <fx:Object label="Plus Icon" icon="@Embed(source='icons/plus.png')" />
                                                                    <fx:Object label="Delete Icon" icon="@Embed(source='icons/cross-red.png')" />
                                                                </s:ArrayCollection>
                                                            </s:dataProvider>
                                                        </s:DropDownList>
                                                        <s:helpContent>
                                                            <s:Image source="@Embed(source='icons/question.png')"
                                                                     toolTip="The Pane icon."/>
                                                        </s:helpContent>
                                                    </s:FormItem>
                                                    <s:FormItem label="Draggable">
                                                        <s:CheckBox id="basicDraggableSelect1"
                                                                    selected="true"/>
                                                        <s:helpContent>
                                                            <s:Image source="@Embed(source='icons/question.png')"
                                                                     toolTip="True to allow the Pane to be dragged while floated."/>
                                                        </s:helpContent>
                                                    </s:FormItem>
                                                    <s:FormItem enabled="{basicDraggableSelect1.selected}" 
                                                                label="Bounding Mode">
                                                        <s:DropDownList id="basicBoundingModeSelect1" 
                                                                        width="100"
                                                                        selectedIndex="1"
                                                                        labelField="label">
                                                            <s:dataProvider>
                                                                <s:ArrayCollection>
                                                                    <fx:Object label="None" mode="none"/>
                                                                    <fx:Object label="Entire Pane" mode="boundEntirePane"/>
                                                                </s:ArrayCollection>
                                                            </s:dataProvider>
                                                        </s:DropDownList>
                                                        <s:helpContent>
                                                            <s:Image source="@Embed(source='icons/question.png')"
                                                                     toolTip="Set to bound the entire floated Pane to the screen or no bounding at all when the Pane is dragged."/>
                                                        </s:helpContent>
                                                    </s:FormItem>
                                                    <s:FormItem label="Can Be Closed">
                                                        <s:CheckBox id="basicCanBeClosedSelect1"
                                                                    selected="true"/>
                                                        <s:helpContent>
                                                            <s:Image source="@Embed(source='icons/question.png')"
                                                                     toolTip="True to allow the Pane to be closed via mouse interaction while floated."/>
                                                        </s:helpContent>
                                                    </s:FormItem>
                                                    <s:FormItem label="Can Be Maximized">
                                                        <s:CheckBox id="basicCanBeMaximizedSelect1"
                                                                    selected="true"/>
                                                        <s:helpContent>
                                                            <s:Image source="@Embed(source='icons/question.png')"
                                                                     toolTip="True to allow the Pane to be maximized via mouse interaction while floated."/>
                                                        </s:helpContent>
                                                    </s:FormItem>
                                                    <s:FormItem label="Can Be Minimized">
                                                        <s:CheckBox id="basicCanBeMinimizedSelect1"
                                                                    selected="true"/>
                                                        <s:helpContent>
                                                            <s:Image source="@Embed(source='icons/question.png')"
                                                                     toolTip="True to allow the Pane to be minimized via mouse interaction while floated."/>
                                                        </s:helpContent>
                                                    </s:FormItem>
                                                    <s:FormItem label="Can Be Resized">
                                                        <s:CheckBox id="basicCanBeResizedSelect1"
                                                                    selected="true"/>
                                                        <s:helpContent>
                                                            <s:Image source="@Embed(source='icons/question.png')"
                                                                     toolTip="True to allow the Pane to be resized via mouse interaction while floated."/>
                                                        </s:helpContent>
                                                    </s:FormItem>
                                                    <s:FormItem label="Center Floated Pane">
                                                        <s:Button label="Center"
                                                                  click="basicPane.center();" />
                                                    </s:FormItem>
                                                </s:Form>
                                            </s:VGroup>
                                        </s:Group>
                                    </scroller:Scroller>
                                </pane:Pane>
                            </s:BorderContainer>
                        </s:VGroup>
                        <s:VGroup gap="10">
                            <s:Label text="Pane #2"
                                     fontWeight="bold"/>
                            <s:BorderContainer id="basicPane2Ct" 
                                               width="300" height="300">
                                <pane:Pane id="basicPane2"
                                           width="100%" height="100%"
                                           title="{basicTitleSelect2.text}"
                                           draggable="{basicDraggableSelect2.selected}"
                                           boundingMode="{basicBoundingModeSelect2.selectedItem.mode}"
                                           icon="{basicIconSelect2.selectedItem.icon}"
                                           displayCloseButton="{basicCanBeClosedSelect2.selected}"
                                           displayMaximizedButton="{basicCanBeMaximizedSelect2.selected}"
                                           displayMinimizedButton="{basicCanBeMinimizedSelect2.selected}"
                                           canBeResized="{basicCanBeResizedSelect2.selected}"
                                           paneChrome="{paneChromeSelect.selectedColor}"
                                           backgroundColor="{backgroundColorSelect.selectedColor}"
                                           backgroundAlpha="{backgroundAlphaSelect.value}">
                                    <scroller:Scroller width="100%" height="100%">
                                        <s:Group>
                                            <s:VGroup top="20" right="20" bottom="20" left="20">
                                                <s:Label id="basicPane2Label" 
                                                         width="100%" 
                                                         text="Pane #2&#13;&#13;I am a Simple Pane.&#13;&#13;In my 'normal' skin state I am a humble SkinnableContainer. But if you call float() on me I become a floated window."/>
                                                <separators:HSeparator width="100%" />
                                                <s:Button id="basicFloat2" 
                                                          label="Float This Pane"
                                                          click="basicPaneFloatHandler(event)" />
                                                <separators:HSeparator width="100%" />
                                                <s:Form id="basicForm2" 
                                                        visible="false" includeInLayout="false">
                                                    <s:FormHeading label="Floated Pane #2 API:" />
                                                    <s:FormItem label="Title">
                                                        <s:TextInput id="basicTitleSelect2"
                                                                     width="100"
                                                                     text="Pane #2"/>
                                                        <s:helpContent>
                                                            <s:Image source="@Embed(source='icons/question.png')"
                                                                     toolTip="The Pane title."/>
                                                        </s:helpContent>
                                                    </s:FormItem>
                                                    <s:FormItem label="Include Icon">
                                                        <s:DropDownList id="basicIconSelect2" 
                                                                        width="100"
                                                                        selectedIndex="0"
                                                                        labelField="label">
                                                            <s:dataProvider>
                                                                <s:ArrayCollection>
                                                                    <fx:Object label="No Icon" icon="{null}" />
                                                                    <fx:Object label="Task Icon" icon="@Embed(source='icons/open-iconic-master/task-2x.png')" />
                                                                    <fx:Object label="Cross Icon" icon="@Embed(source='icons/cross.png')" />
                                                                    <fx:Object label="Folder" icon="@Embed(source='icons/folder-open.png')" />
                                                                    <fx:Object label="Home Icon" icon="@Embed(source='icons/open-iconic-master/home-2x.png')" />
                                                                    <fx:Object label="Plus Icon" icon="@Embed(source='icons/plus.png')" />
                                                                    <fx:Object label="Delete Icon" icon="@Embed(source='icons/cross-red.png')" />
                                                                </s:ArrayCollection>
                                                            </s:dataProvider>
                                                        </s:DropDownList>
                                                        <s:helpContent>
                                                            <s:Image source="@Embed(source='icons/question.png')"
                                                                     toolTip="The Pane icon."/>
                                                        </s:helpContent>
                                                    </s:FormItem>
                                                    <s:FormItem label="Draggable">
                                                        <s:CheckBox id="basicDraggableSelect2"
                                                                    selected="true"/>
                                                        <s:helpContent>
                                                            <s:Image source="@Embed(source='icons/question.png')"
                                                                     toolTip="True to allow the Pane to be dragged while floated."/>
                                                        </s:helpContent>
                                                    </s:FormItem>
                                                    <s:FormItem enabled="{basicDraggableSelect2.selected}" 
                                                                label="Bounding Mode">
                                                        <s:DropDownList id="basicBoundingModeSelect2" 
                                                                        width="100"
                                                                        selectedIndex="1"
                                                                        labelField="label">
                                                            <s:dataProvider>
                                                                <s:ArrayCollection>
                                                                    <fx:Object label="None" mode="none"/>
                                                                    <fx:Object label="Entire Pane" mode="boundEntirePane"/>
                                                                </s:ArrayCollection>
                                                            </s:dataProvider>
                                                        </s:DropDownList>
                                                        <s:helpContent>
                                                            <s:Image source="@Embed(source='icons/question.png')"
                                                                     toolTip="Set to bound the entire floated Pane to the screen, just the drag region part to the screen, or no bounding at all."/>
                                                        </s:helpContent>
                                                    </s:FormItem>
                                                    <s:FormItem label="Can Be Closed">
                                                        <s:CheckBox id="basicCanBeClosedSelect2"
                                                                    selected="true"/>
                                                        <s:helpContent>
                                                            <s:Image source="@Embed(source='icons/question.png')"
                                                                     toolTip="True to allow the Pane to be closed via mouse interaction while floated."/>
                                                        </s:helpContent>
                                                    </s:FormItem>
                                                    <s:FormItem label="Can Be Maximized">
                                                        <s:CheckBox id="basicCanBeMaximizedSelect2"
                                                                    selected="true"/>
                                                        <s:helpContent>
                                                            <s:Image source="@Embed(source='icons/question.png')"
                                                                     toolTip="True to allow the Pane to be maximized via mouse interaction while floated."/>
                                                        </s:helpContent>
                                                    </s:FormItem>
                                                    <s:FormItem label="Can Be Minimized">
                                                        <s:CheckBox id="basicCanBeMinimizedSelect2"
                                                                    selected="true"/>
                                                        <s:helpContent>
                                                            <s:Image source="@Embed(source='icons/question.png')"
                                                                     toolTip="True to allow the Pane to be minimized via mouse interaction while floated."/>
                                                        </s:helpContent>
                                                    </s:FormItem>
                                                    <s:FormItem label="Can Be Resized">
                                                        <s:CheckBox id="basicCanBeResizedSelect2"
                                                                    selected="true"/>
                                                        <s:helpContent>
                                                            <s:Image source="@Embed(source='icons/question.png')"
                                                                     toolTip="True to allow the Pane to be resized via mouse interaction while floated."/>
                                                        </s:helpContent>
                                                    </s:FormItem>
                                                    <s:FormItem label="Center Floated Pane">
                                                        <s:Button label="Center"
                                                                  click="basicPane2.center();" />
                                                    </s:FormItem>
                                                </s:Form>
                                            </s:VGroup>
                                        </s:Group>
                                    </scroller:Scroller>
                                </pane:Pane>
                            </s:BorderContainer>
                        </s:VGroup>
                    </s:HGroup>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #2 -->
            <data:PrimaryContentData>
                <data:tabLabel>Modal Example</data:tabLabel>
                <data:exampleDescription>When panes are floated, they can be modal.  See the example below.</data:exampleDescription>
                <data:primaryContent>
                    <s:Button horizontalCenter="0" verticalCenter="0"
                              label="Float Modal Pane"
                              click="var modalPane:Pane = new ModalPaneFactory();modalPane.width=300;modalPane.height=400;modalPane.floatPane(DisplayObject(FlexGlobals.topLevelApplication), true, true, true, null, moduleFactory);"/>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #3 -->
            <data:PrimaryContentData>
                <data:tabLabel>ControlBar Content Example</data:tabLabel>
                <data:exampleDescription>Content can be added in MXML to a control bar container within a floated Pane.  This is a convenient way to add "close", "save", etc. buttons to a floated Pane.&#13;&#13;Similar to the Panel class.</data:exampleDescription>
                <data:primaryContent>
                    <s:HGroup horizontalCenter="0" verticalCenter="0"
                              gap="20">
                        <s:Button label="Float Pane"
                                  click="controlContentPaneA.visible=true;controlContentPaneA.floatPane(DisplayObject(FlexGlobals.topLevelApplication), false, true, true, null, moduleFactory);"/>
                        <s:Button label="Float Pane"
                                  click="controlContentPaneB.visible=true;controlContentPaneB.floatPane(DisplayObject(FlexGlobals.topLevelApplication), false, true, true, null, moduleFactory);"/>
                    </s:HGroup>
                    
                    <pane:Pane id="controlContentPaneA"
                               title="Control Bar Content Example #1"
                               displayCloseButton="true" displayMinimizedButton="false" displayMaximizedButton="false" canBeResized="true"
                               visible="false"
                               boundingMode="boundEntirePane"
                               backgroundColor="{backgroundColorSelect.selectedColor}"
                               backgroundAlpha="{backgroundAlphaSelect.value}">
                        <s:Label top="20" right="20" bottom="20" left="20"
                                 text="PlaceHolder."/>
                        <pane:controlBarContent>
                            
                            <s:VGroup width="100%">
                                <s:Label width="100%" 
                                         text="Added to the 'controlBarContent' property of the Pane in MXML.  View Source."/>
                                <s:Button width="100" 
                                          label="Close Button"
                                          click="controlContentPaneA.closeFloatedPane()"/>
                            </s:VGroup>
                            
                        </pane:controlBarContent>
                    </pane:Pane>
                    <pane:Pane id="controlContentPaneB"
                               title="Control Bar Content Example #2"
                               displayCloseButton="true" displayMinimizedButton="false" displayMaximizedButton="false" canBeResized="true"
                               visible="false"
                               boundingMode="boundEntirePane"
                               backgroundColor="{backgroundColorSelect.selectedColor}"
                               backgroundAlpha="{backgroundAlphaSelect.value}">
                        <s:Group top="10" left="10" 
                                 height="300">
                            <s:Label text="PlaceHolder" />
                        </s:Group>
                        <pane:controlBarContent>
                            <s:VGroup width="100%">
                                <s:Label width="100%"
                                         text="Any visual content can be added to the 'controlBarContent', but typically buttons make the most sense."/>
                                <s:Button width="100" 
                                          label="Close"
                                          click="controlContentPaneB.closeFloatedPane()"/>
                            </s:VGroup>
                        </pane:controlBarContent>
                    </pane:Pane>
                </data:primaryContent>
            </data:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>