var bDraggableUsingNN6 = document.getElementById&&!document.all;

var bDraggableShouldDrag=false;
var nDraggableImgInitialPositionX,nDraggableImgInitialPositionY;
var nDraggableMouseInitialPositionX,nDraggableMouseInitialPositionY;
var oDraggableImg;


	
function dragItemWithMouse(e) {
	if (bDraggableShouldDrag) {
		var nX = bDraggableUsingNN6 ? nDraggableImgInitialPositionX + e.clientX - nDraggableMouseInitialPositionX : nDraggableImgInitialPositionX + event.clientX - nDraggableMouseInitialPositionX;
		var nY = bDraggableUsingNN6 ? nDraggableImgInitialPositionY + e.clientY - nDraggableMouseInitialPositionY : nDraggableImgInitialPositionY + event.clientY - nDraggableMouseInitialPositionY;
		if (nX < 0) { nX = 0; }
		if (nY < 0) { nY = 0; }
		
		var oDraggableAreaDiv = document.getElementById("draggableArea");
		if (nX > (parseInt(oDraggableAreaDiv.style.width) - parseInt(oDraggableImg.style.width))) { nX = (parseInt(oDraggableAreaDiv.style.width) - parseInt(oDraggableImg.style.width)); }
		if (nY > (parseInt(oDraggableAreaDiv.style.height) - parseInt(oDraggableImg.style.height))) { nY = (parseInt(oDraggableAreaDiv.style.height) - parseInt(oDraggableImg.style.height)); }
		
		oDraggableImg.style.left = nX + "px";
		oDraggableImg.style.top  = nY + "px";
		return false;
	}
}

function startDragItemWithMouse(e) {
	var fobj       = bDraggableUsingNN6 ? e.target : event.srcElement;
	var topelement = bDraggableUsingNN6 ? "HTML" : "BODY";
	
	while (fobj.tagName != topelement && fobj.className != "draggable") {
		fobj = bDraggableUsingNN6 ? fobj.parentNode : fobj.parentElement;
	}
	
	if (fobj.className=="draggable") {
		bDraggableShouldDrag = true;
		oDraggableImg = fobj;
		
		nDraggableImgInitialPositionX = parseInt(oDraggableImg.style.left+0);
		nDraggableImgInitialPositionY = parseInt(oDraggableImg.style.top+0);
		
		nDraggableMouseInitialPositionX = bDraggableUsingNN6 ? e.clientX : event.clientX;
		nDraggableMouseInitialPositionY = bDraggableUsingNN6 ? e.clientY : event.clientY;
		
		document.onmousemove=dragItemWithMouse;
		return false;
	}
}

document.onmousedown=startDragItemWithMouse;
document.onmouseup=new Function("bDraggableShouldDrag=false");