var markers = new Hash();

Element.observe(window, 'load', function(e) 
{
	var map = new google.maps.Map2($('map'));
	
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
			
	map.setCenter(new google.maps.LatLng(53.437143, -2.195989), 11);
	
	// Setup base icon
	var baseIcon 							= new GIcon(G_DEFAULT_ICON);
	
	baseIcon.image 						= "/images/map_marker.png";
	baseIcon.shadow 					= "/images/map_marker_shadow.png";
	baseIcon.iconSize 				= new GSize(14, 33);
	baseIcon.shadowSize 			= new GSize(28, 33);
	baseIcon.iconAnchor 			= new GPoint(0, 33);
	baseIcon.infoWindowAnchor = new GPoint(9, 2);
	
	pupils.each(function(pupilsForLetter)
	{	  
		pupilsForLetter.value.each(function(pupil)
		{
		  if (!isNaN(pupil.lat) && !isNaN(pupil.long))
		  {
			  var point 	= new GLatLng(pupil.lat, pupil.long);
  			var marker 	= new GMarker(point, { icon: baseIcon, title: pupil.firstname + ' ' + pupil.lastname });
  			map.addOverlay(marker);
			
  			/*
  			GEvent.addListener(marker, "click", function() 
  			{
  			  var html = '<div class="pupilInfo">';
  			  if (pupil.pic) html += '<img src="' + pupil.pic + '" alt=""/>'
  			  html += '<h2>' + pupil.firstname + ' ' + pupil.lastname + '</h2>';
  			  if (pupil.graduated) html += '<p class="graduated">Graduated ' + pupil.graduated + '</p>';
  			  if (pupil.town) html += '<p class="town">' + pupil.town + '</p>';
  			  if (pupil.job) html += '<p class="job">' + pupil.job + '</p>';
  			  if (pupil.about) html += '<p class="about">' + pupil.about + '</p>';
  			  html += '</div>';
			  
  				marker.openInfoWindowHtml(html);
  			});
  			*/
  			var html = '<div class="pupilInfo">';
  		  if (pupil.pic) html += '<img src="' + pupil.pic + '" alt=""/>'
  		  html += '<h2>' + pupil.firstname + ' ' + pupil.lastname + '</h2>';
  		  if (pupil.graduated) html += '<p class="graduated">Graduated ' + pupil.graduated + '</p>';
  		  if (pupil.town) html += '<p class="town">' + pupil.town + '</p>';
  		  if (pupil.job) html += '<p class="job">' + pupil.job + '</p>';
  		  if (pupil.about) html += '<p class="about">' + pupil.about + '</p>';
  		  html += '</div>';
			
  			marker.bindInfoWindowHtml(html);
			
  			markers.set(pupil.id, marker);
  		}
		})
	})
	
	/* Add hard-coded school marker */
	var point 	= new GLatLng(53.437143, -2.195989);
	var marker 	= new GMarker(point, { icon: baseIcon });
	
	map.addOverlay(marker);
	
	GEvent.addListener(marker, "click", function() 
	{
		openMarker(marker);
	});
	
	openMarker(marker);
	
	// Attach events to list of pupil links
	$$('.pupilLink').each(function(link)
	{
	  Element.observe(link, 'click', function(e)
	  {
	    Effect.ScrollTo('map', {
	      afterFinish: function() 
	      {
	        var markerID = link.id.replace(/pupil_/, '');
      	  var marker = markers.get(markerID);

      	  GEvent.trigger(marker, 'click');
	      }
	    });	    
  	  
  	  Event.stop(e);
	  });	  
	});
});	

function openMarker(marker)
{
	marker.openInfoWindowHtml('<div class="pupilInfo"<h2>Levenshulme High School</h2><p>Fill in the form <a href="#main">below</a> to add yourself to the map.</p></div>');
}