<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:rs="com.rubenswieringa.containers.*"
    creationComplete="creationComplete()"
    backgroundColor="#333333"
    viewSourceURL="source/index.html">
    
    
    <mx:Script>
        <![CDATA[
            
            import flash.events.Event;
            
            [Bindable]
            private var emptyArray:Array = [,,,,,,];
            
            private function creationComplete ():void {
                this.mySuperViewStack.addEventListener(SuperViewStack.BEHAVIOR_CHANGED, behaviorHandler);
                this.slider.value = this.mySuperViewStack.fade;
            }
            
            private function select (event:Event):void {
                this.mySuperViewStack.selectedIndex = uint(event.target.label);
            }
            
            private function changeBehavior (event:Event):void {
                if (this.mySuperViewStack.behavior == SuperViewStack.NORMAL){
                    this.mySuperViewStack.behavior  = SuperViewStack.SUPER;
                    event.target.toolTip = "switch to ViewStack mode";
                }else{
                    this.mySuperViewStack.behavior  = SuperViewStack.NORMAL;
                    event.target.toolTip = "switch to SuperViewStack mode";
                }
            }
            
            private function changeFadeColor ():void {
                if (this.mySuperViewStack.fadeColor == 0xFFFFFF){
                    this.mySuperViewStack.fadeColor  = 0x000000;
                }else{
                    this.mySuperViewStack.fadeColor  = 0xFFFFFF;
                }
                this.demoPanel.setStyle("backgroundColor", this.mySuperViewStack.fadeColor);
            }
            
            private function behaviorHandler (event:Event):void {
                trace("SuperViewStack behavior changed into "+mySuperViewStack.behavior);
            }
            
            private function changeFade (event:Event):void {
                this.mySuperViewStack.fade = event.target.value;
            }
            
        ]]>
    </mx:Script>
    
    
    <mx:Panel
        id="demoPanel"
        title="SuperViewStack demo"
        width="420" height="333"
        horizontalScrollPolicy="off"
        verticalScrollPolicy="off"
        horizontalAlign="center"
        backgroundColor="0xFFFFFF">
        
        <mx:VBox verticalGap="15">
            
            <rs:SuperViewStack
                id="mySuperViewStack"
                width="250" height="160"
                horizontalScrollPolicy="off"
                verticalScrollPolicy="off">
                <mx:Repeater id="canvasRepeater" dataProvider="{emptyArray}">
                    <mx:Canvas id="child">
                        <mx:Label
                            text="{canvasRepeater.currentIndex}"
                            x="{canvasRepeater.currentIndex*30}"
                            color="#002277"
                            fontSize="333"
                            fontWeight="bold" />
                    </mx:Canvas>
                </mx:Repeater>
            </rs:SuperViewStack>
            
            <mx:HBox>
                <mx:Repeater id="buttonRepeater" dataProvider="{emptyArray}">
                    <mx:Button label="{buttonRepeater.currentIndex}" click="select(event)" toolTip="select {buttonRepeater.currentIndex}" />
                </mx:Repeater>
            </mx:HBox>
            <mx:HBox>
                <mx:Button label="toggle behavior mode" toolTip="switch to ViewStack mode" click="changeBehavior(event)" />
                <mx:Button label="change fading tint" click="changeFadeColor()" />
            </mx:HBox>
            <mx:HSlider
                id="slider"
                change="changeFade(event)"
                width="280"
                minimum="0" maximum="1"
                snapInterval="0.1"
                liveDragging="true"
                toolTip="change fade factor" />
            
        </mx:VBox>
        
    </mx:Panel>
    
    
</mx:Application>