<?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));
                }
            }
            
            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="CarouselLayout Description"
                                       description="Lays out elements in a Carousel 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:FormHeading label="Radii:"/>
                    <s:FormItem label="Use Calculated:">
                        <s:CheckBox id="radiiSelect" 
                                    selected="false"
                                    change="if(radiiSelect.selected){carouselLayout.radiusX=carouselLayout.radiusY=carouselLayout.radiusZ=NaN}
                                    else{carouselLayout.radiusX=radiusXSelect.value;carouselLayout.radiusY=radiusYSelect.value;carouselLayout.radiusZ=radiusZSelect.value;}"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="By default, the x y z radii are all automatically calculated to approximately fill the carousel dimensions.  Can be set explicitly.&#13;&#13;Calculated values may not look terribly great because of field of view and offset settings.  It is recommended to use explicit values."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem enabled="{!radiiSelect.selected}" 
                                label="Radius X:">
                        <s:HSlider id="radiusXSelect"
                                   width="100"
                                   snapInterval="1" minimum="100" maximum="1000" value="500"
                                   change="{carouselLayout.radiusX=radiusXSelect.value}"/>
                    </s:FormItem>
                    <s:FormItem enabled="{!radiiSelect.selected}" 
                                label="Radius Y:">
                        <s:HSlider id="radiusYSelect"
                                   width="100"
                                   snapInterval="1" minimum="0" maximum="1000" value="50"
                                   change="{carouselLayout.radiusY=radiusYSelect.value}"/>
                    </s:FormItem>
                    <s:FormItem enabled="{!radiiSelect.selected}" 
                                label="Radius Z:">
                        <s:HSlider id="radiusZSelect"
                                   width="100"
                                   snapInterval="1" minimum="100" maximum="1000" value="500"
                                   change="{carouselLayout.radiusZ=radiusZSelect.value}"/>
                    </s:FormItem>
                    
                    <s:FormHeading label="Scroll Properties:"/>
                    <s:FormItem label="Angle Scroll:">
                        <s:HSlider id="angleScrollSelect"
                                   width="100"
                                   snapInterval="1" minimum="-360" maximum="360" value="0"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="This layout is scrolled via the angleOffset."/>
                        </s:helpContent>
                    </s:FormItem>
                    
                    <s:FormHeading label="Layout:"/>
                    <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 enabled="{!virtualSelect.selected}" 
                                label="Arc Length:">
                        <s:HSlider id="arcLengthSelect"
                                   minimum="45" maximum="360" value="360" snapInterval="1"/>
                    </s:FormItem>
                    <s:FormItem enabled="{virtualSelect.selected}" 
                                label="Visible Items:">
                        <s:HSlider id="maxVisibleVirtualElementsSelect"
                                   width="100"
                                   minimum="1" maximum="50" value="20"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The number of items to display at any given time for virtualized layouts."/>
                        </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 lowest z value (closest to user)."/>
                        </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 the highest z value element (farthest from the user)."/>
                        </s:helpContent>
                    </s:FormItem>
                    
                    <s:FormHeading label="Center Offsets:"/>
                    <s:FormItem label="Offset X:">
                        <s:HSlider id="offsetXSelect"
                                   width="100"
                                   snapInterval="1" 
                                   minimum="-100" maximum="100" value="0"/>
                    </s:FormItem>
                    <s:FormItem label="Offset Y:">
                        <s:HSlider id="offsetYSelect"
                                   width="100"
                                   snapInterval="1" 
                                   minimum="-100" maximum="100" value="-20"/>
                    </s:FormItem>
                    
                    <s:FormHeading label="Rotation:"/>
                    <s:FormItem label="Explicit Y:">
                        <s:CheckBox id="explicitYselect"
                                    selected="false"
                                    change="carouselLayout.rotationY=explicitYselect.selected ? rotationYSelect.value : NaN" />
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="By default, the y rotation will be calculated so each element is curved to create a circle. Can be set explicitly."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem enabled="{explicitYselect.selected}" 
                                label="Rotation Y:">
                        <s:HSlider id="rotationYSelect"
                                   width="100"
                                   snapInterval="1" 
                                   minimum="-90" maximum="90" value="0" 
                                   change="carouselLayout.rotationY=rotationYSelect.value"/>
                    </s:FormItem>
                    <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 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="-100"/>
                    </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>Carousel Layout Example</data:tabLabel>
                <data:exampleDescription>Simple List (supports selection) 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 CarouselList demo for an example of a CarouselLayout with mouse wheel support.</data:exampleDescription>
                <data:primaryContent>
                    <s:VGroup horizontalCenter="0" verticalCenter="0"
                              gap="8" 
                              horizontalAlign="justify">
                        <s:List id="carouselPart"
                                width="600" height="300"
                                borderVisible="true"
                                dataProvider="{dp}"
                                focusEnabled="true">
                            <s:layout>
                                <layouts:CarouselLayout id="carouselLayout"
                                                        radiusX="500" 
                                                        radiusY="50"
                                                        radiusZ="300"
                                                        maxVisibleVirtualElements="{maxVisibleVirtualElementsSelect.value}"
                                                        arcLength="{arcLengthSelect.value}"
                                                        angleOffset="{angleScrollSelect.value}"
                                                        centerOffsetX="{offsetXSelect.value}"
                                                        centerOffsetY="{offsetYSelect.value}"
                                                        useVirtualLayout="{virtualSelect.selected}"
                                                        alphaFrom="{alphaFromSelect.value}"
                                                        alphaTo="{alphaToSelect.value}"
                                                        rotationX="{rotationXSelect.value}"
                                                        rotationY="NaN"
                                                        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="carouselLayout.angleOffset=carouselLayout.getAngleOffsetToElement(scrollbar.value);"/>
                    </s:VGroup>
                </data:primaryContent>
            </data:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>