// starts when the DOM is loaded
$(document).ready(function() {
	// check if puzzles exists
	if($('#puzzles')) {
		// loop through each puzzle
		$('#puzzles area').each(function() {
	
			// action to the mouseover event
			$(this).mouseover(function(e) {
				var puzzle_id = $(this).attr('id').replace('area_', '');
				$('#'+puzzle_id).fadeIn();
			});
			
			// action to the mouseout event
			$(this).mouseout(function(e) {
				var puzzle_id = $(this).attr('id').replace('area_', '');
				$('#'+puzzle_id).hide();
			});
		});
	}
});