         
         pendingViewTransition = null;
         return true;
-    }
-    
+    }    
+    
+    /**
+     *  @private
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
+	protected function createVisibilityAnimation():IEffect
+	{
+		var effect:IEffect;
+		var finalEffect:Parallel = new Parallel();
+        
+        // Grab initial values
+		actionBarProps = { start:captureAnimationValues(actionBar) };
+        tabBarProps = { start:captureAnimationValues(tabBar) };
+        contentGroupProps = { start:captureAnimationValues(contentGroup) };
+        
+        // Update actionBar layout properties
+        if (actionBarVisibilityInvalidated)
+            actionBar.visible = actionBar.includeInLayout = !actionBarProps.start.visible;
+        
+        if (tabBarVisibilityInvalidated)
+            tabBar.visible = tabBar.includeInLayout = !tabBarProps.start.visible;
+        
+        // Calculate final positions.  This method will force a validation
+        calculateFinalUIPositions();
+		
+        // The actionbar will be visible if we are animating it
+		if (actionBar.visible)
+		{
+            effect = createActionBarVisibilityEffect(actionBar.visible, actionBarProps);
+            effect.target = actionBar;
+            
+            finalEffect.addChild(effect);
+		}
+		
+        // The tab bar will only be animated if it is visible
+		if (tabBar.visible)
+		{
+            effect = createTabBarVisibilityEffect(tabBar.visible, tabBarProps);
+            effect.target = tabBar;
+            
+            finalEffect.addChild(effect);
+		}
+		
+		var moveEffect:Move = new Move();
+        moveEffect.target = contentGroup;
+        moveEffect.yFrom = contentGroupProps.start.y;
+        moveEffect.yTo = contentGroup.y;
+		contentGroup.includeInLayout = false;
+		contentGroup.cacheAsBitmap = true;
+		finalEffect.addChild(moveEffect);
+		
+		finalEffect.duration = VISIBILITY_ANIMATION_DURATION;
+		return finalEffect;
+	}
+
+    /**
+     *  @private
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.1
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
+    protected function calculateFinalUIPositions():void
+    {
+        var animateActionBarUp:Boolean;
+        var animateTabBarUp:Boolean; 
+        
+        if (overlayControls)
+        {
+            animateActionBarUp = actionBar.y <= height / 2;
+            animateTabBarUp = tabBar.y <= height / 2;
+        }
+        else
+        {
+            animateActionBarUp = actionBar.y <= contentGroup.y;
+            animateTabBarUp = tabBar.y <= contentGroup.y;
+        }
+        
+        // Need to validate to capture final positions and sizes of skin parts
+        validateNow();
+        
+        // This will store the final location and sizes of the components
+        actionBarProps.end = captureAnimationValues(actionBar);
+        tabBarProps.end = captureAnimationValues(tabBar);
+        contentGroupProps.end = captureAnimationValues(contentGroup);
+        
+        if (actionBarVisibilityInvalidated)
+        {
+            if (animateActionBarUp)
+            {
+                if (actionBarProps.start.visible)
+                    actionBarProps.end.y = -actionBar.height;
+                else
+                    actionBarProps.start.y = -actionBar.height;
+            }
+            else
+            {
+                if (actionBarProps.start.visible)
+                    actionBarProps.end.y = this.height;
+                else
+                    actionBarProps.start.y = this.height;
+            }
+            
+            actionBar.visible = true;
+        }
+        
+        if (tabBarVisibilityInvalidated)
+        {
+            if (animateTabBarUp)
+            {
+                if (tabBarProps.start.visible)
+                    tabBarProps.end.y = -tabBar.height;
+                else
+                    tabBarProps.start.y = -tabBar.height;
+            }
+            else
+            {
+                if (tabBarProps.start.visible)
+                    tabBarProps.end.y = this.height;
+                else
+                    tabBarProps.start.y = this.height;
+            }
+            
+            tabBar.visible = true;
+        }
+    }
+    
+    /**
+     *  @private
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */    
+    protected function captureAnimationValues(component:UIComponent):Object
+    {
+        var values:Object = {   y:component.y, 
+                                visible: component.visible,
+                                includeInLayout: component.includeInLayout,
+                                cacheAsBitmap: component.cacheAsBitmap };
+        
+        return values;
+    }
+    
+    /**
+     *  @private
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
+    protected function createActionBarVisibilityEffect(hiding:Boolean, props:Object):IEffect
+    {
+        var effect:Move = new Move();
+        
+        effect.target = actionBar;
+        effect.yFrom = props.start.y;
+        effect.yTo = props.end.y;
+        
+        actionBar.includeInLayout = false;
+        actionBar.cacheAsBitmap = true;
+        
+        return effect;
+    }
+    
+    /**
+     *  @private
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
+    protected function createTabBarVisibilityEffect(hiding:Boolean, props:Object):IEffect
+    {
+        var effect:Move = new Move();
+        effect.target = tabBar;
+        effect.yFrom = props.start.y;
+        effect.yTo = props.end.y;
+        
+        tabBar.includeInLayout = false;
+        tabBar.cacheAsBitmap = true;
+        
+        return effect;
+    }
+    
+    /**
+     *  @private
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
+	private function visibilityAnimation_completeHandler(event:EffectEvent):void
+	{
+		event.target.removeEventListener(EffectEvent.EFFECT_END, visibilityAnimation_completeHandler);
+		
+		if (actionBarVisibilityInvalidated)
+			actionBar.visible = actionBar.includeInLayout = !actionBarProps.start.visible;
+		else
+			actionBar.includeInLayout = actionBarProps.start.includeInLayout;
+		
+		if (tabBarVisibilityInvalidated)
+			tabBar.visible = tabBar.includeInLayout = !tabBarProps.start.visible;
+		else
+			tabBar.includeInLayout = tabBarProps.start.includeInLayout;
+		
+        // Restore includeInLayout and cacheAsBitmap properties for each component
+		contentGroup.includeInLayout = contentGroupProps.start.includeInLayout;
+		
+		actionBar.cacheAsBitmap = actionBarProps.start.cacheAsBitmap;
+		tabBar.cacheAsBitmap = tabBarProps.start.cacheAsBitmap;
+		contentGroup.cacheAsBitmap = contentGroupProps.start.cacheAsBitmap;
+		
+		currentAnimation = null;
+		actionBarProps = null;
+		contentGroupProps = null;
+		tabBarProps = null;
+		
+		actionBarVisibilityInvalidated = false;
+		tabBarVisibilityInvalidated = false;
+	}
+    
+    /**
+     *  @private
+     * 
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
     protected function endViewChange():void
     {
         var currentView:View;

        super.partAdded(partName, instance);
        
        // Tab bar should only be visible only if there is more than 1 section
        if (instance == tabBar && sections)
            tabBar.visible = tabBar.includeInLayout = sections.length > 1;
        
        // If the actionBar changes, need to reset the properties on it
        if (instance == actionBar)

//--------------------------------------

/**
 *  @inheritDoc
 */
[Event(name="changing", type="spark.events.IndexChangeEvent")]

/**
 *  @inheritDoc
 */
[Event(name="collectionChange", type="mx.events.CollectionEvent")]

// FIXME (chiedozi): Figure out valueCommit and change event pattern
/**
 *  @inheritDoc
 */
[Event(name="valueCommit", type="mx.events.FlexEvent")]

