document.onmousemove = mouseMove;
document.onmouseup   = mouseUp;

var dragObject  = null;
var mouseOffset = null;
function mouseCoords(ev){
	if(ev.pageX || ev.pageY){
	  
    //document.ccdcalculator.test1.value = ev.pageX;
	  //document.ccdcalculator.test2.value = ev.pageY;
		
    return {x:ev.pageX, y:ev.pageY};
	}
	//document.ccdcalculator.test3.value = ev.clientX + document.body.scrollLeft - document.body.clientLeft;
	//document.ccdcalculator.test4.value = ev.clientY + document.body.scrollTop  - document.body.clientTop;
	return {
	 
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop
	};
}

function getMouseOffset(target, ev){
	ev = ev || window.event;

	var docPos    = getPosition(target);
	var mousePos  = mouseCoords(ev);
	//document.ccdcalculator.test5.value = mousePos.x - docPos.x;
  //document.ccdcalculator.test6.value = mousePos.y - docPos.y; 
	return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(e){
	var left = 0;
	var top  = 0;

	while (e.offsetParent){
		left += e.offsetLeft;
		top  += e.offsetTop;
		e     = e.offsetParent;
	}
	
	left += e.offsetLeft;
	top  += e.offsetTop;

	return {x:left, y:top};
}

function mouseMove(ev){
	ev = ev || window.event;

	var mousePos = mouseCoords(ev);
  var boxPos = getPosition(document.getElementById('xyz'));
  var boxWidth = document.getElementById('xyz');
 // var boxWidth
 
	if(dragObject){

    //document.ccdcalculator.test8.value = boxPos.y; 
    // debug
    //document.ccdcalculator.log.value = mousePos.y + ' - ' + mouseOffset.y + ' + ' + (boxWidth.style.height.replace(/px/,"")) + ' = ' + (mousePos.y - mouseOffset.y + parseInt(boxWidth.style.height.replace(/px/,""))) + '\nboxPos.x: ' + boxPos.x + '\nboxYX: ' + boxWidth.style.width + ' x ' + boxWidth.style.top;
    if (mousePos.x - mouseOffset.x < 308 || mousePos.y - mouseOffset.y < 28 || ((mousePos.x - mouseOffset.x) + parseInt((boxWidth.style.width.replace(/px/,""))) > 806) || ((mousePos.y - mouseOffset.y) + parseInt((boxWidth.style.height.replace(/px/,"")) - 11) > 424))
    {
      dragObject = null;
    }
   	if(dragObject != null)
    {
      /*document.getElementById('xyz').style.left = 40 + 'px';*/

      dragObject.style.position = 'absolute';
  		dragObject.style.top      = mousePos.y - mouseOffset.y + 'px';
  		dragObject.style.left     = mousePos.x - mouseOffset.x + 'px';
  		//document.ccdcalculator.log2.value = dragObject.style.left;
    }  
		return false;
	}
	return false;
}

function mouseUp(){
	dragObject = null;
}

function makeDraggable(item){
	if(!item) return;
	item.onmousedown = function(ev){
		dragObject  = this;
		mouseOffset = getMouseOffset(this, ev);
		return false;
	}
}


makeDraggable(document.getElementById('xyz'));