<?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:layouts="ardisia.layouts.*"
          xmlns:packedList="ardisia.components.packedList.*"
          xmlns:containers="containers.*"
          xmlns:data="containers.data.*"
          xmlns:separators="ardisia.components.separators.*"
          xmlns:colorizer="ardisia.components.colorizer.*" 
          xmlns:rotaryField="ardisia.components.rotaryField.*" 
          xmlns:data1="ardisia.components.colorizer.data.*"
          frameRate="60"
          width="100%" height="100%"
          removedFromStage="removedFromStageHandler(event)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            
            //--------------------------------------
            //  methods
            //--------------------------------------
            
            public function creationComplete():void
            {
                layoutChangeHandler();
            }
            
            protected function layoutChangeHandler():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:
                        packedListDemo.layoutMode = "random";packedListDemoB.layoutMode = "random";
                        
                        break;
                    
                    case 1:
                        packedListDemo.layoutMode = "radial";packedListDemoB.layoutMode = "radial";
                        
                        break;
                    
                    case 2:
                        switch (radioGroup.selectedIndex)
                        {
                            case 0:
                                packedListDemo.layoutMode = "weightedRadial";packedListDemoB.layoutMode = "weightedRadial";
                                
                                break;
                            
                            case 1:
                                packedListDemo.layoutMode = "weightedTop";packedListDemoB.layoutMode = "weightedTop";
                                
                                break;
                            
                            case 2:
                                packedListDemo.layoutMode = "weightedTopRight";packedListDemoB.layoutMode = "weightedTopRight";
                                
                                break;
                            
                            case 3:
                                packedListDemo.layoutMode = "weightedRight";packedListDemoB.layoutMode = "weightedRight";
                                
                                break;
                            
                            case 4:
                                packedListDemo.layoutMode = "weightedBottomRight";packedListDemoB.layoutMode = "weightedBottomRight";
                                
                                break;
                            
                            case 5:
                                packedListDemo.layoutMode = "weightedBottom";packedListDemoB.layoutMode = "weightedBottom";
                                
                                break;
                            
                            case 6:
                                packedListDemo.layoutMode = "weightedBottomLeft";packedListDemoB.layoutMode = "weightedBottomLeft";
                                
                                break;
                            
                            case 7:
                                packedListDemo.layoutMode = "weightedLeft";packedListDemoB.layoutMode = "weightedLeft";
                                
                                break;
                            
                            case 8:
                                packedListDemo.layoutMode = "weightedTopLeft";packedListDemoB.layoutMode = "weightedTopLeft";
                                
                                break;
                            
                        }
                        
                        break;
                    
                }
            }
            
            protected function enableThrowingSelect_changeHandler(event:Event):void
            {
                autoVelocityFormItem.enabled = autoThrowSpeedFudgeFormItem.enabled = autoMaxSpeedFormItem.enabled = autoMinSpeedFormItem.enabled = 
                    throwVelocityFormItem.enabled = throwDecayFormItem.enabled = throwAngleOffsetFormItem.enabled = enableThrowingSelect.selected;
                
                if (enableThrowingSelect.selected)
                {
                    throwVelocityFormItem.enabled = !autoVelocitySelect.selected;
                    autoThrowSpeedFudgeFormItem.enabled = autoMaxSpeedFormItem.enabled = autoMinSpeedFormItem.enabled = autoVelocitySelect.selected;
                }
            }
            
            //--------------------------------------
            //  event handlers
            //--------------------------------------
            
            protected function removedFromStageHandler(event:Event):void
            {
                
            }
            
        ]]>
    </fx:Script>
    
    <!-- declarations -->
    <fx:Declarations>
        
        <s:RadioButtonGroup id="radioGroup"
                            change="layoutChangeHandler()"/>
        
        <colorizer:GradientColorizer id="colorizer" 
                                     rangeMinimum="0" rangeMaximum="1">
            <data1:GradientColorizerData color="#0080FF" ratio="0"/>
            <data1:GradientColorizerData color="#FF0000" ratio="1"/>
        </colorizer:GradientColorizer>
        
    </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="PackedList Description"
                                       description="List designed to use the PackedLayout layout class.  Also supports throwing layout elements via mouse interaction.&#13;&#13;Useful to create interactive distributive lists like tag clouds."
                                       currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
        
        <containers:expandingContainerContent>
            
            <!--- expanding container #1 -->
            <data:ExpandingContainerData>
                <data:label>Throwing Animation Properties</data:label>
                <data:content>
                    <s:FormItem label="Enabled:">
                        <s:CheckBox id="enableThrowingSelect"
                                    selected="true"
                                    change="enableThrowingSelect_changeHandler(event)"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Enable renderer throwing."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem id="autoVelocityFormItem" 
                                label="Auto Velocity:">
                        <s:CheckBox id="autoVelocitySelect"
                                    selected="true"
                                    change="if (autoVelocitySelect.selected){packedListDemo.throwVelocity=packedListDemoB.throwVelocity=0;}else{packedListDemo.throwVelocity=packedListDemoB.throwVelocity=throwVelocitySelect.value}"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Throw velocity will be automatically calculated based on how fast the user is moving the mouse over the renderers.&#13;&#13;The faster the user mouses out of items, the faster they are thrown."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem id="autoThrowSpeedFudgeFormItem" 
                                enabled="{autoVelocitySelect.selected}" 
                                label="Speed Fudge:">
                        <s:HSlider id="autoThrowSpeedFudgeSelect"
                                   width="100"
                                   minimum="0" maximum="1" value="0.1" snapInterval="0"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="A fudge factor to speed up/slow down throws if throwVelocity is auto."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem id="autoMaxSpeedFormItem" 
                                enabled="{autoVelocitySelect.selected}" 
                                label="Auto Max Speed:">
                        <s:HSlider id="autoMaxSpeedSelect"
                                   width="100"
                                   minimum="0" maximum="10" value="3" snapInterval="1"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Maximum throw speed. Only relevant if throwVelocity is auto."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem id="autoMinSpeedFormItem" 
                                enabled="{autoVelocitySelect.selected}" 
                                label="Auto Min Speed:">
                        <s:HSlider id="autoMinSpeedSelect"
                                   width="100"
                                   minimum="0" maximum="10" value="0" snapInterval="1"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Minimum throw speed. Only relevant if throwVelocity is auto."/>
                        </s:helpContent>
                    </s:FormItem>
                    
                    <s:FormItem id="throwVelocityFormItem" 
                                enabled="{!autoVelocitySelect.selected}" 
                                label="Velocity:">
                        <s:HSlider id="throwVelocitySelect"
                                   width="100"
                                   minimum="1" maximum="20" value="5" snapInterval="1"
                                   change="packedListDemo.throwVelocity=packedListDemoB.throwVelocity=throwVelocitySelect.value"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The speed at which renderers are thrown on item roll out."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem id="throwDecayFormItem" 
                                label="Decay:">
                        <s:HSlider id="throwDecaySelect"
                                   width="100"
                                   minimum="1" maximum="10" value="1" snapInterval="1"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The rate at which thrown renderer movement decays.&#13;&#13;Think of this as a friction coefficient."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem id="throwAngleOffsetFormItem" 
                                label="Angle Offset:">
                        <rotaryField:RotaryField id="throwAngleOffsetSelect"
                                                 width="50"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The angle at which to offset the throw direction from the mouse movement direction.&#13;&#13;Expressed in degrees."/>
                        </s:helpContent>
                    </s:FormItem>
                </data:content>
            </data:ExpandingContainerData>
            
            <!--- expanding container #2 -->
            <data:ExpandingContainerData>
                <data:label>API</data:label>
                <data:content>
                    <s:FormItem label="Update Layout:">
                        <s:Button label="Refresh" 
                                  click="packedListDemo.refreshPositions();packedListDemoB.refreshPositions();" />
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Call to refresh the positions of the layout elements."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Layout Mode:">
                        <s:DropDownList id="layoutModeSelect" 
                                        selectedIndex="1" 
                                        requireSelection="true"
                                        width="100"
                                        change="layoutChangeHandler()">
                            <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 involve a distribution function for layout."/>
                        </s:helpContent>
                    </s:FormItem>
                    
                    <separators:HSeparator width="100%"
                                           paddingBottom="5" paddingTop="5"/>
                    <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.55" 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.5" snapInterval="0"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="A random noise to add to the normal 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="true" 
                                       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="false" 
                                       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>Tag Cloud Example</data:tabLabel>
                <data:exampleDescription>Tag cloud. Item renderers are scaled and colorized according to the popularity of the dog name in the USA.&#13;&#13;Labels are colorized using an Ardisia GradientColorizer with the minimum of the range colored blue, and the maximum colored red.</data:exampleDescription>
                <data:primaryContent>
                    <s:VGroup horizontalAlign="justify"
                              top="20" right="20" bottom="20" left="20">
                        <s:Label text="Most Popular Dog Names"
                                 fontWeight="bold"/>
                        <packedList:PackedList id="packedListDemo" 
                                               width="100%" height="100%"
                                               resolution="200"
                                               enableThrowing="{enableThrowingSelect.selected}"
                                               throwDecay="{throwDecaySelect.value}"
                                               throwAngleOffset="{throwAngleOffsetSelect.value}"
                                               autoThrowSpeedFudge="{autoThrowSpeedFudgeSelect.value}"
                                               autoMaxSpeed="{autoMaxSpeedSelect.value}"
                                               autoMinSpeed="{autoMinSpeedSelect.value}"
                                               peak="{peakSelect.value}"
                                               noiseFactor="{noiseFactorSelect.value}"
                                               layoutMode="radial"
                                               contentBackgroundColor="#000000">
                            <packedList:dataProvider>
                                <s:ArrayCollection>
                                    <fx:Object label="Bella" popularity="1" />
                                    <fx:Object label="Max" popularity="2" />
                                    <fx:Object label="Lucy" popularity="3" />
                                    <fx:Object label="Molly" popularity="4" />
                                    <fx:Object label="Buddy" popularity="5" />
                                    <fx:Object label="Daisy" popularity="6" />
                                    <fx:Object label="Maggie" popularity="7" />
                                    <fx:Object label="Charlie" popularity="8" />
                                    <fx:Object label="Sophie" popularity="9" />
                                    <fx:Object label="Jack" popularity="10" />
                                    <fx:Object label="Sadie" popularity="11" />
                                    <fx:Object label="Toby" popularity="12" />
                                    <fx:Object label="Chloe" popularity="13" />
                                    <fx:Object label="Cody" popularity="14" />
                                    <fx:Object label="Bailey" popularity="15" />
                                    <fx:Object label="Buster" popularity="16" />
                                    <fx:Object label="Lola" popularity="17" />
                                    <fx:Object label="Duke" popularity="18" />
                                    <fx:Object label="Zoe" popularity="19" />
                                    <fx:Object label="Cooper" popularity="20" />
                                    <fx:Object label="Abby" popularity="21" />
                                    <fx:Object label="Riley" popularity="22" />
                                    <fx:Object label="Ginger" popularity="23" />
                                    <fx:Object label="Rocky" popularity="24" />
                                    <fx:Object label="Bailey" popularity="25" />
                                </s:ArrayCollection>
                            </packedList:dataProvider>
                            <packedList:itemRenderer>
                                <fx:Script>
                                    <![CDATA[
                                        import mx.events.FlexEvent;
                                    ]]>
                                </fx:Script>
                                
                                <fx:Component>
                                    <s:ItemRenderer depth.selected="1" depth.hovered="2"
                                                    autoDrawBackground="false">
                                        
                                        <!-- scripts -->
                                        <fx:Script>
                                            <![CDATA[
                                                
                                                override public function set data(value:Object):void
                                                {
                                                    super.data = value;
                                                    
                                                    var scaleFactor:Number = value.popularity / 25;
                                                    scaleX = scaleY = 1 + Math.sqrt(scaleFactor) * 4;
                                                    
                                                    textLabel.text = value.label; 
                                                    textLabel.setStyle('color', outerDocument.colorizer.getColor(scaleFactor));
                                                }
                                                
                                            ]]>
                                        </fx:Script>
                                        
                                        <!-- states -->
                                        <s:states>
                                            <s:State name="normal" />
                                            <s:State name="disabled" />
                                            <s:State name="hovered" />
                                            <s:State name="selected" />
                                        </s:states>
                                        
                                        <!-- transitions -->
                                        <s:transitions>
                                            <s:Transition fromState="*" toState="hovered">
                                                <s:Animate target="{this.stroke}"
                                                           duration="250">
                                                    <s:SimpleMotionPath property="alpha"
                                                                        valueFrom="0.25" valueTo="0.75"/>
                                                </s:Animate>
                                            </s:Transition>
                                        </s:transitions>
                                        
                                        <!--- border & background -->
                                        <s:Rect includeIn="hovered,selected" 
                                                top="0" right="0" bottom="0" left="0">
                                            <s:stroke>
                                                <s:SolidColorStroke id="stroke" 
                                                                    color="#FFFFFF"
                                                                    pixelHinting="true"
                                                                    joints="miter"
                                                                    caps="square"
                                                                    alpha="0.75"
                                                                    weight="1" weight.selected="2"/>
                                            </s:stroke>
                                            <s:fill>
                                                <s:SolidColor alpha="0" color="{getStyle('color')}" alpha.selected="0.1"/>
                                            </s:fill>
                                            <s:filters>
                                                <s:GlowFilter blurX="8" blurY="8"
                                                              color="0"/>
                                            </s:filters>
                                        </s:Rect>
                                        
                                        <s:Label id="textLabel" 
                                                 top="4" right="3" bottom="2" left="3"
                                                 fontSize="12">
                                            <s:filters>
                                                <s:DropShadowFilter alpha="0.5" 
                                                                    blurX="2" blurY="2"
                                                                    distance="2"/>
                                            </s:filters>
                                        </s:Label>
                                        
                                    </s:ItemRenderer>
                                </fx:Component>
                                
                            </packedList:itemRenderer>
                        </packedList:PackedList>
                    </s:VGroup>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #2 -->
            <data:PrimaryContentData>
                <data:tabLabel>Packed List Image Example</data:tabLabel>
                <data:exampleDescription>Example with images rather than text.</data:exampleDescription>
                <data:primaryContent>
                    <packedList:PackedList id="packedListDemoB" 
                                           top="20" right="20" bottom="20" left="20"
                                           resolution="200"
                                           enableThrowing="{enableThrowingSelect.selected}"
                                           throwDecay="{throwDecaySelect.value}"
                                           throwAngleOffset="{throwAngleOffsetSelect.value}"
                                           autoThrowSpeedFudge="{autoThrowSpeedFudgeSelect.value}"
                                           autoMaxSpeed="{autoMaxSpeedSelect.value}"
                                           autoMinSpeed="{autoMinSpeedSelect.value}"
                                           peak="{peakSelect.value}"
                                           noiseFactor="{noiseFactorSelect.value}"
                                           layoutMode="radial">
                        <packedList:dataProvider>
                            <s:ArrayCollection>
                                <fx:Object icon="@Embed(source='icons/open-iconic-master/camera-slr-2x.png')"/>
                                <fx:Object icon="@Embed(source='icons/open-iconic-master/clock-6x.png')"/>
                                <fx:Object icon="@Embed(source='icons/open-iconic-master/eye-3x.png')"/>
                                <fx:Object icon="@Embed(source='icons/open-iconic-master/globe-2x.png')"/>
                                <fx:Object icon="@Embed(source='icons/open-iconic-master/headphones-6x.png')"/>
                                <fx:Object icon="@Embed(source='icons/open-iconic-master/home-2x.png')"/>
                                <fx:Object icon="@Embed(source='icons/open-iconic-master/lightbulb-2x.png')"/>
                                <fx:Object icon="@Embed(source='icons/open-iconic-master/lock-locked-4x.png')"/>
                                <fx:Object icon="@Embed(source='icons/open-iconic-master/magnifying-glass-2x.png')"/>
                                <fx:Object icon="@Embed(source='icons/open-iconic-master/microphone.png')"/>
                                <fx:Object icon="@Embed(source='icons/open-iconic-master/monitor.png')"/>
                                <fx:Object icon="@Embed(source='icons/open-iconic-master/paperclip-2x.png')"/>
                                <fx:Object icon="@Embed(source='icons/open-iconic-master/person-8x.png')"/>
                                <fx:Object icon="@Embed(source='icons/open-iconic-master/pie-chart-3x.png')"/>
                                <fx:Object icon="@Embed(source='icons/open-iconic-master/plus.png')"/>
                                <fx:Object icon="@Embed(source='icons/open-iconic-master/print-4x.png')"/>
                                <fx:Object icon="@Embed(source='icons/open-iconic-master/puzzle-piece-8x.png')"/>
                                <fx:Object icon="@Embed(source='icons/open-iconic-master/task-2x.png')"/>
                                <fx:Object icon="@Embed(source='icons/open-iconic-master/terminal-3x.png')"/>
                                <fx:Object icon="@Embed(source='icons/open-iconic-master/thumb-down-4x.png')"/>
                                <fx:Object icon="@Embed(source='icons/open-iconic-master/thumb-up-6x.png')"/>
                                <fx:Object icon="@Embed(source='icons/open-iconic-master/timer-8x.png')"/>
                            </s:ArrayCollection>
                        </packedList:dataProvider>
                        <packedList:itemRenderer>
                            <fx:Component>
                                <s:ItemRenderer depth.selected="1" depth.hovered="2"
                                                autoDrawBackground="false">
                                    
                                    <!-- states -->
                                    <s:states>
                                        <s:State name="normal" />
                                        <s:State name="disabled" />
                                        <s:State name="hovered" />
                                        <s:State name="selected" />
                                    </s:states>
                                    
                                    <!-- transitions -->
                                    <s:transitions>
                                        <s:Transition fromState="*" toState="hovered">
                                            <s:Animate target="{this.stroke}"
                                                       duration="250">
                                                <s:SimpleMotionPath property="alpha"
                                                                    valueFrom="0.25" valueTo="0.75"/>
                                            </s:Animate>
                                        </s:Transition>
                                    </s:transitions>
                                    
                                    <!--- border & background -->
                                    <s:Rect includeIn="hovered,selected" 
                                            top="0" right="0" bottom="0" left="0">
                                        <s:stroke>
                                            <s:SolidColorStroke id="stroke" 
                                                                color="#000000"
                                                                pixelHinting="true"
                                                                joints="miter"
                                                                caps="square"
                                                                alpha="0.75"
                                                                weight="1" weight.selected="2"/>
                                        </s:stroke>
                                        <s:fill>
                                            <s:SolidColor color="#FFFFFF" color.selected="#000"/>
                                        </s:fill>
                                    </s:Rect>
                                    <s:Image top="5" right="5" bottom="5" left="5" 
                                             source="{data.icon}">
                                        <s:filters>
                                            <s:ColorMatrixFilter matrix.selected="[
                                                                 1, 0, 0, 0, 255,
                                                                 0, 1, 0, 0, 255,
                                                                 0, 0, 1, 0, 255,
                                                                 0, 0, 0, 1, 0
                                                                 ]"/>
                                        </s:filters>
                                    </s:Image>
                                    
                                </s:ItemRenderer>
                            </fx:Component>
                            
                        </packedList:itemRenderer>
                    </packedList:PackedList>
                </data:primaryContent>
            </data:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>