window.addEvent('domready', function () {
	var tooltip = new Element('div', {'id': 'tooltip'});
	tooltip.adopt(new Element('span', {'class': 'arrow'}), new Element('span', {'class': 'text'}));

	$$('body')[0].grab(tooltip);

	$$('img.tooltip').addEvents({
		'mouseenter': function (evt) {
			var img = $(evt.target),
			    coords, imgXcenter, imgYtop, tooltipHeight, tooltipWidth;

			tooltip.setStyle('display', 'block');
			tooltip.getElement('.text').innerHTML = img.get('alt');

			tooltipHeight = tooltip.getSize().y,
			tooltipWidth  = tooltip.getSize().x;

			tooltip.setStyle('display', 'none');

			coords = img.getCoordinates();
			imgXcenter = Math.round(coords.left + (coords.width / 2)),
			imgYtop    = coords.top,

			tooltip.setStyles({
				top: imgYtop - tooltipHeight,
				left: imgXcenter - Math.round(tooltipWidth / 2),
				display: 'block'
			});
		},
		'mouseleave': function (evt) {
			tooltip.setStyle('display', 'none');
		}
	});
});