Resize_Boxes

Draw and resize boxes

HTML

<div id="tools_menu_wrap">
    
    <div id="tools_menu">
        <ul>
            <li id="draw_button">Draw</li>
            <li id="move_button">Move</li>
            <li id="del_button">Delete</li>
        </ul>
    </div>
    <div id="tools_handle">&#9654;</div>
</div>
<div id="active_area"></div>

CSS

html, body {height:100%;}
#active_area{
    height: 100%;
    background-color: #dddddd;
}
.new {
    border: dashed 1px black;
}
#tools_menu_wrap {
    position:absolute;
    height: 60px;
}
#tools_menu{
    float: left;
}
#tools_handle {
    width: 10px;
    padding:4px;
    border: solid 1px black;
    height: 100%;
    float:right;
    clear:right;
}

JavaScript

//we need to establish the context
var context = 'draw';

//todo, this function isn't used
var change_context = function(context_name){
    context = context_name;
}

//--SOF Draw Box function
var draw_box = function (e) {
    
    var parentElm = e.target;
    
    var globalMouseDownX = e.pageX;
    var globalMouseDownY = e.pageY;
    var parentCoords = getCoords(e.target);
    var localMouseDownX = e.pageX - parentCoords.x;
    var localMouseDownY = e.pageY - parentCoords.y;

    var lastX = e.pageX;
    var lastY = e.pageY;

    var newElm = $('<div></div>')
                    .addClass('new')
                    .attr({'id':'new'})
                    .css({
                        'position':'absolute',
                        'left' : localMouseDownX,
                        'top' : localMouseDownY
                    })
                    .appendTo( parentElm );
    
    var onMouseMove = function (e) {
        $(newElm).width( e.pageX - globalMouseDownX );
        $(newElm).height( e.pageY - globalMouseDownY );
        $(document).on('mouseup', function(e){
            $(document).off()
        })
    }
    var onMouseUp = function(e){
        $(newElm).removeAttr('id', 'class')
        $(newElm).off();
    }
    $(document).on('mousemove', function(e){
        onMouseMove(e);
    })

}
//--EOF Draw Box function
 
//--SOF Move BOx funciton 
var move_box = function(e){
/*
    var parentElm = e.target;
    
    var globalMouseDownX = e.pageX;
    var globalMouseDownY = e.pageY;
    var localMouseDownX = e.pageX - parentCoords.x;
    var localMouseDownY = e.pageY - parentCoords.y;

    var lastX = e.pageX;
    var lastY = e.pageY;
*/
            
var origCoords = getCoords(e.target);
var cp = $(e.target).clone();
var w = $(cp).width();
var h = $(cp).height();
var x = (e.pageX - origCoords.x);
var y = (e.pageY - origCoords.y);
var offsetX = (e.pageX - origCoords.x);
console.log("offsetX = " + offsetX);
var offsetY = (e.pageY -...