window.addEvent('domready', function()
{
	//we hide all our descriptions at first:
	$$('.descriptioncours').setStyles({'display': 'none', 'opacity': 0});

	//we then add the events on our links:
	$$('.descriptioncourstrigger').setStyles('display', 'block');
	$$('.descriptioncourstrigger').addEvent('click', function(_evt)
	{
		//link offset (number of pixels the description will go higher than the link):
		var i_pixel_offset_y = -15;
		var i_pixel_offset_x = 0;

		//we stop our event:
		_evt = new Event(_evt).stop();

		//we first get our id:
		var s_id = this.getParent().get('id');
		var i_pos = (s_id.indexOf('_') + 1);
		var i_id = s_id.substr(i_pos, (s_id.length - i_pos)).toInt();

		//we get our description object:
		var obj_description = $('descriptioncours_' + i_id);

		//if our description container is already shown, we hide it:
		if (obj_description.getStyle('opacity') == '1')
			return obj_description.tween('opacity', 1, 0);

		//we hide all our description elements:
		$$('.descriptioncours').setStyle('display', 'none');

		//we show our container:
		obj_description.setStyle('display', 'block');

		//we then get the position of our link & set our description container with the right position:
		var arr_pos = this.getParent().getPosition();
		var arr_description_size = obj_description.getSize();
		obj_description.setStyles({
						'position': 'absolute', 
						'top': arr_pos.y - arr_description_size.y + i_pixel_offset_y, 
						'left': arr_pos.x - arr_description_size.x + i_pixel_offset_x
		});

		//we then fade in our the element:
		obj_description.tween('opacity', 0, 1);

	});
});