     //--------------------------------------------------------------------------
     
     //----------------------------------
-    //  horizontalPosition
-    //----------------------------------
-    
-    private var _horizontalPosition:String = CalloutPosition.AUTO;
-    
-    [Inspectable(category="General", enumeration="before,start,middle,end,after,auto", defaultValue="auto")]
-    
-    /**
-     *  @copy spark.components.Callout#horizontalPosition
-     */
-    public function get horizontalPosition():String
-    {
-        // TODO 
-        if (currentDropDown)
-            return currentDropDown.horizontalPosition;
-        
-        return _horizontalPosition;
-    }
-    
-    /**
-     *  @private
-     */
-    public function set horizontalPosition(value:String):void
-    {
-        if (value == _horizontalPosition)
+    //  callout
+    //----------------------------------
+    
+    /**
+     *  @private
+     */
+    private var _callout:Callout;
+    
+    /**
+     *  TODO (jasonsj): PARB
+     */
+    mx_internal function get callout():Callout
+    {
+        return _callout;
+    }
+    
+    /**
+     *  TODO (jasonsj): PARB
+     * 
+     *  Allow users to set their own Callout instead of the one defined by the
+     *  skin. This allows properties and styles to be set in MXML instead of
+     *  either passthrough styles in CalloutButton or CSS styles. 
+     * 
+     *  The getter allows direct access to the callout. Unlike DropDownList,
+     *  CalloutButton's dropDown skin part is a class factory and not the
+     *  Callout instance.
+     */
+    mx_internal function set callout(value:Callout):void
+    {
+        if (_callout == value)
             return;
         
-        _horizontalPosition = value;
-        
-        if (currentDropDown)
-            currentDropDown.horizontalPosition = horizontalPosition;
-    }
-    
-    //----------------------------------
-    //  verticalPosition
-    //----------------------------------
-    
-    private var _verticalPosition:String = CalloutPosition.AUTO;
-    
-    [Inspectable(category="General", enumeration="before,start,middle,end,after,auto", defaultValue="auto")]
-    
-    /**
-     *  @copy spark.components.Callout#verticalPosition
-     */
-    public function get verticalPosition():String
-    {
-        if (currentDropDown)
-            return currentDropDown.verticalPosition;
-        
-        return _verticalPosition;
-    }
-    
-    /**
-     *  @private
-     */
-    public function set verticalPosition(value:String):void
-    {
-        if (value == _verticalPosition)
-            return;
-        
-        _verticalPosition = value;
-        
-        if (currentDropDown)
-            currentDropDown.verticalPosition = verticalPosition;
+        if (_callout && _callout.isOpen)
+        {
+            // TODO (jasonsj): cleanup?
+            _callout.close();
+        }
+        
+        // FIXME (jasonsj): re-init
+        _callout = value;
     }
     
     //----------------------------------

    //
    //--------------------------------------------------------------------------
    
    // TODO (jasonsj): proxy for Callout properties
    mx_internal var calloutProperties:Object = {};
    
    /**
     *  @private
     *  TODO (jasonsj): write description
     */
    private var currentDropDown:Callout;
    
    //--------------------------------------------------------------------------
    //

            if (dropDownController)
                dropDownController.openButton = openButton;
        }
        else if (partName == "dropDown")
        {
            // copy proxied values from calloutProperties (if set) to callout
            var newCalloutProperties:uint = 0;
            var calloutInstance:Callout = instance as Callout;
            
            if (calloutInstance && dropDownController)
            {
                calloutInstance.id = "callout";
                dropDownController.dropDown = calloutInstance;
                
//                calloutInstance.addEventListener(FlexEvent.CREATION_COMPLETE, callout_creationCompleteHandler);
                calloutInstance.addEventListener(PopUpEvent.OPEN, callout_openHandler);
                calloutInstance.addEventListener(PopUpEvent.CLOSE, callout_closeHandler);
                
                if (calloutProperties.horizontalPosition !== undefined)
                {
                    calloutInstance.horizontalPosition = calloutProperties.horizontalPosition;
                    newCalloutProperties = BitFlagUtil.update(newCalloutProperties, 
                        HORIZONTAL_POSITION_PROPERTY_FLAG, true);
                }
                
                if (calloutProperties.verticalPosition !== undefined)
                {
                    calloutInstance.verticalPosition = calloutProperties.verticalPosition;
                    newCalloutProperties = BitFlagUtil.update(newCalloutProperties, 
                        VERTICAL_POSITION_PROPERTY_FLAG, true);
                }
                
                calloutProperties = newCalloutProperties;
                
                // FIXME (jasonsj): find a correct way to initialize the contentGroup
                if (layout)
                    calloutInstance.layout = layout;
                
                calloutInstance.mxmlContent = currentContentGroup.getMXMLContent();
            }
        }
    }
    
    /**
