<?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:containers="containers.*"
          xmlns:data="containers.data.*"
          xmlns:separators="ardisia.components.separators.*"
          frameRate="60"
          width="100%" height="100%"
          removedFromStage="removedFromStageHandler(event)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            
            //--------------------------------------
            //  methods
            //--------------------------------------
            
            public function creationComplete():void
            {
                virtualSelect_changeHandler();
            }
            
            //--------------------------------------
            //  event handlers
            //--------------------------------------
            
            protected function virtualSelect_changeHandler():void
            {
                dp.removeAll();
                var len:int = virtualSelect.selected ? 2000 : 20;
                for (var i:int = 0; i < len; i++)
                {
                    dp.addItem(String(i));
                }
                coverflowLayout.useVirtualLayout = virtualSelect.selected;
                coverflowLayout.horizontalScrollPosition = 0;
            }
            
            protected function removedFromStageHandler(event:Event):void
            {
                
            }
            
        ]]>
    </fx:Script>
    
    <!-- declarations -->
    <fx:Declarations>
        
        <s:ArrayCollection id="dp" />
        
    </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="CoverflowLayout Description"
                                       description="Lays out elements in a Coverflow layout pattern.&#13;&#13;Layout is capable of displaying thousands of renderers via virtualization."
                                       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="Virtual Layout:">
                        <s:CheckBox id="virtualSelect" 
                                    selected="true" 
                                    change="virtualSelect_changeHandler()"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Supports virtualization."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="X Separation:">
                        <s:HSlider id="xSeparationSelect"
                                   width="100"
                                   snapInterval="1" minimum="10" maximum="100" value="50"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The distance between renderers along the x axis."/>
                        </s:helpContent>
                    </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"/>
                        <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="Center Offsets:"/>
                    <s:FormItem label="Offset Z:">
                        <s:HSlider id="zOffsetSelect"
                                   width="100"
                                   snapInterval="1" 
                                   minimum="0" maximum="500" value="200"/>
                    </s:FormItem>
                    <s:FormItem label="Offset Y:">
                        <s:HSlider id="offsetYSelect"
                                   width="100"
                                   snapInterval="1" 
                                   minimum="-100" maximum="100" value="0"/>
                    </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="45" />
                    </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="70"/>
                    </s:FormItem>
                </data:content>
            </data:ExpandingContainerData>
            
        </containers:expandingContainerContent>
        
        <containers:centerContent>
            
            <!--- example #1 -->
            <data:PrimaryContentData>
                <data:tabLabel>CoverflowLayout Example</data:tabLabel>
                <data:exampleDescription>Simple DataGroup that displays 20 item renderers if not virtualized and 2,000 if the layout is virtualized. The keyboard arrow keys can be used to change selection.&#13;&#13;Mouse wheel support is not added by the layout.  View the CoverflowList demo for an example of a CoverflowLayout with mouse wheel support.</data:exampleDescription>
                <data:primaryContent>
                    <s:VGroup horizontalCenter="0" verticalCenter="0"
                              gap="8" 
                              horizontalAlign="justify">
                        <s:List id="coverflowPart"
                                width="600" height="300"
                                borderVisible="true"
                                dataProvider="{dp}"
                                focusEnabled="true"
                                skinClass="components.coverflowLayout.CoverflowLayoutListSkin">
                            <s:layout>
                                <layouts:CoverflowLayout id="coverflowLayout"
                                                         zOffset="{zOffsetSelect.value}"
                                                         xSeparation="{xSeparationSelect.value}"
                                                         centerOffsetY="{offsetYSelect.value}"
                                                         useVirtualLayout="{virtualSelect.selected}"
                                                         alphaFrom="{alphaFromSelect.value}" 
                                                         alphaTo="{alphaToSelect.value}" 
                                                         rotationX="{rotationXSelect.value}" 
                                                         rotationY="{rotationYSelect.value}" 
                                                         rotationZ="{rotationZSelect.value}"
                                                         perspectiveProjectionCenterOffsetX="{projectionXSelect.value}" 
                                                         perspectiveProjectionCenterOffsetY="{projectionYSelect.value}"
                                                         fieldOfView="{fovSelect.value}"/>
                            </s:layout>
                            <s:itemRenderer>
                                <fx:Component>
                                    <s:ItemRenderer width="{Math.max(200, Math.min(400, Math.round(Math.random() * 400)))}" 
                                                    height="{Math.max(100, Math.min(200, Math.round(Math.random() * 200)))}"
                                                    autoDrawBackground="false">
                                        
                                        <s:states>
                                            <s:State name="normal" />
                                            <s:State name="hovered" stateGroups="hoveredGroup"/>
                                            <s:State name="selectedAndHovered" stateGroups="selectedGroup, hoveredGroup"/>
                                            <s:State name="selected" stateGroups="selectedGroup"/>
                                        </s:states>
                                        
                                        <s:Rect top="0" right="0" bottom="0" left="0">
                                            <s:stroke>
                                                <s:SolidColorStroke weight="5" 
                                                                    pixelHinting="true" 
                                                                    caps="square"
                                                                    joints="miter"/>
                                            </s:stroke>
                                            <s:fill> 
                                                <s:SolidColor color="#FFFFFF" color.selectedGroup="#3399FF" color.hovered="#DEDEDE"/>
                                            </s:fill>
                                        </s:Rect>
                                        <s:Label horizontalCenter="0" verticalCenter="0" 
                                                 fontWeight="bold"
                                                 fontSize="20"
                                                 text="{data}"/>
                                        
                                    </s:ItemRenderer>
                                </fx:Component>
                            </s:itemRenderer>
                        </s:List>
                        <s:HScrollBar id="scrollbar"
                                      minimum="0" maximum="{dp.length - 1}"
                                      change="coverflowLayout.horizontalScrollPosition=coverflowLayout.horizontalScrollPosition + coverflowLayout.getScrollPositionDeltaToElement(scrollbar.value).x"/>
                    </s:VGroup>
                </data:primaryContent>
            </data:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>