<?xml version="1.0" encoding="utf-8"?>
<mx:VBox 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:sides="view.sides.*" 
	creationComplete="onCreationComplete();">	
	
	<!-- Using a distortion effect using a custom state change. 
	Listen to the distortion effect's EffectEvent.EFFECT_END event, 
	and apply your state change afterwards. In this example the state change 
	is a removeChild, addChild method call on the VBox container. -->
	
	<mx:Script>
		<![CDATA[
			import view.sides.Registration;
			import mx.events.EffectEvent;
			import com.adobe.ac.mxeffects.Flip;
			import com.adobe.ac.mxeffects.DistortionConstants;
			
			private var registration : Registration;
			
			private function onCreationComplete()  : void
			{
				registration = new Registration();
				registration.title = "Registration";
				registration.addEventListener( Event.CHANGE, onStartBack );
			}
			
			private function flipToRegistration() : void
			{
				var e : Flip = new Flip( login );
				e.siblings = [ registration ];
				e.direction = DistortionConstants.RIGHT;
				e.duration = 1000;
				e.addEventListener( EffectEvent.EFFECT_END, onEndLoginEffect );
				e.play();
			}
			
			private function onEndLoginEffect( event : EffectEvent ) : void
			{
				removeChild( login );
				addChild( registration );
			}
			
			private function onStartBack( event : Event ) : void
			{
				flipToLogin();
			}
			
			private function flipToLogin() : void
			{
				var e : Flip = new Flip( registration );
				e.siblings = [ login ];
				e.direction = DistortionConstants.LEFT;
				e.duration = 1000;
				e.addEventListener( EffectEvent.EFFECT_END, onEndRegistrationEffect );
				e.play();
			}
			
			private function onEndRegistrationEffect( event : EffectEvent ) : void
			{
				removeChild( registration );
				addChild( login );
			}
		]]>
	</mx:Script>
			
	<sides:Login id="login" title="Login" change="flipToRegistration();"/>

</mx:VBox>