Выделение области на картинке

По учебнику

by ZondArt

HTML

<div class="cropBox">
    <img src="http://widefon.com/_ld/106/94427444.jpg" alt="" width="1280" height="720" class="cropable">
</div>
<!-- Debugger -->
<p class="debugger1">Debugger</p>

CSS

body {
    margin: 10px;
    padding: 10px;
}
.cropable {
}
.cropBox {
    display: inline-block;
    position: relative;
}
.debugger1 {
    color: red;
    position: absolute;
    font-weight: bold;
    bottom: 10px;
    left: 10px;
}

JavaScript

var Croppable = function (options) {
    var $elem = options.elem;
    var $debug1 = $(".debugger1");

    $elem.on("mousedown", onElemMouseDown);
    $(document).on("mouseup", onDocMouseUp);
    cropInitialize();

    imgW = $elem.width();
    imgH = $elem.height();


    function cropInitialize() {
        $crop = $("<div/>", {
            class: "crop",
            css: {
                position: "absolute",
                background: "rgba(180,80,180,0.3)",
                border: "1px dotted black"
            }
        }).hide();

        $crop.insertAfter($elem);
    };

    function render(dim) {
        $crop.show().css(dim);
    }


    //Узнаём направление движения мыши и координаты и размеры области выделения
    function direction(mouseX, mouseY, clickX, clickY) {
        if ((mouseX > clickX) && (mouseY > clickY)) {
            var dimension = {
                left: clickX,
                top: clickY,
                width: mouseX - clickX - 5,
                height: mouseY - clickY - 5
            }
            return {
                dirName: "SE",
                dim: dimension
            }
        }
        if ((mouseX < clickX) && (mouseY > clickY)) {
            var dimension = {
                left: mouseX + 5,
                top: clickY,
                width: clickX - mouseX,
                height: mouseY - clickY - 5
            }
            return {
                dirName: "SW",
                dim: dimension
            }
        }
        if ((mouseX < clickX) && (mouseY < clickY)) {
            var dimension = {
                left: mouseX + 5,
                top: mouseY + 5,
                width: clickX - mouseX,
                height: clickY - mouseY
            }
            return {
                dirName: "NW",
                dim: dimension
            }
        }
        if ((mouseX > clickX) && (mouseY < clickY)) {
            var dimension = {
                left: clickX,
                top: mouseY + 5,
    ...