Изменение размера картинки

По учебнику

HTML

<div style="position: relative;">
    <div style="position: absolute; top: 10px; left: 8px;"><img class="resizeble" src="http://widefon.com/_ld/106/94427444.jpg" alt="" width="400" height="225"></div>
</div>

CSS

.bottom-right {
	cursor: move;
	position: absolute;
	height: 8px;
	width: 8px;
	border-radius: 4px; 
	z-index: 2;
}

.bottom {
   position: absolute;
   height: 4px;
   cursor: pointer;
}

.right {
    position: absolute; 
    width: 4px;
    cursor: pointer;
}

JavaScript

var img = new Image();
img.src = "http://widefon.com/_ld/106/94427444.jpg";

var Resizeable = function (options) {
    var $elem = options.elem;
    var self = this;

    function render() {
        realW = $elem.width();
        realH = $elem.height();

        var position = $elem.offset();

        lineX = position.left;
        lineY = position.top;

        $bottomLine = $("<div/>", {
            class: "bottom",
        }).css({
            top: lineY - 4 + realH + "px",
            left: lineX + "px",
            width: realW + "px",
            backgroundColor: "#222"
        });

        $rightLine = $("<div/>", {
            class: "right",
        }).css({
            top: lineY + "px",
            left: lineX - 4 + realW + "px",
            height: realH + "px",
            backgroundColor: "#222"
        });

        $BRCircle = $("<div/>", {
            class: "bottom-right",
        }).css({
            top: lineY - 4 + realH + "px",
            left: lineX - 4 + realW + "px",
            backgroundColor: "#444"
        });

        $dimention = $("<p/>", {
            class: "dimention",
            html: "Width = " + realW + "px, Height= " + realH + "px"

        });


        $bottomLine.insertAfter($elem);
        $rightLine.insertAfter($elem)
        $BRCircle.insertAfter($elem);
        $dimention.insertAfter($elem);
    }

    render();

    $bottomLine.on("mousedown", OnMousedown)
    $rightLine.on("mousedown", OnMousedown)
    $BRCircle.on("mousedown", OnMousedown)
    $(document).on("mouseup", OnMouseup);

    function OnMousedown(e) {
        var targetMouseDown = $(e.target);
        $(document).on("mousemove", {
            targetMouseDown: targetMouseDown
        }, OnMousemove);
        return false;
    }

    function OnMousemove(e) {
        var $tDown = e.data.targetMouseDown;

        if ($tDown.hasClass("bottom")) { //Если нжали на нижнюю линию
            styleMove = {
                top: e.pageY - 2 + "px"
            };

  ...