<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
            import mx.core.UIComponent;
            
            private function MoveViewStackChildren(sourceIndex:int, destinationIndex:int):void{
                var sourceComponent : DisplayObject = viewStack.getChildAt(sourceIndex);
                var oldSourceIndex : int = viewStack.selectedIndex;
                viewStack.removeChildAt(sourceIndex);
                viewStack.addChildAt(sourceComponent,destinationIndex);
                
                if((oldSourceIndex == sourceIndex) || 
                    (oldSourceIndex == viewStack.numChildren-1)){
                    viewStack.selectedIndex = destinationIndex; 
                }
                else if(oldSourceIndex > sourceIndex){
                    viewStack.selectedIndex += 1; 
                } else {
                    viewStack.selectedIndex -= 1; 
                    
                }
            }

            private function MoveViewStackChildrenSaveIndex(sourceIndex:int, destinationIndex:int):void{
                var sourceComponent : DisplayObject = viewStack.getChildAt(sourceIndex);
                viewStack.removeChildAt(sourceIndex);
                viewStack.addChildAt(sourceComponent,destinationIndex);

            }

            
            private function showViewStackChild(displayIndex:int):void{
                viewStack.selectedIndex = displayIndex
            }
        ]]>
    </mx:Script>
    
    <mx:WipeRight id="wipeRight" duration="2000"/>
    
    <mx:HBox>
        
        <mx:ViewStack id="viewStack" width="250">
            <mx:HBox showEffect="wipeRight">
                <mx:Label text="View 0" />
            </mx:HBox>
            <mx:HBox showEffect="wipeRight">
                <mx:Label text="View 1" />
                
            </mx:HBox>
            <mx:HBox showEffect="wipeRight">
                <mx:Label text="View 2" />
                
            </mx:HBox>
            <mx:HBox showEffect="wipeRight">
                <mx:Label text="View 3" />
                
            </mx:HBox>
        </mx:ViewStack>
        
        <mx:Form>
            <mx:FormItem label="Selected Index" >
                <mx:Label text="{viewStack.selectedIndex}" />
            </mx:FormItem>
            <mx:FormItem label="Selected Child" >
                <mx:Label text="{viewStack.selectedChild}" />
            </mx:FormItem>
            <mx:FormItem label="Controls" >
                <mx:HBox>
                    <mx:VBox>
                        <mx:Button label="Move 0, 1 (Preserve Selected Layer)" click="MoveViewStackChildren(0,1)" />
                        <mx:Button label="Move 0, 2 (Preserve Selected Layer)" click="MoveViewStackChildren(0,2)" />
                        <mx:Button label="Move 0, 3 (Preserve Selected Layer)" click="MoveViewStackChildren(0,3)" />
                        <mx:Button label="Move 1, 0 (Preserve Selected Layer)" click="MoveViewStackChildren(1,0)" />
                        <mx:Button label="Move 1, 2 (Preserve Selected Layer)" click="MoveViewStackChildren(1,2)" />
                        <mx:Button label="Move 1, 3 (Preserve Selected Layer)" click="MoveViewStackChildren(1,3)" />
                        <mx:Button label="Move 2, 0 (Preserve Selected Layer)" click="MoveViewStackChildren(2,0)" />
                        <mx:Button label="Move 2, 1 (Preserve Selected Layer)" click="MoveViewStackChildren(2,1)" />
                        <mx:Button label="Move 2, 3 (Preserve Selected Layer)" click="MoveViewStackChildren(2,3)" />
                        <mx:Button label="Move 3, 0 (Preserve Selected Layer)" click="MoveViewStackChildren(3,0)" />
                        <mx:Button label="Move 3, 1 (Preserve Selected Layer)" click="MoveViewStackChildren(3,1)" />
                        <mx:Button label="Move 3, 2 (Preserve Selected Layer)" click="MoveViewStackChildren(3,2)" />
                        
                    </mx:VBox>
                    <mx:VBox>
                        <mx:Button label="Move 0, 1 (No Index Change)" click="MoveViewStackChildrenSaveIndex(0,1)" />
                        <mx:Button label="Move 0, 2 (No Index Change)" click="MoveViewStackChildrenSaveIndex(0,2)" />
                        <mx:Button label="Move 0, 3 (No Index Change)" click="MoveViewStackChildrenSaveIndex(0,3)" />
                        <mx:Button label="Move 1, 0 (No Index Change)" click="MoveViewStackChildrenSaveIndex(1,0)" />
                        <mx:Button label="Move 1, 2 (No Index Change)" click="MoveViewStackChildrenSaveIndex(1,2)" />
                        <mx:Button label="Move 1, 3 (No Index Change)" click="MoveViewStackChildrenSaveIndex(1,3)" />
                        <mx:Button label="Move 2, 0 (No Index Change)" click="MoveViewStackChildrenSaveIndex(2,0)" />
                        <mx:Button label="Move 2, 1 (No Index Change)" click="MoveViewStackChildrenSaveIndex(2,1)" />
                        <mx:Button label="Move 2, 3 (No Index Change)" click="MoveViewStackChildrenSaveIndex(2,3)" />
                        <mx:Button label="Move 3, 0 (No Index Change)" click="MoveViewStackChildrenSaveIndex(3,0)" />
                        <mx:Button label="Move 3, 1 (No Index Change)" click="MoveViewStackChildrenSaveIndex(3,1)" />
                        <mx:Button label="Move 3, 2 (No Index Change)" click="MoveViewStackChildrenSaveIndex(3,2)" />
                        
                    </mx:VBox>
                </mx:HBox>
                    
            </mx:FormItem>
            <mx:FormItem label="Show Stack" >
                <mx:Button label="Show 0" click="showViewStackChild(0)" />
                <mx:Button label="Show 1" click="showViewStackChild(1)" />
                <mx:Button label="Show 2" click="showViewStackChild(2)" />
                <mx:Button label="Show 3" click="showViewStackChild(3)" />
                    
            </mx:FormItem>
            
            
        </mx:Form>
            

    </mx:HBox>

</mx:Application>