var map;
$(document).ready(function() {
	$('#popupcontent').hide();
	$('#right').css('height','527px');
	$('#footer').css('top','20px');
	$('#bottom').css('top','41px');
	$('#rightbottom').css('top','68px');
	$('#popupcontent,.pointcontent,p.inpopup').css('width','383px');
	$('#point1 p.inpopup').css('width','250px');
	$('#popupcontent').css('color','#000');
	$('h3.inpopup').css('font-size','1em');
	$('#extrawalk #footer').css('margin-top','0');
	$('.hideifdynamic,#printablemap').css('display','none');
	$('.hideifstatic').css('display','block');
	
	var printMapLinkCode = document.createElement('p');
	printMapLinkCode.setAttribute('id','printlink');
	printMapLinkCode.setAttribute('class','acornlink');
	printMapLinkCode.setAttribute('style','background-repeat:no-repeat');
	printMapLinkCode.innerHTML = '<a id="printmap" style="background-repeat:no-repeat" href="javascript:window.print();">Print map and points of interest</a>';
	document.getElementById('utilitynav').insertBefore(printMapLinkCode,document.getElementById('audiolink'));
	insertInteractiveMap();
	$(function() {
		var $tabs = $('#rightinner').tabs(); // first tab selected
		$('#audiolink').click(function() { // bind click event to link
		    $tabs.tabs('select', 1); // switch to second tab
		    return false;
		});
	});
	var xml;
	var dataFile = 'data.xml';
	var staticMapUrl;
    if (google.maps.BrowserIsCompatible()) {
	    GDownloadUrl(dataFile, function(data, responseCode) {
    	    xml = GXml.parse(data);
	   	    staticMapUrl = setupMap(xml);
//	   	    insertStaticMap(staticMapUrl);

//document.getElementById('debugmessagecontainer').innerHTML = document.getElementById('debugmessagecontainer').innerHTML + '<a href="javascript:getMyMapCenter();">getMyMapCenter()</a>';
	    });
    }

})


function getMyMapCenter() {
	document.getElementById('debugmessage').innerHTML = map.getCenter();
	
}


function setupMap(xml)
{
	var mapSetupData = getMapSetupData(xml); // would be easier to read if getMapSetupData returned an assoc array rather than basic array.
	
    map = new google.maps.Map2(document.getElementById(mapSetupData[0]));
    map.setCenter(new google.maps.LatLng(mapSetupData[1], mapSetupData[2]),mapSetupData[3])
    map.addControl(new google.maps.SmallMapControl());

    var mapControl = new google.maps.MapTypeControl();
    map.addControl(mapControl);
	return drawMapData(xml,mapSetupData);
}


function getMapSetupData(xml)
{
    var mapData = xml.documentElement.getElementsByTagName('map');
    var mapTarget = mapData[0].getAttribute('target');
    var mapCentreLat = parseFloat(mapData[0].getAttribute('centrelat')); // there will only ever be one element in this array (only one <map> element in the xml);
    var mapCentreLng = parseFloat(mapData[0].getAttribute('centrelng'));
    var mapScale = parseFloat(mapData[0].getAttribute('scale'));

	return new Array(mapTarget,mapCentreLat,mapCentreLng,mapScale);

}

function drawMapData(xml,mapSetupData) {
	setupTabs(); // Derive content to populate the tabbed popup window associated with each marker.
	var staticMapUrl_base = 'http://maps.google.com/staticmap?sensor=false&key=ABQIAAAA7ulaGai7AMVdZwkrgABn7hQiw5FtIMsw_ajU6-zsjgnfofgPsBRI4SpcmypW6PMzgi4hDG_kDOKfcg';
	var staticMapUrl_centre = 'center=' + mapSetupData[1] + ',' + mapSetupData[2];
	var staticMapUrl_zoom = 'zoom=' + mapSetupData[3];
	var staticMapUrl_size = 'size=550x473';
	var staticMapMarkers = drawMarkers(xml); // function call draws markers, returns marker values for use in static map;
	var staticMapPaths = drawRoute(xml); // function call draws paths for route, returns path values for use in static map;

//	var staticMapUrl_complete = staticMapUrl_base + '&' + staticMapUrl_centre + '&' + staticMapUrl_zoom + '&' + staticMapUrl_size + '&' + staticMapMarkers + '&' + staticMapPaths;
	// below without explicit centre nor zoom specified...
	var staticMapUrl_complete = staticMapUrl_base + '&' + staticMapUrl_size + '&' + staticMapMarkers + '&' + staticMapPaths;
	return staticMapUrl_complete;
}

