<?xml version="1.0" encoding="utf-8"?>
<!---

QCon2010Sample

@author Copyright (c) 2010 taiga.jp.
@version 1.0

Developed by taiga
@see http://taiga.jp/


QCon2010Sample is (c) 2010 taiga.jp and is released under the MIT License:
http://www.opensource.org/licenses/mit-license.php

-->
<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:effects = "jp.taiga.effects.*"
 viewSourceURL="srcview/index.html">

    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/mx";
        @namespace s  "library://ns.adobe.com/flex/spark";
        mx|FormItem {
            label-width : 150;
        }
        mx|FormItemLabel {
            font-size  : 20;
            text-align : left;
        }
        s|ButtonBar {
            font-size : 20;
        }
        s|Panel {
            font-size : 20;
        }
    </fx:Style>

    <fx:Script>
        <![CDATA[
            import mx.core.BitmapAsset;
            import spark.effects.easing.IEaser;
            import spark.effects.easing.Power;
            import spark.events.IndexChangeEvent;
            [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();
            private static const EASER:IEaser = new Power();
            protected function buttonBarChangeHandler(event:IndexChangeEvent):void {
                if(event.newIndex == event.oldIndex) {
                    return;
                }
                switch(event.newIndex) {
                    case 0:
                        currentState = "first";
                        break;
                    case 1:
                        currentState = "second";
                        break;
                    case 2:
                        currentState = "third";
                        break;
                }
            }

        ]]>
    </fx:Script>

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

    <s:states>
        <s:State name="first" />
        <s:State name="second" />
        <s:State name="third" />
    </s:states>

    <s:transitions>
        <s:Transition>
            <effects:GridWipeCrossFade
                target   = "{image}"
                duration = "{durationSlider.value}"
                gridSize = "{gridSlider.value}"
                easer    = "{EASER}"
             />
        </s:Transition>
    </s:transitions>

    <mx:FormItem width="640" label="gridSize : ">
        <s:HSlider
            id       = "gridSlider"
            width    = "100%"
            minimum  = "10"
            maximum  = "100"
            value    = "50"
            stepSize = "1"
         />
    </mx:FormItem>

    <mx:FormItem width="640" label="duration : ">
        <s:HSlider
            id       = "durationSlider"
            width    = "100%"
            minimum  = "100"
            maximum  = "3000"
            value    = "1000"
            stepSize = "1"
         />
    </mx:FormItem>

    <s: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">
        <s:BitmapImage
            id               = "image"
            width            = "500"
            height           = "375"
            smooth           = "true"
            verticalCenter   = "0"
            horizontalCenter = "0"
            source.first     = "{ASSET_IMAGE_1}"
            source.second    = "{ASSET_IMAGE_2}"
            source.third     = "{ASSET_IMAGE_3}"
         />
    </s:Panel>

</s:Application>