//<![CDATA[

    if (GBrowserIsCompatible()) {

 //initial varables
      var sidebar_html = "";
      // arrays to hold copies of the markers and html used by the sidebar
      var gmarkers = [];
      var htmls = [];
      var i = 0;
      var m_zoom = 2;
      var m_lat = "26.855397534051676";
      var m_lon = "-1.3462677001953125";
      var switch_mark = "false";

//icons
 	   // Create new Icons
	   var red_icon = new GIcon();
	   red_icon.image = "markers/marker.png";
	   red_icon.shadow = "markers/shadow50.png";
	   red_icon.iconSize = new GSize(20, 34);
	   red_icon.shadowSize = new GSize(37, 34);
	   red_icon.iconAnchor = new GPoint(10, 34);
	   red_icon.infoWindowAnchor = new GPoint(10, 1);

	   var green_icon = new GIcon();
	   green_icon.image = "markers/marker_green.png";
	   green_icon.shadow = "markers/shadow50.png";
	   green_icon.iconSize = new GSize(20, 34);
	   green_icon.shadowSize = new GSize(37, 34);
	   green_icon.iconAnchor = new GPoint(10, 34);
	   green_icon.infoWindowAnchor = new GPoint(10, 1);

	   var blue_icon = new GIcon();
	   blue_icon.image = "markers/marker_blue.png";
	   blue_icon.shadow = "markers/shadow50.png";
	   blue_icon.iconSize = new GSize(20, 34);
	   blue_icon.shadowSize = new GSize(37, 34);
	   blue_icon.iconAnchor = new GPoint(10, 34);
	   blue_icon.infoWindowAnchor = new GPoint(10, 1);

	   // An array of icons, to make the selection easier
	   var icons = [];
	   icons[0] = red_icon;
	   icons[1] = green_icon;

//map
      // create the map
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(m_lat,m_lon), m_zoom);


	 //add lat, long coordinates and zoom level to bottom left corner
	 GEvent.addListener(map, "moveend", function() {
	  	var center = map.getCenter();
	  	var zoom = map.getZoom();
	  	var zoomStr = 'Zoom level = ' + zoom.toString();
	  	var centerZoom = '<strong>Map Info:</strong> Location:'+center +', '+zoomStr;
	  	document.getElementById("message").innerHTML = centerZoom.toString();
	  	if (zoom < 4) {

	  	}
	  });






//markers and tooltips - uses icon array and xml arrays
      // A function to create the marker and set up the event window
      function createMarker(point,name,html,icontype) {
        var marker = new GMarker(point,icons[icontype]);
        marker.type=icontype;
        // === store the name so that the tooltip function can use it ===
        marker.tooltip = '<div class="tooltip">'+name+'</div>';
        // info window
        GEvent.addListener(marker, "click", function() {
		if (html != "") {
		  marker.openInfoWindowHtml(html);}
        });
        gmarkers[i] = marker;
        htmls[i] = html;
        //sidebar_html += '<a href="javascript:myclick(' + i + ')" onmouseover="mymouseover('+i+')" onmouseout="mymouseout()">' + name + '</a><br>';
        i++;
        map.addOverlay(marker);

        //  ======  The new marker "mouseover" and "mouseout" listeners  ======
        GEvent.addListener(marker,"mouseover", function() {
          showTooltip(marker);
        });
        GEvent.addListener(marker,"mouseout", function() {
		tooltip.style.visibility="hidden"
        });
      }

      // ====== This function displays the tooltip ======
      // it can be called from an icon mousover or a sidebar mouseover
      function showTooltip(marker) {
	   tooltip.innerHTML = marker.tooltip;
	   var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.getBounds().getSouthWest(),map.getZoom());
	   var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
	   var anchor=marker.getIcon().iconAnchor;
	   var width=marker.getIcon().iconSize.width;
	   var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(offset.x - point.x - anchor.x + width,- offset.y + point.y +anchor.y));
	   pos.apply(tooltip);
	   tooltip.style.visibility="visible";
      }

      // ===== This function is invoked when the mouse goes over an entry in the sidebar =====
      // It launches the tooltip on the icon
      function mymouseover(i) {
        showTooltip(gmarkers[i])
      }
      // ===== This function is invoked when the mouse leaves an entry in the sidebar =====
      // It hides the tooltip
      function mymouseout() {
	tooltip.style.visibility="hidden";
      }

      // ====== set up marker mouseover tooltip div ======
      var tooltip = document.createElement("div");
      document.getElementById("map").appendChild(tooltip);
      tooltip.style.visibility="hidden";