function drawMarkers(xml) {
	var myLat,myLng,myHTMLIdToLoad,myTooltip,myLatStr,myLngStr,myLatForStaticMap,myLngForStaticMap,myMarkerLabelForStaticMap;
	var markerLabels = new Array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');
	var markerDataForStaticMap = 'markers=';
	var markers = xml.documentElement.getElementsByTagName('marker');
	for (var i = 0; i < markers.length; i++) {
		myLatStr = markers[i].getAttribute('lat');
		myLngStr = markers[i].getAttribute('lng');
		myLat = parseFloat(myLatStr);
		myLng = parseFloat(myLngStr);
		myHTMLIdToLoad = markers[i].getAttribute('htmlidtoload');
		myLatForStaticMap = myLatStr.substring(0,myLatStr.indexOf('.') + 7);
		myLngForStaticMap = myLngStr.substring(0,myLngStr.indexOf('.') + 7);
		myTooltip = markers[i].getAttribute('tooltip');
		myMarkerLabelForStaticMap = markerLabels[i];
		if (myMarkerLabelForStaticMap.length > 0) {
			myMarkerLabelForStaticMap = ',' + myMarkerLabelForStaticMap;
		}
		markerDataForStaticMap = markerDataForStaticMap + myLatForStaticMap + ',' + myLngForStaticMap + myMarkerLabelForStaticMap + '|';
		initialiseMarker(myLat, myLng, myHTMLIdToLoad, myTooltip);
    }
    markerDataForStaticMap = markerDataForStaticMap.substring(0,markerDataForStaticMap.length - 1); //remove the last character from the string, as it's always going to be a trailing '|'
    return markerDataForStaticMap;
}

function drawRoute(xml) {
    var prevLat,prevLng,currentLat,currentLng,currentLntStr,currentLatStr,currentLatForStaticMap,currentLngForStaticMap,line;
    var pathInfo = xml.documentElement.getElementsByTagName('waypoints');
    pathColour = pathInfo[0].getAttribute('linecol'); // there will only be one element in this array (only one <waypoint> element in the xml).
    pathWeight = pathInfo[0].getAttribute('lineweight');
    var pathDataForStaticMap = 'path=rgb:0x' + pathColour + ',weight:' + pathWeight + '|';
    var waypoints = xml.documentElement.getElementsByTagName('waypoint');
	for (var i = 0; i < waypoints.length; i++) {
		currentLatStr = waypoints[i].getAttribute('lat');
		currentLat = parseFloat(currentLatStr);
		currentLngStr = waypoints[i].getAttribute('lng');
		currentLng = parseFloat(currentLngStr);
		// For static map, coords must be no more than 6 decimal places.
		currentLatForStaticMap = currentLatStr.substring(0,currentLatStr.indexOf('.') + 7);
		currentLngForStaticMap = currentLngStr.substring(0,currentLngStr.indexOf('.') + 7);
		pathDataForStaticMap = pathDataForStaticMap + currentLatForStaticMap + ',' + currentLngForStaticMap + '|';
		if (i > 0) {
			startLat = prevLat;
			startLng = prevLng;
			line = new GPolyline([  new GLatLng(startLat, startLng),  new GLatLng(currentLat, currentLng)], '#' + pathColour, pathWeight);
			map.addOverlay(line);
		}
		prevLat = currentLat;
		prevLng = currentLng;
	}
    pathDataForStaticMap = pathDataForStaticMap.substring(0,pathDataForStaticMap.length - 2); //remove the last character from the string, as it's always going to be a trailing '|'
	return pathDataForStaticMap;
}


function initialiseMarker(lat, lng, myNodeId, myTitle) {
	var myNode = document.getElementById(myNodeId);
	var ll = new google.maps.LatLng(lat, lng);
	var opts = { title: myTitle }
	var myMarker = new google.maps.Marker(ll, opts);
	var pointOneNode = document.getElementById('point1');
	if (myNodeId == 'point1') {
		google.maps.Event.addListener(myMarker, 'click', function() {
		    map.openInfoWindow(ll,pointOneNode);
		    $('#point1').removeClass('hidden');
		});
	    //	Open the info window for point 1 on map load
	    map.openInfoWindow(ll, pointOneNode);
	    $('#point1').removeClass('hidden');

	} else {
		google.maps.Event.addListener(myMarker, 'click', function() {
		    map.openInfoWindowTabs(ll, eval(myNodeId + 'Tabs'));
		    $('#' + myNodeId).removeClass('hidden');
		});
	}
	map.addOverlay(myMarker);
}

