var draggingElement = null;
var dragging = 0;
var dragPointX = 0;
var dragPointY = 0;
var least = null;
var isIE = (window.navigator.appName == "Microsoft Internet Explorer") ? true : false;

// Instruct the body element to inform us of stuff
addHandler(document, "onmousedown", ondown);
addHandler(document, "onmouseup", onup);
addHandler(document, "onmousemove", onmmove);

function ondown(event)
{
	// IE compatibility
	if (!event)
	{
		event = window.event;
	}

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

	var targetParentCheck = target;

	while (targetParentCheck != null)
	{
		// We're only interested in the box titles
		if (targetParentCheck.className == "ssSideBoxTitle")
		{
			dragging = 1;
			draggingElement = targetParentCheck.parentNode;

			dragPointX = event.clientX - calcOffsetX(targetParentCheck) + document.body.scrollLeft;
			dragPointY = event.clientY - calcOffsetY(targetParentCheck) + document.body.scrollTop;

			least = null;

			document.body.focus();
			document.onselectstart = function () { return false; };
			targetParentCheck.ondragstart = function() { return false; };

			return false;
		}

		targetParentCheck = targetParentCheck.parentNode;
	}

	return true;
}

function onup(event)
{
	if (dragging == 2)
	{
		// Remove the dashed drop zone
		least.style.borderStyle = "none";
		least.style.width = "";
		least.style.height = "";

		// Get the objects
		var navTD = document.getElementById("navTD");
		var box = draggingElement;

		// Reset the box
		box.style.position = "static";
		box.style.left = "";
		box.style.top = "";
		box.style.zIndex = "";
		box.style.opacity = 1.0;
		if (isIE)
		{
			box.style.filter = "";
		}

		// Put the box in it's new position
		navTD.removeChild(box);
		navTD.insertBefore(box, least);

		// Remove all box positions from the navTD
		for (var i = 0; i < navTD.childNodes.length; i++)
		{
			// Get the ID as a string
			var blah = new String(navTD.childNodes[i].id);

			// If its ID starts with boxPos
			if (blah.substring(0, 6) == "boxPos")
			{
				// Remove it
				navTD.removeChild(navTD.childNodes[i]);

				// Drop back an index otherwise we will skip one
				i--;
			}
		}

		// Re-add box positions
		var boxPosCount = 0;
		for (var i = 0; i < navTD.childNodes.length; i++)
		{
			// Get the ID of the element as a string
			var blah = new String(navTD.childNodes[i].id);

			// If it starts with sideBox
			if (blah.substring(0, 7) == "sideBox")
			{
				// Create a new boxPos DIV to put before it
				var newBoxPos = document.createElement("div");
				newBoxPos.id = "boxPos" + boxPosCount;
				boxPosCount++;
				navTD.insertBefore(newBoxPos, navTD.childNodes[i]);

				// Skip the next one as it will be this one again
				// as we just inserted something before it
				i++;
			}
		}

		// Insert a boxPos DIV at the end
		var newBoxPos = document.createElement("div");
		newBoxPos.id = "boxPos" + boxPosCount;
		boxPosCount++;
		navTD.appendChild(newBoxPos);
	}

	// Cease dragging
	dragging = 0;
	document.onselectstart = "";
}

function onmmove(event)
{
	// IE compatibility
	if (!event)
	{
		event = window.event;
	}
	
	if (dragging == 1)
	{
		dragging = 2;
		
		// Start the drag
		draggingElement.style.opacity = 0.75;		
		if (isIE)
		{
			draggingElement.style.filter = "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
		}		
		draggingElement.style.zIndex = 10000;
		draggingElement.style.position = "absolute";
	}
	
	if (dragging == 2)
	{
		var box = draggingElement;

		box.style.left = (event.clientX + document.body.scrollLeft - dragPointX) + "px";
		box.style.top = (event.clientY + document.body.scrollTop - dragPointY) + "px";

		var lastLeast = least;
		var leastDist = 0;
		var i = 0;
		var element = document.getElementById("boxPos" + i);
		least = null;

		while (element != null)
		{
			var x = calcOffsetX(element);
			var y = calcOffsetY(element);
			var dist = ((parseInt(box.style.left) - x) * (parseInt(box.style.left) - x)) + ((parseInt(box.style.top) - y) * (parseInt(box.style.top) - y));

			if (dist < leastDist || least == null)
			{
				leastDist = dist;
				least = element;
			}

			i++;
			element = document.getElementById("boxPos" + i);
		}

		// If we are hovered in a different boxPos than last time
		if (!lastLeast || lastLeast != least)
		{
			// Remove the border from the previous boxPos
			if (lastLeast)
			{
				lastLeast.style.borderStyle = "none";
				lastLeast.style.width = "";
				lastLeast.style.height = "";
			}

			// Set a red dashed border in our new boxPos
			least.style.borderWidth = "2px";
			least.style.borderColor = "red";
			least.style.borderStyle = "dotted";
			least.style.marginBottom = "5px";
			// -4 To compensate for internal 2px borders
			least.style.width = (box.clientWidth - 4) + "px";
			least.style.height = (box.clientHeight - 9) + "px";
		}
	}
}