javascript make element resizable

1<div id="myResizableElement"></div>
2<style>
3#myResizableElement{
4	background:#ddd;
5	height:100px;
6	width:100px;
7}
8.grepper_resizer{                                                                     
9    height:20px;                                                                      
10    width:20px;
11    piostion:absolute;                                                                
12    bottom:0px;                                                                       
13    right:0px;
14    z-index:999999999999999;                                                          
15    cursor:se-resize;
16    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bpUUqCnYQdchQHcSCqIijVqEIFUKt0KqDyaVf0KQhSXFxFFwLDn4sVh1cnHV1cBUEwQ8QNzcnRRcp8X9JoUWMB8f9eHfvcfcO8NfLTDU7xgFVs4xUIi5ksqtC8BUhBNCLUQxKzNTnRDEJz/F1Dx9f72I8y/vcn6NbyZkM8AnEs0w3LOIN4ulNS+e8TxxhRUkhPiceM+iCxI9cl11+41xw2M8zI0Y6NU8cIRYKbSy3MSsaKvEUcVRRNcr3Z1xWOG9xVstV1rwnf2E4p60sc53mEBJYxBJECJBRRQllWIjRqpFiIkX7cQ//gOMXySWTqwRGjgVUoEJy/OB/8LtbMz854SaF40Dni21/DAPBXaBRs+3vY9tunACBZ+BKa/krdWDmk/RaS4seAT3bwMV1S5P3gMsdoP9JlwzJkQI0/fk88H5G35QF+m6BrjW3t+Y+Th+ANHWVvAEODoGRAmWve7w71N7bv2ea/f0AXGxynrd/jxUAAAAGYktHRAD/AP8A/6C9p5MAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAHdElNRQflCAMRHTv7G4jBAAAALklEQVQ4y2NgGOyAkQK9/7GZw0RtFzIxjAJ6xPJ/HOpHY3koxvJ/aoiPxvIgBAAuXAYQLWgnvQAAAABJRU5ErkJggg==') !important;
17
18</style>
19<script>
20function setUpResizeable(el){
21    var resizer = document.createElement('div');
22    resizer.className = 'grepper_resizer';
23    el.appendChild(resizer);
24    resizer.addEventListener('mousedown', initDrag, false);
25
26    var startX, startY, startWidth, startHeight;
27
28    function initDrag(e) {
29        //dont drag on right click
30       if(e.which == 3){
31            return;
32       }
33       startX = e.clientX;
34       startY = e.clientY;
35       startWidth = parseInt(document.defaultView.getComputedStyle(el).width, 10);
36       startHeight = parseInt(document.defaultView.getComputedStyle(el).height, 10);
37       document.documentElement.addEventListener('mousemove', doDrag, false);
38       document.documentElement.addEventListener('mouseup', stopDrag, false);
39    }
40
41    function doDrag(e) {
42       el.style.width = (startWidth + e.clientX - startX) + 'px';
43       el.style.maxWidth = (startWidth + e.clientX - startX) + 'px';
44       el.style.height = (startHeight + e.clientY - startY) + 'px';
45    }
46
47    function stopDrag(e) {
48        document.documentElement.removeEventListener('mousemove', doDrag, false);
49        document.documentElement.removeEventListener('mouseup', stopDrag, false);
50    }
51}
52
53setUpResizeable(document.getElementById("myResizableElement"));
54 </script>