<?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" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:container="com.custardbelly.container.*" viewSourceURL="srcview/index.html">
    
    <fx:Declarations>
        <fx:String id="lorem">Lorem ipsum dolor sit amet consectetur adipisicing elit.</fx:String>
    </fx:Declarations>
    
    <fx:Script>
        <![CDATA[
            private function changeIndex():void
            {
                var index:int = viewstack.selectedIndex;
                index = ( index + 1 > viewstack.content.length - 1 ) ? 0 : index + 1;
                viewstack.selectedIndex = index;
            }
        ]]>
    </fx:Script>
    
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
    
    <container:CBViewStack id="viewstack" width="300" height="300" 
                           skinClass="com.custardbelly.skin.CBScrollableSkin">
        <s:Group id="child1" 
                 width="800" height="100%" 
                 clipAndEnableScrolling="true">
            <s:layout>
                <s:VerticalLayout horizontalAlign="justify" />
            </s:layout>
            <s:Button label="top" />
            <s:Button label="bottom" bottom="0" />
        </s:Group>
        <s:Panel id="child2" 
                 width="100%" height="200" 
                 title="Child 2">
            <s:Scroller>
                <s:Group width="100%" height="100%">
                    <s:layout>
                        <s:VerticalLayout horizontalAlign="center" />
                    </s:layout>
                    <s:Button label="panel button 1" />
                    <s:Button label="panel button 2" />
                </s:Group>
            </s:Scroller>
        </s:Panel>
        <s:DataGroup id="child3" 
                     width="100%" height="100%"
                     itemRenderer="spark.skins.spark.DefaultItemRenderer">
            <s:layout>
                <s:VerticalLayout />
            </s:layout>
            <s:dataProvider>
                <s:ArrayCollection source="{lorem.split(' ')}" />
            </s:dataProvider>
        </s:DataGroup>
    </container:CBViewStack>
    
    <s:Button label="switch index" click="changeIndex();" />
    
    <s:HGroup>
        <s:Button label="select child 1"
                  enabled="{viewstack.selectedChild != child1}"
                  click="{viewstack.selectedChild = child1}" 
                  />
        <s:Button label="select child 2"
                  enabled="{viewstack.selectedChild != child2}"
                  click="{viewstack.selectedChild = child2}" 
                  />
        <s:Button label="select child 3"
                  enabled="{viewstack.selectedChild != child3}"
                  click="{viewstack.selectedChild = child3}" 
                  />
    </s:HGroup>
    
</s:Application>