<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:arc90="com.arc90.containers.*" 
    viewSourceURL="srcview/index.html" layout="vertical">
    
    <mx:Style source="styles/styles.css"/>
    
    <mx:Script>
        <![CDATA[
            private function clickHandler(event:MouseEvent):void
            {
                stack.setStyle("childPaddingBottomTop", bottomTop.text);
                stack.setStyle("childPaddingLeftRight", leftRight.text);
                stack.setStyle("moveDuration", duration.text);
            }        
        ]]>
    </mx:Script>
    
    <mx:Label text="ShuffleStack Example" fontWeight="bold" fontSize="18"/>
    <mx:HBox width="100%" height="100%" horizontalAlign="center">
        <mx:Panel title="Change Styles">
            <mx:Form>
                <mx:FormItem label="Padding Bottom/Top">
                    <mx:TextInput id="bottomTop" text="15" width="50"/>
                </mx:FormItem>
                <mx:FormItem label="Padding Left/Right">
                    <mx:TextInput id="leftRight" text="15" width="50"/>
                </mx:FormItem>
                <mx:FormItem label="Move Duration">
                    <mx:TextInput id="duration" text="400" width="50"/>
                </mx:FormItem>
            </mx:Form>
            <mx:ControlBar width="100%" horizontalAlign="center">
                <mx:Button id="styles" 
                    label="Update" click="clickHandler(event)"/>
            </mx:ControlBar>    
        </mx:Panel>
    <arc90:ShuffleStack id="stack"
        width="100%" height="100%" >
        <mx:Canvas label="Canvas 1" backgroundColor="#ffff00" width="100%" height="100%"/>
        <mx:Canvas label="Canvas 2" backgroundColor="#00ff00" width="100%" height="100%"/>
        <mx:Canvas label="Canvas 3" backgroundColor="#0000ff" width="100%" height="100%"/>
        <mx:Canvas label="Canvas 4" backgroundColor="#ffffff" width="100%" height="100%"/>
        <mx:Canvas label="Canvas 5" backgroundColor="#000000" width="100%" height="100%"/>
    </arc90:ShuffleStack>
    </mx:HBox>
    
</mx:Application>