<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute"
    backgroundColor="#FFFFFF"
    backgroundGradientColors="[#FFFFFF,#FFFFFF]" viewSourceURL="srcview/index.html">
    
    <mx:Style source="styles.css" />
    
    <mx:Script>
        <![CDATA[
            import mx.effects.easing.Exponential;
            import mx.graphics.ImageSnapshot;
            
            private function animate() : void
            {
                animateImage.width = content.width;
                animateImage.height = content.height;
                animateImage.source = new Bitmap( ImageSnapshot.captureBitmapData( content ) );
                animateImage.visible = true;
                animateImage.includeInLayout = true;
                
                switch ( direction.text )
                {
                    case "up":
                        contentMove.xFrom = 0;
                        contentMove.xTo = 0;
                        contentMove.yFrom = content.height;
                        contentMove.yTo = 0;
                        
                        imageMove.xFrom = 0;
                        imageMove.xTo = 0;
                        imageMove.yFrom = 0;
                        imageMove.yTo = - content.height;
                        break;
                        
                    case "down":
                        contentMove.xFrom = 0;
                        contentMove.xTo = 0;
                        contentMove.yFrom = -content.height;
                        contentMove.yTo = 0;
                        
                        imageMove.xFrom = 0;
                        imageMove.xTo = 0;
                        imageMove.yFrom = 0;
                        imageMove.yTo = content.height;
                        break;
                        
                    case "left":
                        contentMove.xFrom = content.width;
                        contentMove.xTo = 0;
                        contentMove.yFrom = 0;
                        contentMove.yTo = 0;
                        
                        imageMove.xFrom = 0;
                        imageMove.xTo = -content.width;
                        imageMove.yFrom = 0;
                        imageMove.yTo = 0;
                        break;
                        
                    default: //right
                        contentMove.xFrom = - content.width;
                        contentMove.xTo = 0;
                        contentMove.yFrom = 0;
                        contentMove.yTo = 0;
                        
                        imageMove.xFrom = 0;
                        imageMove.xTo = content.width;
                        imageMove.yFrom = 0;
                        imageMove.yTo = 0;
                        break;
                }
                
                toggleVisibility();
            }
            
            private function toggleVisibility() : void
            {
                content.selectedIndex = (content.selectedIndex+1)%content.numChildren;
                contentMove.target = content.selectedChild;
            }
            
        ]]>
    </mx:Script>
    
    <mx:Parallel id="showEffect" >
        <mx:Move 
            id="contentMove" />
        <mx:Move 
            id="imageMove" 
            target="{animateImage}"  />
        <mx:effectEnd>
            <![CDATA[
                animateImage.visible = false;
                animateImage.includeInLayout = false;
            ]]>
        </mx:effectEnd>
    </mx:Parallel>
    
    <mx:Panel 
        title="Swipe Effect Demo"
        horizontalCenter="0"
        verticalCenter="0"
        width="300"
        height="300"
        layout="absolute"
        horizontalScrollPolicy="off"
        verticalScrollPolicy="off">
        
        <mx:ViewStack 
            id="content"
            width="100%" height="100%">
            
            <mx:Canvas 
                width="100%" height="100%" 
                showEffect="{showEffect}" >
                
                <mx:DateChooser width="100%" height="100%" />
            </mx:Canvas>
            
            <mx:Canvas 
                width="100%" height="100%" 
                showEffect="{showEffect}" >
                
                <mx:TextArea width="100%" height="100%" fontWeight="bold" fontSize="14">
                    <mx:text>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </mx:text>
                </mx:TextArea>
            </mx:Canvas>
            
        </mx:ViewStack>
        
        <mx:Image 
            id="animateImage"
            visible="false"
            includeInLayout="false" />
        
        <mx:ControlBar>
            <mx:ComboBox 
                id="direction" 
                width="100%" 
                dataProvider="['up','down','left','right']" 
                selectedIndex="2"/>
            <mx:Button 
                label="Animate!" 
                width="100%" 
                click="animate()" />
        </mx:ControlBar>
        
    </mx:Panel>
    
</mx:Application>