function ToggleMoveType( iMoveType )
{
	var INST_DRAG = "Click and drag the magic box.  If you move your mouse too fast, it will drop the box.";
	var INST_CLICK = "Click to drag the magic box.  If you move your mouse too fast, it will drop the box.   Click again to drop the box.";
	var INST_HOVER = "Hover your mouse over the magic box.  If you move your mouse too fast, it will drop the box.";
	var theBox = document.getElementById("box");
	var instructions = document.getElementById("instr");
	
	theBox.inDragMode = false;
	
	switch( iMoveType.toLowerCase() )
	{
		case "drag":
//				alert("switching to Drag mode");
			instructions.innerHTML = INST_DRAG;
			theBox.onmousedown = function(){ ToggleDragMode(theBox); };
			theBox.onmouseup = function(){ ToggleDragMode(theBox); };
			theBox.onmouseover = null;
			theBox.onmouseout = null;
			theBox.onclick = null;
			break;
		case "click":
//				alert("switching to Click mode");
			instructions.innerHTML = INST_CLICK;
			theBox.onmousedown = null;
			theBox.onmouseup = null;
			theBox.onmouseover = null;
			theBox.onmouseout = null;
			theBox.onclick = function(){ ToggleDragMode(theBox); };
			break;
		case "hover":
//				alert("switching to Hover mode");
			instructions.innerHTML = INST_HOVER;
			theBox.onmousedown = null;
			theBox.onmouseup = null;
			theBox.onmouseover = function(){ ToggleDragMode(theBox); };
			theBox.onmouseout = function(){ ToggleDragMode(theBox); };
			theBox.onclick = null;
			break;
	}
}

function setnewpos( iElement, event )
{
	if( !event )
		event = window.event; 
	 
	var x = event.x ? event.x : event.clientX;
	var y = event.y ? event.y : event.clientY;
	
	if( iElement.inDragMode )
	{
		iElement.style.top = (y - 50) + 'px'; 
		iElement.style.left = (x - 50) + 'px';
	}
}

function ToggleDragMode( iElement )
{
	var err = document.getElementById("error");
	
	if( iElement.inDragMode )
		iElement.inDragMode = false;
	else
		iElement.inDragMode = true;
			
	if( iElement.inDragMode )
	{
		err.innerHTML = "** In Drag Mode **";
		err.className = "error";
	}
	else
	{
		err.innerHTML = "** Not In Drag Mode **";
		err.className = "";
	}
	
}

function AfterLoad()
{
	//setup default box drag mode
	var theBox = document.getElementById('box');
	theBox.onmousemove= function(event){ setnewpos(this, event); };
	theBox.inDragMode = false;
	ToggleMoveType("drag");
	
	//setup mode button events
	var modes = document.getElementsByName('mode');
	for( var x = 0; x < modes.length; x++ )
		modes[x].onclick = function(){ ToggleMoveType(this.value); };
}