<?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:animatedImage="ardisia.components.animatedImage.*"
          xmlns:containers="containers.*"
          xmlns:data="containers.data.*"
          xmlns:separators="ardisia.components.separators.*"
          xmlns:scroller="ardisia.components.scroller.*"
          frameRate="60" 
          currentState="stockholm"
          width="100%" height="100%"
          removedFromStage="removedFromStageHandler(event)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            import mx.core.BitmapAsset;
            
            import spark.events.IndexChangeEvent;
            
            import ardisia.components.animatedImage.AnimatedBitmap;
            
            //--------------------------------------
            //  embedded assets
            //--------------------------------------
            
            [Embed(="ardisia/components/progressDisplay/themes/assets/images/snakeSpriteSheet.png")]
            protected var SnakeSpriteSheet:Class;
            
            //--------------------------------------
            //  variables
            //--------------------------------------
            
            protected var abmd:AnimatedBitmap;
            
            //--------------------------------------
            //  methods
            //--------------------------------------
            
            public function creationComplete():void
            {
                // initialize the AnimatedBitmap
                abmd = new AnimatedBitmap();
                abmd.framesPerRow = 10;
                abmd.framesLastRow = 9;
                abmd.framesPerSecond = 50;
                abmd.rows = 5;
                abmd.spriteSheetBmd = BitmapAsset(new SnakeSpriteSheet()).bitmapData;
                
                animatedImageWrapper.addChild(abmd);
                
                demoAppWrapper.viewstack.addEventListener(IndexChangeEvent.CHANGE, function(event:IndexChangeEvent):void
                {
                    // disable west API when not viewing the initial tab
                    UIComponent(demoAppWrapper.westVerticalGroup.getElementAt(1)).enabled = demoAppWrapper.tabBar.selectedItem.label == "Examples";
                });
                demoAppWrapper.viewstack.addEventListener(MouseEvent.ROLL_OVER, function(event:MouseEvent):void
                {
                    demoAppWrapper.viewstack.setFocus();
                });
            }
            
            //--------------------------------------
            //  event handlers
            //--------------------------------------
            
            protected function removedFromStageHandler(event:Event):void
            {
                exampleA1.stop();
                exampleA2.stop();
                exampleB.stop();
                exampleC.stop();
                exampleD.stop();
                
                if (abmd)
                    abmd.stop();
            }
            
        ]]>
    </fx:Script>
    
    <!-- declarations -->
    <fx:Declarations>
        
        <fx:Object id="testBmd" 
                   bmd="@Embed(source='images/spritesheets/semi-circles.png')" />
        
    </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="AnimatedImage Description"
                                       description="The AnimatedImage component animates a spritesheet at the requested frames per second ('FPS'). The FPS is not locked to the stage FPS.&#13;&#13;Embedded SWFs can be animated, but they are forced to run at the Flash Player's global FPS. This can result in animations being forced to run too fast or too slow without any way to modify the FPS.&#13;&#13;This class grants developers granular control over the FPS of each AnimatedImage instance, as well as the ability to jump to any frame in the animation, start, stop, etc.&#13;&#13;Spritesheets are used for the animations."
                                       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="Example A.1:"/>
                    <s:FormItem label="Frames / second:">
                        <s:HSlider id="fpsA1Select" 
                                   width="100" 
                                   minimum="1" maximum="60" value="15"/>
                    </s:FormItem>
                    <s:FormItem label="Jump To Frame:">
                        <s:NumericStepper id="jumpA1Select" 
                                          width="100" 
                                          minimum="0" maximum="39" value="0"
                                          change="exampleA1.jumpToFrame(jumpA1Select.value);"/>
                    </s:FormItem>
                    <s:FormItem >
                        <s:Group>
                            <s:HGroup>
                                <s:Button width="55"
                                          label="Start"
                                          click="exampleA1.play();"/>
                                <s:Button width="55"
                                          label="Stop"
                                          click="exampleA1.stop();"/>
                            </s:HGroup>
                        </s:Group>
                    </s:FormItem>
                    
                    <s:FormHeading label="Example A.2:"/>
                    <s:FormItem label="Frames / second:">
                        <s:HSlider id="fpsA2Select" 
                                   width="100" 
                                   minimum="1" maximum="60" value="60"/>
                    </s:FormItem>
                    <s:FormItem label="Jump To Frame:">
                        <s:NumericStepper id="jumpA2Select" 
                                          width="100" 
                                          minimum="0" maximum="39" value="0"
                                          change="exampleA2.jumpToFrame(jumpA2Select.value);"/>
                    </s:FormItem>
                    <s:FormItem >
                        <s:Group>
                            <s:HGroup>
                                <s:Button width="55"
                                          label="Start"
                                          click="exampleA2.play();"/>
                                <s:Button width="55"
                                          label="Stop"
                                          click="exampleA2.stop();"/>
                            </s:HGroup>
                        </s:Group>
                    </s:FormItem>
                    
                    <s:FormHeading label="Example B:"/>
                    <s:FormItem label="Frames / second:">
                        <s:HSlider id="fpsBSelect" 
                                   width="100" 
                                   minimum="1" maximum="60" value="30"/>
                    </s:FormItem>
                    <s:FormItem label="Jump To Frame:">
                        <s:NumericStepper id="jumpBSelect" 
                                          width="100" 
                                          minimum="0" maximum="14" value="0"
                                          change="exampleB.jumpToFrame(jumpBSelect.value);"/>
                    </s:FormItem>
                    <s:FormItem >
                        <s:Group>
                            <s:HGroup>
                                <s:Button width="55"
                                          label="Start"
                                          click="exampleB.play();"/>
                                <s:Button width="55"
                                          label="Stop"
                                          click="exampleB.stop();"/>
                            </s:HGroup>
                        </s:Group>
                    </s:FormItem>
                    
                    <s:FormHeading label="Example C:"/>
                    <s:FormItem label="Frames / second:">
                        <s:HSlider id="fpsCSelect" 
                                   width="100" 
                                   minimum="1" maximum="60" value="8"/>
                    </s:FormItem>
                    <s:FormItem label="Jump To Frame:">
                        <s:NumericStepper id="jumpCSelect" 
                                          width="100" 
                                          minimum="0" maximum="7" value="0"
                                          change="exampleC.jumpToFrame(jumpCSelect.value);"/>
                    </s:FormItem>
                    <s:FormItem >
                        <s:Group>
                            <s:HGroup>
                                <s:Button width="55"
                                          label="Start"
                                          click="exampleC.play();"/>
                                <s:Button width="55"
                                          label="Stop"
                                          click="exampleC.stop();"/>
                            </s:HGroup>
                        </s:Group>
                    </s:FormItem>
                    
                    <s:FormHeading label="Example D:"/>
                    <s:FormItem label="Frames / second:">
                        <s:HSlider id="fpsDSelect" 
                                   width="100" 
                                   minimum="1" maximum="60" value="3"/>
                    </s:FormItem>
                    <s:FormItem label="Jump To Frame:">
                        <s:NumericStepper id="jumpDSelect" 
                                          width="100" 
                                          minimum="0" maximum="59" value="0"
                                          change="exampleD.jumpToFrame(jumpDSelect.value);"/>
                    </s:FormItem>
                    <s:FormItem >
                        <s:Group>
                            <s:HGroup>
                                <s:Button width="55"
                                          label="Start"
                                          click="exampleD.play();"/>
                                <s:Button width="55"
                                          label="Stop"
                                          click="exampleD.stop();"/>
                            </s:HGroup>
                        </s:Group>
                    </s:FormItem>
                </data:content>
            </data:ExpandingContainerData>
            
        </containers:expandingContainerContent>
        
        <containers:centerContent>
            
            <!--- example #1 -->
            <data:PrimaryContentData>
                <data:tabLabel>Examples</data:tabLabel>
                <data:exampleDescription>The animation properties for each AnimatedImage instance below can be controlled via the API in the West panel.</data:exampleDescription>
                <data:toolbarContent>
                    
                </data:toolbarContent>
                <data:primaryContent>
                    <s:HGroup horizontalCenter="0" verticalCenter="0"
                              gap="40" verticalAlign="contentJustify">
                        <s:VGroup gap="20" horizontalAlign="justify">
                            <s:Label text="Example A.1:"
                                     textAlign="center"
                                     fontWeight="bold"/>
                            <s:Group height="100%">
                                <animatedImage:AnimatedImage id="exampleA1" 
                                                             verticalCenter="0" 
                                                             framesPerRow="12"
                                                             framesLastRow="4"
                                                             rows="4"
                                                             framesPerSecond="{fpsA1Select.value}"
                                                             source="@Embed(source='images/spritesheets/semi-circles.png')"/>
                            </s:Group>
                        </s:VGroup>
                        <s:VGroup gap="20" horizontalAlign="justify">
                            <s:Label text="Example A.2:"
                                     textAlign="center"
                                     fontWeight="bold"/>
                            <s:Group height="100%">
                                <animatedImage:AnimatedImage id="exampleA2" 
                                                             verticalCenter="0" 
                                                             framesPerRow="12"
                                                             framesLastRow="4"
                                                             rows="4"
                                                             framesPerSecond="{fpsA2Select.value}"
                                                             source="@Embed(source='images/spritesheets/semi-circles.png')"/>
                            </s:Group>
                        </s:VGroup>
                        <s:VGroup gap="20" horizontalAlign="justify">
                            <s:Label text="Example B:"
                                     textAlign="center"
                                     fontWeight="bold"/>
                            <s:Group height="100%">
                                <animatedImage:AnimatedImage id="exampleB" 
                                                             verticalCenter="0" 
                                                             framesPerRow="5"
                                                             framesLastRow="5"
                                                             rows="1"
                                                             framesPerSecond="{fpsBSelect.value}"
                                                             source="@Embed(source='images/spritesheets/gears.png')"/>
                            </s:Group>
                            
                        </s:VGroup>
                        <s:VGroup gap="20" horizontalAlign="justify">
                            <s:Label text="Example C:"
                                     textAlign="center"
                                     fontWeight="bold"/>
                            <s:Group height="100%">
                                <animatedImage:AnimatedImage id="exampleC" 
                                                             verticalCenter="0" 
                                                             framesPerRow="8"
                                                             framesLastRow="8"
                                                             rows="1"
                                                             framesPerSecond="{fpsCSelect.value}"
                                                             source="@Embed(source='images/spritesheets/waiting.png')"/>
                            </s:Group>
                        </s:VGroup>
                        <s:VGroup gap="20" horizontalAlign="justify">
                            <s:Label text="Example D:"
                                     textAlign="center"
                                     fontWeight="bold"/>
                            <s:Group height="100%">
                                <animatedImage:AnimatedImage id="exampleD" 
                                                             width="100" height="100" 
                                                             verticalCenter="0" 
                                                             framesPerRow="10"
                                                             framesLastRow="10"
                                                             rows="6"
                                                             framesPerSecond="{fpsDSelect.value}"
                                                             source="@Embed(source='images/spritesheets/spritesheet.png')"/>
                            </s:Group>
                        </s:VGroup>
                    </s:HGroup>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #2 -->
            <data:PrimaryContentData>
                <data:tabLabel>Non-Flex Example</data:tabLabel>
                <data:exampleDescription>Flash only version (AnimatedBitmap). Useful when the Flex Framework isn't available.</data:exampleDescription>
                <data:toolbarContent>
                    <s:Form>
                        <s:FormItem label="Frames / second:">
                            <s:HSlider id="fpsFlashSelect" 
                                       width="100" 
                                       minimum="1" maximum="60" value="50"
                                       change="abmd.framesPerSecond=fpsFlashSelect.value"/>
                        </s:FormItem>
                        <s:FormItem label="Jump To Frame:">
                            <s:NumericStepper id="jumpFlashSelect" 
                                              width="100" 
                                              minimum="0" maximum="39" value="0"
                                              change="abmd.jumpToFrame(jumpFlashSelect.value);"/>
                        </s:FormItem>
                        <s:FormItem >
                            <s:Group>
                                <s:HGroup>
                                    <s:Button width="56" 
                                              label="Start"
                                              click="abmd.play();"/>
                                    <s:Button width="56" 
                                              label="Stop"
                                              click="abmd.stop();"/>
                                </s:HGroup>
                            </s:Group>
                        </s:FormItem>
                    </s:Form>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:VGroup horizontalCenter="0" verticalCenter="0"
                              gap="20">
                        <s:Label text="Flash Only (No Flex Dependencies):"
                                 textAlign="center"
                                 fontWeight="bold"/>
                        <mx:UIComponent id="animatedImageWrapper" 
                                        height="100%"/>
                    </s:VGroup>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #3 -->
            <data:PrimaryContentData>
                <data:tabLabel>SpriteSheets</data:tabLabel>
                <data:exampleDescription>Displayed below are the spritesheets used by the AnimatedImage examples in the previous tab.&#13;&#13;Many popular graphical editing software clients support spritesheet creation.</data:exampleDescription>
                <data:primaryContent>
                    <scroller:Scroller top="1" right="1" bottom="1" left="1"
                                       focusEnabled="true"
                                       minViewportInset="1">
                        <s:Group>
                            <s:Image top="10" left="10" 
                                     source="@Embed(source='images/spritesheets/example-spritesheet.jpg')"/>
                        </s:Group>
                    </scroller:Scroller>
                </data:primaryContent>
            </data:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>