/**************************************************
 * dom-drag.js
 * 09.25.2001
 * www.youngpup.net
 **************************************************
 * 10.28.2001 - fixed minor bug where events
 * sometimes fired off the handle, not the root.
 **************************************************
 * http://boring.youngpup.net/2001/domdrag/tutorial
 **************************************************/

var Drag = {

	obj : null,

	init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper) {
		o.onmousedown	= Drag.start;

		o.hmode			= bSwapHorzRef ? false : true ;
		o.vmode			= bSwapVertRef ? false : true ;

		o.root = oRoot && oRoot != null ? oRoot : o ;

		if (o.hmode  && isNaN(parseInt(o.root.style.left  ))) o.root.style.left   = "0px";
		if (o.vmode  && isNaN(parseInt(o.root.style.top   ))) o.root.style.top    = "0px";
		if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right  = "0px";
		if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";

		o.minX	= typeof minX != 'undefined' ? minX : null;
		o.minY	= typeof minY != 'undefined' ? minY : null;
		o.maxX	= typeof maxX != 'undefined' ? maxX : null;
		o.maxY	= typeof maxY != 'undefined' ? maxY : null;

		o.xMapper = fXMapper ? fXMapper : null;
		o.yMapper = fYMapper ? fYMapper : null;

		o.root.onDragStart	= new Function();
		o.root.onDragEnd	= new Function();
		o.root.onDrag		= new Function();
	},
	
	mouseCoords : function(ev){
          if (ev.pageX || ev.pageY){
  	      return {x:ev.pageX, y:ev.pageY};
    	  }
          return {
	    x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
	    y:ev.clientY + document.body.scrollTop  - document.body.clientTop
          };
        }, 

	start : function(e) {
		// e = Drag.fixE(e);
                e          = e || window.event;
		var o = Drag.obj = this;
		var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
		var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
		o.root.onDragStart(x, y);

                var tmp = Drag.mouseCoords(e);
                /*
		o.lastMouseX	= e.clientX;
		o.lastMouseY	= e.clientY;
		*/
		o.lastMouseX	= tmp.x;
		o.lastMouseY	= tmp.y;
                var clientX = tmp.x;
                var clientY = tmp.y;


		if (o.hmode) {
			if (o.minX != null)	o.minMouseX	= clientX - x + o.minX;
			if (o.maxX != null)	o.maxMouseX	= o.minMouseX + o.maxX - o.minX;
		} else {
			if (o.minX != null) o.maxMouseX = -o.minX + clientX + x;
			if (o.maxX != null) o.minMouseX = -o.maxX + clientX + x;
		}

		if (o.vmode) {
			if (o.minY != null)	o.minMouseY	= clientY - y + o.minY;
			if (o.maxY != null)	o.maxMouseY	= o.minMouseY + o.maxY - o.minY;
		} else {
			if (o.minY != null) o.maxMouseY = -o.minY + clientY + y;
			if (o.maxY != null) o.minMouseY = -o.maxY + clientY + y;
		}

		document.onmousemove	= Drag.drag;
		document.onmouseup	= Drag.end;

		return false;
	},

	drag : function(e) {
		// e = Drag.fixE(e);
                e          = e || window.event;
		var o = Drag.obj;
		//var ey	= e.clientY;
		//var ex	= e.clientX;
                var tmp = Drag.mouseCoords(e);
                var ey = tmp.y;
                var ex = tmp.x;
		
		var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
		var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
		var nx, ny;

		if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
		if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
		if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
		if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);

		nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
		ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));

		if (o.xMapper)		nx = o.xMapper(y)
		else if (o.yMapper)	ny = o.yMapper(x)

		Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
		Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
		Drag.obj.lastMouseX	= ex;
		Drag.obj.lastMouseY	= ey;

		Drag.obj.root.onDrag(nx, ny);
		return false;
	},

	end : function() {
		document.onmousemove = null;
		document.onmouseup   = null;
		Drag.obj.root.onDragEnd(
				parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]), 
				parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"])
		);
		Drag.obj = null;
	},

	fixE : function(e) {
		if (typeof e == 'undefined') e = window.event;
		if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
		if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
		return e;
	}
};

