Event.observe(window, "load", function() {
	$$('div[id^="event"]').each(function(element) {
		element.observe("click", showInfo);
	});
});

function showInfo(event) {
	
	// Hide all info elements
	$$('div[id^="info"]').each(function(element) {
		element.hide();
	});
	
	// Get the event element from (1) current, (2) parent, (3) parent's children
	var eventElement = Event.element(event);
	if (!/^event/.test(eventElement.id)) {
		eventElement = eventElement.up();
	}
	if (!/^event/.test(eventElement.id)) {
		var parentElement = eventElement.up();
		parentElement.select('div[id^="event"]').each(function(element) {
			if (/^event/.test(element.id)) {
				eventElement = element;
			}
		});
	}
	var infoID = "info" + eventElement.id.substring(5);
	var infoElement = $(infoID);

	// Position
	var MARGIN = 10;
	var windowScroll = document.viewport.getScrollOffsets();
	var x = Event.pointerX(event) - 2 * MARGIN;
	var y = Event.pointerY(event) - 2 * MARGIN;
	var elementRight = x + infoElement.getWidth(); 
	var elementBottom = y + infoElement.getHeight(); 
	var windowWidth = document.viewport.getWidth();
	var windowHeight = document.viewport.getHeight();
	
	// Adjust if the box is outside of the viewport
	if (elementRight + 2 * MARGIN - windowScroll.left > windowWidth) {
		x -= (elementRight + 2 * MARGIN - windowScroll.left) - windowWidth;
	} 
	if (elementBottom + 2 * MARGIN - windowScroll.top >= windowHeight) {
		y -= (elementBottom + 2 * MARGIN - windowScroll.top) - windowHeight;
	} 
	
	// Move
	infoElement.setStyle({ top: y + 'px' }); 
	infoElement.setStyle({ left: x + 'px' }); 
	infoElement.show();
}