function generateStaticMapUrl(xml) {
	var staticMapUrl_base = 'http://maps.google.com/staticmap?';
}


function setupTabs() {
	// point1 doesn't have a tabbed window
	var point2Tab1 = new GInfoWindowTab('Point B',document.getElementById('point2tab1'));
	var point2Tab2 = new GInfoWindowTab('More info',document.getElementById('point2tab2'));
	var point3Tab1 = new GInfoWindowTab('Point C',document.getElementById('point3tab1'));
	var point3Tab2 = new GInfoWindowTab('More info',document.getElementById('point3tab2'));
	var point4Tab1 = new GInfoWindowTab('Point D',document.getElementById('point4tab1'));
	var point4Tab2 = new GInfoWindowTab('More info',document.getElementById('point4tab2'));
	var point5Tab1 = new GInfoWindowTab('Point E',document.getElementById('point5tab1'));
	var point5Tab2 = new GInfoWindowTab('More info',document.getElementById('point5tab2'));
	var point6Tab1 = new GInfoWindowTab('Point F',document.getElementById('point6tab1'));
	var point6Tab2 = new GInfoWindowTab('More info',document.getElementById('point6tab2'));
	var point7Tab1 = new GInfoWindowTab('Point G',document.getElementById('point7tab1'));
	var point7Tab2 = new GInfoWindowTab('More info',document.getElementById('point7tab2'));
	var point8Tab1 = new GInfoWindowTab('Point H',document.getElementById('point8tab1'));
	var point8Tab2 = new GInfoWindowTab('More info',document.getElementById('point8tab2'));
	var point9Tab1 = new GInfoWindowTab('Point I',document.getElementById('point9tab1'));
	var point9Tab2 = new GInfoWindowTab('More info',document.getElementById('point9tab2'));
	var point10Tab1 = new GInfoWindowTab('Point J',document.getElementById('point10tab1'));
	var point10Tab2 = new GInfoWindowTab('More info',document.getElementById('point10tab2'));
	var point11Tab1 = new GInfoWindowTab('Point K',document.getElementById('point11tab1'));
	var point11Tab2 = new GInfoWindowTab('More info',document.getElementById('point11tab2'));
	var point12Tab1 = new GInfoWindowTab('Point L',document.getElementById('point12tab1'));
	var point12Tab2 = new GInfoWindowTab('More info',document.getElementById('point12tab2'));
	point2Tabs = new Array(point2Tab1,point2Tab2);
	point3Tabs = new Array(point3Tab1,point3Tab2);
	point4Tabs = new Array(point4Tab1,point4Tab2);
	point5Tabs = new Array(point5Tab1,point5Tab2);
	point6Tabs = new Array(point6Tab1,point6Tab2);
	point7Tabs = new Array(point7Tab1,point7Tab2);
	point8Tabs = new Array(point8Tab1,point8Tab2);
	point9Tabs = new Array(point9Tab1,point9Tab2);
	point10Tabs = new Array(point10Tab1,point10Tab2);
	point11Tabs = new Array(point11Tab1,point11Tab2);
	point12Tabs = new Array(point12Tab1,point12Tab2);
}

function insertStaticMap(staticMapUrl) {
	var staticMapImageContainer = document.getElementById('printablemap');
	var staticMapImage = document.createElement('img');
	staticMapImage.setAttribute('src',staticMapUrl);
	staticMapImage.setAttribute('alt','Printable version of the Bloomsbury walk');
	staticMapImageContainer.appendChild(staticMapImage);
}

function insertInteractiveMap() {
	var intMapLi = document.createElement('li');
	var intMapA = document.createElement('a');
	var targetList = document.getElementById('tabnav');
	var intMapDiv = document.createElement('div');
	var intMapRightInner = document.getElementById('rightinner');

	intMapDiv.setAttribute('id','bloomsburywalk');
	intMapRightInner.insertBefore(intMapDiv,document.getElementById('printablemap'));
		
	intMapA.setAttribute('href','#bloomsburywalk');
	intMapA.appendChild(document.createTextNode('Map'));
	intMapLi.appendChild(intMapA);
	targetList.insertBefore(intMapLi,document.getElementById('item_audiofiles'));
	targetList.removeChild(document.getElementById('item_poi'));
	
}