<script type="text/javascript">
/*
*********************************************
* Written By StePhan McKillen
* copyright 2010
* I would like to thanks are the guys at google
* for letting the world have some free stuff. 
* make the internet a beater place.
* and Esa's http://mapsapi.googlepages.com/categories.htm
* For point me down the right track
* also would like to thank
* the other user who help build this site in a round about way.
*/

var param_useSidebar = false; 
var mapHTMLS = [];
var Alatlng = [];
var mapMarkers =[];
var map;
var infowindowLevel = 0;
var marker;
var markers ;
var cm_openInfowindow;

function initialize(){
    var myLatlng = new google.maps.LatLng(-41.25, 172.50);
    var myOptions = 
    	{
      	zoom: 6,
      	center: myLatlng,
      	navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
      	mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
      	mapTypeId: google.maps.MapTypeId.TERRAIN
      	}
    	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    	downloadUrl("xml/POINTS.XML", function(data) 
    	{
      	markers = data.documentElement.getElementsByTagName("marker");
      	for (var i = 0; i < markers.length; i++)
      	 {
			var Nlat = parseFloat(markers[i].getAttribute("lat"));
			var Nlng = parseFloat(markers[i].getAttribute("lng"));
			Alatlng[i] = Nlat + ',' + Nlng;
			var MyIcon = 'images/' + markers[i].getAttribute("icon");
			//alert(MyIcon);
			var image = new google.maps.MarkerImage(MyIcon + '.png',
			// This marker is 20 pixels wide by 32 pixels tall.
			new google.maps.Size(20, 35),
			// The origin for this image is 0,0.
			new google.maps.Point(0,0),
			// The anchor for this image is the base of the flagpole at 0,32.
			new google.maps.Point(10, 32));
			var shadow = new google.maps.MarkerImage('images/shadow.png',
			// The shadow image is larger in the horizontal dimension
			// while the position and offset are the same as for the main image.
			new google.maps.Size(35, 32),
			new google.maps.Point(0,0),
			new google.maps.Point(5, 32));
			// Shapes define the clickable region of the icon.
			// The type defines an HTML &lt;area&gt; element 'poly' which
			// traces out a polygon as a series of X,Y points. The final
			// coordinate closes the poly by connecting to the first
			// coordinate.
			var shape = {coord: [1, 1, 1, 20, 18, 20, 18 , 1], type: 'poly'};
			var latlng = new google.maps.LatLng(Nlat,Nlng);
			marker = new google.maps.Marker({
				position: latlng, 
				map: map,
				icon: image,
				shadow: shadow,
				title: markers[i].getAttribute("Label") // + " : " +  markers[i].getAttribute("icon")
				});
				attachInfowindow(marker,1,i);
			if(param_useSidebar == true)
				{
				var Imgit = document.createElement("img");
				Imgit.setAttribute("src",MyIcon+'.png');
				Imgit.setAttribute("border",0);
				Imgit.setAttribute("height",15);
				Imgit.setAttribute("width",10);
				var markerA = document.createElement("a");
				markerA.setAttribute("href","javascript:cm_markerClicked('" + i +"')");
				markerA.setAttribute("title","click to see Info Window");
				markerA.style.color = "#000000";
				var sidebarText= "";
				sidebarText += markers[i].getAttribute("Label") ;
				markerA.appendChild(document.createTextNode(sidebarText));
				sidebarDIV.appendChild(Imgit);
				sidebarDIV.appendChild(markerA);
				sidebarDIV.appendChild(document.createElement("br"));
				} 

				// end sidebar      
				}
				});
				 }
			//end it


