// Alan Rogers Travel Service GMaps JavaScript


//<![CDATA[
function plotCampsites()
{
	if (GBrowserIsCompatible())
	{
		var map = new GMap2(document.getElementById("map"));
		map.setCenter(new GLatLng(setLat,setLng), zoomLevel);
		//map.setUIToDefault();
		map.setMapType(G_PHYSICAL_MAP);


		// Create our "tiny" marker icon
		var tinyIcon = new GIcon();
		tinyIcon.image = "http://travel.alanrogers.com/lib/img/layout/icons/campsite.png";
		//tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
		tinyIcon.iconSize = new GSize(32, 37);
		//tinyIcon.shadowSize = new GSize(22, 20);
		tinyIcon.iconAnchor = new GPoint(16, 37);
		tinyIcon.infoWindowAnchor = new GPoint(5, 1);
		// Set up our GMarkerOptions object literal
		markerOptions = { icon:tinyIcon };

		// Creates a marker at the given point with the given number label
		function createMarker(point, RegionName, URL)
		{
			var marker = new GMarker(point, markerOptions);
			GEvent.addListener(marker, "click", function() 
			{
				$(".map").animate({height:'298px'},{queue:true,duration:500});
				map.setUIToDefault();
				document.getElementById("expandMapBtn").src = "http://travel.alanrogers.com/lib/img/layout/reduce-map.gif";
				
				marker.openInfoWindowHtml(	"<div style=\"width: 450px;\">"+
														"<p style=\"font-family:'Lucida Sans Unicode', 'Lucida Grande', Tahoma, Helvetica, sans-serif; font-size:15px;border-bottom:1px dotted #DDD; margin:0 15px 0 10px;padding:0 0 2px 0;\" align=\"left\">"+
															"<a style=\"font-size:15px;color:#9CCA4D;text-decoration:none;font-weight:normal;letter-spacing:0px;\" href=\"" + URL + "/\">" + RegionName + "</a>"+
														"</p>"+
														"<p style=\"font-family:'Lucida Sans Unicode', 'Lucida Grande', Tahoma, Helvetica, sans-serif; font-size:11px;color:#747474; margin:0 15px 0 10px;padding:0 0 0 0;\">"+
															"<a style=\"font-size:12px;color:#9CCA4D;font-weight:normal;letter-spacing:0px;\" href=\"" + URL + "/\">Camping Holidays in " + RegionName + " &raquo;</a>"+
														"</p>"+
													"</div>");
			});
			return marker;
			
		}

		// Download the data in data.xml and load it on the map. The format we
		// expect is:
		// <markers>
		//   <marker lat="37.441" lng="-122.141"/>
		//   <marker lat="37.322" lng="-121.213"/>
		// </markers>
		GDownloadUrl("http://travel.alanrogers.com/lib/inc/region-gps.php", function(data, responseCode)
		{
			var xml = GXml.parse(data);
			var markers = xml.documentElement.getElementsByTagName("marker");
			for (var i = 0; i < markers.length; i++)
			{
				var point = new GLatLng
				(
					parseFloat(markers[i].getAttribute("lat")),
					parseFloat(markers[i].getAttribute("lng"))
				);
				var RegionName = markers[i].getAttribute("RegionName");
				var URL = markers[i].getAttribute("URL");

				map.addOverlay(createMarker(point, RegionName, URL));
			}
		});
	}
}
//]]>


