<?xml version="1.0" encoding="utf-8"?>
<s:Application
    xmlns:fx     = "http://ns.adobe.com/mxml/2009"
    xmlns:s      = "library://ns.adobe.com/flex/spark"
    minWidth     = "810"
    minHeight    = "563"
    currentState = "default"
 viewSourceURL="srcview/index.html">

    <s:states>
        <s:State name="default" />
        <s:State name="recommend" />
    </s:states>

    <fx:Style>
        global { font-size  : 20; }
        #taka  { skin-class : ClassReference("jp.taiga.skin.ButtonTakaSkin");  }
        #tora  { skin-class : ClassReference("jp.taiga.skin.ButtonToraSkin");  }
        #batta { skin-class : ClassReference("jp.taiga.skin.ButtonBattaSkin"); }
    </fx:Style>

    <fx:Script>
        <![CDATA[
            import jp.taiga.skin.TaigaScrollerSkin;
            import mx.core.ScrollPolicy;
            import spark.events.IndexChangeEvent;
            protected function toggleButtonClickHandler(event:Event):void {
                var button:ToggleButton = event.currentTarget as ToggleButton;
                var b:Boolean = button.selected;
                scroller.measuredSizeIncludesScrollBars = b;
                button.label = b ? "on" : "off";
            }
            protected function addHeight():void {
                var newHeight:int = group.height + 50;
                group.height = newHeight;
                subHeightButton.enabled = true;
                if(newHeight >= group.maxHeight) {
                    addHeightButton.enabled = false;
                }
            }
            protected function subHeight():void {
                var newHeight:int = group.height - 50;
                group.height = newHeight;
                addHeightButton.enabled = true;
                if(newHeight <= group.minHeight) {
                    subHeightButton.enabled = false;
                }
            }
            protected function addVP():void {
                group.verticalScrollPosition+=25;
            }
            protected function subVP():void {
                group.verticalScrollPosition-=25;
            }
            protected function buttonbarChangeHandler(event:IndexChangeEvent):void {
                scroller.setStyle("verticalScrollPolicy",
                    ( event.currentTarget as ButtonBar ).dataProvider[event.newIndex].label );
            }
        ]]>
    </fx:Script>

    <s:Group verticalCenter="0" horizontalCenter="0">

        <s:Rect left="-10" top="-10" right="-10" bottom="-10" visible.default="false">
            <s:fill>
                <s:SolidColor color="#330066" />
            </s:fill>
        </s:Rect>

        <s:VGroup>

            <s:BitmapImage
                width    = "550"
                height   = "50"
                source   = "@Embed(source='asset/image/pixelStep.png')"
                fillMode = "clip"
                smooth   = "false"
             />

            <s:Scroller
                id                  = "scroller"
                skinClass.default   = "spark.skins.spark.ScrollerSkin"
                skinClass.recommend = "jp.taiga.skin.TaigaScrollerSkin"
            >
                <s:VGroup id="group" gap="0" width.default="500" width.recommend="490" height="300" maxHeight="300" minHeight="100">
                    <s:Button id="taka"  width="100%" height="100" label="TAKA" />
                    <s:Button id="tora"  width="100%" height="100" label="TORA" />
                    <s:Button id="batta" width="100%" height="100" label="BATTA" />
                </s:VGroup>
            </s:Scroller>

            <s:HGroup width="500" height="50" verticalAlign="middle">
                <s:Label width="100%" height="50" color.recommend="#ffffff" verticalAlign="middle" text="verticalScrollPolicy" />
                <s:ButtonBar
                    width            = "250"
                    height           = "50"
                    selectedIndex    = "0"
                    requireSelection = "true"
                    change           = "buttonbarChangeHandler(event)"
                >
                    <s:dataProvider>
                        <s:ArrayCollection>
                            <fx:Object label="{ScrollPolicy.AUTO}" />
                            <fx:Object label="{ScrollPolicy.ON}" />
                            <fx:Object label="{ScrollPolicy.OFF}" />
                        </s:ArrayCollection>
                    </s:dataProvider>
                </s:ButtonBar>
            </s:HGroup>

            <s:HGroup width="500" height="50" verticalAlign="middle">
                <s:Label width="100%" height="50" color.recommend="#ffffff" verticalAlign="middle" text="measuredSizeIncludesScrollBars" />
                <s:ToggleButton
                    width    = "85"
                    height   = "50"
                    selected = "true"
                    label    = "on"
                    change   = "toggleButtonClickHandler(event)"
                 />
            </s:HGroup>

            <s:HGroup width="500" height="50" verticalAlign="middle">
                <s:Label width="100%" height="50" color.recommend="#ffffff" verticalAlign="middle" text="custom ScrollerSkin" />
                <s:ToggleButton
                    width           = "85"
                    height          = "50"
                    selected        = "false"
                    label.default   = "off"
                    label.recommend = "on"
                    change          = "currentState=(event.currentTarget as ToggleButton).selected?'recommend':'default'"
                 />
            </s:HGroup>

        </s:VGroup>

    </s:Group>

    <s:VGroup top="20" left="20" gap="0">
        <s:Button id="addHeightButton" enabled="false" label="+" width="50" height="25" click="addHeight()" />
        <s:Button id="subHeightButton" enabled="true"  label="-" width="50" height="25" click="subHeight()" />
    </s:VGroup>

    <s:VGroup top="20" left="70" gap="0">
        <s:Button id="addVPButton" enabled="true" label="▲" width="50" height="25" fontSize="15" click="addVP()" />
        <s:Button id="subVPButton" enabled="true" label="▼" width="50" height="25" fontSize="15" click="subVP()" />
    </s:VGroup>

</s:Application>