/**
*
*  Crossbrowser Drag Handler
*  http://www.webtoolkit.info/
*
**/
 
var DragHandler = {
 
 
	// private property.
	_oElem : null,
 
 
	// public method. Attach drag handler to an element.
	attach : function(oElem) {
		oElem.onmousedown = DragHandler._dragBegin;
 
		// callbacks
		oElem.dragBegin = new Function();
		oElem.drag = new Function();
		oElem.dragEnd = new Function();
 
		return oElem;
	},
 
 
	// private method. Begin drag process.
	_dragBegin : function(e) {
		var oElem = DragHandler._oElem = this;
 
		if (isNaN(parseInt(oElem.style.left))) { oElem.style.left = '0px'; }
		if (isNaN(parseInt(oElem.style.top))) { oElem.style.top = '0px'; }
 
		var x = parseInt(oElem.style.left);
		var y = parseInt(oElem.style.top);
 
		e = e ? e : window.event;
		oElem.mouseX = e.clientX;
		oElem.mouseY = e.clientY;
 
		oElem.dragBegin(oElem, x, y);
 
		document.onmousemove = DragHandler._drag;
		document.onmouseup = DragHandler._dragEnd;
		return false;
	},
 
 
	// private method. Drag (move) element.
	_drag : function(e) {
		var oElem = DragHandler._oElem;
 
		var x = parseInt(oElem.style.left);
		var y = parseInt(oElem.style.top);
 
		// move
		if(oElem == document.getElementById('dragable'))
		{	
			e = e ? e : window.event;
			oElem.style.left = x + (e.clientX - oElem.mouseX) + 'px';
			oElem.style.top = y + (e.clientY - oElem.mouseY) + 'px';
			
			// limit top
			if(parseInt(oElem.style.top) < parseInt(document.getElementById('top').style.top))
			{
				oElem.style.top = document.getElementById('top').style.top;
			}
			// limit bottom
			if(parseInt(oElem.style.top)+parseInt(oElem.style.height) > parseInt(document.getElementById('bottom').style.top))
			{
				oElem.style.top = parseInt(document.getElementById('bottom').style.top) - parseInt(oElem.style.height) + 'px';
			}
			// limit left
			if(parseInt(oElem.style.left) < parseInt(document.getElementById('left').style.left))
			{
				oElem.style.left = document.getElementById('left').style.left;
			}
			// limit right
			if(parseInt(oElem.style.left)+parseInt(oElem.style.width) > parseInt(document.getElementById('right').style.left))
			{
				oElem.style.left = parseInt(document.getElementById('right').style.left) - parseInt(oElem.style.width) + 'px';
			}
		} 
		if(oElem == document.getElementById('resH'))
		{
			// resize height
			e = e ? e : window.event;
			//oElem.style.left = x + (e.clientX - oElem.mouseX) + 'px';
			oElem.style.top = y + (e.clientY - oElem.mouseY) + 'px';
			
			// limit
			if(parseInt(oElem.style.top) > parseInt(document.getElementById('bottom').style.top))
			{
				oElem.style.top = document.getElementById('bottom').style.top;
			}
			
			// resize
			var dragable = document.getElementById('dragable');
			var newHeight = parseInt(oElem.style.top) - parseInt(dragable.style.top);
			document.getElementById('dragable').style.height = newHeight + 'px';
			document.stor.height.value = newHeight;
		}
		if(oElem == document.getElementById('resW'))
		{
			// resize width
			e = e ? e : window.event;
			//oElem.style.left = x + (e.clientX - oElem.mouseX) + 'px';
			oElem.style.left = x + (e.clientX - oElem.mouseX) + 'px';
			
			// limit
			if(parseInt(oElem.style.left) > parseInt(document.getElementById('right').style.left))
			{
				oElem.style.left = document.getElementById('right').style.left;
			}
			
			// resize
			var dragable = document.getElementById('dragable');
			var newWidth = parseInt(oElem.style.left) - parseInt(dragable.style.left);
			document.getElementById('dragable').style.width = newWidth + 'px';
			document.stor.width.value = newWidth;
		}
		if(oElem == document.getElementById('resP'))
		{
			// get ratio
			var ratioW = parseInt(oElem.style.width)/parseInt(oElem.style.height);
			var ratioH = parseInt(oElem.style.height)/parseInt(oElem.style.width);
			var dir = 1;
			
			// resize proportional along x and y
			e = e ? e : window.event;
			
			oElem.style.top = y + (e.clientY - oElem.mouseY) + 'px';
			oElem.style.left = x + (e.clientX - oElem.mouseX) + 'px';
			
			// limit
			if(parseInt(oElem.style.left) > parseInt(document.getElementById('right').style.left))
			{
				oElem.style.left = document.getElementById('right').style.left;
			}
			if(parseInt(oElem.style.top) > parseInt(document.getElementById('bottom').style.top))
			{
				oElem.style.top = document.getElementById('bottom').style.top;
			}
			
			// resize
			var dragable = document.getElementById('dragable');
			var newWidth = parseInt(oElem.style.left) - parseInt(dragable.style.left);
			var newHeight = parseInt(oElem.style.top) - parseInt(dragable.style.top);
			document.getElementById('dragable').style.width = newWidth + 'px';
			document.getElementById('dragable').style.height = newHeight + 'px';
			document.stor.height.value = newHeight;
			document.stor.width.value = newWidth;
		}
	
		oElem.mouseX = e.clientX;
		oElem.mouseY = e.clientY;
 
		oElem.drag(oElem, x, y);
 
		return false;
	},
 
 
	// private method. Stop drag process.
	_dragEnd : function() {
		var oElem = DragHandler._oElem;
 
		var x = parseInt(oElem.style.left);
		var y = parseInt(oElem.style.top);
		
		if(oElem == document.getElementById('dragable'))
		{
			//document.applicatie.test.value = x;
			document.stor.posX.value = x;
			document.stor.posY.value = y;
			document.stor.submit();
		} 
		else {
			document.stor.submit();
		}
 
		oElem.dragEnd(oElem, x, y);
 
		document.onmousemove = null;
		document.onmouseup = null;
		DragHandler._oElem = null;
	}
 
}