//change zooms
	   function changeZoom(m_lat,m_lon,m_zoom) {
	    map.setCenter(new GLatLng(m_lat,m_lon), m_zoom);
	   }

//remove markers
	   function removeMarkers() {
	   switch_mark="true";
		for (var i=0;i<gmarkers.length;i++) {
		  if (gmarkers[i].type==1)  {
		    map.removeOverlay(gmarkers[i]);
		  }
		}
	   }

//add markers
	   function addMarkers() {
		if (switch_mark=="true"){
			switch_mark = "false";
			for (var i=0;i<gmarkers.length;i++) {
			  if (gmarkers[i].type==1)  {
			    map.addOverlay(gmarkers[i]);
			  }
			}
		}
	   }

//side menus
	  function flipMenu(menu) {
		var triClosed = 'closedTri'+menu;
		var triOpened = 'openedTri'+menu;
		var sidebar = menu + 'SideBar';

		var closedState = document.getElementById(triClosed).style.display;
		var menuState = "";
		(closedState == "inline")? menuState = "closed":menuState="open";

		//close menu
		if (menuState == "open") {
			document.getElementById(triClosed).style.display = 'inline';
			document.getElementById(triOpened).style.display = 'none';
			document.getElementById(sidebar).style.display = 'none';
		}
		else if (menuState == "closed") {
			document.getElementById(triClosed).style.display = 'none';
			document.getElementById(triOpened).style.display = 'inline';
			document.getElementById(sidebar).style.display = 'inline';
		}
	}


//info windows
      // This function picks up the sidebar click and opens the corresponding info window
      function myclick(i,lat,lng) {
      		if (htmls[i] != "") {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
		map.panTo(new GLatLng(lat, lng));}
      }


	  //write html for info window
	  function getHTML(area_name,country,photo_url,photo_name) {
		var html = '<div class="infowindow">';
		html += '<span class="infoName">'+area_name+'</span>';
		html += '<span class="infoCountry">'+country+'</span>';
		 for (j=0; j < photo_url.length; j++) {
			 if(photo_url[j]) {
				 html += '<span class="infoURL"><a href="'+photo_url[j]+'" title="'+photo_name[j]+'" target="_emsRest">'+photo_name[j]+'</a></span>';
			 }
		 }
		html += '</div>';
		return html;
	  }


