Доработка скрипта для динамических DIVов
 

Здравствуйте.

Есть скрипт, который позволяет с помощью мыши перемещать DIVы по странице, а так же выбирать из них активный (поверх остальных). Такое решение стало необходимым для размещения на странице нескольких видеотрансляций.
Прошу помочь в доработке данного скрипта, чтобы DIVы можно было ещё и растягивать мышью по ширине и длине.
Скрипт:

function $(v) { return(document.getElementById(v)); }
function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }
function xy(e,v) { return(v?(agent('msie')?event.clientY+document.body.scrollTop:e.pageY):(agent('msie')?event.clientX+document.body.scrollTop:e.pageX)); }

function dragOBJ(d,e) {

var divs=document.getElementsByTagName("DIV");
for( var i=0; i<divs.length; i++)
     if(divs[i].className=="my")
	 divs[i].style.zIndex = 0;

    function drag(e) { if(!stop) { d.style.zIndex = 1; d.style.top=(tX=xy(e,1)+oY-eY+'px'); d.style.left=(tY=xy(e)+oX-eX+'px'); } }

    var oX=parseInt(d.style.left),oY=parseInt(d.style.top),eX=xy(e),eY=xy(e,1),tX,tY,stop;

    document.onmousemove=drag; document.onmouseup=function(){ stop=1; document.onmousemove=''; document.onmouseup=''; };
}

<div class="my" style="width:640px; position: relative; top: 0; left: 0" onmousedown="dragOBJ(this,event);">Первый ДИВ</div>
<div class="my" style="width:640px; position: relative; top: 0; left: 0" onmousedown="dragOBJ(this,event);">Второй ДИВ</div>

Спасибо.

Вот тебе теоретический курс
http://javascript.ru/ui/draganddrop

Спасибо за ссылку, но хотелось бы практической помощи.
Думаю доработанный скрипт пригодится многим.

http://jqueryui.com/draggable/
http://jqueryui.com/resizable/

Спасибо, но использовать jQuery не хотелось бы, чтобы не усложнять решение, которое нужно реализовать в одном файле.

Разобрался, вот результат, может по прежнему кому-то пригодится:

function $(v) { return(document.getElementById(v)); }
function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }
function xy(e,v) { return(v?(agent('msie')?event.clientY+document.body.scrollTop:e.pageY):(agent('msie')?event.clientX+document.body.scrollTop:e.pageX)); }
function dragOBJ(d,e) {
var divs=document.getElementsByTagName("DIV");
for( var i=0; i<divs.length; i++)
     if(divs[i].className=="my")
	 divs[i].style.zIndex = 0;
    function drag(e) { if(!stop) { d.style.zIndex = 1; d.style.top=(tX=xy(e,1)+oY-eY+'px'); d.style.left=(tY=xy(e)+oX-eX+'px'); } }
    var oX=parseInt(d.style.left),oY=parseInt(d.style.top),eX=xy(e),eY=xy(e,1),tX,tY,stop;
    var oW=parseInt(d.style.width),oH=parseInt(d.style.height);
    document.onmousemove=drag; document.onmouseup=function(){ stop=1; document.onmousemove=''; document.onmouseup=''; };
}
function dragOBJ2(d,e) {
var divs=document.getElementsByTagName("DIV");
for( var i=0; i<divs.length; i++)
     if(divs[i].className=="my")
	 divs[i].style.zIndex = 0;
    function drag2(e) { if(!stop) { d.style.zIndex = 1; d.style.height=(xy(e,1)+oH-eY+'px'); d.style.width=(xy(e)+oW-eX+'px'); } }
    var oX=parseInt(d.style.left),oY=parseInt(d.style.top),eX=xy(e),eY=xy(e,1),tX,tY,stop;
    var oW=parseInt(d.style.width),oH=parseInt(d.style.height);
    document.onmousemove=drag2; document.onmouseup=function(){ stop=1; document.onmousemove=''; document.onmouseup=''; };
}

<div class="my" style="background: black; width:640px; height:480px; position: relative; top: 0; left: 0" onmousedown="if(event.button == 0) dragOBJ(this,event);if(event.button == 1) dragOBJ2(this,event);if(event.button == 2) dragOBJ2(this,event);">Первый ДИВ</div>
<div class="my" style="background: black; width:640px; height:480px; position: relative; top: 0; left: 0" onmousedown="if(event.button == 0) dragOBJ(this,event);if(event.button == 1) dragOBJ2(this,event);if(event.button == 2) dragOBJ2(this,event);">Второй ДИВ</div>

Левой кнопкой мыши перемещаем DIVы, правой и нажатым колесом - растягиваем их.

Прошу специалистов помочь. Необходимо в cookies сохранить значения стилей, чтобы при загрузке страницы загружались значения сначала оттуда, а при каких-то изменениях в стилях DIVов, новые значения записывались в cookies, не ограниченных по времени жизни.

Можно использовать локальное хранилище...
http://htmlbook.ru/html5/storage

А вот по кукам
http://www.codenet.ru/webmast/js/Cookies.php

Итерационный гавнокод.

С учетом того, что я не считаю себя программистом, и опыта нет совсем, задачу всё же выполнил. Если можешь сделать то же самое, но лучше - покажи как надо, а не понтуйся! :p