window.onload = function () {
	InitialiseMapping()
}

function InitialiseMapping() {

	// If Google Maps is incompatiable, stop executing function
	if (!GBrowserIsCompatible()) return;

	// Instantiate new map in #offices_map1 div
	var map = new GMap2(document.getElementById('offices_map'));

	// Define map controls and set centre point and zoom level
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());

	// Set center over Europe
	map.setCenter(new GLatLng(47.81315451752768, 9.4921875), 3);

	// Determine z-index of markers
	function importanceOrder(marker, b) {
		return GOverlay.getZIndex(marker.getPoint().lat()) + (marker.importance * 1000000);
	}

	// Panavision Main Offices Icon
	var mainIcon = new GIcon();
	mainIcon.image  = 'images/green-pointer.png';
	mainIcon.shadow = 'images/pointer-shadow.png';
	mainIcon.iconSize = new GSize(19, 32);
	mainIcon.shadowSize = new GSize(37, 32);
	mainIcon.iconAnchor = new GPoint(9, 32);
	mainIcon.infoWindowAnchor = new GPoint(15, 0);
	mainMarkerOptions = {
		icon:mainIcon,
		zIndexProcess:importanceOrder
	}

	// Panavision Agencies Icon. Note: by passing the mainIcon as the first argument to the GIcon
	// constructor, agenciesIcon copies its properties. The second argument defines its image property
	var officesIcon = new GIcon(mainIcon, 'images/red-pointer.png');
	officeMarkerOptions = {
		icon:officesIcon,
		zIndexProcess:importanceOrder
	}

	var agenciesIcon = new GIcon(mainIcon, 'images/blue-pointer.png');
	agencyMarkerOptions = {
		icon:agenciesIcon,
		zIndexProcess:importanceOrder
	}
	
	var headerIcon = new GIcon();
	//headerIcon.image  = 'images/green-pointer.png';
	headerIcon.shadow = 'images/pointer-shadow.png';
	headerIcon.iconSize = new GSize(27, 32);
	headerIcon.shadowSize = new GSize(37, 32);
	headerIcon.iconAnchor = new GPoint(9, 32);
	headerIcon.infoWindowAnchor = new GPoint(15, 0);
	
	var headerIcon = new GIcon(headerIcon, 'images/redgreen-pointer.png');
	headerMarkerOptions = {
		icon:headerIcon,
		zIndexProcess:importanceOrder
	}
	
	var doubleIcon = new GIcon();
	//headerIcon.image  = 'images/green-pointer.png';
	doubleIcon.shadow = 'images/pointer-shadow.png';
	doubleIcon.iconSize = new GSize(27, 32);
	doubleIcon.shadowSize = new GSize(37, 32);
	doubleIcon.iconAnchor = new GPoint(9, 32);
	doubleIcon.infoWindowAnchor = new GPoint(15, 0);
	
	var doubleIcon = new GIcon(doubleIcon, 'images/red-pointerx2.png');
	doubleMarkerOptions = {
		icon:doubleIcon,
		zIndexProcess:importanceOrder
	}
	
	var greenIcon = new GIcon();
	//headerIcon.image  = 'images/green-pointer.png';
	greenIcon.shadow = 'images/pointer-shadow.png';
	greenIcon.iconSize = new GSize(56, 32);
	greenIcon.shadowSize = new GSize(37, 32);
	greenIcon.iconAnchor = new GPoint(9, 32);
	greenIcon.infoWindowAnchor = new GPoint(15, 0);
	
	var greenIcon = new GIcon(greenIcon, 'images/green-pointer2.png');
	greenMarkerOptions = {
		icon:greenIcon,
		zIndexProcess:importanceOrder
	}

	// Continent constructor
	function Continent(latitude, longitude, zoom) {
		this.latitude  = latitude;
		this.longitude = longitude;
		this.markers   = [];
		this.zoom      = zoom;
		this.showMarkers = function () {
			//map.clearOverlays();
			for (var i = 0; i < this.markers.length; i++) {
			
				map.addOverlay(this.markers[i]);
			}
			map.setZoom(this.zoom);
			map.panTo(new GLatLng(this.latitude, this.longitude));
		}
	}

	// Define continents, passing longitude, latitude and zoom level as arguments
	var Africa			= new Continent(-13.2399454992863, 26.015625, 3),
		Europe				= new Continent(47.81315451752768, 9.4921875, 4);

	// Function used to process JSON data
	function ProcessJson(jsonStr) {

		var jsonData = eval('(' + jsonStr + ')');

		// Plot the markers
		for (var j = 0; j < jsonData.markers.length; j++) {
			var markerJson		= jsonData.markers[j];
			var point					= new GLatLng(markerJson.latitude, markerJson.longitude);
			var options;
			var markerObj;
			var continentObj	= eval(markerJson.continent.replace(/ /g, ''));

			switch (markerJson.facility) {
				case 'Main'		: options = mainMarkerOptions;		break;
				case 'Office'	: options = officeMarkerOptions;	break;
				case 'Agency'	: options = agencyMarkerOptions;	break;
				case 'Header'	: options = headerMarkerOptions;	break;
				case 'Double'	: options = doubleMarkerOptions;	break;
				case 'Green'	: options = greenMarkerOptions;	break;
			}

			markerObj = new GMarker(point, options);
			markerObj.importance = (markerJson.facility == 'Main') ? 2 : 1;


			// If the marker's JSON data contains a title, populate an info window and bind it to the marker click event
			if (markerJson.title) {
				var infoWindowHtml = '<div id="offices_activeInfoWindow" style="';
				infoWindowHtml += (markerJson.infoHeight) ? 'height:' + markerJson.infoHeight + 'px;' : '';
				infoWindowHtml += (markerJson.infoWidth)  ? 'width:'  + markerJson.infoWidth  + 'px'  : '';
				infoWindowHtml += '"><table border=0 ><tr><td height=10%><strong>' + markerJson.title + '</strong></td>';
				infoWindowHtml += (markerJson.title_2) ? '<td><strong>'+markerJson.title_2 + '</strong></td></tr>': '</tr>';
				infoWindowHtml += '<tr><td>' + markerJson.address1 + '</td>';
				infoWindowHtml += (markerJson.address_1) ? '<td>'+ markerJson.address_1 + '</td></tr>': '</tr>';
				infoWindowHtml += '<tr><td>' + markerJson.address2 + '</td>';
				infoWindowHtml += (markerJson.address_2) ? '<td>'+ markerJson.address_2 + '</td></tr>': '</tr>';
				infoWindowHtml += (markerJson.address3) ? '<tr><td>' + markerJson.address3 + '</td>': '';
				infoWindowHtml += (markerJson.address_3) ? '<td>'+ markerJson.address_3 + '</td></tr>': '</tr>';
				infoWindowHtml += (markerJson.address4) ? '<tr><td>' + markerJson.address4 + '</td>': '';
				infoWindowHtml += (markerJson.address_4) ? '<td>'+ markerJson.address_4 + '</td></tr>': '</tr>';
				
				infoWindowHtml += (markerJson.tel) ? '<tr><td><strong>Tel:</strong> ' + markerJson.tel + '</td>': '';
				infoWindowHtml += (markerJson.tel_2) ? '<td>'+ markerJson.tel_2 + '</td></tr>': '</tr>';
				infoWindowHtml += (markerJson.mobile) ? '<tr><td><strong>Mobile:</strong> '+ markerJson.mobile + '</td></tr>': '';
				infoWindowHtml += (markerJson.fax) ? '<tr><td><strong>Fax:</strong> ' + markerJson.fax + '</td>': '';
				infoWindowHtml += (markerJson.fax_2) ? '<td><strong>Fax:</strong> '+ markerJson.fax_2 + '</td></tr>': '</tr>';
				infoWindowHtml += (markerJson.link) ? '<tr><td><a href="' + markerJson.link + '">' + markerJson.link + '</a></td>' : '';
				infoWindowHtml += (markerJson.link_2) ? '<td>'+'<a href="' + markerJson.link_2 + '">' + markerJson.link_2 + '</a></td></tr>' : '</tr>';
				infoWindowHtml += 
					'<tr><td><a href="#" id="offices_detailLink"></a></td></tr></table>' +
					'</div>';

				// When the marker is clicked...
				function openInfoWindow(infoWindowHtml, markerJson, markerObj, continentObj) {
					// Open infoWindow
					markerObj.openInfoWindowHtml(infoWindowHtml);

					// Determine the function of the detail link based on zoom level and modify it accordingly
					function delayHandleViewLinkState() {
						potentialViewLink = document.getElementById('offices_detailLink');
						if (!potentialViewLink) {
							setTimeout(delayHandleViewLinkState, 100);
						}
						else {
							viewLink = potentialViewLink;
							HandleViewLinkState(markerJson, markerObj, 9, 16, continentObj);
						}
					}
					setTimeout(delayHandleViewLinkState, 100);

					// Everytime the user zooms in or out, determine the function of the detail link based on zoom level
					GEvent.addListener(map, 'zoomend', function() {
						HandleViewLinkState(markerJson, markerObj, 9, 16, continentObj, true);
					});
				}

				(function () {
					var _infoWindowHtml = infoWindowHtml;
					var _markerJson			= markerJson;
					var _markerObj			= markerObj;
					var _continentObj		=	continentObj;
					var europeLink			= document.getElementById('offices_europeLink');
					var africaLink			= document.getElementById('offices_africaLink');

					GEvent.addListener(markerObj, 'click', function () {
						openInfoWindow(_infoWindowHtml, _markerJson, _markerObj, _continentObj);
					});

					// When the 'Details' link is clicked, simulate a marker click
					if (_markerJson.continent == 'Europe' && (_markerJson.facility == 'Office' || _markerJson.facility == 'Main'|| 
					_markerJson.facility == 'Header' ||_markerJson.facility == 'Agency' ||_markerJson.facility == 'Double'||_markerJson.facility == 'Green')) {
						var id = markerJson.title.replace(/ /g, '');


						document.getElementById('offices_link' + id).onclick = function () {
							if (europeLink.className != 'current') {
								Europe.showMarkers();

								var continentLinks = document.getElementById('offices_continentLinkList').getElementsByTagName('a');

								for (var i = 0; i < continentLinks.length; i++) {
									continentLinks[i].className = '';									
								}

								document.getElementById('offices_europeLink').className = 'current';
							}

							openInfoWindow(_infoWindowHtml, _markerJson, _markerObj, _continentObj);

							// Zoom and pan to view closer detail of marker
							map.setZoom(16);
							map.panTo(new GLatLng(_markerJson.latitude, _markerJson.longitude));

							return false;
						};
					}
					
					// When the 'Details' link is clicked, simulate a marker click
					if (_markerJson.continent == 'Africa' && (_markerJson.facility == 'Office' || _markerJson.facility == 'Main' ||
					_markerJson.facility == 'Header'||_markerJson.facility == 'Agency'||_markerJson.facility == 'Double'||_markerJson.facility == 'Green')) {
						var id = markerJson.title.replace(/ /g, '');


						document.getElementById('offices_africalink' + id).onclick = function () {
							if (africaLink.className != 'current') {
								Africa.showMarkers();

								var continentLinks = document.getElementById('offices_continentLinkList').getElementsByTagName('a');

								for (var i = 0; i < continentLinks.length; i++) {
									continentLinks[i].className = '';									
								}

								document.getElementById('offices_africaLink').className = 'current';
							}

							openInfoWindow(_infoWindowHtml, _markerJson, _markerObj, _continentObj);

							// Zoom and pan to view closer detail of marker
							map.setZoom(16);
							map.panTo(new GLatLng(_markerJson.latitude, _markerJson.longitude));

							return false;
						};
					}
				})();
			}

			// Push marker objects into continents markers array
			continentObj.markers[continentObj.markers.length] = markerObj;
			
		}

		// Display European markers
		
		Africa.showMarkers();
		Europe.showMarkers();
	}

	// Fetch JSON data and process
	GDownloadUrl("js/map/offices.json.js", ProcessJson);
				
	// When the active infoWindow is closed, clear any associated zoom listeners
	GEvent.addListener(map, 'infowindowclose', function() {
		GEvent.clearListeners(map, 'zoomend');
	});

	// Determine the View Link state dependent on zoom level
	function HandleViewLinkState(markerJson, markerObj, zoomBound, detailZoomLevel, continentObj) {

		if (map.getZoom() > zoomBound) {

			// If the link is already in the correct state, stop executing function
			if (viewLink.innerHTML == markerJson.continent + ' View') return;

			// Change the link to Continent View. For example 'Europe View'
			viewLink.innerHTML = markerJson.continent + ' View';

			viewLink.onclick = function () {

				// Zoom and pan to view entire continent
				map.setZoom(continentObj.zoom);
				map.panTo(new GLatLng(continentObj.latitude, continentObj.longitude));

				// Close open infoWindow
				map.closeInfoWindow();
				
				return false;
			}
		}
		else {
			// If the link is already in the correct state, stop executing function
			if (viewLink.innerHTML == 'Detailed View') return;

			viewLink.innerHTML = 'Detailed View';

			viewLink.onclick = function () {

				// Zoom and pan to view closer detail of marker
				map.setZoom(detailZoomLevel);
				map.panTo(new GLatLng(markerJson.latitude, markerJson.longitude));

				// Execute parent function again, thus changing the link to Continent View
				HandleViewLinkState(markerJson, markerObj, zoomBound, detailZoomLevel, continentObj);
				
				return false;
			}
		}
	}

	// Show Continent Markers when Continent link is clicked, 
	var continentLinks = document.getElementById('offices_continentLinkList').getElementsByTagName('a'),
		continentLink = document.getElementById('offices_europeLink');
		//continentLink = document.getElementById('offices_continentLinkList').getElementsByTagName('a');

	for (var k = 0; k < continentLinks.length; k++) {
		continentLinks[k].onclick = function () {

			// Remove 'current' class name from previously current continent anchor
			continentLink.className = '';

			// Add 'current' class name to new current continent link and store a node reference to it
			this.className = 'current';
			continentLink = this;

			// Execute the relevant continent's showMarkers function. Fish continent name from anchor's rel attribute
			eval(this.getAttribute('rel')).showMarkers();

			// Return false, supressing default link behaviour
			return false;
		}
	}
}

// Europe/Details view link
var viewLink = false;