//XML
      // Read the data from example.xml
      var request = GXmlHttp.create();
      request.open("GET", "climbing-areas.xml", true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = request.responseXML;
          // obtain the array of markers and loop through it
          var markers = xmlDoc.documentElement.getElementsByTagName("marker");
		var photo_url = [];
		var photo_name = [];
		var photoList = [];
		var areaList = [];
		var jM=0;
		var curMark = 0;
		var type= ""

          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 area = GXml.value(markers[i].getElementsByTagName("area-name")[0]);
            var state = GXml.value(markers[i].getElementsByTagName("state")[0]);
            //var area_name = area+", "+state;
            var country = GXml.value(markers[i].getElementsByTagName("country")[0]);
            photo_url[0] = GXml.value(markers[i].getElementsByTagName("photo-url1")[0]);
            photo_name[0] = GXml.value(markers[i].getElementsByTagName("photo-name1")[0]);
            photo_url[1] = GXml.value(markers[i].getElementsByTagName("photo-url2")[0]);
            photo_name[1] = GXml.value(markers[i].getElementsByTagName("photo-name2")[0]);
            photo_url[2] = GXml.value(markers[i].getElementsByTagName("photo-url3")[0]);
            photo_name[2] = GXml.value(markers[i].getElementsByTagName("photo-name3")[0]);
            photo_url[3] = GXml.value(markers[i].getElementsByTagName("photo-url4")[0]);
            photo_name[3] = GXml.value(markers[i].getElementsByTagName("photo-name4")[0]);
            var icontype = parseInt(markers[i].getAttribute("icontype"));

		  if (country=="USA"){
		  	var area_name = area+", "+state;
		  }
		  else if (country!="USA"){
		  	var area_name = area+", "+country;
		  }
		  
		  //passes aquired xml data through getHTML function and places them in variable called html
            var html = getHTML(area_name,country,photo_url,photo_name);


  //creates list of types of activities by creating multi-demensional pie

  if (icontype == "0") {

  				jM = photoList.length;
  			     photoList[jM] = new Array();
  				photoList[jM][0] = country;
  				photoList[jM][1] = state;
  				photoList[jM][2] = area;
  				photoList[jM][3] = area_name;
  				photoList[jM][4] = lat;
  				photoList[jM][5] = lng;
  				photoList[jM][6] = curMark;
  				icontype = 0;

  			}

  			 if (icontype == "1") {

  				jM = areaList.length;
  			    areaList[jM] = new Array();
  				areaList[jM][0] = country;
  				areaList[jM][1] = state;
  				areaList[jM][2] = area;
  				areaList[jM][3] = area_name;
  				areaList[jM][4] = lat;
  				areaList[jM][5] = lng;
  				areaList[jM][6] = curMark;
  				icontype = 1;

  			}
  			//photoList[jM][7] = type;
			curMark++;




  // create the marker
            var marker = createMarker(point,area_name,html,icontype);
          }


//sort them and reverse them
		 	photoList.sort();
			areaList.sort();
			photoList.reverse();
			areaList.reverse();


		//write sidebar html
		//alert(subTypeArray[0]);
		  var photo_html = '<h2><span id="closedTriphoto"><a href="javascript:flipMenu(\'photo\')">Areas with Photos&nbsp;<img src="images/homepage_closedtriangle.gif"></a></span>\n<span id="openedTriphoto"><a href="javascript:flipMenu(\'photo\')">Areas with Photos&nbsp;<img src="images/homepage_openedtriangle.gif"></a></span></h2>\n';

		  photo_html += '<div id="photoSideBar">';

				for (var k=0; k < photoList.length; k++) {


			   point = new GLatLng(photoList[k][4],photoList[k][5]);
			   photo_html += '<a href="javascript:myclick('+photoList[k][6]+','+photoList[k][4]+','+photoList[k][5]+')" onmouseover="mymouseover('+photoList[k][6]+')" onmouseout="mymouseout()" title="'+photoList[k][3]+'">'+photoList[k][3]+'</a><br />';

			}

			photo_html += '</div>';

			var area_html = '<h2><span id="closedTriarea"><a href="javascript:flipMenu(\'area\')">Other Areas&nbsp;<img src="images/homepage_closedtriangle.gif"></a></span>\n<span id="openedTriarea"><a href="javascript:flipMenu(\'area\')">Other Areas&nbsp;<img src="images/homepage_openedtriangle.gif"></a></span></h2>\n';
			area_html += '<div id="areaSideBar">';
			for (var k=0; k < areaList.length; k++) {
				point = new GLatLng(areaList[k][4],areaList[k][5]);
				area_html += '<a href="javascript:myclick('+areaList[k][6]+','+areaList[k][4]+','+areaList[k][5]+')" onmouseover="mymouseover('+areaList[k][6]+')" onmouseout="mymouseout()" title="'+areaList[k][3]+'">'+areaList[k][3]+'</a><br />';
          	}
			area_html += '</div>';

          // put the assembled sidebar_html contents into the sidebar div
          //document.getElementById("sidebar").innerHTML = sidebar_html;

           document.getElementById("sidebar").innerHTML = photo_html;
		 document.getElementById("sidebar").innerHTML += area_html;
        }
      }
      request.send(null);
    }

    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }

//Improvements for v4
//change icon size based on different zoom levels
//add image map to icons so transparent areas are clickable


    //]]>