HTMLElement.prototype.Draggable = function (moveEl) {
    var self = this,
        el = moveEl || self;
    el.style.position = "absolute";
    self.onmousedown = function (e) {
        var startX = event.pageX - (el.offsetLeft),
            startY = event.pageY - (el.offsetTop);
        el.style.zIndex = '1';
        e.stopPropagation();
        e.preventDefault();
        window.onmousemove = function (e) {
            if (e.target == self) {
                el.style.left = (e.pageX - startX) + 'px';
                el.style.top = (e.pageY - startY) + 'px';
            }
        }
        window.onmouseup = function (e) {
            el.style.zIndex = '0';
            self.onmousemove = null;
            window.onmousemove = null;
        }
    }
}

HTMLElement.prototype.Resizeble = function () {
    var self = this,
        resizeBlock = document.createElement('div'),
        windowMoveFuncRef;
    if (!document.getElementById('styles-for-resizible-elements-library')) {
        var style = document.createElement('style');
        style.id = 'styles-for-resizible-elements-library';
        style.innerHTML = '.resizable-el-block {width:10px;height:10px;position:absolute;user-select:none;}'+
            '.resizable-left-el-block{left:0;top:0px; height:inherit; cursor: w-resize;}' +
            '.resizable-right-el-block{right:0;top:0; height:inherit;cursor: e-resize;}' +
            '.resizable-top-el-block{left:0;top:0; width:100%; cursor: n-resize;}' +
            '.resizable-bottom-el-block{left:0;bottom:0; width:100%; cursor: s-resize;}' +
            '.resizable-topLeft-el-block{left:0;top:0; z-index:1; cursor: nw-resize;}' +
            '.resizable-topRight-el-block{right:0;top:0; z-index:1; cursor: ne-resize;}' +
            '.resizable-bottomLeft-el-block{left:0;bottom:0; z-index:1; cursor: sw-resize}' +
            '.resizable-bottomRight-el-block{bottom:0;right:0; z-index:1; cursor: se-resize}';
        document.head.appendChild(style);
    }

    resizeBlock.className = 'resizable-el-block'
    self.style.position = 'absolute';
    if (arguments.length == 0) {

    } else {
        if (Object.prototype.toString.call(arguments[0]).slice(8, -1) === "Object") {
            for (var i in arguments[0]) {
                switch (i) {
                    case 'left': (arguments[0][i]) ? addLeftResize() : ''; break;
                    case 'right': (arguments[0][i]) ? addRightResize() : ''; break;
                    case 'top': (arguments[0][i]) ? addTopResize() : ''; break;
                    case 'bottom': (arguments[0][i]) ? addBottomResize() : ''; break;
                    case 'diagonal':
                        if (arguments[0][i] == 'all') {
                            addHorizontalBottomLeftResize();
                            addHorizontalBottomRightResize();
                            addHorizontalTopLeftResize();
                            addHorizontalTopRightResize();
                        } else {
                            if (Object.prototype.toString.call(arguments[0][i]).slice(8, -1) === "Object") {
                                for (var hor in arguments[0][i]) {
                                    switch (hor) {
                                        case 'topLeft': (arguments[0][i][hor]) ? addHorizontalTopLeftResize() : ''; break;
                                        case 'topRight': (arguments[0][i][hor]) ? addHorizontalTopRightResize() : ''; break;
                                        case 'bottomLeft': (arguments[0][i][hor]) ? addHorizontalBottomLeftResize() : ''; break;
                                        case 'bottomRight': (arguments[0][i][hor]) ? addHorizontalBottomRightResize() : ''; break;
                                    }
                                }
                            }
                        };
                        break;
                }
            }
        }
    }

    function addLeftResize() {
        var leftResizeBlock = resizeBlock.cloneNode(true);
        leftResizeBlock.className = 'resizable-el-block resizable-left-el-block';
        leftResizeBlock.onmousedown = function (e) {
            var elWidth = self.offsetWidth,
                elLeft = self.offsetLeft,
                primalX = e.pageX;
            e.preventDefault()
            window.addEventListener('mousemove', function(e) {
                self.style.width = elWidth + (primalX -  e.pageX) + 'px';
                self.style.left = elLeft - (primalX -  e.pageX) + 'px';
                windowMoveFuncRef = arguments.callee;
            });
        }
        self.appendChild(leftResizeBlock);
    }

    function addRightResize() {
        var rightResizeBlock = resizeBlock.cloneNode(true);
        rightResizeBlock.className = 'resizable-el-block resizable-right-el-block';
        rightResizeBlock.onmousedown = function (e) {
            var elWidth = self.offsetWidth,
                primalX = e.pageX;
            e.preventDefault()
            window.addEventListener('mousemove', function (e) {
                self.style.width = elWidth - (primalX - e.pageX) + 'px';
                windowMoveFuncRef = arguments.callee;
            });
        }
        self.appendChild(rightResizeBlock);
    }

    function addTopResize() {
        var topResizeBlock = resizeBlock.cloneNode(true);
        topResizeBlock.className = 'resizable-el-block resizable-top-el-block';
        topResizeBlock.onmousedown = function (e) {
            var elHeight = self.offsetHeight,
                elTop = self.offsetTop,
                primalY = e.pageY;
            e.preventDefault()
            window.addEventListener('mousemove', function (e) {
                self.style.height = elHeight + (primalY - e.pageY) + 'px';
                self.style.top = elTop - (primalY - e.pageY) + 'px';
                windowMoveFuncRef = arguments.callee;
            });
        }
        self.appendChild(topResizeBlock);
    }

    function addBottomResize() {
        var bottomResizeBlock = resizeBlock.cloneNode(true);
        bottomResizeBlock.className = 'resizable-el-block resizable-bottom-el-block';
        bottomResizeBlock.onmousedown = function (e) {
            var elHeight = self.offsetHeight,
                primalY = e.pageY;
            e.preventDefault()
            window.addEventListener('mousemove', function (e) {
                self.style.height = elHeight - (primalY - e.pageY) + 'px';
                windowMoveFuncRef = arguments.callee;
            });
        }
        self.appendChild(bottomResizeBlock);
    }

    function addHorizontalTopLeftResize() {
        var topLeftResizeBlock = resizeBlock.cloneNode(true);
        topLeftResizeBlock.className = 'resizable-el-block resizable-topLeft-el-block';
        topLeftResizeBlock.onmousedown = function (e) {
            var elWidth = self.offsetWidth,
                elHeight = self.offsetHeight,
                elTop = self.offsetTop,
                elLeft = self.offsetLeft,
                primalY = e.pageY,
                primalX = e.pageX;
            e.preventDefault()
            window.addEventListener('mousemove', function (e) {
                self.style.width = elWidth + (primalX - e.pageX) + 'px';
                self.style.left = elLeft - (primalX - e.pageX) + 'px';
                self.style.height = elHeight + (primalY - e.pageY) + 'px';
                self.style.top = elTop - (primalY - e.pageY) + 'px';
                windowMoveFuncRef = arguments.callee;
            });
        }
        self.appendChild(topLeftResizeBlock);
    }

    function addHorizontalTopRightResize() {
        var topRightResizeBlock = resizeBlock.cloneNode(true);
        topRightResizeBlock.className = 'resizable-el-block resizable-topRight-el-block';
        topRightResizeBlock.onmousedown = function (e) {
            var elWidth = self.offsetWidth,
                elHeight = self.offsetHeight,
                elTop = self.offsetTop,
                primalY = e.pageY,
                primalX = e.pageX;
            e.preventDefault()
            window.addEventListener('mousemove', function (e) {
                self.style.width = elWidth - (primalX - e.pageX) + 'px';
                self.style.height = elHeight + (primalY - e.pageY) + 'px';
                self.style.top = elTop - (primalY - e.pageY) + 'px';
                windowMoveFuncRef = arguments.callee;
            });
        }
        self.appendChild(topRightResizeBlock);
    }

    function addHorizontalBottomLeftResize() {
        var bottomLeftResizeBlock = resizeBlock.cloneNode(true);
        bottomLeftResizeBlock.className = 'resizable-el-block resizable-bottomLeft-el-block';
        bottomLeftResizeBlock.onmousedown = function (e) {
            var elWidth = self.offsetWidth,
                elHeight = self.offsetHeight,
                elLeft = self.offsetLeft,
                primalY = e.pageY,
                primalX = e.pageX;
            e.preventDefault()
            window.addEventListener('mousemove', function (e) {
                self.style.width = elWidth + (primalX - e.pageX) + 'px';
                self.style.left = elLeft - (primalX - e.pageX) + 'px';
                self.style.height = elHeight - (primalY - e.pageY) + 'px';
                windowMoveFuncRef = arguments.callee;
            });
        }
        self.appendChild(bottomLeftResizeBlock);
    }

    function addHorizontalBottomRightResize() {
        var bottomRightResizeBlock = resizeBlock.cloneNode(true);
        bottomRightResizeBlock.className = 'resizable-el-block resizable-bottomRight-el-block';
        bottomRightResizeBlock.onmousedown = function (e) {
            var elWidth = self.offsetWidth,
                elHeight = self.offsetHeight,
                primalY = e.pageY,
                primalX = e.pageX;
            e.preventDefault()
            window.addEventListener('mousemove', function (e) {
                self.style.width = elWidth - (primalX - e.pageX) + 'px';
                self.style.height = elHeight - (primalY - e.pageY) + 'px';
                windowMoveFuncRef = arguments.callee;
            });
        }
        self.appendChild(bottomRightResizeBlock);
    }

    window.addEventListener('mouseup', function (e) {
        window.removeEventListener('mousemove', windowMoveFuncRef);
    });
}