jQuery Forum

below is the jQuery code that I am writing to draw a simple box on the
screen.
When I depress the mouse ('mousedown') it sets the box's initial
position.
As I drag the mouse ('mousemove') the box gets redrawn from the
initial position to the new point.
When I release the mouse ('mouseup') it is supposed to then create a
div that draw a box.
The problem that I am having is that if I update 4 css parameters in
the mousemove handler the mouseup bind gets ignored. If I only update
3 of them, the moveup fires properly.
I sure it is something stupid that I am doing but I cannot find it.
Any help is appreciated.
Thanks in advance...
Randy
$(document).ready(function()
    {
    $('#testing').HSABox();
    });
jQuery.fn.HSABox = function(params)
    {
    {
    function mouseDown(e)
        {
        p = {x: e.pageX, y: e.pageY};
        $(this).bind('mouseup',p,mouseUp);
        $(this).bind('mousemove',p,mouseMove);
        $('body').append('<div id="' + params.boxID + '" class="' +
params.boxStartClass + '"></div>');
        $('#' + params.boxID).css('display','block');
        return false;
        }
    function mouseUp(e)
        {
        $('#' + params.boxID).remove();
        $(this).unbind('mousemove');
        $(this).unbind('mouseup');
        var r = params.boxID + (parseInt($('.' + params.boxStopClass).size(),
10) + 1);
        $('body').append('<div id="' + r + '" class="' + params.boxStopClass
+ '"></div>');
        $('#' + r).css(updateBox(e));
        return false;
        }
    function mouseMove(e)
        {
        var id = '#' + params.boxID;
        b = updateBox(e);
        $(id).css('left',b.left);
        $(id).css('top',b.top);
        $(id).css('width',b.width);
        $(id).css('height',b.height);
        return false;
        }
    function updateBox(e)
        {
        o = {};
        o.left     = Math.min(e.pageX,e.data.x);
        o.top     = Math.min(e.pageY,e.data.y);
        o.width     = Math.abs(e.data.x - e.pageX);
        o.height    = Math.abs(e.data.y - e.pageY);
        return o;
        }
    params = jQuery.extend(
        {
        boxID:            'boxDiv',                // used for the temporary div
        boxStartClass:    'boxOutlineStart',    // used to identify the outline
        boxStopClass:    'boxOutlineStop'        // used to identify a finished
outline
        },params);
    return this.each(function(){ $(this).bind('mousedown',mouseDown); });
    };