      *  @playerversion AIR 3
      *  @productversion Flex 4.6
      */
-    public var viewNavigatorCallout:Callout;
+    public var viewNavigatorPopUp:SkinnablePopUpContainer;
     
     //--------------------------------------------------------------------------
     //

    
    /**
     *  @private
     *  Shows the navigator at the specified index in the callout component.
     */ 
    mx_internal function showNavigatorAtIndexInCallout(index:int, owner:DisplayObjectContainer):void
    {
        // TODO (chiedozi): Consider replacing the navigator in the callout if
        // it is already open.
        if (index >= numElements || !viewNavigatorCallout|| viewNavigatorCallout.isOpen)
            return;
        
        _calloutNavigatorIndex = index;
        _calloutNavigator = getElementAt(index) as ViewNavigatorBase;
        
        viewNavigatorCallout.addEventListener('mouseDownOutside', navigatorCallout_mouseDownOutsideHandler, false, 0, true);
        viewNavigatorCallout.addElement(_calloutNavigator);
        
        // Make sure the first navigator is visible
        _calloutNavigator.visible = true;
        
        // Open the callout
        viewNavigatorCallout.open(owner, true);
    }
    
    /**
     *  @private
     */ 
    private function navigatorCallout_closeHandler(event:PopUpEvent):void
    {
        viewNavigatorCallout.removeEventListener(PopUpEvent.CLOSE, navigatorCallout_closeHandler);
        
        if (_calloutNavigator)
            restoreNavigatorInCallout();
        
        // When an orientation change occurs, the callout's visibility may be set to false.
        // Set it back to true so that it is visible the next time it is opened.
        viewNavigatorCallout.visible = true;
    }
    
    /**
     *  @private
     */ 
    private function restoreNavigatorInCallout():void
    {
        // Restore navigator parent
        addElementAt(_calloutNavigator, _calloutNavigatorIndex);
        
        if (autoHideFirstViewNavigator && _calloutNavigatorIndex == 0)
        {
            toggleFirstNavigatorVisibility();
        }
        else
        {
            _calloutNavigator.visible = false;
        }
        
        _calloutNavigator = null;
        _calloutNavigatorIndex = -1;
    }
    
    /**

     */
    private function elementRemoveHandler(event:ElementExistenceEvent):void
    {
        if (event.element != _popUpNavigator)
        {
            var navigator:ViewNavigatorBase = event.element as ViewNavigatorBase;
            
