//<![CDATA[

    var map = null;
	var baseIcon = null;
	var icon = null;
	var cicon = null;
	var clusterer = null;
	var gmarkerid = 0;

	function createWindow(cUrl,cWidth,cHeight) {
		var xWin = window.open(cUrl,'flash','menubar=no,location=no,scrollbars=no,status=no,toolbar=no,width=460,height=460');
		xWin.focus();
//		xWin.resizeTo(cHeight,cWidth);
//		xWin.moveTo(600,200);
	}

	function createMarker(point, gid, comment, thumbW, thumbH) {
	  var marker = new GMarker(point, icon);
	  marker.id = gmarkerid;
	  gmarkerid++;
	  //marker.action = "ew.openOnMarker(marker,\"<div style=\\\"background:#FFFFFF; width:\" + (thumbW + 0) + \"px; height:\" + (thumbH + 14) + \"px; padding:2px; font-size:10px; text-align:center; \\\" onClick=\\\"createWindow('http://mcolg.net/gallery_logo.php?id=\" + gid + \"','\" + ((thumbW * 3.75) + 25) + \"','\" + ((thumbH * 3.75) + 25) + \"');\\\"><img src=\\\"http://mcolg.net/gallery_thumb.php?id=\" + gid + \"\\\" width=\" + thumbW + \" height=\" + thumbH + \" ><br>\" + comment + \"</div>\")";
	  GEvent.addListener(marker, "click", function() {
//	    marker.openInfoWindowHtml("<div style=\"background:#FFFFFF; width:200px; height:" + (thumbH + 0) + "px; padding:0px; font-size:12px; text-align:center;\"><img src=\"gallery_thumb.php?id=" + gid + "\" width=" + thumbW + " height=" + thumbH + " ><br>" + comment + "</div>");
//	    marker.openInfoWindowHtml("<div style=\"background:#FFFFFF; font-size:12px; text-align:center;\"><img src=\"http://mcolg.net/gallery_thumb.php?id=" + gid + "\" width=" + thumbW + " height=" + thumbH + " ><br>" + comment + "</div>", {maxWidth:100} );
//        ew.openOnMarker(marker,"<div style=\"background:#FFFFFF; font-size:12px; text-align:center;\"><img src=\"http://mcolg.net/gallery_thumb.php?id=" + gid + "\" width=" + thumbW + " height=" + thumbH + " ><br>" + comment + "</div>");
		if (comment.length >= thumbW/5)
			comment = comment.slice(0,thumbW/5) + "...";
        ew.openOnMarker(marker,"<div style=\"background:#FFFFFF; margin:0px 0px 0px 0px; width:" + (thumbW + 0) + "px; height:" + (thumbH + 14) + "px; padding:2px; font-family:serif; font-size:10px; color:#000000; text-align:center; \" onClick=\"createWindow('http://mcolg.net/gallery_logo.php?id=" + gid + "','" + ((thumbW * 3.75) + 25) + "','" + ((thumbH * 3.75) + 25) + "');\"><img src=\"http://mcolg.net/gallery_thumb.php?id=" + gid + "\" width=" + thumbW + " height=" + thumbH + " ><br>" + comment + "</div>");
	  });
	  return marker;
	}
	
    function load() {
      if (GBrowserIsCompatible()) {

	  	var mapobj = document.getElementById("mapdiv");
		map = new GMap2(mapobj);
		map.addControl(new GLargeMapControl ());
		map.addControl(new GMapTypeControl());
		map.enableContinuousZoom();
		map.enableDoubleClickZoom();
	    //map.setCenter(new GLatLng(39.385629, -76.507223), 13); // 21236
	    map.setCenter(new GLatLng(39.15, -76.85), 10); // Baltimore Washington
				
		// need an if-set, otherwise "","" defaults to Equator/PrimeMeridian
		// g_location = [lat:long:altitude:compass:] or [null], colon denotes set
		// a_location
		// alter table gallery add column g_location tinytext;
		baseIcon = new GIcon();

		baseIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
		baseIcon.shadow = "http://labs.google.com/ridefinder/images/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);
		baseIcon.infoShadowAnchor = new GPoint(18, 25); 

		icon = new GIcon(baseIcon);
		//icon.image = "png/icon46.png";

		baseIcon.image = "http://labs.google.com/ridefinder/images/mm_20_green.png";
		cicon = new GIcon(baseIcon);
		
		clusterer = new Clusterer(map);
		clusterer.SetIcon(cicon);
		clusterer.SetGrid(20); 					// default 5, larger grid means more grouping
		clusterer.SetMaxVisibleMarkers(150);	// lets you change the threshold marker count where clustering kicks in. The default is 150 markers.
		clusterer.SetMinMarkersPerCluster(2);	// sets the minumum number of markers for a cluster. The default is five.
		clusterer.SetMaxLinesPerInfoBox(10);	// sets the maximum number of lines in an info box. The default is ten, but if your map is small this may be too many. 
		
//		var point = new GLatLng("39.385","-76.507");
//		map.addOverlay(new GMarker(point, icon));
		
      // read the markers from the XML
      GDownloadUrl("dev_gallery_map_xml.php", function (doc) {
        var xmlDoc = GXml.parse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
         
        for (var i = 0; i < markers.length; i++) {
          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new GLatLng(lat,lng);
          var gid = markers[i].getAttribute("id");
          var comment = markers[i].getAttribute("comment").replace('%', '\'');
          var thumbW = parseInt(markers[i].getAttribute("thumbW"));
          var thumbH = parseInt(markers[i].getAttribute("thumbH"));
		  //map.addOverlay(createMarker(point, gid, comment, thumbW, thumbH));
		  clusterer.AddMarker(createMarker(point, gid, comment, thumbW, thumbH), comment)
          //var marker = createMarker(point,comment,comment,icon);
          //gmarkersA.push(marker);
        }
	  })

      // Create an EWindow
      ew = new EWindow(map, E_STYLE_7);      
      map.addOverlay(ew);

      // This function just makes a pretty table for the EWindow contents
      // With a close icon
      function pretty(a,b) {
        return '<table border="0" cellpadding="0" cellspacing="0"><tr><td width="100%" class="EWTitle" nowrap>' + a +
               '<a href="javascript:ew.hide()"><img width="14" height="13" title="Close the EWindow" src="eclose.gif" border=0 style="position:absolute;right:4px;top:4px"></a>' +
               '</td></tr>' +
               '<tr><td nowrap>' + b + '</td></tr></table>';
      }


	  //map.addOverlay(createMarker(new GLatLng("39.387","-76.505"), "123", "my comment and notes"));
//      var point = new GLatLng(39.387,-76.505);
//      var html = pretty('123','my comment and notes'); 
//      var marker = createMarker(point,'123',html,120,80);
//      map.addOverlay(marker);
      
      
      // ========== Close the EWindow if theres a map click ==========
      GEvent.addListener(map, "click", function(marker,point) {
        if (point) {
          ew.hide();
        }
      });

	map.enableScrollWheelZoom();
//	GMap2.prototype.wheelZoom = function(event){
//		if(event.cancelable) event.preventDefault();
//		if((event.detail || -event.wheelDelta) < 0) {map.zoomIn();} else {map.zoomOut();} return false; 
//	}
//	GEvent.addDomListener(mapobj, "DOMMouseScroll", map.wheelZoom);
//	GEvent.addDomListener(mapobj, "mousewheel", map.wheelZoom); 

	  }
    }
	
    //]]>