function setInfo(title, text) {
	var box = document.getElementById('infobox');
	box.innerHTML = '<div><h1>' + title + '</h1>' + text + '</div>';

	box.style.width  = '180px';
	box.style.left   = '0';
	box.style.bottom = (document.all ? '0px' : -window.pageYOffset + 'px');
}

function resetInfo(title, text) {
	var box = document.getElementById('infobox');
	box.innerHTML = '<!-- Place Holder -->';  
}

function getComment(node) {
	if (node.nodeType == 8) {
		return node.nodeValue;
	} else if (node.childNodes != null) {
		for (var i=0; i < node.childNodes.length; i++) {
			if(node.childNodes.item(i).nodeType == 8) return node.childNodes.item(i).nodeValue;
		}
	}
	return '';
}

function initInfoBox() {
	var forms  = document.getElementsByTagName('form');
	for(f = 0; f < forms.length; f++) {
		var inputs = forms[f].elements;
		for(i = 0; i < inputs.length; i++) {
			inputs[i].onfocus = function() { 
				var labels = this.parentNode.getElementsByTagName('label');
				if(labels[0]) {
					var text   = getComment(this.parentNode);
					var title  = labels[0].innerHTML.replace(/:/, '');
					title = title.replace(/<.*>/, '');
					if(text) setInfo(title, text);
				}
			}

			inputs[i].onblur  = function() { resetInfo(); }
		}
	}
}