<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas 
	xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:app="com.fashioncrimes.view.application.*"
	xmlns:c="com.fashioncrimes.view.components.*"
	currentState="{viewState}" 
	width="100%" height="100%" 
	verticalScrollPolicy="off">
	
	<mx:Script>
		<![CDATA[
			import mx.core.Application;
			import mx.effects.easing.Exponential;
			import com.fashioncrimes.business.Views;
			[Bindable]
			public var viewState:String;	
			
			private const TOP_GAP:int = 18;
		]]>
	</mx:Script>
	
	<mx:states>
		<mx:State name="header">
			<mx:AddChild>
				<!-- HEADER (logo, top navigation ) -->
				<c:Header id="header" />
			</mx:AddChild>
		</mx:State>
		<mx:State name="{Views.MAIN_TYPE}" basedOn="header">
			<mx:AddChild>
				<app:Homepage id="home_view" y="{header.height + header.y + TOP_GAP}" />
			</mx:AddChild>
		</mx:State>
		
		<mx:State name="{Views.DRESS_TYPE}" basedOn="header">
			<mx:AddChild>
				<app:Dress id="dress_view" />
			</mx:AddChild>
			
			<mx:exitState>
				<![CDATA[
					dress_view.unloadCollection();
				]]>
			</mx:exitState>
		</mx:State>
		
		<mx:State name="{Views.ACCESSORY_TYPE}" basedOn="header">
			<mx:AddChild>
				<app:Accessories id="accessory_view" />
			</mx:AddChild>
		</mx:State>
		
		<mx:State name="{Views.SCRAPBOOK_TYPE}" basedOn="header">
			<mx:AddChild>
				<app:Scrapbook id="scrapbook_view" />
			</mx:AddChild>
		</mx:State>
		
		<mx:State name="{Views.HISTORY_TYPE}" basedOn="header">
			<mx:AddChild>
				<app:History id="history_view" y="{header.height + header.y + TOP_GAP}" />
			</mx:AddChild>
		</mx:State>
		
		<mx:State name="{Views.PRESS_ARCHIVE_TYPE}" basedOn="header">
			<mx:AddChild>
				<app:PressArchive id="pressArchive_view" y="{header.height + header.y + TOP_GAP}" />
			</mx:AddChild>
		</mx:State>
		
		<mx:State name="{Views.CAREERS_TYPE}" basedOn="header">
			<mx:AddChild>
				<app:Careers id="careers_view" y="{header.height + header.y + TOP_GAP}" />
			</mx:AddChild>
		</mx:State>
		
		<mx:State name="{Views.STYLISTS_TYPE}" basedOn="header" >
			<mx:AddChild>
				<app:Stylists id="stylists_view" y="{header.height + header.y + TOP_GAP}" />
			</mx:AddChild>
		</mx:State>			
	</mx:states>
	
	<mx:transitions>
		<mx:Transition toState="{Views.ACCESSORY_TYPE}" fromState="{Views.MAIN_TYPE}">
			<mx:Sequence>
				<mx:AddChildAction target="{accessory_view}" />
				<mx:Parallel>
					<mx:Move 					
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{accessory_view}"
						yTo="95"
						yFrom="{Application.application.height}" />
					
					<mx:Move 											
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{home_view}"
						 yTo="{home_view.height * - 1}"
						 />		
				</mx:Parallel>	
				
				<mx:RemoveChildAction target="{home_view}" />			
			</mx:Sequence>			
		</mx:Transition>
				
		<mx:Transition toState="{Views.DRESS_TYPE}" fromState="{Views.MAIN_TYPE}">
			<mx:Sequence>
				<mx:AddChildAction target="{dress_view}" />
				<mx:Parallel>
					<mx:Move 					
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{dress_view}"
						yTo="95"
						yFrom="{Application.application.height}" />
					
					<mx:Move 											
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{home_view}"
						 yTo="{home_view.height * - 1}"
						 />		
				</mx:Parallel>	
				
				<mx:RemoveChildAction target="{home_view}" />			
			</mx:Sequence>			
		</mx:Transition>
		
		<mx:Transition toState="{Views.SCRAPBOOK_TYPE}" fromState="{Views.MAIN_TYPE}">
			<mx:Sequence>
				<mx:AddChildAction target="{scrapbook_view}" />
				<mx:Parallel>
					<mx:Move 					
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{scrapbook_view}"
						yTo="95"
						yFrom="{Application.application.height}" />
					
					<mx:Move 											
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{home_view}"
						 yTo="{home_view.height * - 1}"
						 />		
				</mx:Parallel>	
				
				<mx:RemoveChildAction target="{home_view}" />			
			</mx:Sequence>			
		</mx:Transition>
		
		<mx:Transition toState="{Views.CAREERS_TYPE}" fromState="{Views.MAIN_TYPE}">
			<mx:Sequence>
				<mx:AddChildAction target="{careers_view}" />
				<mx:Parallel>
					<mx:Move 					
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{careers_view}"
						yTo="95"
						yFrom="{Application.application.height}" />
					
					<mx:Move 											
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{home_view}"
						 yTo="{home_view.height * - 1}"
						 />		
				</mx:Parallel>	
				
				<mx:RemoveChildAction target="{home_view}" />			
			</mx:Sequence>			
		</mx:Transition>
		
		<mx:Transition toState="{Views.HISTORY_TYPE}" fromState="{Views.MAIN_TYPE}">
			<mx:Sequence>
				<mx:AddChildAction target="{history_view}" />
				<mx:Parallel>
					<mx:Move 					
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{history_view}"
						yTo="95"
						yFrom="{Application.application.height}" />
					
					<mx:Move 											
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{home_view}"
						 yTo="{home_view.height * - 1}"
						 />		
				</mx:Parallel>	
				
				<mx:RemoveChildAction target="{home_view}" />			
			</mx:Sequence>			
		</mx:Transition>		

		<mx:Transition toState="{Views.PRESS_ARCHIVE_TYPE}" fromState="{Views.MAIN_TYPE}">
			<mx:Sequence>
				<mx:AddChildAction target="{pressArchive_view}" />
				<mx:Parallel>
					<mx:Move 					
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{pressArchive_view}"
						yTo="95"
						yFrom="{Application.application.height}" />
					
					<mx:Move 											
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{home_view}"
						 yTo="{home_view.height * - 1}"
						 />		
				</mx:Parallel>	
				
				<mx:RemoveChildAction target="{home_view}" />			
			</mx:Sequence>			
		</mx:Transition>
		
		<mx:Transition toState="{Views.STYLISTS_TYPE}" fromState="{Views.MAIN_TYPE}">
			<mx:Sequence>
				<mx:AddChildAction target="{stylists_view}" />
				<mx:Parallel>
					<mx:Move 					
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{stylists_view}"
						yTo="95"
						yFrom="{Application.application.height}" />

					<mx:Move 											
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{home_view}"
						 yTo="{home_view.height * - 1}"
						 />		
				</mx:Parallel>	
				
				<mx:RemoveChildAction target="{home_view}" />			
			</mx:Sequence>			
		</mx:Transition>			
		
		
		<!--
		
			REVERSE STATES
		
		-->			
		
		<mx:Transition toState="{Views.MAIN_TYPE}" fromState="{Views.DRESS_TYPE}">
			<mx:Sequence>
				<mx:AddChildAction target="{home_view}" />
				<mx:Parallel>
					<mx:Move 					
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{dress_view}"
						yFrom="95"
						yTo="{Application.application.height}" />
					
					<mx:Move 											
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{home_view}"
						yFrom="{home_view.height * - 1}"
						yTo="{header.height + header.y + TOP_GAP}"
						 />		
				</mx:Parallel>	
				
				<mx:RemoveChildAction target="{dress_view}" />			
			</mx:Sequence>
		</mx:Transition>
		
		<mx:Transition toState="{Views.MAIN_TYPE}" fromState="{Views.ACCESSORY_TYPE}">
			<mx:Sequence>
				<mx:AddChildAction target="{home_view}" />
				<mx:Parallel>
					<mx:Move 					
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{accessory_view}"
						yFrom="95"
						yTo="{Application.application.height}" />
					
					<mx:Move 											
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{home_view}"
						yFrom="{home_view.height * - 1}"
						yTo="{header.height + header.y + TOP_GAP}"
						 />		
				</mx:Parallel>	
				
				<mx:RemoveChildAction target="{accessory_view}" />			
			</mx:Sequence>
		</mx:Transition>
		
		<mx:Transition toState="{Views.MAIN_TYPE}" fromState="{Views.SCRAPBOOK_TYPE}">
			<mx:Sequence>
				<mx:AddChildAction target="{home_view}" />
				<mx:Parallel>
					<mx:Move 					
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{scrapbook_view}"
						yFrom="95"
						yTo="{Application.application.height}" />
					
					<mx:Move 											
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{home_view}"
						yFrom="{home_view.height * - 1}"
						yTo="{header.height + header.y + TOP_GAP}"
						 />		
				</mx:Parallel>	
				
				<mx:RemoveChildAction target="{scrapbook_view}" />			
			</mx:Sequence>
		</mx:Transition>
		
		<mx:Transition toState="{Views.MAIN_TYPE}" fromState="{Views.HISTORY_TYPE}">
			<mx:Sequence>
				<mx:AddChildAction target="{home_view}" />
				<mx:Parallel>
					<mx:Move 					
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{history_view}"
						yFrom="95"
						yTo="{Application.application.height}" />
					
					<mx:Move 											
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{home_view}"
						yFrom="{home_view.height * - 1}"
						yTo="{header.height + header.y + TOP_GAP}"
						 />		
				</mx:Parallel>	
				
				<mx:RemoveChildAction target="{history_view}" />			
			</mx:Sequence>
		</mx:Transition>

		<mx:Transition toState="{Views.MAIN_TYPE}" fromState="{Views.CAREERS_TYPE}">
			<mx:Sequence>
				<mx:AddChildAction target="{home_view}" />
				<mx:Parallel>
					<mx:Move 					
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{careers_view}"
						yFrom="95"
						yTo="{Application.application.height}" />
					
					<mx:Move 											
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{home_view}"
						yFrom="{home_view.height * - 1}"
						yTo="{header.height + header.y + TOP_GAP}"
						 />		
				</mx:Parallel>	
				
				<mx:RemoveChildAction target="{careers_view}" />			
			</mx:Sequence>
		</mx:Transition>
		
		<mx:Transition toState="{Views.MAIN_TYPE}" fromState="{Views.PRESS_ARCHIVE_TYPE}">
			<mx:Sequence>
				<mx:AddChildAction target="{home_view}" />
				<mx:Parallel>
					<mx:Move 					
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{pressArchive_view}"
						yFrom="95"
						yTo="{Application.application.height}" />
					
					<mx:Move 											
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{home_view}"
						yFrom="{home_view.height * - 1}"
						yTo="{header.height + header.y + TOP_GAP}"
						 />		
				</mx:Parallel>	
				
				<mx:RemoveChildAction target="{pressArchive_view}" />			
			</mx:Sequence>
		</mx:Transition>
		
		<mx:Transition toState="{Views.MAIN_TYPE}" fromState="{Views.STYLISTS_TYPE}">
			<mx:Sequence>
				<mx:AddChildAction target="{home_view}" />
				<mx:Parallel>
					<mx:Move 					
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{stylists_view}"
						yFrom="95"
						yTo="{Application.application.height}" />
					
					<mx:Move 											
						duration="750" 
						easingFunction="{mx.effects.easing.Exponential.easeInOut}" 
						target="{home_view}"
						yFrom="{home_view.height * - 1}"
						yTo="{header.height + header.y + TOP_GAP}"
						 />		
				</mx:Parallel>	
				
				<mx:RemoveChildAction target="{stylists_view}" />			
			</mx:Sequence>
		</mx:Transition>
		
		

	</mx:transitions>
</mx:Canvas>