/**
 * CUSTOM abex STUFF BELOW HERE
 */

function abexElementPosition(el){
	this.el = el;
	this.x = function() {
		return parseInt(this.el.style.left);
	}
	this.y = function() {
		return parseInt(this.el.style.top);
	}
	this.w = function() {
		return parseInt(this.el.style.width);
	}
	this.h = function() {
		return parseInt(this.el.style.height);
	}
	this.within = function(x,y) {
		if ( (x > this.x())
		    && (x < (this.x() + this.w()))
		    && (y > this.y())
		    && (y < (this.y() + this.h()))
		) {
			return true;
		} else {
			return false;
		}
	}
}

/**
* DRAGABLE OBJECT 
*/
function abexDragableObject(id, rootid, customhit) {
	this.dragbar = document.getElementById(id)
	Drag.init(this.dragbar);
	this.useCustomHitHandler = false;

	if (typeof customhit=='function') {
	  this.useCustomHitHandler = customhit;
	}

	this.dragbar.onDragStart = function(x, y) {
		// window.status = 'Start drag for ' + this.id + ': ' + x + 'x' + y;
		this.startPosX = x;
		this.startPosY = y;
	}

	this.dragbar.onDrag = function(x, y) {
		window.status = this.id + ': ' + this.lastMouseX + 'x' + this.lastMouseY + ': ' + x + 'x' + y;
		if (document.getElementById('dragHelper')) {
		  document.getElementById('dragHelper').style.display = 'block';
		  document.getElementById('dragHelper').style.position = 'absolute';
		  document.getElementById('dragHelper').style.left = (1+this.lastMouseX)+'px';
		  document.getElementById('dragHelper').style.top = (1+this.lastMouseY)+'px';
		  document.getElementById('dragHelper').innerHTML = '<b>' + this.getAttribute("alt") + '</b>';
		}
	}

	this.dragbar.onDragEnd = function(x, y) {
	  //window.status = 'End for '+this.id + ' :' + this.lastMouseX + 'x' + this.lastMouseY;
	  if (document.getElementById('dragHelper')) {
	    document.getElementById('dragHelper').style.display = 'none';
          }
          if (typeof customhit=='function') {
            customhit(x,y,this);
          } else {
            if (dropTargets) {
              if (dropTargets.length>0) {
                checkDropTarget(x, y, this);
              }
            }
          }
	}
}


/**
 * TARGET HANDLING
 */
var dropTargets = [];

function addDropTarget(dropTarget){
  if (typeof dropTarget=='string') {
    dropTarget = document.getElementById(dropTarget);
  }
  dropTargets.push(dropTarget);
  var pos = new abexElementPosition(dropTarget);
  // dropTarget.innerHTML = dropTarget.innerHTML + ': ' + pos.x()+'x'+pos.y();
}

function checkDropTarget(x, y, draggedelement){
	for(var i=0; i<dropTargets.length; i++){
		alert(i);
		var curTarget = dropTargets[i];
		// window.status = 'xx: '+curTarget.id;
		var targPos  = new abexElementPosition(curTarget);		// x, y is the elements x and y, we should use mouseX and mouseY?
		
		//window.status = 'hit? id='+curTarget.id + ' x='+targPos.x() + ' y='+targPos.y();
		if (targPos.within(draggedelement.lastMouseX, draggedelement.lastMouseY)) {
			// position element to new position
			// window.status = draggedelement.id + ' did hit on '+curTarget.id;
			dragHitTarget(draggedelement, curTarget);
			return true;
		} 
	}
	// reset to old position
	draggedelement.style.left = draggedelement.startPosX;
	draggedelement.style.top = draggedelement.startPosY;
	return false;
}