      //GLOBAL VARIABLES
        //the map
      var map;
        // this variable will collect the html which will eventually be placed in the side_bar
      var sideBarHtml = "Click text for more information:<br><table>";
        // arrays to hold copies of the markers used by the side bar
      var gMarkers = [];
        //array to hold the gpoint for each marker, used to remove markers when mapType changes
      var gPoints = [];
        //array to hold the label for each marker, used to log site usage when sidebar link clicked
      var gLabels = [];
        //defines the type of data displayed on the map, initializes to hotels
      var mapType;
        //defines the map center for full zoom
      var mapCenter=new GLatLng(21.535256, -105.282865);
        //holds the zoom level
      var zoomLevel=14;
        // AJAX request object for getting IP Address
      var insertRequest; 
        // storage for IP Address returned by AJAX request
      var IPresults;  
        // AJAX request object for iiserting log data in the database
      var insertRequest;
      var videoMarker;
      
      function showInitalType(){
        document.getElementById("initialTypeID").style.visibility="visible";
        document.getElementById("mapViewID").style.visibility="hidden";
      }
   
        //sets the original mapType before the map is first loaded
      function setContents(type,label){
        mapType=type;
        document.getElementById("infoType").innerHTML = "San Blas " + label;
        closePopups();   
        document.getElementById("initialTypeID").style.visibility="hidden";
          //if there is a sub-menu, show its popup.  default show map & add data
        switch (type){
          case "food":
            document.getElementById("foodPopupID").style.visibility="visible";
            break;
          case "services":
            document.getElementById("servPopupID").style.visibility="visible";
            break;
          case "HealthCare":
            document.getElementById("healthPopupID").style.visibility="visible";
            break;
          default :
            document.getElementById("mapViewID").style.visibility="visible";
            changeMapData();
        }
      }
      
      function closePopups(){
        document.getElementById("servPopupID").style.visibility="hidden";
        document.getElementById("foodPopupID").style.visibility="hidden";
        document.getElementById("healthPopupID").style.visibility="hidden";
      }

      function showVideo(video){
        var mapBounds=map.getBounds();
        var swCorner=mapBounds.getSouthWest();
        var neCorner=mapBounds.getNorthEast();
        var lowerLat=parseFloat(swCorner.lat());
        var upperLat=parseFloat(neCorner.lat());
        var wLng=parseFloat(swCorner.lng());
        var eLng=parseFloat(neCorner.lng());
        var latDiff=upperLat-lowerLat;
        var lngDiff=wLng-eLng;
        var markerLat=lowerLat+(.1*latDiff);
        var markerLng=eLng+(.54*lngDiff);
        videoMarker=new GMarker(new GLatLng(markerLat,markerLng));
        GEvent.addListener(videoMarker, "visibilitychanged", function() { 
            videoMarker.openInfoWindowHtml("<object style='height: 344px; width: 425px'><param name='movie' value='http://www.youtube.com/v/"+ video +"&h1=en_US&fs=1&?version=3&autoplay=1&enablejsapi=1&border=1&color1=0xb1b1b1&color2=0xcfcfcf&feature=player_embedded'><param name='allowFullScreen' value='true'><param name='allowScriptAccess' value='always'><embed src='http://www.youtube.com/v/"+ video +"&h1=en_US&fs=1&?version=3&autoplay=1&enablejsapi=1&border=1&color1=0xb1b1b1&color2=0xcfcfcf&feature=player_embedded' type='application/x-shockwave-flash' allowfullscreen='true' allowScriptAccess='always' width='300' height='254'></object>");
        });
        map.addOverlay(videoMarker);
        videoMarker.hide();
        //videoMarker.show();
      }  
      
         //provides information about the position of the markers
      function markerMsg(){
        alert("The map and satellite imagery are not well registered with each other.  Use the default Map view to locate the approximate street location, then click on the Satellite button (near the top of the map) to determine the precise location of the marker. ");
      }
        // A function to create the marker and set up the event window
      function createMarker(point,name,html,index,link,photo,video) {
       
        var newHtml="<b>"+name+"</b>";
        if (html!=""){
           newHtml=newHtml+"<br>"+html;
        }
        html=newHtml;
        var linkStr;
        var flagColor="darkblue";
        if(link!=""){
           linkStr="<br><a target= _blank href='"+ link +"'>Link to Web Page</a>";
           flagColor="lightblue";
           html=html + linkStr;
        }
        if(photo!=""){
           if(link!=""){
             flagColor="green";
           }else{
             flagColor="red";
           }
           linkStr="<br><a href='javascript:logData(&#34;"+name+"Slides&#34;);javascript:showSlides(&#34;" + photo + "&#34;);'>Show photos</a>";

           html=html + linkStr;
        }//&#34;    Quotation mark "   &#39;    Apostrophe '
        if(video!=""){
           linkStr="<br><a href='javascript:logData(&#34;"+name+"Video&#34;);javascript:showVideo(&#34;"+ video +"&#34;);'>Click to Show Video</a>";
           html=html + linkStr;
        }

  	  //sets the marker icon properties
	var xicon = new GIcon();
	xicon.image="http://dcbrown.org/gmarkers/" + flagColor +index+".png";
  	xicon.shadow = "";  /* no marker shadow used in favour of map usability */
  	xicon.iconSize = new GSize(17, 19);  
  	xicon.iconAnchor = new GPoint(0, 19);
  	xicon.infoWindowAnchor = new GPoint(15, 1);
        markerOptions={icon : xicon, title : name };
        var marker = new GMarker(point,markerOptions);
        marker.bindInfoWindowHtml(html);
          // save the info we need to use later for the side_bar
        gMarkers.push(marker);

          // save label for use in logging clicks
        gLabels.push(name);

          // add a line to the side_bar html


        var flagImgStr='<img src="http://dcbrown.org/gmarkers/'+ flagColor + index + '.png" border="0" height="13px" />';
        var flagImgStr2='<a href="javascript:myClick(' + (gMarkers.length-1) + ')">' + flagImgStr + '<\/a>';

        sideBarHtml += '<tr><td width="11px">'+flagImgStr2 + '<td>  <a href="javascript:myClick(' + (gMarkers.length-1) + ')">' + name + '<\/a></td></tr>';
          //save the point for later use in zooming
        gPoints.push(point);
        return marker;     
      }// end of createMarker() function
      

      function showSlides(showName){
        var mapBounds=map.getBounds();
        var swCorner=mapBounds.getSouthWest();
        var neCorner=mapBounds.getNorthEast();
        var lowerLat=parseFloat(swCorner.lat());
        var upperLat=parseFloat(neCorner.lat());
        var wLng=parseFloat(swCorner.lng());
        var eLng=parseFloat(neCorner.lng());
        var latDiff=upperLat-lowerLat;
        var lngDiff=wLng-eLng;
        var markerLat=lowerLat+(.1*latDiff);
        var markerLng=eLng+(.54*lngDiff);
        videoMarker=new GMarker(new GLatLng(markerLat,markerLng));
        GEvent.addListener(videoMarker, "visibilitychanged", function() { 
            videoMarker.openInfoWindowHtml('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="300" height="270" id="tech" align="bottom"><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="http://dcbrown.org/flash/'+showName+'.swf" /><param name="quality" value="high" /><embed src="http://dcbrown.org/flash/'+showName+'.swf" quality="high" width="300" height="270" name="tech" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>');
       });
        map.addOverlay(videoMarker);
        videoMarker.hide();
        //videoMarker.show();
      }
      

        //this function resets the map to the appropriate zoom level and center point
      function resetZoom() {
          //select zoom level based on mapType
        switch (mapType)
        {
          case "RestDT" :
            zoomLevel=15;
            var point = new GLatLng(21.541553342776485, -105.28632760047913);
            break;
          case "RestBeach" :
            zoomLevel=16;
            var point = new GLatLng(21.530306074633483, -105.28262615203857);
            break;
          case "RestConchal" :
            zoomLevel=16;
            var point = new GLatLng(21.54410805774636, -105.27571678161621);
            break;
          default :
            zoomLevel=14;
            var point = new GLatLng(21.535256, -105.282865);
        } //end switch

        map.setCenter(point, zoomLevel,G_NORMAL_MAP);
      }//end of resetZoom() function

        // This function picks up the click and opens the corresponding info window
      function myClick(i) {
           //display info window for selected point
        GEvent.trigger(gMarkers[i], "click");

           //log the click
        logData("sidebar: "+gLabels[i]);

          //zoom in on selected point
        map.setCenter(gPoints[i],17,G_NORMAL_MAP);
      }//end of myClick() function

        //get the new map type from the drop down form
      function getMapType(){
          //get the index of the item selected in the drop down form
        var w = document.mapType.content.selectedIndex;
          //get the text of the item selected in the drop down form
        mapType = document.mapType.content.options[w].value;
        if(mapType=="food"){
          showFoodPopup();        
        }else{
          changeMapData();
        }
      }
 
         //change the data that appears on the map     
      function changeMapData(){
          //log the change
        logData(mapType);
          //remove the markers from the map
        for (var i = 0; i < gMarkers.length; i++) {
          map.removeOverlay(gMarkers[i]);
        }
          //remove the side bar HTML
        document.getElementById("side_bar").innerHTML = "";
          //reset the sideBarHtml variable
        sideBarHtml="Click text for more information:<br><table>";
        if(mapType=="Banks"){
          sideBarHtml=sideBarHtml+"<div id='warnStyle'><br>WARNING!<br>There are NO foreign currency<br>exchange facilities available<br>in San Blas!<br><br>The banks will not buy foreign<br>currency or travelers checks.<br><br>Automated Teller Machines<br>(ATM's) are the only source<br>of Pesos.</div><br><br>";
        } 
         //empty gMarkers array
        while(gMarkers.length>0){
          gMarkers.pop();
        }
         //empty gPoints array
        while(gPoints.length>0){
          gPoints.pop();
        }

         //empty gLabels array
        while(gLabels.length>0){
          gLabels.pop();
        }

          //reset the zoom level
        resetZoom();
          //displays the new data
        getData();
      }//end of getMapType() function


        //used twice in the function getData()
      function composeMarkerData(marker,counter){
                // obtain the attribues of each marker
              var lat = parseFloat(marker.getAttribute("lat"));
              var lng = parseFloat(marker.getAttribute("lng"));
              var point = new GLatLng(lat,lng);
              var html = marker.getAttribute("html");
              var label = marker.getAttribute("label");
              var link = marker.getAttribute("link");
              var photo = marker.getAttribute("photo");
              var video = marker.getAttribute("video");
                // create the marker
              var mapMarker = createMarker(point,label,html,counter,link,photo,video);
              map.addOverlay(mapMarker);
      }//end of composeMarkerData()


        //reads the map marker xml file, creates and loads the markers, composes the side bar html
      function getData(){      
          // Read the data from xml file
        GDownloadUrl("http://dcbrown.org/sbMapTest.xml", function(doc) {
            //parse the xml document
          var xmlDoc = GXml.parse(doc);
            //get the requested layer, layer will be a collection of type marker
          var layer = xmlDoc.getElementsByTagName(mapType);
            //get the first marker in the layer
          var marker=layer[0].firstChild;
            //variable to number markers
          var counter=0;       
          do{
               //for each element node
            if(marker.nodeType==1){
              counter++;
              composeMarkerData(marker,counter);
            }//end if
            marker=marker.nextSibling;
          } while(marker!=layer[0].lastChild); //end do..while

              //Special case for Internet Explorer, which doesn't identify white space as a text node
              //and, therefore, doesn't pick up the last child in the loop above
          if((marker.nodeType==1) && (marker==layer[0].lastChild)){
              counter++;
              composeMarkerData(marker,counter);
          }

            // put the assembled sideBarHtml contents into the side_bar div
          document.getElementById("side_bar").innerHTML = sideBarHtml+'</table>';
        }); //end of GDownloadUrl arguements
      }//end getData() function

        //inserts log data into the log database
      function insertInDB (location){
    
          //Browser Support Code	
	try{
	     // Opera 8.0+, Firefox, Safari
	  insertRequest = new XMLHttpRequest();	
	} catch (e){
	    // Internet Explorer Browsers
	  try{
	    insertRequest = new ActiveXObject("Msxml2.XMLHTTP");
	  } catch (e) {
	    try{
	      insertRequest = new ActiveXObject("Microsoft.XMLHTTP");
	    } catch (e){
	         // Something went wrong
	      return false;
	    }
	  }
	}

          //if browser supports it
        if(insertRequest){
	  // Create a function that will receive data sent from the server
	  insertRequest.onreadystatechange = function(){
	  	  	if(insertRequest.readyState == 4){
			var insertResults = insertRequest.responseText;
	  	}
	  }
          var queryStr="insertInto.php?IPStr="+IPresults+"&locStr="+location;
	  insertRequest.open("GET",queryStr , true);
	  insertRequest.send(null); 
        }
      }//end of function insertInDB

        //gets the users IP address then calls function insertInDB to insert log data in the log database
      function logData(location){

          //Browser Support Code	
	try{
	    // Opera 8.0+, Firefox, Safari
	  insertRequest = new XMLHttpRequest();	
	} catch (e){
	    // Internet Explorer Browsers
	  try{
	    insertRequest = new ActiveXObject("Msxml2.XMLHTTP");
	  } catch (e) {
	    try{
	      insertRequest = new ActiveXObject("Microsoft.XMLHTTP");
	    } catch (e){
	         // Something went wrong
	       return false;
	    }
	  }
	}

           //if the browser can
	if(insertRequest){	
	  // Create a function that will receive data sent from the server
	  insertRequest.onreadystatechange = function(){
	  	if(insertRequest.readyState == 4){
			IPresults = insertRequest.responseText;
			insertInDB (location);
	  	}
	  }
	  insertRequest.open("GET", "getIP.php", true);
	  insertRequest.send(null); 
        }
      }//end of function logData
      
      window.onload=function(){
           //check browser compatibility 
        if (GBrowserIsCompatible()) {        // create the map
          logData("start onLoad");
          map = new GMap2(document.getElementById("map"));
          map.addControl(new GLargeMapControl());
          map.addControl(new GMapTypeControl());
          map.setCenter(mapCenter, zoomLevel,G_NORMAL_MAP);
          
    
        }//end browser compatibility if statement
    
          //browser not compatible
        else {
          alert("Sorry, the Google Maps API is not compatible with this browser");
        }     
      }     


      // This Javascript is based on code provided by the
      // Community Church Javascript Team
      // http://www.bisphamchurch.org.uk/   
      // http://econym.org.uk/gmap/


