var markerArray = new Array();
var htmlArray = new Array();
var trailArray = new Array();
var trailStateArray = new Array();
var theMap = null;
var icon = null;

function initMap() {
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map"));
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.setCenter(new GLatLng(43.6400, -79.3660), 13);
		map.setMapType(G_HYBRID_MAP);
		theMap = map;
		
		// Monitor the window resize event and let the map know when it occurs
		if (window.attachEvent) { window.attachEvent("onresize", setMapSize); }
		else { window.addEventListener("resize", setMapSize, false); }

		icon = new GIcon();
		icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
		icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
		icon.iconSize = new GSize(12, 20);
		icon.shadowSize = new GSize(22, 20);
		icon.iconAnchor = new GPoint(6, 20);
		icon.infoWindowAnchor = new GPoint(5, 1);

		loadMarkers(map, document.forms[0].elements[0].value);
		loadTrails(map);
	}
}

function loadMarkers(map, category) {
	
	document.getElementById("status").className = "show";
	
	//for(var i=0; i < markerArray.length; i++) {
	//	map.removeOverlay(markerArray[i]);
	//}
	map.clearOverlays();
	
	document.getElementById("resultList").innerHTML = "";
	
	GDownloadUrl("xml/markers.php?category="+category, function(data, responseCode) {		
		var xml = GXml.parse(data);
		var markers = xml.documentElement.getElementsByTagName("marker");

		for (var i = 0; i < markers.length; i++) {
			var id = markers[i].getAttribute("id");
			var name = markers[i].getAttribute("name");
			var sdesc = markers[i].getAttribute("sdesc");
			var link = markers[i].getAttribute("link");
			var lat = parseFloat(markers[i].getAttribute("lat"));
			var lng = parseFloat(markers[i].getAttribute("lng"));
			var point = new GLatLng(lat, lng);
			
			map.addOverlay(createMarker(point, id, name, sdesc, link));
		}
		document.getElementById("status").className = "hide";
	});
}

function createMarker(point, id, name, sdesc, link) {
	var marker = new GMarker(point, icon);
	var resultHtml = document.getElementById("resultList");
	
	var windowHtml = '<b><a href="' + link + '" class="info" target="_blank">' + name + '</a></b>';
	windowHtml += '<p class="info">' + sdesc + '</p>';
		
	GEvent.addListener(marker, "click", function() {
		onResultClick(id)
	});
	
	markerArray[id] = marker;
	htmlArray[id] = windowHtml;
	
	resultHtml.innerHTML += '<a href="javascript:onResultClick(' + id + ')">' + name + '</a><br/>';
	
	return marker;
}

function loadMarkerDetails(markerId) {
	
	GDownloadUrl("xml/marker_details.php?markerId="+markerId, function(data, responseCode) {
		var xml = GXml.parse(data);
		var markers = xml.documentElement.getElementsByTagName("marker");
		
		for (var i = 0; i < markers.length; i++) {
			var id = markers[i].getAttribute("id");
			var name = markers[i].getAttribute("name");
			var ldesc = markers[i].firstChild.nodeValue;
			var photo = markers[i].getAttribute("photo");
			var copyright = markers[i].getAttribute("copyright");
			var link = markers[i].getAttribute("link");
		}
		
		var detailHtml = '<h2>Location Details</h2>';
		detailHtml += '<h3><a href="' + link + '" target="_blank">' + name + '</a></h3>';
		if(photo != "") {
			detailHtml += '<img src="images/photos/' + photo + '" />';
			detailHtml += '<div id="copyright">' + copyright + '</div>';
		}
		detailHtml += ldesc;
		
		document.getElementById("markerDetail").innerHTML = detailHtml;
	});
	
}

function onResultClick(markerId) {
	markerArray[markerId].openInfoWindowHtml(htmlArray[markerId]);
	loadMarkerDetails(markerId);
	//document.getElementById("markerDetail").innerHTML = detailArray[markerId];
}

function loadTrails(map) {
	GDownloadUrl("xml/trails.php", function(data, responseCode) {
		var xml = GXml.parse(data);
		var trails = xml.documentElement.getElementsByTagName("trail");
		
		for (var i = 0; i < trails.length; i++) {
			map.addOverlay(createTrail(trails[i]));
		}
	});
}

function createTrail(trail) {
	var id = trail.getAttribute("id");
	var name = trail.getAttribute("name");
	var colour = trail.getAttribute("colour");
	var weight = trail.getAttribute("weight");
	var opacity = trail.getAttribute("opacity");
	var points = trail.getElementsByTagName("point");
	var pointArray = new Array();
	
	for (var i = 0; i < points.length; i++) {
		var lat = parseFloat(points[i].getAttribute("lat"));
		var lng = parseFloat(points[i].getAttribute("lng"));
		pointArray.push(new GLatLng(lat, lng));
	}
	
	var newTrail = new GPolyline(pointArray, colour, weight*1, opacity);
	trailArray[id] = newTrail;
	trailStateArray[id] = true;
		
	return newTrail;
}

function setMapSize() {
	var headerHeight = 175;
	var resultWidth = 430;
	
	document.getElementById("map").style.width = document.body.clientWidth - resultWidth + "px";
	document.getElementById("map").style.height = document.body.clientHeight - headerHeight + "px";
	//alert();
}

function toggleTrail(element) {
	var id = element.title;
	var checkbox = element.parentNode.parentNode.childNodes[1].firstChild;
	
	if(trailStateArray[id]) {
		theMap.removeOverlay(trailArray[id]);
		trailStateArray[id] = false;
		checkbox.checked = false;
	}
	else {
		theMap.addOverlay(trailArray[id]);
		trailStateArray[id] = true;
		checkbox.checked = true;
	}
}

function toggleTrailCheck(element) {
	var id = element.parentNode.parentNode.childNodes[2].firstChild.title;

	if(trailStateArray[id]) {
		theMap.removeOverlay(trailArray[id]);
		trailStateArray[id] = false;
	}
	else {
		theMap.addOverlay(trailArray[id]);
		trailStateArray[id] = true;
	}
}

var rules = {
	'a.toggleTrail' : function(element){
		element.onclick = function(){ toggleTrail(this); return false; }
	},
	'input.trailCheckbox' : function(element){
		element.onclick = function(){ toggleTrailCheck(this); }
	}
};

Behaviour.register(rules);
Behaviour.addLoadEvent(setMapSize); 
Behaviour.addLoadEvent(initMap);