<?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:popUpButton="ardisia.components.popUpButton.*"
          xmlns:containers="containers.*"
          xmlns:data="containers.data.*"
          xmlns:separators="ardisia.components.separators.*"
          xmlns:sparklines="ardisia.charts.sparklines.*"
          frameRate="60"
          width="100%" height="100%"
          removedFromStage="removedFromStageHandler(event)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            
            import flashx.textLayout.elements.TextFlow;
            
            //--------------------------------------
            //  methods
            //--------------------------------------
            
            public function creationComplete():void
            {
                
            }
            
            //--------------------------------------
            //  event handlers
            //--------------------------------------
            
            protected function dataTipFormatFunction(value:Object):Object
            {
                // grid example
                var textFlow:TextFlow = new Tf();
                Object(textFlow).data = value;
                
                return textFlow;
            }
            
            protected function removedFromStageHandler(event:Event):void
            {
                
            }
            
        ]]>
    </fx:Script>
    
    <!-- declarations -->
    <fx:Declarations>
        
        <fx:Component className="Tf">
            <s:TextFlow>
                
                <fx:Script>
                    <![CDATA[
                        
                        public function set data(item:Object):void
                        {
                            title.text = item.type + ": ";
                            val.text = item.value;
                        }
                        
                    ]]>
                </fx:Script>
                
                <s:span id="title" fontWeight="bold" fontSize="11"></s:span> <s:span id="val" fontSize="11"></s:span>
            </s:TextFlow>
        </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="PopUpButton Description"
                                       description="The PopUpButton component combines both a basic button and a popup button that will display content when clicked.&#13;&#13;Popup content can be defined in MXML as a child of the PopUpButton, which is very convenient.&#13;&#13;Designed to deliver similar functionality to the Flex Halo PopUpButton while supporting the Spark skinning architecture.&#13;&#13;Keyboard interaction is supported via the spacebar."
                                       currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
        
        <containers:expandingContainerContent>
            
            <!--- expanding container #1 -->
            <data:ExpandingContainerData>
                <data:label>API</data:label>
                <data:content>
                    <s:FormItem label="Label:">
                        <s:TextInput id="labelSelect"
                                     width="100"
                                     text="Main Button Label"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Text to appear on the main button skin part."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Close On Activity:">
                        <s:CheckBox id="closeOnActivitySelect"
                                    selected="true"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="If true, the popup will be closed when mouse/resize activity occurs that is not related to the popup.&#13;&#13;If false, close() must be called manually to remove the popup content."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Open Always:">
                        <s:CheckBox id="openAlwaysSelect"
                                    selected="true"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="If true, will pop up the popup content when the openButtonPart is clicked.&#13;&#13;If false, open() must be called manually to display the popup content."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Open/Close:">
                        <s:HGroup verticalAlign="middle">
                            <s:Button label="Open"
                                      click="popUpButtonA.open();popupButtonB.open();popupButtonC.open();"/>
                            <s:Button label="Close"
                                      click="popUpButtonA.close();popupButtonB.close();popupButtonC.close();"/>
                        </s:HGroup>
                    </s:FormItem>
                </data:content>
            </data:ExpandingContainerData>
            
        </containers:expandingContainerContent>
        
        <containers:centerContent>
            
            <!--- example #1 -->
            <data:PrimaryContentData>
                <data:tabLabel>Example</data:tabLabel>
                <data:exampleDescription>The PopUpButtons below each have different types of popup content. Illustrates how flexible the PopUpButton is regarding what type of content can be popped up.</data:exampleDescription>
                <data:primaryContent>
                    <s:BorderContainer horizontalCenter="0" verticalCenter="0">
                        <s:HGroup top="20" right="20" bottom="20" left="20"
                                  gap="50">
                            
                            <!--- button #1 -->
                            <s:VGroup gap="20">
                                <s:HGroup verticalAlign="middle">
                                    <s:Label text="Pie Chart Popup Example:"
                                             fontSize="12"/>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="Example using a SparklinePie chart as the popup content.">
                                        <s:filters>
                                            <s:DropShadowFilter color="#000000"
                                                                alpha="0.35"
                                                                distance="3"
                                                                blurX="6" blurY="6"/>
                                        </s:filters>
                                    </s:Image>
                                </s:HGroup>
                                <popUpButton:PopUpButton id="popUpButtonA" 
                                                         verticalCenter="0"
                                                         label="{labelSelect.text}"
                                                         closeOnActivity="{closeOnActivitySelect.selected}"
                                                         openAlways="{openAlwaysSelect.selected}"
                                                         click="Alert.show('Popup Example A', 'Main Button Clicked', 4, null, null, null, 4, this.moduleFactory);">
                                    <s:BorderContainer>
                                        <sparklines:SparklinePie width="139" height="150"
                                                                 seriesField="value"
                                                                 dataTipFormatFunction="dataTipFormatFunction">
                                            <s:ArrayCollection>
                                                <fx:Object type="Stage A" value="10"/>
                                                <fx:Object type="Stage B" value="20"/>
                                                <fx:Object type="Stage C" value="30"/>
                                                <fx:Object type="Stage D" value="60"/>
                                                <fx:Object type="Stage E" value="90"/>
                                                <fx:Object type="Stage F" value="80"/>
                                            </s:ArrayCollection>
                                        </sparklines:SparklinePie>
                                    </s:BorderContainer>
                                </popUpButton:PopUpButton>
                            </s:VGroup>
                            
                            <!--- button #2 -->
                            <s:VGroup gap="20">
                                <s:HGroup verticalAlign="middle">
                                    <s:Label text="List Popup Example:"
                                             fontSize="12"/>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="Example using a List as the popup content.&#13;&#13;List selection is persistent but will not affect the main button for the PopUpButton and the popup will close on selection.&#13;&#13;Popup content is defined in MXML.">
                                        <s:filters>
                                            <s:DropShadowFilter color="#000000"
                                                                alpha="0.35"
                                                                distance="3"
                                                                blurX="6" blurY="6"/>
                                        </s:filters>
                                    </s:Image>
                                </s:HGroup>
                                <popUpButton:PopUpButton id="popupButtonB" 
                                                         verticalCenter="0"
                                                         label="{labelSelect.text}"
                                                         closeOnActivity="{closeOnActivitySelect.selected}"
                                                         openAlways="{openAlwaysSelect.selected}"
                                                         click="Alert.show('Popup Example B', 'Main Button Clicked', 4, null, null, null, 4, this.moduleFactory);">
                                    <s:BorderContainer borderAlpha="1">
                                        <s:RectangularDropShadow id="dropShadow" 
                                                                 top="0" right="0" bottom="0" left="0" 
                                                                 blurX="20" blurY="20" 
                                                                 alpha="0.45" 
                                                                 distance="7" 
                                                                 angle="90" 
                                                                 color="#000000"/>
                                        
                                        <s:List top="5" right="3" bottom="3" left="3"
                                                borderVisible="true"
                                                change="popupButtonB.close();">
                                            <s:ArrayCollection>
                                                <fx:String>Selection A</fx:String>
                                                <fx:String>Selection B</fx:String>
                                                <fx:String>Selection C</fx:String>
                                                <fx:String>Selection D</fx:String>
                                                <fx:String>Selection E</fx:String>
                                                <fx:String>Selection F</fx:String>
                                                <fx:String>Selection G</fx:String>
                                                <fx:String>Selection H</fx:String>
                                                <fx:String>Selection I</fx:String>
                                                <fx:String>Selection J</fx:String>
                                                <fx:String>Selection K</fx:String>
                                            </s:ArrayCollection>
                                        </s:List>
                                    </s:BorderContainer>
                                </popUpButton:PopUpButton>
                            </s:VGroup>
                            
                            <!--- button #3 -->
                            <s:VGroup gap="20">
                                <s:HGroup verticalAlign="middle">
                                    <s:Label text="Combination Popup Example:"
                                             fontSize="12"/>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="Example using a combination of content as the popup content.&#13;&#13;Popup will not close automatically when an item is selected.&#13;&#13;Popup content is defined in MXML.">
                                        <s:filters>
                                            <s:DropShadowFilter color="#000000"
                                                                alpha="0.35"
                                                                distance="3"
                                                                blurX="6" blurY="6"/>
                                        </s:filters>
                                    </s:Image>
                                </s:HGroup>
                                <popUpButton:PopUpButton id="popupButtonC" 
                                                         verticalCenter="0"
                                                         label="{labelSelect.text}"
                                                         closeOnActivity="{closeOnActivitySelect.selected}"
                                                         openAlways="{openAlwaysSelect.selected}"
                                                         click="Alert.show('Popup Example C', 'Main Button Clicked', 4, null, null, null, 4, this.moduleFactory);" >
                                    <s:BorderContainer>
                                        <s:VGroup top="5" right="3" bottom="3" left="3">
                                            <s:Label text="Sample Text:"
                                                     fontWeight="bold"/>
                                            <s:NumericStepper />
                                            <s:List>
                                                <s:ArrayCollection>
                                                    <fx:String>Selection A</fx:String>
                                                    <fx:String>Selection B</fx:String>
                                                    <fx:String>Selection C</fx:String>
                                                </s:ArrayCollection>
                                            </s:List>
                                            <s:Button click="popupButtonC.close();"
                                                      label="Close"/>
                                        </s:VGroup>
                                    </s:BorderContainer>
                                </popUpButton:PopUpButton>
                            </s:VGroup>
                        </s:HGroup>    
                    </s:BorderContainer>
                </data:primaryContent>
            </data:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>