drag and resize

Hej,

jag har följt tråden: Markera bild m lager samt förminska lagret. och har tyckt den koden som johnsen har föreslagit ser mycket bra ut.

Men nu försöker jag förändra det scriptet lite så att man kan göra resizing på många lager på en gång... men det fungerar inte så bra. Lagret som man drar i hänger inte med ordentligt som det gör när man bara har ett lager på sidan...
Varför?

Testa själv här: Drag and resize

Här kommer koden:

<script>

document.onmousemove = cropIt
document.onmousedown = lockIt
document.onmouseup = unLockIt

xlock = 0;
inPos = 0;
foundElement = 0;
//alert(myinfo.document.body.innerHTML);

function cropIt(e){
element = document.getElementById("foo")
element2 = document.getElementById("foo2")

x = (document.all)? event.x : e.pageX ;
y = (document.all)? event.y : e.pageY;

//status=inPos
status=foundElement

	if(	(element.offsetWidth - (x - parseInt(element.style.left))) < 0 &&
		(element.offsetWidth - (x - parseInt(element.style.left))) >-9 &&
		(element.offsetHeight - (y - parseInt(element.style.top))) < 0 &&
		(element.offsetHeight - (y - parseInt(element.style.top))) >-9 ){
			element.style.border="1px solid red"
			document.body.style.cursor="se-resize";
			inPos = 1;
			foundElement=1;
	}
	
	else if(	(element2.offsetWidth - (x - parseInt(element2.style.left))) < 0 &&
				(element2.offsetWidth - (x - parseInt(element2.style.left))) >-9 &&
				(element2.offsetHeight - (y - parseInt(element2.style.top))) < 0 &&
				(element2.offsetHeight - (y - parseInt(element2.style.top))) >-9 ){
					element2.style.border="1px solid red"
					document.body.style.cursor="se-resize";
					inPos = 1;
					foundElement=2;
	}
	
	else{
		document.body.style.cursor="default";
		switch (foundElement) {   
			case 1 :       
				element.style.border="1px solid blue"
				break;
			case 2 :       
				element2.style.border="1px solid blue"
				break;
			}
		inPos = 0;
		foundElement=0;
	}

	if(xlock==1){
		switch (foundElement) {   
			case 1 :       
				element.style.width = x - parseInt(element.style.left);
				element.style.height = y - parseInt(element.style.top);
				break;
			case 2 :       
				element2.style.width = x - parseInt(element2.style.left);
				element2.style.height = y - parseInt(element2.style.top);
				break;
			}

	}
}

function lockIt(){
element = document.getElementById("foo")
element2 = document.getElementById("foo2")
	if(inPos == 1){
		switch (foundElement) {   
			case 1 :       
				element.style.border="1px solid red"
				break;
			case 2 :       
				element2.style.border="1px solid red"
				break;
			}
		xlock = 1
	}
}

function unLockIt(){
element = document.getElementById("foo")
element2 = document.getElementById("foo2")
		switch (foundElement) {   
			case 1 :       
				element.style.border="1px solid blue"
				break;
			case 2 :       
				element2.style.border="1px solid blue"
				break;
			}
	xlock = 0
}
</script>

Drag i bilden precis nedanför det nedre högra hörnet...

<div id="foo2" style="position:absolute;top:350px; left:350px; width:120px; height:120px; overflow:hidden; border:1px solid blue;">
<center><img src="resize2.jpg" galleryimg="no"></center>
</div>

<div id="foo" style="position:absolute;top:50px; left:50px; width:120px; height:120px; overflow:hidden; border:1px solid blue;">
<center><img src="resize.jpg" galleryimg="no"></center>
</div>

Hjälp mig, snälla!