<?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:layouts="ardisia.layouts.*"
          frameRate="60"
          width="100%" height="100%"
          removedFromStage="removedFromStageHandler(event)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            
            import mx.collections.IList;
            
            //--------------------------------------
            //  methods
            //--------------------------------------
            
            public function creationComplete():void
            {
                layoutChangeHandler();
                numElementsSelectChangeHandler();
            }
            
            protected function numElementsSelectChangeHandler():void
            {
                var dp:IList = listDemo.dataProvider;
                if (!dp)
                {
                    dp = new ArrayCollection();
                    listDemo.dataProvider = dp;
                }
                dp.removeAll();
                for (var i:int = 0; i < numElementsSelect.value; i++)
                {
                    dp.addItem(i);
                }
            }
            
            protected function layoutChangeHandler(forceTopRight:Boolean = false):void
            { 
                // enable/disable
                var enabled:Boolean = layoutModeSelect.selectedIndex == 2 ? true : false;
                weightedHeading.enabled = weightedPropertiesFormItem.enabled = peakFormItem.enabled = noiseFactorFormItem.enabled = radialWeighted.enabled = topWeighted.enabled = topRightWeighted.enabled = rightWeighted.enabled = bottomRightWeight.enabled = bottomWeighted.enabled = bottomLeftWeight.enabled = leftWeighted.enabled = topLeftWeighted.enabled = enabled;
                
                switch (layoutModeSelect.selectedIndex)
                {
                    
                    case 0:
                        packedLayoutDemo.layoutMode = "random"
                        
                        break;
                    
                    case 1:
                        packedLayoutDemo.layoutMode = "radial"
                        
                        break;
                    
                    case 2:
                        if (forceTopRight)
                        {
                            packedLayoutDemo.layoutMode = "weightedTopRight";
                            return;
                        }
            
                        switch (radioGroup.selectedIndex)
                        {
                            case 0:
                                packedLayoutDemo.layoutMode = "weightedRadial"
                                
                                break;
                            
                            case 1:
                                packedLayoutDemo.layoutMode = "weightedTop"
                                
                                break;
                            
                            case 2:
                                packedLayoutDemo.layoutMode = "weightedTopRight"
                                
                                break;
                            
                            case 3:
                                packedLayoutDemo.layoutMode = "weightedRight"
                                
                                break;
                            
                            case 4:
                                packedLayoutDemo.layoutMode = "weightedBottomRight"
                                
                                break;
                            
                            case 5:
                                packedLayoutDemo.layoutMode = "weightedBottom"
                                
                                break;
                            
                            case 6:
                                packedLayoutDemo.layoutMode = "weightedBottomLeft"
                                
                                break;
                            
                            case 7:
                                packedLayoutDemo.layoutMode = "weightedLeft"
                                
                                break;
                            
                            case 8:
                                packedLayoutDemo.layoutMode = "weightedTopLeft"
                                
                                break;
                            
                        }
                        
                        break;
                    
                }
                
            }
            
            protected function removedFromStageHandler(event:Event):void
            {
                
            }
            
        ]]>
    </fx:Script>
    
    <!-- declarations -->
    <fx:Declarations>
        
        <s:RadioButtonGroup id="radioGroup"
                            change="layoutChangeHandler()"/>
        
    </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="PackedLayout Description"
                                       description="Layout class that lays out visual elements randomly, radially, or via a distribution function. The overlap of elements is minimized for all layout modes.&#13;&#13;If the layout mode is weighted, each element's weight on the distribution function is determined from the dimensions of the visual element.&#13;&#13;Change the Layout Mode dropdown below to test."
                                       currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
        
        <containers:expandingContainerContent>
            
            <!--- expanding container #1 -->
            <data:ExpandingContainerData>
                <data:label>API</data:label>
                <data:content>
                    <s:FormHeading label="Properties"/>
                    <s:FormItem label="Num Renderers:">
                        <s:HSlider id="numElementsSelect" 
                                   width="100"
                                   minimum="1" maximum="50" value="35"
                                   change="numElementsSelectChangeHandler()"/>
                    </s:FormItem>
                    <s:FormItem label="Layout Mode:">
                        <s:DropDownList id="layoutModeSelect" 
                                        selectedIndex="1" 
                                        requireSelection="true"
                                        width="100"
                                        change="layoutChangeHandler(true)">
                            <s:dataProvider>
                                <s:ArrayCollection>
                                    <fx:String>random</fx:String>
                                    <fx:String>radial</fx:String>
                                    <fx:String>weighted</fx:String>
                                </s:ArrayCollection>
                            </s:dataProvider>
                        </s:DropDownList>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The default value of 'random' will randomly place elements anywhere within the control's bounds.&#13;&#13;A value of 'radial' will position the elements radially around the center with some weighting for element size but primarily designed to have the best appearance.&#13;&#13;All other modes use a distribution function for position."/>
                        </s:helpContent>
                    </s:FormItem>
                    
                    <separators:HSeparator width="100%"/>
                    <s:FormHeading id="weightedPropertiesFormItem" 
                                   label="Weighted Properties"/>
                    <s:FormItem id="peakFormItem" 
                                label="Peak:">
                        <s:HSlider id="peakSelect" 
                                   width="100"
                                   minimum="0.01" maximum="1" value="0.35" snapInterval="0"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The location of the peak for layout modes that use the distribution function."/>
                        </s:helpContent>
                    </s:FormItem>                                                    
                    <s:FormItem id="noiseFactorFormItem" 
                                label="Noise:">
                        <s:HSlider id="noiseFactorSelect" 
                                   width="100" 
                                   minimum="0.0" maximum="1" value="0.1" snapInterval="0"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="A random noise to add to the distribution, expressed as a percentage of the total width.  Set to a non-zero value for layout elements to be positioned off their exact position on the distribution."/>
                        </s:helpContent>
                    </s:FormItem>
                    
                    <separators:HSeparator width="100%"/>
                    <s:FormHeading id="weightedHeading" 
                                   label="Weighted Layout Modes"/>
                    <s:FormItem id="radialWeighted" 
                                label="Radial:">
                        <s:RadioButton selected="false"
                                       groupName="radioGroup"/>
                    </s:FormItem>
                    <s:FormItem id="topWeighted" 
                                label="Top:">
                        <s:RadioButton selected="false" 
                                       groupName="radioGroup"/>
                    </s:FormItem>
                    <s:FormItem id="topRightWeighted" 
                                label="Top-Right:">
                        <s:RadioButton selected="true" 
                                       groupName="radioGroup"/>
                    </s:FormItem>
                    <s:FormItem id="rightWeighted" 
                                label="Right:">
                        <s:RadioButton selected="false" 
                                       groupName="radioGroup"/>
                    </s:FormItem>
                    <s:FormItem id="bottomRightWeight" 
                                label="Bottom-Right:">
                        <s:RadioButton selected="false" 
                                       groupName="radioGroup"/>
                    </s:FormItem>
                    <s:FormItem id="bottomWeighted" 
                                label="Bottom:">
                        <s:RadioButton selected="false" 
                                       groupName="radioGroup"/>
                    </s:FormItem>
                    <s:FormItem id="bottomLeftWeight" 
                                label="Bottom-Left:">
                        <s:RadioButton selected="false" 
                                       groupName="radioGroup"/>
                    </s:FormItem>
                    <s:FormItem id="leftWeighted" 
                                label="Left:">
                        <s:RadioButton selected="false" 
                                       groupName="radioGroup"/>
                    </s:FormItem>
                    <s:FormItem id="topLeftWeighted" 
                                label="Top-Left:">
                        <s:RadioButton selected="false" 
                                       groupName="radioGroup"/>
                    </s:FormItem>
                </data:content>
            </data:ExpandingContainerData>
            
        </containers:expandingContainerContent>
        
        <containers:centerContent>
            
            <!--- example #1 -->
            <data:PrimaryContentData>
                <data:tabLabel>Example</data:tabLabel>
                <data:exampleDescription>Notice that renderer overlap is minimized for all layout modes. When resized, elements will retain their relative positioning.&#13;&#13;PackedLayout supports keyboard selection.</data:exampleDescription>
                <data:toolbarContent>
                    <s:Button label="Refresh Positions"
                              click="packedLayoutDemo.refreshPositions()" />
                </data:toolbarContent>
                <data:primaryContent>
                    <s:List id="listDemo" 
                            top="20" right="20" bottom="20" left="20"
                            useVirtualLayout="false">
                        <s:layout>
                            <layouts:PackedLayout id="packedLayoutDemo"
                                                  resolution="200"
                                                  peak="{peakSelect.value}"
                                                  noiseFactor="{noiseFactorSelect.value}"
                                                  layoutMode="radial"/>
                        </s:layout>
                        <s:itemRenderer>
                            <fx:Component>
                                <s:ItemRenderer autoDrawBackground="false"
                                                width="20" height="20">
                                    <fx:Script>
                                        <![CDATA[
                                            
                                            override public function set data(value:Object):void
                                            {
                                                super.data = value;
                                                
                                                labelDemo.text = String(value);
                                                scaleX = scaleY = 1 + Number(value) / outerDocument.numElementsSelect.value * 3;
                                            }
                                            
                                        ]]>
                                    </fx:Script>
                                    <s:states>
                                        <s:State name="normal" />
                                        <s:State name="hovered" />
                                        <s:State name="selected" />
                                    </s:states>
                                    <s:Rect top="0" right="0" bottom="0" left="0">
                                        <s:stroke>
                                            <s:SolidColorStroke pixelHinting="true"
                                                                joints="miter"
                                                                weight="1"
                                                                caps="square"/>
                                        </s:stroke>
                                        <s:fill>
                                            <s:SolidColor color="#FFFFFF" color.hovered="#CCCCCC" color.selected="{getStyle('selectionColor')}" />
                                        </s:fill>
                                    </s:Rect>
                                    <s:Label id="labelDemo" 
                                             top="0" right="0" bottom="0" left="0"
                                             text="{data}"
                                             color.selected="#FFFFFF"
                                             textAlign="center" verticalAlign="middle"
                                             fontSize="8"
                                             paddingTop="3" paddingRight="4" paddingBottom="3" paddingLeft="3"/>
                                </s:ItemRenderer>
                            </fx:Component>
                        </s:itemRenderer>
                    </s:List>
                </data:primaryContent>
            </data:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>