var map = '';
var markers = [];
function load() {
	if (GBrowserIsCompatible()) {
	
		// map initialisation
		
		map = new GMap2($("#map").get(0));
		var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(37,34));
		var topLeft = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(46,24));
		var uk_map = new GLatLng(52.492815, -0.708618);
		map.addMapType(G_PHYSICAL_MAP);
		map.setMapType(G_PHYSICAL_MAP);
		map.setCenter(uk_map, 7);
		map.addControl(new GLargeMapControl3D(), topLeft);
		map.addControl(new GMenuMapTypeControl(), topRight);
		var manager = new GMarkerManager(map);
		
		// border creation
		
		border_top = new GScreenOverlay('images/bg/bg-map-top.png',
			new GScreenPoint(0, 0, 'pixels', 'pixels'), // screenXY
			new GScreenPoint(0, -550, 'pixels', 'pixels'), // overlayXY
			new GScreenSize(370, 30, 'pixels', 'pixels') // size on screen
		);
		
		border_right = new GScreenOverlay('images/bg/bg-map-right.png',
			new GScreenPoint(0, 0, 'pixels', 'pixels'), // screenXY
			new GScreenPoint(-370, -520, 'pixels', 'pixels'), // overlayXY
			new GScreenSize(28, 490, 'pixels', 'pixels') // size on screen
		);
		
		border_bottom = new GScreenOverlay('images/bg/bg-map-bottom.png',
			new GScreenPoint(0, 0, 'pixels', 'pixels'), // screenXY
			new GScreenPoint(0, 0, 'pixels', 'pixels'), // overlayXY
			new GScreenSize(370, 30, 'pixels', 'pixels') // size on screen
		);
		
		border_left = new GScreenOverlay('images/bg/bg-map-left.png',
			new GScreenPoint(0, 0, 'pixels', 'pixels'), // screenXY
			new GScreenPoint(0, -520, 'pixels', 'pixels'), // overlayXY
			new GScreenSize(48, 490, 'pixels', 'pixels') // size on screen
		);
		
		map.addOverlay(border_top);
		map.addOverlay(border_right);
		map.addOverlay(border_bottom);
		map.addOverlay(border_left);

		// marker creation

		var marker1 = new GMarker(new GLatLng(50.820984, -0.475287));
		markers[0] = marker1;
		manager.addMarker(marker1, 4, 15);
		
		var marker2 = new GMarker(new GLatLng(50.810152, -0.737500));
		markers[1] = marker2;
		manager.addMarker(marker2, 4, 15);
		
		var marker3 = new GMarker(new GLatLng(53.730537, -0.550604));
		markers[2] = marker3;
		manager.addMarker(marker3, 4, 15);
		
		var marker4 = new GMarker(new GLatLng(52.112211, -1.923358));
		markers[3] = marker4;
		manager.addMarker(marker4, 4, 15);
		
		var marker5 = new GMarker(new GLatLng(51.324172, -0.934466));
		markers[4] = marker5;
		manager.addMarker(marker5, 4, 15);
		
		var marker6 = new GMarker(new GLatLng(53.769287, -0.668728));
		markers[5] = marker6;
		manager.addMarker(marker6, 4, 15);
		
		var marker7 = new GMarker(new GLatLng(53.874291, -0.480695));
		markers[6] = marker7;
		manager.addMarker(marker7, 4, 15);
		
		var marker8 = new GMarker(new GLatLng(53.742239, -0.731149));
		markers[7] = marker8;
		manager.addMarker(marker8, 4, 15);
		
		var marker9 = new GMarker(new GLatLng(52.560804, 0.4428649));
		markers[8] = marker9;
		manager.addMarker(marker9, 4, 15);
	
		// marker event listeners
	
		GEvent.addListener(marker1, "click", function() {
			if(map.getZoom() == 15) {
				unhighlightLi();
			} else {
				map.setCenter(this.getLatLng(), 15);
				highlightLi(1);
			}
		});
		
		GEvent.addListener(marker2, "click", function() {
			if(map.getZoom() == 15) {
				unhighlightLi();
			} else {
				map.setCenter(this.getLatLng(), 15);
				highlightLi(2);
			}
		});
		
		GEvent.addListener(marker3, "click", function() {
			if(map.getZoom() == 15) {
				unhighlightLi();
			} else {
				map.setCenter(this.getLatLng(), 15);
				highlightLi(3);
			}
		});
		
		GEvent.addListener(marker4, "click", function() {
			if(map.getZoom() == 15) {
				unhighlightLi();
			} else {
				map.setCenter(this.getLatLng(), 15);
				highlightLi(4);
			}
		});
		
		GEvent.addListener(marker5, "click", function() {
			if(map.getZoom() == 15) {
				unhighlightLi();
			} else {
				map.setCenter(this.getLatLng(), 15);
				highlightLi(5);
			}
		});
		
		GEvent.addListener(marker6, "click", function() {
			if(map.getZoom() == 15) {
				unhighlightLi();
			} else {
				map.setCenter(this.getLatLng(), 15);
				highlightLi(6);
			}
		});
		
		GEvent.addListener(marker7, "click", function() {
			if(map.getZoom() == 15) {
				unhighlightLi();
			} else {
				map.setCenter(this.getLatLng(), 15);
				highlightLi(7);
			}
		});
		
		GEvent.addListener(marker8, "click", function() {
			if(map.getZoom() == 15) {
				unhighlightLi();
			} else {
				map.setCenter(this.getLatLng(), 15);
				highlightLi(8);
			}
		});
		
		GEvent.addListener(marker9, "click", function() {
			if(map.getZoom() == 15) {
				unhighlightLi();
			} else {
				map.setCenter(this.getLatLng(), 15);
				highlightLi(9);
			}
		});
		
		GEvent.addListener(map, "zoomend", function(old, current) {
			manager.refresh();
		});
	 
	}
	
}

function highlightLi(li_number) {
	
	$('ul.locations > li').each(function (i) {
		$(this).children().removeClass('active');
	});
	
	$('ul.locations > li:nth-child('+li_number+') > a').addClass('active');
	
}

function unhighlightLi() {
	
	defaultLocation();
	
	$('ul.locations > li').each(function (i) {
		$(this).children().removeClass('active');
	});
	
}

function defaultLocation() {
	map.setCenter(new GLatLng(52.492815, -0.708618),7);	
}

$(document).ready(function() {
	
	Cufon.replace('h1, h2');
	Cufon.replace('p.address span');
	
	$('ul.locations > li > a').click(function(){
											  
		if($(this).hasClass('active')) {	
		
			defaultLocation();
			$(this).removeClass('active');
		
		} else {
			
			$('ul.locations > li').each(function (i) {
				$(this).children().removeClass('active');
			});
			
			$(this).addClass('active');
			
			$('ul.locations > li').each(function (i) {
				if($(this).children().hasClass('active')) {
					marker_no = i;
					return marker_no;
				}
			});
			
			coords = markers[marker_no].getLatLng();
			map.setCenter(coords,15);
			
		}
		
	});
	
});