// if the right-bottom button is already added
if (!_bothEdges)
{
    // we add the right bottom button
    _bothEdges = new Button();
    // no label
    _bothEdges.label = "";
    // no tooltip
    _bothEdges.toolTip = null;
    _bothEdges.tabEnabled = false;
    _bothEdges.setStyle("right", 0);
    _bothEdges.setStyle("bottom",0);
    _bothEdges.height = 12;
    _bothEdges.width = 12;
    // set its style
    // in this style we set the skin to not show anything
    _bothEdges.styleName = "canvasBothEdges";
 
    // if the canvas is only horizontally resizable
    // we use the same events and handlers like in that case
    _bothEdges.addEventListener(MouseEvent.MOUSE_OVER, 
            handleBothResizeOver, false, 0 ,true);
    _bothEdges.addEventListener(MouseEvent.MOUSE_MOVE, 
            handleBothResizeOver, false, 0 ,true);
    _bothEdges.addEventListener(MouseEvent.MOUSE_OUT, 
            handleResizeOut, false, 0 ,true);
    _bothEdges.addEventListener(MouseEvent.MOUSE_DOWN, 
            handleBothDragStart, false, 0 ,true);
    _bothEdges.addEventListener(Event.ENTER_FRAME, 
            handleBothDragMove, false, 0 ,true);
    _bothEdges.addEventListener(MouseEvent.MOUSE_UP, 
            handleDragStop, false, 0 ,true);
 
    addChild(_bothEdges);
}

// we remove the events for the right bottom corner (button)	
if (_bothEdges)
{
    if (_bothEdges.hasEventListener(MouseEvent.MOUSE_OVER))
        _bothEdges.removeEventListener(MouseEvent.MOUSE_OVER, 
                handleBothResizeOver);
    if (_bothEdges.hasEventListener(MouseEvent.MOUSE_OUT))
        _bothEdges.removeEventListener(MouseEvent.MOUSE_OUT, 
                handleResizeOut);
    if (_bothEdges.hasEventListener(MouseEvent.MOUSE_DOWN))
        _bothEdges.removeEventListener(MouseEvent.MOUSE_DOWN, 
                handleBothDragStart);
    if (_bothEdges.hasEventListener(MouseEvent.MOUSE_UP))
        _bothEdges.removeEventListener(MouseEvent.MOUSE_UP, 
                handleDragStop);
    if (_bothEdges.hasEventListener(Event.ENTER_FRAME))
        _bothEdges.removeEventListener(Event.ENTER_FRAME, 
                handleBothDragMove);
}

// event handler to show the resize cursor
private function handleBothResizeOver(event:MouseEvent):void
{
    // check if we already have the resize cursor set
    if (_currentCursorId == -1)
        _currentCursorId = 
                CursorManager.setCursor(_cResizeCursor,2,-10,-10);
}

// event handler to start the drag
private function handleBothDragStart(event:MouseEvent):void
{
    if (_isResizableHorizontally)
    {
        _dragHStarted = true;
        // we save the initial position and width
        _dragStartHPosition = stage.mouseX;
        _dragLastWidth = width;
    }
    if (_isResizableVertically)
    {
        _dragVStarted = true;
        // we save the initial position and width
        _dragStartVPosition = stage.mouseY;
        _dragLastHeight = height;
    }
}

// event handler for real rezise and other important stuff
private function handleBothDragMove(event:Event):void
{
    // we put the right-bottom always on the top of the other children
    if (getChildIndex(_bothEdges) < numChildren-1)
    setChildIndex(_bothEdges,numChildren-1);
    // we add the event to stop the drag also on the stage
    // we cannot add this event in set resizable because the
    // stage is not created because set resizable is done at
    // constructor time and stage is set after adding our
    // canvas to the application
    if (stage != null && !stage.hasEventListener(MouseEvent.MOUSE_UP))
        stage.addEventListener(MouseEvent.MOUSE_UP, 
                handleDragStop, false, 0 ,true);
    // we resize our canvas only if drag started
    if (_dragHStarted)
    {
        // get the amount of movement
        // difference between the current mouse x position relative 
        // to the stage and the saved position at mouse down event
        var hMovement:int = (stage.mouseX - _dragStartHPosition);
        // if the canvas is positioned relative to the center
        // the width will be changed in both left and right directions
        // so we will double the movement
        if (getStyle("horizontalCenter") != undefined)
        {
            hMovement *= 2;
        }
        // if we move to the left
        if (hMovement <= 0)
        {
            // check not to pass the minimum width
            if (minWidth < _dragLastWidth + hMovement)
                width = _dragLastWidth + hMovement;
            else
                width = minWidth;
        } else {
            // check not to pass the maximum width
            if (maxWidth > _dragLastWidth + hMovement)
                width = _dragLastWidth + hMovement;
            else
                width = maxWidth;
        }
    }
    if (_dragVStarted)
    {
        // get the amount of movement
        // difference between the current mouse x position relative 
        // to the stage and the saved position at mouse down event
        var vMovement:int = (stage.mouseY - _dragStartVPosition);
        // if the canvas is positioned relative to the center
        // the width will be changed in both left and right directions
        // so we will double the movement
        if (getStyle("veticalCenter") != undefined)
        {
            vMovement *= 2;
        }
        // if we move to the left
        if (vMovement <= 0)
        {
            // check not to pass the minimum width
            if (minHeight < _dragLastHeight + vMovement)
                height = _dragLastHeight + vMovement;
            else
                height = minHeight;
        } else {
            // check not to pass the maximum width
            if (maxHeight > _dragLastHeight + vMovement)
                height = _dragLastHeight + vMovement;
            else
                height = maxHeight;
        }
    }
}