var _dragElement; // needs to be passed from OnMouseDown to OnMouseMove
var _oldZIndex = 0; // we temporarily increase the z-index during drag
var drag_offset; // offset clicked INTO drag obj

window.onload = function()
{
	InitDragDrop();
}

function InitDragDrop()
{
	document.onmousedown = OnMouseDown;
	document.onmouseup = OnMouseUp;
}

function OnMouseDown(e)
{
	// IE is retarded and doesn't pass the event object
	if (e == null) e = window.event;

	// IE uses srcElement, others use target
	var target = e.target != null ? e.target : e.srcElement;

	// for IE, left click == 1
	// for Firefox, left click == 0
	if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'badge')
	{

		// we need to access the element in OnMouseMove
		_dragElement = target;

		// set drag offset (offset clicked INTO object)
		var pos = new Object();
		if (e.pageX || e.pageY)
		{
			pos.x = e.pageX;
			pos.y = e.pageY;
		}
		else if (e.clientX || e.clientY)
		{
			pos.x = e.clientX + document.body.scrollLeft;
			pos.y = e.clientY + document.body.scrollTop;
		}
	
		// parent node
		var ppos = find_pos(_dragElement.parentNode);
		var opos = find_pos(_dragElement);
	
		// set offset
		drag_offset = new Object();
		drag_offset.x = ppos.x + (pos.x - opos.x);
		drag_offset.y = ppos.y + (pos.y - opos.y);
		
		// position badge
		_dragElement.style.top = (pos.y - drag_offset.y) + 'px';
		_dragElement.style.left = (pos.x - drag_offset.x) + 'px';
		
		// adjust badge shadow
		_dragElement.style.backgroundPosition = "-9px -138px";
		_dragElement.style.width = "121px";
		_dragElement.style.height = "126px";

		// bring the clicked element to the front while it is being dragged
		_oldZIndex = _dragElement.style.zIndex;
		_dragElement.style.zIndex = 10000;

		// tell our code to start moving the element with the mouse
		document.onmousemove = OnMouseMove;

		// cancel out any text selections
		document.body.focus();

		// prevent text selection in IE
		document.onselectstart = function () { return false; };
		// prevent IE from trying to drag an image
		target.ondragstart = function() { return false; };

		// prevent text selection (except IE)
		return false;
	}
} // end FUNCTION

// function to fire on mouse move
function OnMouseMove(e)
{
	if (e == null) var e = window.event;
	// get current pos
   var pos = new Object();
   pos.x = 0;
   pos.y = 0;
	if (e.pageX || e.pageY)
	{
		pos.x = e.pageX;
		pos.y = e.pageY;
	}
	else if (e.clientX || e.clientY)
	{
		pos.x = e.clientX + document.body.scrollLeft;
		pos.y = e.clientY + document.body.scrollTop;
	}

   // work out top / left
   var top = (pos.y - drag_offset.y);
   var left = (pos.x - drag_offset.x);
	
   // keep inside content container
   var container = document.getElementById("content");
   if (top < 0)
      top = 0;
   var maxh = container.offsetHeight - _dragElement.parentNode.offsetTop - _dragElement.offsetHeight;
   if (top > maxh)
      top = maxh;
   if (left < 0)
      left = 0;
   var maxw = container.offsetWidth - _dragElement.offsetWidth - 15;
   if (left > maxw)
      left = maxw;
		
   // place the badge
   _dragElement.style.top = top + 'px';
   _dragElement.style.left = left + 'px';
}  // end FUNCTION

// function to fire on mouse up
function OnMouseUp(e)
{
	if (_dragElement != null)
	{
		_dragElement.style.zIndex = _oldZIndex;

		// we're done with these events until the next OnMouseDown
		document.onmousemove = null;
		document.onselectstart = null;
		_dragElement.ondragstart = null;
		
		// adjust badge shadow now the badge has been dropped
		_dragElement.style.backgroundPosition = "-9px -12px";
		_dragElement.style.width = "94px";
		_dragElement.style.height = "94px";

		// this is how we know we're not dragging
		_dragElement = null;
	}
} // end FUNCTION


// function to find position of object (x)
//  @ obj = object to find pos of
// returns object with properties x=left; y=top
function find_pos(obj)
{
	var pos = new Object();
	pos.x = 0;
	pos.y = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			pos.x += obj.offsetLeft;
			pos.y += obj.offsetTop;
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
	{
		pos.x += obj.x;
		pos.y += obj.y;
	}
	pos.top = pos.y;
	pos.left = pos.x;
	return pos;
} // end FUNCTION