function attachInfowindow(marker, number,i) {
// Yes I did it the old fashin way as that the only way I know how to
// Try the the 
   var tableData = "<div id='content' style='width:330px;height:200px;'><table border=0 width='100%' height='100%'><tr><td class='iw-header' colspan='2'>[WHO]</td></tr><tr><td valign='top' >[PHOTO]</td><td valign='top'>[INFO]</td></tr><tr><td colspan='2' align='center' valign='bottom' >[DD]</td></tr></table></div>";
   var Photo = markers[i].getAttribute("photo");
   var whois = markers[i].getAttribute("Label");
   tableData = tableData.replace('[WHO]',whois);
   
   if (Photo||'')
   {
   
   tableData = tableData.replace('[PHOTO]',"<img class='corner ishadow20' border=1 src='images/photos/" + Photo +"' >" );
	}
	else
	{
	tableData = tableData.replace('[PHOTO]',"");
	}
   directions = "<center><a href='http://maps.google.com/maps?saddr=&daddr=[lat],[lng]' Target='_Blank' >Get Directions</a><br>[ID]</center>";
   
   var CC = markers[i].getAttribute("Pointit");
   
   if (CC||'')
   {
   var ID = "<font size='1'><A href='getit.asp?ID=[ID]&edit=1'>Edit Point</a></font>";
   }
   else
   {
   var ID = "";
   }

   var MyID = parseFloat(markers[i].getAttribute("ID"));
   ID = ID.replace('[ID]',MyID);
   directions = directions.replace('[ID]',ID);
   directions = directions.replace('[lat]',parseFloat(markers[i].getAttribute("lat")));
   directions = directions.replace('[lng]',parseFloat(markers[i].getAttribute("lng")));
   var CheckLenght = markers[i].getAttribute("Mess").length
   // alert(CheckLenght);
   //if CheckLenght>0 {
   var textArray = markers[i].getAttribute("Mess").replace(',',"<br />");
   // yes I know this is the lasvy way but I'm still leaning Javascript.
   textArray = textArray.replace(',',"<br />");
   textArray = textArray.replace(',',"<br />");
   textArray = textArray.replace(',',"<br />");
   textArray = textArray.replace(',',"<br />");
   textArray = textArray.replace(',',"<br />");
   textArray = textArray.replace(',',"<br />");
   textArray = textArray.replace(',',"<br />");
   textArray = textArray.replace(',',"<br />");
   textArray = textArray.replace(',',"<br />");
   // }
   // else
   // {
   // var textArray ="You can Put you own memorial here";
   // }
	tableData = tableData.replace('[INFO]','<p><font size=-1>' + textArray + '</font></p>');	
	tableData = tableData.replace('[DD]',directions);

      	mapHTMLS[i]= tableData;
      	mapMarkers[i] = marker;
    var infowindow = new google.maps.InfoWindow({content: mapHTMLS[i] });
    	google.maps.event.addListener(marker, 'click', function() {infowindow.setZIndex(++infowindowLevel);cm_markerClicked(i);});
}



function cm_markerClicked(markerNum)
	{
	var tt = Alatlng[markerNum].split(",");
	var NewCenter = new google.maps.LatLng(parseFloat(tt[0]),parseFloat(tt[1]));
	map.panTo(NewCenter); 
	var infowindowOptions = {content: mapHTMLS[markerNum]}
	var infowindow = new google.maps.InfoWindow(infowindowOptions);
	infowindow.open(map, mapMarkers[markerNum]);
	cm_setInfowindow(infowindow);   
	}
	
function cm_setInfowindow(newInfowindow)
	{
  	if (cm_openInfowindow != undefined) {cm_openInfowindow.close();}
  	cm_openInfowindow = newInfowindow;
	}

function createElem(opt_className, opt_html, opt_tagName) {
	var tag = opt_tagName||"div";
	var elem = document.createElement(tag);
  		if (opt_html) elem.innerHTML = opt_html;
  		if (opt_className) elem.className = opt_className;
  return elem;
}
</script>

  <?xml version="1.0" encoding="UTF-8" ?> 
- <markers>
  <marker lat="-39.0337199577664" lng="174.153184890747" ID="100" icon="2004" Pointit="OK" photo="" Label="" Mess="bell block black spot" /> 
  <marker lat="-39.0301196227599" lng="174.165351390838" ID="46" icon="2009" Pointit="OK" photo="" Label="" Mess="overturned car mangatoki stream" /> 
  </markers>

/**
* Returns an XMLHttp instance to use for asynchronous
* downloading. This method will never throw an exception, but will
* return NULL if the browser does not support XmlHttp for any reason.
* @return {XMLHttpRequest|Null}
*/
function createXmlHttpRequest() {
 try {
   if (typeof ActiveXObject != 'undefined') {
     return new ActiveXObject('Microsoft.XMLHTTP');
   } else if (window["XMLHttpRequest"]) {
     return new XMLHttpRequest();
   }
 } catch (e) {
   changeStatus(e);
 }
 return null;
};

/**
* This functions wraps XMLHttpRequest open/send function.
* It lets you specify a URL and will call the callback if
* it gets a status code of 200.
* @param {String} url The URL to retrieve
* @param {Function} callback The function to call once retrieved.
*/
function downloadUrl(url, callback) {
 var status = -1;
 var request = createXmlHttpRequest();
 if (!request) {
   return false;
 }

 request.onreadystatechange = function() {
   if (request.readyState == 4) {
     try {
       status = request.status;
     } catch (e) {
       // Usually indicates request timed out in FF.
     }
     if (status == 200) {
       callback(request.responseXML, request.status);
       request.onreadystatechange = function() {};
     }
   }
 }
 request.open('GET', url, true);
 try {
   request.send(null);
 } catch (e) {
   changeStatus(e);
 }
};

/**
 * Parses the given XML string and returns the parsed document in a
 * DOM data structure. This function will return an empty DOM node if
 * XML parsing is not supported in this browser.
 * @param {string} str XML string.
 * @return {Element|Document} DOM.
 */
function xmlParse(str) {
  if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }

  if (typeof DOMParser != 'undefined') {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }

  return createElement('div', null);
}

/**
 * Appends a JavaScript file to the page.
 * @param {string} url
 */
function downloadScript(url) {
  var script = document.createElement('script');
  script.src = url;
  document.body.appendChild(script);
}