var map;
var isLining = false;
var lastX = 0;
var lastY = 0;
var myLine = [];

arrPoints = [];
arrThumbs = [];
var request;
var gicons;


function load() {
	if (GBrowserIsCompatible()) {
	
		
		
		map = new GMap2(document.getElementById("map"), {draggableCursor:"crosshair"});
		
		// Add the small controls
		map.addControl(new GLargeMapControl());
		
		// Add the switcher between Satellite and Map
		map.addControl(new GMapTypeControl());
		
		GEvent.addListener(map, 'click', handleMapClick);
		map.setCenter(new GLatLng(43.68, -79.43),10);
		
		
		gicons = [];
		
		// Create a base icon
		var baseIcon = new GIcon(); 
		baseIcon.image = 'mm_20_blue.png';
		baseIcon.shadow = 'mm_20_shadow.png';
		baseIcon.iconSize = new GSize(12, 20);
		baseIcon.shadowSize = new GSize(22, 20);
		baseIcon.iconAnchor = new GPoint(6, 20);
		baseIcon.infoWindowAnchor = new GPoint(5, 1);

		
		
		var ic = new GIcon(baseIcon);  ic.image = "mm_20_blue.png";
		gicons["red"] = ic;
		var ic = new GIcon(baseIcon);  ic.image = "mm_20_red.png";
		gicons["blue"] = ic;
		var ic = new GIcon(baseIcon);  ic.image = "mm_20_green.png";
		gicons["green"] = ic;
		var ic = new GIcon(baseIcon);  ic.image = "mm_20_white.png";
		gicons["yellow"] = ic;
		var ic = new GIcon(baseIcon);  ic.image = "mm_20_purple.png";
		gicons["orange"] = ic;
		var ic = new GIcon(baseIcon);  ic.image = "mm_20_orange.png";
		gicons["purple"] = ic;
		var ic = new GIcon(baseIcon);  ic.image = "mm_20_yellow.png";
		gicons["pink"] = ic;


		
		
		// Load XML
		request = GXmlHttp.create();
		request.open("GET", "trafficcams.xml", true); // querystring array holds name/value pairs from querystring.
		
		request.onreadystatechange = requestHere;
		request.send(null);
	}
}

function requestHere()
{
	if (request.readyState == 4)
	{

		xml = request.responseXML;

		//
		//  MAP CODE ..........................
		//

		// get center point from meta info.

		
		for (var i = 0; i < xml.childNodes.length; i++) {
			var c1 = xml.childNodes[i];
			
			if (c1.nodeName == "mapData") {
				for (var j = 0; j < c1.childNodes.length; j++) {
					var c2 = c1.childNodes[j];
					
					if (c2.nodeName == "overlay") {
						for (var k = 0; k < c2.childNodes.length; k++) {
							var c3 = c2.childNodes[k];
							
							if (c3.nodeName == "location") {
								
								var p;
								var turl;
								var title;
								var region;
								
								
								for (var m = 0; m < c3.childNodes.length; m++) {
									var c4 = c3.childNodes[m];
									switch (c4.nodeName)
									{
										case "point": 	p = new GLatLng(parseFloat(c4.getAttribute("lat")), parseFloat(c4.getAttribute("lng"))); break;
										case "thumb":  turl = c4.getAttribute("url"); break;
										case "info":
										
											for (var n = 0; n < c4.childNodes.length; n++) {
												var c5 = c4.childNodes[n];
												switch (c5.nodeName)
												{
													case "title": 	title = c5.firstChild.nodeValue; break;
													case "region":  region = c5.firstChild.nodeValue; break;
												}
											}
											
											break;
										
									}
								}
								
								var ic;
								ic = gicons["pink"];
								switch (region) {
									case "DVP":
									case "Gardiner":  ic = gicons["blue"]; break;
									case "Lakeshore":  ic = gicons["green"]; break;
									case "Allen":  ic = gicons["yellow"]; break;
									case "401":  ic = gicons["red"]; break;
										
								
								}
								
								var m = new GMarker(p, {icon:ic});
								m.url = turl;
								m.title = title;
								m.region = region;
								
								map.addOverlay(m)
							}
							
						}
					} else if (c2.nodeName == "regions") {
						/*
						for (var k = 0; k < c2.childNodes.length; k++) {
							var c3 = c2.childNodes[k];
							
							if (c3.nodeName == "region")
							{
								var points = [];
								
								for (var m = 0; m < c3.childNodes.length; m++) {
									var c4 = c3.childNodes[m];
									
									if (c4.nodeName == "point") {
										points.push(new GPoint(parseFloat(c4.getAttribute("lon")), parseFloat(c4.getAttribute("lat"))));
									}
								}
								
								map.addOverlay(new GPolyline(points));				
								
					
							}
					
						}
						*/
					}
					
				}
				
			}
		}

	}
}

function handleMapClick(overlay, point) 
{

	if (overlay)
	{
		if (overlay.url != null)
		{
			var nHTML =    "<B STYLE=\"color:black;\">" + overlay.title + "</B><BR>"

			nHTML		+= "<IMG BORDER=0 SRC=\"" + overlay.url +"?rnd=" + Math.random() + "\" WIDTH=\"320\" HEIGHT=\"240\"><BR>";
		
			
			var infoTabs = [
			  new GInfoWindowTab("Camera", nHTML),
			];							
			
			overlay.openInfoWindowTabsHtml(infoTabs);			
		
		}
	}
	else if (point)
	{
		document.getElementById("temp").value = "<point lat=\"" + point.y + "\" lng=\"" + point.x + "\" />";	
	}
}