// When the DOM is loaded, initilize initPage
DOMAssistant.DOMReady(initPage);

function initPage() {
	// Get a reference to the containing div with id='map'
 	var map = $$('map');
	
	// Check if map exists
	if(map) {
		
		// Get all the areas of the imagemap
		var area_list = map.getElementsByTagName('AREA');
		
		// Loop through all areas
		for(var i=0; i<area_list.length; i++){

			$(area_list[i]).style.display = 'none';
			
			// Assignin an action to the mouseover event
			$(area_list[i]).addEvent('mouseover', function(e) {
				// Get the id from the hovered area
				var area_id = this.id;
				if(area_id)
				{
				
				// Extract the "area"-part of the id = the id of the list-item
				area_id = area_id.substring(area_id.indexOf('_')+1, area_id.length);
				
				// Set the li to "display: inline" = show it
				$$(area_id).setStyle('display', 'inline');
			}
			});
			
			// Assign an action to the mouseout event
			$(area_list[i]).addEvent('mouseout', function(e) {
				// Get the id from the hovered area
				var area_id = this.id;
				if(area_id)
				{
				// Extracti the "area"-part of the id = the id of the list-item
				area_id = area_id.substring(area_id.indexOf('_')+1, area_id.length);
				
				// Set the li to "display: none" = hide it
				$$(area_id).setStyle('display', 'none');
				}
			});
			
			$(area_list[i]).addEvent('click', function(e) {
				var area_id = this.id;
				if(area_id)
				{
				area_id = area_id.substring(area_id.indexOf('_')+1, area_id.length);
				$$(area_id).setStyle('display', 'none');
				}
			});
			
		}
	}
}