/******* SETTINGS *********/
var dispTo = 0; //timeout in milliseconds before div appears upon rollover.
var moveWithMouse = true;	//div moves with mouse when displayed
var Xoffset = 10;			//offsets for display of rollover Div in relation to mouse cursor
var Yoffset = 10;

var isIE = navigator.userAgent.indexOf("MSIE")+1;
var isGecko = navigator.userAgent.indexOf("Gecko")+1;
var i=1,c,curEvt,curRoNum,curRoDiv,dispInt;

// Find all rollover span's in page and bind event handlers to them
while ((c = document.getElementById("step" + i)) != null ) {
	c.onmouseover = spanMouseOver;
	c.onmouseout = spanMouseOut;
	if (moveWithMouse) c.onmousemove = spanMouseMove;
	i++;
	c = document.getElementById("step" + i);
}

function spanMouseOver(e) {
	isIE ? makeUniEvent(event):makeUniEvent(e);
	curRoDiv = getDivHandler(curEvt.evtSrcId);
	dispInt = window.setTimeout("delayedDisplay()",dispTo);
	//dispRolloverDiv(curRoDiv);
}
function delayedDisplay() {
	curRoDiv.style.display="block";
	dispRolloverDiv(curRoDiv);
}

function spanMouseMove(e) {
	isIE ? makeUniEvent(event):makeUniEvent(e);
	curRoDiv = getDivHandler(curEvt.evtSrcId);
	dispRolloverDiv(curRoDiv);
}

function spanMouseOut(e) {
	window.clearTimeout(dispInt);
	isIE ? makeUniEvent(event):makeUniEvent(e);
	curRoDiv = getDivHandler(curEvt.evtSrcId);
	curRoDiv.style.display="none";
}

function dispRolloverDiv(obj) {
	var xpos,ypos,docW,docH,x,y;
	docW = (isIE) ? document.body.clientWidth : window.innerWidth;
	docH = (isIE) ? document.body.clientHeight : window.innerHeight;
	xpos = (parseInt(x=(curEvt.evtSrc.offsetLeft + (curEvt.evtSrc.offsetWidth/2))) > (docW/2)) ? false:true
	ypos = (parseInt(y=(curEvt.evtSrc.offsetTop + (curEvt.evtSrc.offsetHeight/2))) > (docH/2)) ? false:true
	if (ypos) obj.style.top = ((moveWithMouse ? curEvt.mouseY:y) + Yoffset) + "px";
	else obj.style.top = ((moveWithMouse ? curEvt.mouseY:y) - obj.offsetHeight - Yoffset) + "px";
	if (xpos) obj.style.left = ((moveWithMouse?curEvt.mouseX:x) + Xoffset) + "px";
	else obj.style.left = ((moveWithMouse?curEvt.mouseX:x) - obj.offsetWidth - Xoffset) + "px";
}

function getDivHandler(spanId) {
	//alert(spanId);
	//Edit here, number of chars in "span" = 4
	var curRoNum = parseInt(spanId.substr(4));
	return document.getElementById("step" + curRoNum + "label");	
}

function makeUniEvent(eventObj) {
	curEvt = new universalEvent();
	if (isIE) {
		with (curEvt) {
			eventRef = eventObj;
			evtSrc = eventObj.srcElement;
			evtSrcId = eventObj.srcElement.id;
			eventType = eventObj.type;
			mouseX = eventObj.clientX + document.body.scrollLeft;
			mouseY = eventObj.clientY + document.body.scrollTop;
		}
	}
	else if (isGecko) {
		with (curEvt) {
			eventRef = eventObj;
			evtSrc = eventObj.target;
			evtSrcId = eventObj.target.id;
			eventType = eventObj.type;
			mouseX = eventObj.pageX;
			mouseY = eventObj.pageY;
		}
	}
}

function universalEvent() {
	this.evtSrc = null;
	this.evtSrcId = "";
	this.eventType = null;
	this.mouseX = null;
	this.mouseY = null;
	this.eventRef = null;
}