// JavaScript Document
var markers;
var map;
var routePoints = new Array();
var desc;
var xmlDoc;
var file='http://www.ocprsa.org/_protosXMLMap.cfm';

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

function onLoad(){
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map_canvas"));
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl() ,new GControlPosition(G_ANCHOR_BOTTOM_RIGHT));
		map.addControl(new GScaleControl() ,new GControlPosition(G_ANCHOR_BOTTOM_LEFT));
		//map.setCenter(new GLatLng(33.46309585572432, -117.6716423034668), 2);
	
		if(file!=""){
			loadCords();
		}
	} else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
}

function createMarker(point, lat, lng, i, desc) {
	var x = i + 1;
	var tinyIcon = new GIcon();
	tinyIcon.image = "http://www.ocprsa.org/images/PROTOS/markers/marker" + x + ".png";
	//tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
	tinyIcon.iconSize = new GSize(20, 34);
	//tinyIcon.shadowSize = new GSize(22, 20);
	tinyIcon.iconAnchor = new GPoint(6, 20);
	tinyIcon.infoWindowAnchor = new GPoint(5, 1);

	if( i == 0 ){
		//map.setCenter(new GLatLng( lat, lng ));
		var marker = new GMarker(point, { icon:tinyIcon});
	}else {
		var marker = new GMarker(point, { icon:tinyIcon}); //G_END_ICON
	}
	
	GEvent.addListener(marker, "click", function() {
		if(desc){ marker.openInfoWindowHtml(desc) }
	});
	
	return marker;
}

function loadCords(){
	var request = GXmlHttp.create();
	request.open("GET", file, true);
	request.onreadystatechange = function() {
		if (request.readyState == 4) {
			xmlDoc = GXml.parse(request.responseText);
			markers = xmlDoc.documentElement.getElementsByTagName("marker");
			plotPoints();
		}
	}
	request.send(null);
}

function plotPoints(){

	for (var i=0; i < markers.length; i++ ) {



		var lat = parseFloat(markers[i].getAttribute("lat"));
		var lng = parseFloat(markers[i].getAttribute("lng"));
		desc = markers[i].getAttribute("address") + '<br/>' + '<img src="' + markers[i].getAttribute("photo") + '" width="300" height="200"  />' ;
		var point = new GLatLng(lat,lng);
		
			if( i%20==0 && i>0){
				routePoints.push(point);
				HandleDirections(routePoints);
				routePoints = new Array();
			}
		
		routePoints.push(point);
		
		//if( i==0 || i==markers.length -1 ){
		//	var marker = createMarker(point, lat, lng, i, desc);
		//	map.addOverlay(marker);
		//}
		var marker = createMarker(point,lat,lng,i,desc);
		map.addOverlay(marker);
		// Set map centered to last marker position.
		map.setCenter(new GLatLng(lat,lng), 2);	
	}
	
	HandleDirections(routePoints);

}

function HandleDirections(points) {
	var directions = new GDirections();
	GEvent.addListener(directions, "load", function() {
	var poly = directions.getPolyline();
		map.addOverlay(poly);
	});
	directions.loadFromWaypoints(points,{getPolyline:true});
}

window.onload = function(){
	onLoad();
}