<?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:coverflowList="ardisia.components.coverflowList.*"
          xmlns:containers="containers.*"
          xmlns:data="containers.data.*"
          xmlns:separators="ardisia.components.separators.*"
          xmlns:reflectionContainer="ardisia.components.reflectionContainer.*"
          frameRate="60"
          width="100%" height="100%"
          removedFromStage="removedFromStageHandler(event)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            
            import spark.effects.easing.Bounce;
            import spark.effects.easing.Elastic;
            import spark.effects.easing.Linear;
            import spark.effects.easing.Power;
            import spark.effects.easing.Sine;
            
            //--------------------------------------
            //  methods
            //--------------------------------------
            
            public function creationComplete():void
            {
                demoAppWrapper.topLevelCompassContainer.centerRegionInstance.addEventListener(MouseEvent.ROLL_OVER, function(event:MouseEvent):void
                {
                    demoAppWrapper.topLevelCompassContainer.centerRegionInstance.setFocus()
                });
            }
            
            //--------------------------------------
            //  event handlers
            //--------------------------------------
            
            protected function removedFromStageHandler(event:Event):void
            {
                
            }
            
        ]]>
    </fx:Script>
    
    <!-- declarations -->
    <fx:Declarations>
        
    </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="CoverflowList Description"
                                       description="List optimized for use with the CoverflowLayout class.&#13;&#13;Supports virtualization, an integrated scrollbar, and mouse and keyboard navigation."
                                       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="Animation Properties:"/>
                    <s:FormItem label="Duration:">
                        <s:HSlider id="durationSelect"
                                   width="100"
                                   minimum="0" maximum="5000" value="350"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="0 to skip"/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Easer:">
                        <s:DropDownList id="animationEaserSelect"
                                        width="100"
                                        labelField="name"
                                        selectedIndex="2">
                            <s:ArrayCollection>
                                <fx:Object name="Sine" easer="{new Sine()}"/>
                                <fx:Object name="Linear" easer="{new Linear()}"/>
                                <fx:Object name="Power" easer="{new Power(0.1, 4)}"/>
                                <fx:Object name="Bounce" easer="{new Bounce()}"/> 
                                <fx:Object name="Elastic" easer="{new Elastic()}"/>
                            </s:ArrayCollection>
                        </s:DropDownList>
                    </s:FormItem>
                    <s:FormHeading label="Layout:"/>
                    <s:FormItem label="X Separation:">
                        <s:HSlider id="xSeparationSelect"
                                   width="100"
                                   snapInterval="1" minimum="10" maximum="400" value="300"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The distance between renderers along the x axis."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Offset Y:">
                        <s:HSlider id="offsetYSelect"
                                   width="100"
                                   snapInterval="1" 
                                   minimum="-100" maximum="100" value="0"/>
                    </s:FormItem>
                    <s:FormItem label="Offset Z:">
                        <s:HSlider id="zOffsetSelect"
                                   width="100"
                                   snapInterval="1" 
                                   minimum="0" maximum="400" value="275"/>
                    </s:FormItem>
                    
                    <s:FormHeading label="Alpha Properties:"/>
                    <s:FormItem label="Alpha From:">
                        <s:HSlider id="alphaFromSelect"
                                   width="100"
                                   snapInterval="0" 
                                   minimum="0" maximum="1" value="1"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The alpha value for the centered, selected element."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Alpha To:">
                        <s:HSlider id="alphaToSelect"
                                   width="100"
                                   snapInterval="0" 
                                   minimum="0" maximum="1" value="0.75"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The alpha value for elements at the edges of the container."/>
                        </s:helpContent>
                    </s:FormItem>
                    
                    <s:FormHeading label="Rotation:"/>
                    <s:FormItem label="Rotation X:">
                        <s:HSlider id="rotationXSelect"
                                   width="100"
                                   snapInterval="1" 
                                   minimum="-90" maximum="90" value="0" />
                    </s:FormItem>
                    <s:FormItem label="Rotation Y:">
                        <s:HSlider id="rotationYSelect"
                                   width="100"
                                   snapInterval="1" 
                                   minimum="-90" maximum="90" value="90" />
                    </s:FormItem>
                    <s:FormItem label="Rotation Z:">
                        <s:HSlider id="rotationZSelect"
                                   width="100"
                                   snapInterval="1" 
                                   minimum="-90" maximum="90" value="0" />
                    </s:FormItem>
                    
                    <s:FormHeading label="Perspective Projections:"/>
                    <s:FormItem label="Projection X:">
                        <s:HSlider id="projectionXSelect"
                                   width="100"
                                   snapInterval="1" 
                                   minimum="-200" maximum="200" value="0"/>
                    </s:FormItem>
                    <s:FormItem label="Projection Y:">
                        <s:HSlider id="projectionYSelect"
                                   width="100"
                                   snapInterval="1" 
                                   minimum="-200" maximum="200" value="-150"/>
                    </s:FormItem>
                    <s:FormItem label="Field of View:">
                        <s:HSlider id="fovSelect"
                                   width="100"
                                   snapInterval="1" 
                                   minimum="1" maximum="179" value="90"/>
                    </s:FormItem>
                </data:content>
            </data:ExpandingContainerData>
            
        </containers:expandingContainerContent>
        
        <containers:centerContent>
            
            <!--- example #1 -->
            <data:PrimaryContentData>
                <data:tabLabel>Image Example</data:tabLabel>
                <data:exampleDescription>List that displays images with captions of the first year of Laika's life.&#13;&#13;Note: the CoverflowList accepts keyboard (up, down, left, right, home, end) and mouseWheel navigation as long as it has keyboard focus.  Click the list to focus it.&#13;&#13;This example only has 13 images, but due to virtualization support, this list could display thousands of images.</data:exampleDescription>
                <data:primaryContent>
                    <s:Rect top="0" right="0" bottom="0" left="0">
                        <s:stroke>
                            <s:SolidColorStroke color="#5F5F5F"
                                                caps="square"
                                                joints="miter"
                                                weight="1"/>
                        </s:stroke>
                        <s:fill>
                            <s:LinearGradient rotation="90">
                                <s:GradientEntry color="0"
                                                 ratio="0"/>
                                <s:GradientEntry color="#262935"
                                                 ratio="1"/>
                            </s:LinearGradient>
                        </s:fill>
                    </s:Rect>
                    <coverflowList:CoverflowList id="coverflowPart" 
                                                 top="50" right="50" bottom="50" left="50"
                                                 duration="{durationSelect.value}"
                                                 easer="{animationEaserSelect.selectedItem.easer}"
                                                 selectedIndex="5"
                                                 useVirtualLayout="false"
                                                 focusEnabled="true">
                        <coverflowList:dataProvider>
                            <s:ArrayCollection>
                                <s:DataItem header="Laika at 7 Weeks" description="Up to no good." icon="@Embed(source='images/listImages/1.jpg')"/>
                                <s:DataItem header="Laika at 8 Weeks" description="She likes water." icon="@Embed(source='images/listImages/2.jpg')"/>
                                <s:DataItem header="Laika at 9 Weeks" description="She makes it hard to say no." icon="@Embed(source='images/listImages/3.jpg')"/>
                                <s:DataItem header="Laika at 10 Weeks" description="First canoe trip." icon="@Embed(source='images/listImages/4.jpg')"/>
                                <s:DataItem header="Laika at 11 Weeks" description="Naughty dog." icon="@Embed(source='images/listImages/5.jpg')"/>
                                <s:DataItem header="Laika at 12 Weeks" description="Common scene." icon="@Embed(source='images/listImages/6.jpg')"/>
                                <s:DataItem header="Laika at 13 Weeks" description="Discovers her hatred of thunder." icon="@Embed(source='images/listImages/7.jpg')"/>
                                <s:DataItem header="Laika at 14 Weeks" description="Out of breathe." icon="@Embed(source='images/listImages/8.jpg')"/>
                                <s:DataItem header="Laika at 15 Weeks" description="Bath time." icon="@Embed(source='images/listImages/9.jpg')"/>
                                <s:DataItem header="Laika at 4 Months" description="Valentines day." icon="@Embed(source='images/listImages/10.jpg')"/>
                                <s:DataItem header="Laika at 5 Months" description="&quot;I live for this sh**&quot;" icon="@Embed(source='images/listImages/11.jpg')"/>
                                <s:DataItem header="Laika at 6 Months" description="Rocking out." icon="@Embed(source='images/listImages/12.jpg')"/>
                                <s:DataItem header="Laika at 1 Year" description="End of a good day." icon="@Embed(source='images/listImages/13.jpg')"/>
                            </s:ArrayCollection>
                        </coverflowList:dataProvider>
                        
                        <coverflowList:layout>
                            <layouts:CoverflowLayout id="coverflowLayout"
                                                     alphaFrom="{alphaFromSelect.value}" 
                                                     alphaTo="{alphaToSelect.value}" 
                                                     zOffset="{zOffsetSelect.value}"
                                                     xSeparation="{xSeparationSelect.value}"
                                                     centerOffsetY="{offsetYSelect.value}"
                                                     rotationX="{rotationXSelect.value}" rotationY="{rotationYSelect.value}" rotationZ="{rotationZSelect.value}"
                                                     perspectiveProjectionCenterOffsetX="{projectionXSelect.value}" perspectiveProjectionCenterOffsetY="{projectionYSelect.value}"
                                                     fieldOfView="{fovSelect.value}"/>
                        </coverflowList:layout>
                        <coverflowList:itemRenderer>
                            <fx:Component>
                                <s:DataRenderer horizontalCenter="0" verticalCenter="0">
                                    
                                    <s:layout>
                                        <s:VerticalLayout horizontalAlign="justify"
                                                          gap="20"/>
                                    </s:layout>
                                    
                                    <reflectionContainer:ReflectionContainer alphaFrom="0.5" alphaTo="0" alphaToRatio="0.75">
                                        <s:Image source="{data.icon}"/>
                                    </reflectionContainer:ReflectionContainer>
                                    <s:Group>
                                        <s:RichText horizontalCenter="0"
                                                    textAlign="center">
                                            <s:span id="headerText" color="#FFFFFF" fontWeight="bold" text="{data.header}" fontSize="14"/>
                                            <s:br/>
                                            <s:span id="descriptionText" color="#CCCCCC" fontWeight="bold" text="{data.description}"/>
                                            <s:filters>
                                                <s:DropShadowFilter angle="90" 
                                                                    blurX="0" blurY="2"
                                                                    alpha="1"
                                                                    distance="1"/>
                                            </s:filters>
                                        </s:RichText>
                                    </s:Group>
                                </s:DataRenderer>
                            </fx:Component>
                        </coverflowList:itemRenderer>
                    </coverflowList:CoverflowList>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #2 -->
            <data:PrimaryContentData>
                <data:tabLabel>Diary Example</data:tabLabel>
                <data:exampleDescription>Elements do not need to be images, as demonstrated by this example. Click the textareas to update Laika's diary on her first year of life.&#13;&#13;Note: the CoverflowList accepts keyboard (up, down, left, right, home, end) and mouseWheel navigation as long as it is focused.  Click the list to focus it.</data:exampleDescription>
                <data:primaryContent>
                    <coverflowList:CoverflowList id="coverflowPartB" 
                                                 top="50" right="50" bottom="50" left="50"
                                                 duration="{durationSelect.value}"
                                                 easer="{animationEaserSelect.selectedItem.easer}"
                                                 selectedIndex="5"
                                                 useVirtualLayout="false"
                                                 focusEnabled="true">
                        <coverflowList:dataProvider>
                            <s:ArrayCollection>
                                <s:DataItem header="Diary Entry #1" description="Enter text here."/>
                                <s:DataItem header="Diary Entry #2" description="Enter text here."/>
                                <s:DataItem header="Diary Entry #3" description="Enter text here."/>
                                <s:DataItem header="Diary Entry #4" description="Enter text here."/>
                                <s:DataItem header="Diary Entry #5" description="Enter text here."/>
                                <s:DataItem header="Diary Entry #6" description="Enter text here."/>
                                <s:DataItem header="Diary Entry #7" description="Enter text here."/>
                                <s:DataItem header="Diary Entry #8" description="Enter text here."/>
                                <s:DataItem header="Diary Entry #9" description="Enter text here."/>
                                <s:DataItem header="Diary Entry #10" description="Enter text here."/>
                                <s:DataItem header="Diary Entry #11" description="Enter text here."/>
                                <s:DataItem header="Diary Entry #12" description="Enter text here."/>
                                <s:DataItem header="Diary Entry #13" description="Enter text here."/>
                                <s:DataItem header="Diary Entry #14" description="Enter text here."/>
                                <s:DataItem header="Diary Entry #15" description="Enter text here."/>
                            </s:ArrayCollection>
                        </coverflowList:dataProvider>
                        <coverflowList:layout>
                            <layouts:CoverflowLayout id="coverflowLayoutB" 
                                                     zOffset="{zOffsetSelect.value}"
                                                     alphaFrom="{alphaFromSelect.value}" 
                                                     alphaTo="{alphaToSelect.value}" 
                                                     xSeparation="{xSeparationSelect.value}"
                                                     centerOffsetY="{offsetYSelect.value}"
                                                     rotationX="{rotationXSelect.value}" rotationY="{rotationYSelect.value}" rotationZ="{rotationZSelect.value}"
                                                     perspectiveProjectionCenterOffsetX="{projectionXSelect.value}" perspectiveProjectionCenterOffsetY="{projectionYSelect.value}"
                                                     fieldOfView="{fovSelect.value}"/>
                        </coverflowList:layout>
                        <coverflowList:itemRenderer>
                            <fx:Component>
                                <s:DataRenderer horizontalCenter="0" verticalCenter="0">
                                    <s:Panel width="400"
                                             title="{data.header}">
                                        <s:TextArea top="20" right="20" bottom="20" left="20" 
                                                    text="{data.description}"/>
                                    </s:Panel>
                                </s:DataRenderer>
                            </fx:Component>
                        </coverflowList:itemRenderer>
                    </coverflowList:CoverflowList>
                </data:primaryContent>
            </data:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>