var setupMap = function(){
	var locations = [];

	$$('#locations li').each(function(el){
		locations.push({
			latitude: el.getElement('dd.latitude').get('text'),
			longitude: el.getElement('dd.longitude').get('text'),
			html: el.get('html'),
			title: el.getElement('span').get('text')
		});
	});

	$('locations').destroy();

	new Element('ul', {id: 'locations'}).inject(document.getElement('.col1'));

	var mapElement = new Element('div', {
		id: 'map'
	}).inject(document.getElement('.col2 .section'));

	var map = new GMap2(mapElement);
	map.setCenter(new GLatLng(53.535955, -2.988281), 6);

	// add map controls
	map.addControl(new GLargeMapControl());
	map.addControl(new GScaleControl(256));
	new GKeyboardHandler(map);
	map.enableContinuousZoom();
	map.enableDoubleClickZoom();
	
	
	locations.each(function(location, i){
		// get the location co-ordinates
		var coords = new GLatLng(
			location.latitude,
			location.longitude
		);

		// draw the marker
		var marker = new GMarker(coords, {
			title: location.title,
			clickable: true
		});

		var showDetails = function(){
			marker.openInfoWindowHtml(location.html);
		};

		GEvent.addListener(marker, 'click', showDetails);

		new Element('li').adopt(
			new Element('a', {
				href: '',
				text: location.title
			}).addEvent('click', function(e){
				e.stop();
				showDetails();
				map.panTo(coords);
			})
		).inject('locations');

		map.addOverlay(marker);
	})
}

window.addEvents({
	domready: function(){
		if (GBrowserIsCompatible()) {
			setupMap();
		}
	},
	unload: GUnload
});