function expandMap() {
	if (document.getElementById("map").style.height == "298px")
	{
		//document.getElementById("map").style.height = "170px";
		$(".map").animate({height:'170px'},{queue:true,duration:500});
		document.getElementById("expandMapBtn").src = "http://travel.alanrogers.com/lib/img/layout/expand-map.gif";
		  if (GBrowserIsCompatible())
			{
				var map = new GMap2(document.getElementById("map"));
				map.setCenter(new GLatLng(setLat,setLng), zoomLevel);
				//map.setUIToDefault();
				map.setMapType(G_PHYSICAL_MAP);
		
				// Create our "tiny" marker icon
				var tinyIcon = new GIcon();
				tinyIcon.image = "http://travel.alanrogers.com/lib/img/layout/icons/campsite.png";
				//tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
				tinyIcon.iconSize = new GSize(32, 37);
				//tinyIcon.shadowSize = new GSize(22, 20);
				tinyIcon.iconAnchor = new GPoint(16, 37);
				tinyIcon.infoWindowAnchor = new GPoint(5, 1);
				// Set up our GMarkerOptions object literal
				markerOptions = { icon:tinyIcon };
		
				// Creates a marker at the given point with the given number label
				function createMarker(point, RegionName, URL)
				{
					var marker = new GMarker(point, markerOptions);
					GEvent.addListener(marker, "click", function() 
					{
				marker.openInfoWindowHtml(	"<div style=\"width: 450px;\">"+
														"<p style=\"font-family:'Lucida Sans Unicode', 'Lucida Grande', Tahoma, Helvetica, sans-serif; font-size:15px;border-bottom:1px dotted #DDD; margin:0 15px 0 10px;padding:0 0 2px 0;\" align=\"left\">"+
															"<a style=\"font-size:15px;color:#9CCA4D;text-decoration:none;font-weight:normal;letter-spacing:0px;\" href=\"" + URL + "/\">" + RegionName + "</a>"+
														"</p>"+
														"<p style=\"font-family:'Lucida Sans Unicode', 'Lucida Grande', Tahoma, Helvetica, sans-serif; font-size:11px;color:#747474; margin:0 15px 0 10px;padding:0 0 0 0;\">"+
															"<a style=\"font-size:12px;color:#9CCA4D;font-weight:normal;letter-spacing:0px;\" href=\"" + URL + "/\">Camping Holidays in " + RegionName + " &raquo;</a>"+
														"</p>"+
													"</div>");
					});
					return marker;
				}
		
				// Download the data in data.xml and load it on the map. The format we
				// expect is:
				// <markers>
				//   <marker lat="37.441" lng="-122.141"/>
				//   <marker lat="37.322" lng="-121.213"/>
				// </markers>
				GDownloadUrl("http://travel.alanrogers.com/lib/inc/region-gps.php", function(data, responseCode)
				{
					var xml = GXml.parse(data);
					var markers = xml.documentElement.getElementsByTagName("marker");
					for (var i = 0; i < markers.length; i++)
					{
						var point = new GLatLng
						(
							parseFloat(markers[i].getAttribute("lat")),
							parseFloat(markers[i].getAttribute("lng"))
						);
						var RegionName = markers[i].getAttribute("RegionName");
						var URL = markers[i].getAttribute("URL");
		
						map.addOverlay(createMarker(point, RegionName, URL));
					}
				});
			}
			}
			else
			{
		//document.getElementById("map").style.height = "298px";
		$(".map").animate({height:'298px'},{queue:true,duration:500});
		document.getElementById("expandMapBtn").src = "http://travel.alanrogers.com/lib/img/layout/reduce-map.gif";
		  if (GBrowserIsCompatible())
			{
				var map = new GMap2(document.getElementById("map"));
				map.setCenter(new GLatLng(setLat,setLng), zoomLevel);
				map.setUIToDefault();
				map.setMapType(G_PHYSICAL_MAP);
		
				// Create our "tiny" marker icon
				var tinyIcon = new GIcon();
				tinyIcon.image = "http://travel.alanrogers.com/lib/img/layout/icons/campsite.png";
				//tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
				tinyIcon.iconSize = new GSize(32, 37);
				//tinyIcon.shadowSize = new GSize(22, 20);
				tinyIcon.iconAnchor = new GPoint(16, 37);
				tinyIcon.infoWindowAnchor = new GPoint(5, 1);
				// Set up our GMarkerOptions object literal
				markerOptions = { icon:tinyIcon };
		
				// Creates a marker at the given point with the given number label
				function createMarker(point, RegionName, URL)
				{
					var marker = new GMarker(point, markerOptions);
					GEvent.addListener(marker, "click", function() 
					{
				marker.openInfoWindowHtml(	"<div style=\"width: 450px;\">"+
														"<p style=\"font-family:'Lucida Sans Unicode', 'Lucida Grande', Tahoma, Helvetica, sans-serif; font-size:15px;border-bottom:1px dotted #DDD; margin:0 15px 0 10px;padding:0 0 2px 0;\" align=\"left\">"+
															"<a style=\"font-size:15px;color:#9CCA4D;text-decoration:none;font-weight:normal;letter-spacing:0px;\" href=\"" + URL + "/\">" + RegionName + "</a>"+
														"</p>"+
														"<p style=\"font-family:'Lucida Sans Unicode', 'Lucida Grande', Tahoma, Helvetica, sans-serif; font-size:11px;color:#747474; margin:0 15px 0 10px;padding:0 0 0 0;\">"+
															"<a style=\"font-size:12px;color:#9CCA4D;font-weight:normal;letter-spacing:0px;\" href=\"" + URL + "/\">Camping Holidays in " + RegionName + " &raquo;</a>"+
														"</p>"+
													"</div>");
					});
					return marker;
				}
		
				// Download the data in data.xml and load it on the map. The format we
				// expect is:
				// <markers>
				//   <marker lat="37.441" lng="-122.141"/>
				//   <marker lat="37.322" lng="-121.213"/>
				// </markers>
				GDownloadUrl("http://travel.alanrogers.com/lib/inc/region-gps.php", function(data, responseCode)
				{
					var xml = GXml.parse(data);
					var markers = xml.documentElement.getElementsByTagName("marker");
					for (var i = 0; i < markers.length; i++)
					{
						var point = new GLatLng
						(
							parseFloat(markers[i].getAttribute("lat")),
							parseFloat(markers[i].getAttribute("lng"))
						);
						var RegionName = markers[i].getAttribute("RegionName");
						var URL = markers[i].getAttribute("URL");
		
						map.addOverlay(createMarker(point, RegionName, URL));
					}
				});
			}
	}
}