//<![CDATA[

var map = new GMap( document.getElementById("map"));
map.addControl( new GLargeMapControl() );
//map.addControl( new GMapTypeControl() );
map.centerAndZoom( new GPoint(-95.3338623046875, 29.72145191669099),8);
//map.setMapType( _SATELLITE_TYPE );
var panel = document.getElementById( 'panel' );
var markerElementsLen;
var points;
var markers;
var infoHtmls;
var html = "";
// Open the info box for the specified marker.
function popup(i) {
    var zoomLevel = map.getZoomLevel();
    if (zoomLevel >= 8)
    {
      map.centerAndZoom(points[i], 7);
    }
    markers[i].openInfoWindowHtml(infoHtmls[i]);
    }
// This returns a function closure that calls popup() with the specified arg.
// These shenanigans are necessary because the API left out client-data.
function makePopupCaller( i ) {
    return function() { popup( i ); };
    }
// Concatenate the values in an element list.
function concatValues( elements ) {
    var values = '';
    for ( var i = 0; i < elements.length; ++i )
	{
	if ( values != '' )
	    values += ' ';
	values += elements[i].firstChild.nodeValue;
	}
    return values;
    }
// Set icon Properties
var icon = new GIcon();
    icon.image = "http://www.dghou.com/maps/markers/basket_marker.png";
    icon.shadow = "http://www.dghou.com/maps/markers/basket_marker_shadow.png";
    icon.iconSize = new GSize(20, 42);
    icon.shadowSize = new GSize(40, 42);
    icon.iconAnchor = new GPoint(10, 42);
    icon.infoWindowAnchor = new GPoint(5, 1);

// Fetch and parse the marker data.
var request = GXmlHttp.create();
request.open( 'GET', 'courses.xml', true );
request.onreadystatechange = function()
    {
    if ( request.readyState == 4 )
	{
	var xmlDoc = request.responseXML;
	var markerElements = xmlDoc.documentElement.getElementsByTagName( 'marker' );
	points = new Array(markerElements.length);
	markers = new Array( markerElements.length );
	infoHtmls = new Array( markerElements.length );
	for ( var i = 0; i < markerElements.length; ++i )
	    {
	    var lat = markerElements[i].getAttribute( 'lat' );
	    var lon = markerElements[i].getAttribute( 'lon' );
	    var name = concatValues( markerElements[i].getElementsByTagName( 'name' ) );
	    var town = concatValues( markerElements[i].getElementsByTagName( 'town' ) );
	    var baskets = concatValues( markerElements[i].getElementsByTagName( 'baskets' ) );
	    var public1 = concatValues( markerElements[i].getElementsByTagName( 'public' ) );
	    var divwidth = name.length * 8;

	    points[i] = new GPoint(parseFloat(lon),parseFloat(lat));
	    markers[i] = new GMarker(points[i],icon);
	    infoHtmls[i] = '<div style="width:'+divwidth+'px"><img src="markers/basket_marker.png" alt="" height="42" width="20" align="left" ><font class="coursename">&nbsp;'+name+'<br>&nbsp;'+baskets+'&nbsp;Baskets&nbsp;</font><br><font class="other_info"><i>'+public1+'</i></font><font size="-1"><br>'+town+'&nbsp;&nbsp;</font></div>';
	    GEvent.addListener( markers[i], 'click', makePopupCaller(i));
	   	map.addOverlay( markers[i] );
   		
   		
   		//GEvent.addListener( map, 'click', function() {
	   // map.centerAndZoom( new GPoint(parseFloat( lon ), parseFloat( lat )),7);
	   // });
   		
   		
	  //  GEvent.addListener( markers[i], 'click', function(oldZoomLevel, newZoomLevel){
	  //  var ZoomLevel = map.getZoomLevel();
      //  document.getElementById("message2").innerHTML = ZoomLevel;
      //  });
	    
	   // GEvent.addListener(map, 'zoom', function(oldZoomLevel, newZoomLevel) {
       //var ZoomLevel = map.getZoomLevel();
      //  document.getElementById("message2").innerHTML = ZoomLevel;
      //  });


	    var link = '<a href="javascript:popup( ' + i + ' )">';
	    var html =  link + name + '</a><br>';
	    panel.innerHTML += html;

	    }
	}
    };
request.send( null );
 
//]]>