// When the DOM is loaded, initilize initPage
window.addEvent('load',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
		state_list = document.getElementById("home-map").getElementsByTagName("AREA");
		
		// Loop through all areas
		for(i=0; i<state_list.length; i++){
			$(state_list[i]).style.display = 'none';
			
			// Assignin an action to the mouseover event
			$(state_list[i]).addEvent('mouseover', function(e) {
				// Get the id from the hovered area
				var state_id = this.id;
				
				// Extract the "state"-part of the id = the id of the list-item
				state_id = state_id.substring(state_id.indexOf('_')+1, state_id.length);
				
				// Set the li to "display: inline" = show it
				$(state_id).setStyle('display', 'block');
			});
			
			// Assign an action to the mouseout event
			$(state_list[i]).addEvent('mouseout', function(e) {
				// Get the id from the hovered area
				var state_id = this.id;
				
				// Extracti the "state"-part of the id = the id of the list-item
				state_id = state_id.substring(state_id.indexOf('_')+1, state_id.length);
				
				// Set the li to "display: none" = hide it
				$(state_id).setStyle('display', 'none');
			});
		}
	}
}