function ShowInfoBox(contents, element_id)
{
	/* Put the content into the info box, and display it. */
	var info_box = $('#info_box');
	info_box.css('display', 'block');
	$('#info_box .content').html(contents);
	
	var element = $('#' + element_id);
	var page = element.parent();
	var content_container = $('#content_container');
	var content_window = $('#content_window');
	
	/* Set the y position of the info box, as we know that now. */
	info_box.css('top', content_window.position().top + page.position().top + element.position().top - ((info_box.height() - element.height()) / 2) + 'px');
	
	/* The x is a bit more complicated. First, work out how much space there is to the right of the element */
	var space_beside_element = page.width() - (content_container.position().left + element.position().left + element.width());
	if (space_beside_element > info_box.width())
	{
		info_box.removeClass('right');
		info_box.addClass('left');
		info_box.css('left', content_window.position().left + content_container.position().left + element.position().left + element.width() + 2 + 'px');
	}
	else
	{
		info_box.removeClass('left');
		info_box.addClass('right');
		info_box.css('left', content_window.position().left + content_container.position().left + element.position().left - info_box.width() - 2 + 'px');
	}
}

function HideInfoBox()
{
	$('#info_box').css('display', 'none');
}