package spark.components
{

/**
 *  Dispatched when the user selects the close button.
 *
 *  @eventType mx.events.CloseEvent.CLOSE
 */
<a href="Event%28name%3D%26quot%3Bclose%26quot%3B%2C%20type%3D%26quot%3Bmx.events.CloseEvent%26quot%3B%29">Event(name="close", type="mx.events.CloseEvent")</a>

/**
 *  Dispatched when the user presses the moveArea and
 *  begins to drag the window.
 *
 *  @eventType spark.events.TitleWindowBoundsEvent.WINDOW_MOVE_START
 */
<a href="Event%28name%3D%26quot%3BwindowMoveStart%26quot%3B%2C%20type%3D%26quot%3Bspark.events.TitleWindowBoundsEvent%26quot%3B%29">Event(name="windowMoveStart", type="spark.events.TitleWindowBoundsEvent")</a>

/**
 *  Dispatched when the user tries to drag the window.
 *
 *  @eventType spark.events.TitleWindowBoundsEvent.WINDOW_MOVING
 */
<a href="Event%28name%3D%26quot%3BwindowMoving%26quot%3B%2C%20type%3D%26quot%3Bspark.events.TitleWindowBoundsEvent%26quot%3B%29">Event(name="windowMoving", type="spark.events.TitleWindowBoundsEvent")</a>

/**
 *  Dispatched when the user moves the window successfully.
 *
 *  @eventType spark.events.TitleWindowBoundsEvent.WINDOW_MOVE
 */
<a href="Event%28name%3D%26quot%3BwindowMove%26quot%3B%2C%20type%3D%26quot%3Bspark.events.TitleWindowBoundsEvent%26quot%3B%29">Event(name="windowMove", type="spark.events.TitleWindowBoundsEvent")</a>

/**
 *  Dispatched when the user releases the moveArea after
 *  dragging.
 *
 *  @eventType spark.events.TitleWindowBoundsEvent.WINDOW_MOVE_END
 */
<a href="Event%28name%3D%26quot%3BwindowMoveEnd%26quot%3B%2C%20type%3D%26quot%3Bspark.events.TitleWindowBoundsEvent%26quot%3B%29">Event(name="windowMoveEnd", type="spark.events.TitleWindowBoundsEvent")</a>

/**
 *  Inactive State which is assigned to TitleWindows
 *  that are not in focus.
 *  
 */
<a href="SkinState%28%26quot%3Binactive%26quot%3B%29">SkinState("inactive")</a>

/**
 *  Active State with control bar present.
 *
 */
<a href="SkinState%28%26quot%3BinactiveWithControlBar%26quot%3B%29">SkinState("inactiveWithControlBar")</a>

/**
 *  The TitleWindow Class extends Panel to include
 *  a close button and drag area. TitleWindow is 
 *  designed as a floating or pop-up window.
 */
public class TitleWindow extends Panel
{
    /**
     *  Constructor.
     */
    public function TitleWindow();

    <a href="SkinPart%28required%3D%26quot%3Bfalse%26quot%3B%29">SkinPart(required="false")</a>

    /**
     *  The Button that when clicked dispatches a "close" event.
     *  Focus is disabled for this button.
     */
    public var closeButton:Button;

    <a href="SkinPart%28required%3D%26quot%3Bfalse%26quot%3B%29">SkinPart(required="false")</a>

    /**
     *  The area where the user may click and drag to move the window.
     */
    public var moveArea:UIComponent;

    /**
     *  Dispatches the "close" event when the closeButton
     *  is clicked.
     */
    protected function closeButton_clickHandler(event:MouseEvent):void;

    /**
     *  Called when the user starts dragging a TitleWindow.
     *  It begins a move on the TitleWindow if it was popped
     *  up either by PopUpManager or PopUpAnchor.
     */
    protected function moveArea_mouseDownHandler(event:MouseEvent):void;

    /**
     *  Called when the user drags a TitleWindow.
     */
    protected function moveArea_mouseMoveHandler(event:MouseEvent):void;

    /**
     *  Called when the user releases a TitleWindow
     *  that has been popped up by either by PopUpManager or
     *  PopUpAnchor.
     */
    protected function moveArea_mouseUpHandler(event:Event):void;
}
}

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo"
               width="600" height="600">

    <fx:Script>
        <![CDATA[
            import mx.core.IFlexDisplayObject;
            import mx.managers.PopUpManager;
            import spark.components.Label;
            import spark.components.TitleWindow;

            private var point1:Point = new Point();

            private function addPopUp():void
            {
                var tw:TitleWindow = new TitleWindow();

                tw.title="From PopUpManager...";
                tw.width = 250;
                tw.height = 150;
                tw.x = 300;
                tw.y = 10;

                var st:Label = new Label();
                st.text = "Hello World!";
                st.left = 10;
                st.top = 10;
                st.width = 220;

                PopUpManager.addPopUp(tw, this, false);
                tw.addEventListener("close", closeHandler);

                tw.addElement(st);
            }

            private function closeHandler(event:Event):void
            {
                event.target.removeEventListener("close", closeHandler);
                PopUpManager.removePopUp(event.target as IFlexDisplayObject);
            }

        ]]>
    </fx:Script>

    <s:Panel title="Control Panel" left="10" top="10">
        <s:layout>
            <s:VerticalLayout paddingLeft="10" paddingTop="10"
                              paddingRight="10" paddingBottom="10" />
        </s:layout>
        <s:Button label="Add PopUp Using PopUp Manager" click="addPopUp();" />
    </s:Panel>

</s:Application>

<s:TitleWindow id="tw1" creationComplete="tw1.closeButton.visible=false;">
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
    <s:Label text="I don't have a close button!" width="220" />
</s:TitleWindow>

<s:TitleWindow id="tw2" creationComplete="tw2.moveArea.visible=false;">
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
    <s:Label text="I cannot be moved!" width="220" />
</s:TitleWindow>