function showPhotos() {
	if (!jsonFromFlickr) {
	  alert('Flickr photos failed to load');
	  return;
	}
	// 'Empty' the ul by removing all of its children
	var ul = document.getElementById('photos');
	while (ul.hasChildNodes()) {
	  ul.removeChild(ul.firstChild);
	}
	// For calculating center of all points later
	var bounds = new google.maps.LatLngBounds();
	// Loop over the photos and display them all
	for (var i = 0, photo; photo = jsonFromFlickr.items[i]; i++) {
	  var li = document.createElement('li');
	  var a = document.createElement('a');
	  a.href = photo.link;
	  var img = document.createElement('img');
	  img.src = photo.media.m.replace('_m', '_s');
	  img.title = photo.title;
	  img.alt = photo.title;
	  a.appendChild(img);
	  li.appendChild(a);
	  // Add to the ul
	  ul.appendChild(li);
	  // Add a marker to the map at the correct point
	  var point = new google.maps.LatLng(photo.latitude, photo.longitude);
	  bounds.extend(point);
	  photo.marker = new google.maps.Marker(point);
	  gmap.addOverlay(photo.marker);
	  // Hook up the link click event
	  google.maps.Event.addDomListener(
	    a, 'click', makeClickCallback(photo)
	  );
	  // Hook up the marker click event
	  google.maps.Event.addListener(
	    photo.marker, 'click', makeClickCallback(photo)
	  );
	}
	// Center the map to show our points
	gmap.setZoom(gmap.getBoundsZoomLevel(bounds));
	gmap.setCenter(bounds.getCenter());
}

function buildInfoWindow(photo) {
	var div = document.createElement('div');
	div.className = 'infoBox';
	div.innerHTML = [
	  '<h4>', photo.title, '</h4>',
	  '<img src="', photo.media.m.replace('_m', '_t'),
	  '" alt="', photo.title, '">',
	  '<a href="#">zoom in</a><br>',
	  '<a href="', photo.link, '">photo page</a>'
	].join('');
	// Add event listener
	var link = div.getElementsByTagName('a')[0];
	google.maps.Event.addDomListener(
	  link, 'click', makeZoomCallback(photo)
	);
	return div;
}

function stopEvent(ev) {
	ev = ev || window.event;
	if (ev) {
	  if (ev.preventDefault) {
	    ev.preventDefault()
	  } else {
	    ev.returnValue = false;
	  }
	}
}

function makeClickCallback(photo) { 
	return function(ev) {
	  stopEvent(ev);
	  photo.marker.openInfoWindow(buildInfoWindow(photo));
	  highlightPhoto(photo);
	}
}

function makeZoomCallback(photo) {
	// Creates a callback function that zooms the map to that photo
	return function(ev) {
	  stopEvent(ev);
	  gmap.setCenter(new google.maps.LatLng(
	    photo.latitude, photo.longitude
	  ), 19);
	  photo.marker.openInfoWindow(buildInfoWindow(photo));
	  highlightPhoto(photo);
	}
}

function highlightPhoto(photo) {
	var ul = document.getElementById('photos');
	var links = ul.getElementsByTagName('a');
	for (var i = 0, a; a = links[i]; i++) {
	  var img = a.getElementsByTagName('img')[0];
	  if (a.href == photo.link) {
	    img.style.opacity = 1;
	    img.style.filter = 'alpha(opacity=100)';
	  } else {
	    img.style.opacity = 0.4;
	    img.style.filter = 'alpha(opacity=40)';
	  }
	}
}

google.setOnLoadCallback(function() {
	showMap();
	showPhotos();	
});