var isOpera = (navigator.userAgent.indexOf('Opera') != -1);
var isIE = (!isOpera && navigator.userAgent.indexOf('MSIE') != -1);

function OutputBox(html) {

	var output = document.getElementById('OutputBox');

	if ( output != null && output.innerHTML != html ) {

		output.innerHTML = html;
	}
}

function handleMove(e) {

	if (!e) var e = window.event;

	var mouseX = 0;
	var mouseY = 0;
	var browserX = 0;
	var scrollY = 0;
	var box_pos = 0;

	if (e.pageX || e.pageY) {
		mouseX = e.pageX;
		mouseY = e.pageY;
	} else if (e.clientX || e.clientY) {
		mouseX = e.clientX;
		mouseY = e.clientY;
	}

	if ( document.body ) {
		browserX = document.body.clientWidth;
	}

	if ( document.documentElement && isIE == true ) {
		scrollY = document.documentElement.scrollTop;
	}

	if ( browserX > 0 ) {
		box_pos = 300 * ( mouseX / browserX );
	}

	var output = document.getElementById('OutputBox');

	if ( output != null ) {

		output.style.position = 'absolute';
		output.style.left = (mouseX - box_pos) + 'px';
		output.style.top = (mouseY + scrollY + 20) + 'px';
	}

	var status_output = document.getElementById('status_output');

	if ( status_output != null ) {
		status_output.innerHTML = 'X: ' + mouseX + ' Y: ' + mouseY;
	}
}

if( document.addEventListener ) {
	document.addEventListener('mousemove', handleMove, true);
} else {
	document.onmousemove = handleMove;
}