<?xml version="1.0" encoding="utf-8"?>
<!---
ViewStackEffectSample
-->
<s:Application
    xmlns:fx        = "http://ns.adobe.com/mxml/2009"
    xmlns:mx        = "library://ns.adobe.com/flex/mx"
    xmlns:s         = "library://ns.adobe.com/flex/spark"
    xmlns:control   = "control.*"
    xmlns:container = "container.*"
 viewSourceURL="srcview/index.html">

    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>

    <fx:Style>
        @namespace s  "library://ns.adobe.com/flex/spark";
        s|ButtonBar { font-size : 20; }
        s|Panel     { font-size : 20; }
    </fx:Style>

    <fx:Script>
        <![CDATA[
            import mx.core.BitmapAsset;
            import mx.core.IUIComponent;
            import mx.events.EffectEvent;
            import mx.events.IndexChangedEvent;

            import spark.events.IndexChangeEvent;
            import spark.utils.BitmapUtil;

            [Embed("assets/images/hokkaido.jpg")]
            private static const IMAGE_1:Class;

            [Embed("assets/images/kyoto.jpg")]
            private static const IMAGE_2:Class;

            [Embed("assets/images/kumamoto.jpg")]
            private static const IMAGE_3:Class;

            private static const ASSET_IMAGE_1:BitmapAsset = new IMAGE_1();
            private static const ASSET_IMAGE_2:BitmapAsset = new IMAGE_2();
            private static const ASSET_IMAGE_3:BitmapAsset = new IMAGE_3();
            /** Effect's Lock Flag */
            protected var isEffectLock:Boolean;
            /** ButtonBar's caretChange  */
            protected function buttonBarChangeHandler(event:IndexChangeEvent):void {
                if(event.newIndex == event.oldIndex) {
                    return;
                }
                switch(event.newIndex) {
                    case 0: setIndexAt(0); break;
                    case 1: setIndexAt(1); break;
                    case 2: setIndexAt(2); break;
                }
            }
            /** Set ViewStack's Index */
            protected function setIndexAt(v:int):void {
                var oldIndex:int = viewStack.selectedIndex;
                if( isEffectLock || oldIndex == v || v < 0 || v >= viewStack.numChildren ) {
                   return;
                }
                isEffectLock = true;
                effect.bitmapFrom = BitmapUtil.getSnapshot(viewStack.getChildAt(oldIndex) as IUIComponent );
                viewStack.addEventListener(IndexChangedEvent.CHANGE, viewStackChangeHandler);
                viewStack.addEventListener(EffectEvent.EFFECT_END, effectEndHandler);
                viewStack.selectedIndex = v;
            }
            /** ViewStack's change  */
            protected function viewStackChangeHandler(event:IndexChangedEvent):void {
                buttonBar.enabled = false;
                viewStack.removeEventListener(event.type, arguments.callee);
                callLater(effect.play, []);
            }
            /** ViewStack's effectEnd  */
            protected function effectEndHandler(event:EffectEvent):void {
                viewStack.removeEventListener(event.type, arguments.callee);
                callLater(function():void { isEffectLock = false; buttonBar.enabled = true; }, []);
            }
       ]]>
    </fx:Script>

    <fx:Declarations>
<!--
        <s:CrossFade id="effect" target="{viewStack}" duration="1000" />
-->
        <s:Wipe id="effect" target="{viewStack}" duration="1000" />
    </fx:Declarations>

    <s:ButtonBar
        id            = "buttonBar"
        width         = "640"
        height        = "50"
        selectedIndex = "0"
        caretChange   = "buttonBarChangeHandler(event)"
    >
        <s:dataProvider>
            <s:ArrayCollection>
                <fx:Object label="image 1" />
                <fx:Object label="image 2" />
                <fx:Object label="image 3" />
            </s:ArrayCollection>
        </s:dataProvider>
    </s:ButtonBar>

    <s:Panel width="640" height="480" title="Photo Viewer">

        <mx:ViewStack id="viewStack" width="100%" height="100%" creationPolicy="all">

            <container:CustomCanvas>
                <control:CustomImage source="{ASSET_IMAGE_1}" />
            </container:CustomCanvas>

            <container:CustomCanvas>
                <control:CustomImage source="{ASSET_IMAGE_2}" />
            </container:CustomCanvas>

            <container:CustomCanvas>
                <control:CustomImage source="{ASSET_IMAGE_3}" />
            </container:CustomCanvas>

        </mx:ViewStack>

    </s:Panel>

</s:Application>