function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		} while (obj = obj.offsetParent);
	}
	return {
		'x': curleft,
		'y': curtop
	};
}

var infoBox = {
	el: null,
	newTop: 0,
	load: function() {
		// create info box
		var div = document.createElement('div');
		div.id = 'info';
		div.className = 'blackbox';
		iDiv = document.createElement('div');
		iDiv.appendChild(document.createElement('h3'));
		iDiv.appendChild(document.createElement('p'));
		div.appendChild(iDiv);
		document.body.appendChild(div);
		infoBox.el = $('info');
		window['infoFx'] = new Fx.Styles(infoBox.el, {duration:300, wait: false});
	},
	hover: function(el) {

		infoBox.el.getElementsByTagName('h3')[0].innerHTML = el.getElementsByTagName('h3')[0].innerHTML;
		infoBox.el.getElementsByTagName('p')[0].innerHTML = el.getElementsByTagName('p')[0].innerHTML;
		
		infoBox.newTop = findPos(el).y-infoBox.el.offsetHeight;
		infoBox.el.setStyles({
			'opacity': 0,
			'top': infoBox.newTop-15,
			'left': findPos(el).x-(infoBox.el.offsetWidth/2)+(el.offsetWidth/2)
		});
		
		infoFx.start({
			'top' : infoBox.newTop+15,
			'opacity': 1
		});

	},
	exit: function() {

		infoFx.start({
			'top' : infoBox.newTop-15,
			'opacity': 0
		});

	}
}

window.addEvent('domready', infoBox.load);