var map;
var markerArray = new Array();

var titleNode;
var idNode;
var dropMarker;
var pathNode;
var longNode;
var latNode;

function loadImages()
{
	var myRequest = new Ajax.Request('image_list.php',
	{
		method:'get',
		onSuccess: function(transport){
		var responseXML = transport.responseXML;
		handleXML( responseXML );
		},
	});
}

function handleXML( xmlDoc )
{

	titleNode = xmlDoc.selectNodes( "/images/item/title/text()");
	idNode = xmlDoc.selectNodes( "/images/item/id/text()");
	pathNode = xmlDoc.selectNodes( "/images/item/img_path/text()");
	longNode = xmlDoc.selectNodes( "/images/item/long/text()");
	latNode = xmlDoc.selectNodes( "/images/item/lat/text()");
		
	for(var i=0; i<pathNode.length; i++)
	{
		new Insertion.Top('pics', "<img src=\"" + pathNode[i].nodeValue + "\"height=\"80\"width=\"100\" onmousedown=\"javascript:jumpPoint("+i+")\"/>");
		//console.log( pathNode[i].nodeValue );
		//console.log(titleNode[i].nodeValue + "<br/><img src=\"" + pathNode[i].nodeValue + "\"height=\"160 \"width=\"230\"/>"); "+i+"
		
	}
	
  
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        
        var dropPoint = new GMarker(0,0);
        
		
		GEvent.addListener(map, "click", function(marker, point) {
  			
  			//if (dropMarker != null) {
  				//map.removeOverlay(dropMarker);
  			
  			//var center = map.getCenter();
  			//document.getElementById("message").innerHTML = center.toString();
  			
  			var theForm = document.forms[0];
  			
  			var cstrings = point.toString().split(', ');
  			theForm.lat.value = cstrings[0].substr( 1, cstrings[0].length-1 );
  			theForm.long.value = cstrings[1].substr( 0, cstrings[1].length-1 );
		});
		
		/*
		GEvent.addListener(map, "click", function(marker, point) {
		  if (marker) {
		    map.removeOverlay(marker);
		  } else {
		    map.addOverlay(new GMarker(point));
		  }
		}); 
		*/

		// Center Map close to my place
		map.setCenter(new GLatLng(40.73083612189599, -73.98337125778198), 12);  
   		
   		// add large controls
		map.addControl( new GLargeMapControl() );

		// add map type controls
		map.addControl( new GMapTypeControl() );
		
		// Create new latlong from XML data
		
		
		//var markerArray = new Array(longNode.length);
		for(var i=0; i<longNode.length; i++)
		{
			markerArray[i] = new GLatLng( longNode[i].nodeValue, latNode[i].nodeValue );
		}
		
		for (i=0;i<=markerArray.length;i++)
		{
			map.addOverlay(createMarker(markerArray[i], titleNode[i].nodeValue, pathNode[i].nodeValue));
			
		}
		
		
		//console.log(titleNode[i].nodeValue + "<br/><img src=\"" + pathNode[i].nodeValue + "\"height=\"160 \"width=\"230\"/>");

		
      }

	function createMarker(point, title, path) {
  		var marker = new GMarker(point);
  		GEvent.addListener(marker, "click", function() {
   			//marker.openInfoWindowHtml("Marker #<b>" + number + "</b>");
   			marker.openInfoWindowHtml("<div id=\"window\">" + title + "<br/><img src=\"" + path + "\"height=\"120 \"width=\"160\"/></div>");
  		});
  		return marker;
	}
	
	
	
	//console.log( imageBgn );
}



	function jumpPoint(number){
	
		//map.clearOverlays();
		
		var marker = new GMarker(markerArray[number]);
		
		map.addOverlay(marker);
		marker.openInfoWindow("<div id=\"window\">"+ titleNode[number].nodeValue + "<br/><img src=\"" + pathNode[number].nodeValue + "\"height=\"120 \"width=\"160\"/></div>");
		map.removeOverlay(marker);

	}