function createMarker(point, name, address, type,theUrl) {

      var marker = new GMarker(point);
      var html = "<b>" + name + "</b> <br/>" + address +"<br/> <a href=\"" + theUrl + "\"> " + name + "</a>";
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
}

function loadMap() {

        var herd = new google.visualization.Query("http://spreadsheets.google.com/ccc?key=tvj2dgHmt2ASS3bTVfYvpQg&hl=en");
        herd.send(drawMap);
        //alert('Loading the map');
}

 function drawMap(response) {

      if (GBrowserIsCompatible()) {
        googleMap2 = document.getElementById("googleMap"); 
        var mapDetail = new GMap2(googleMap2);
        mapDetail.addControl(new GSmallMapControl());
        mapDetail.addControl(new GMapTypeControl());
        mapDetail.setCenter(new GLatLng(51.072023,4.058354), 8);

        var herds = response.getDataTable();
        var viewMarkers = new google.visualization.DataView(herds);
        
        var rowInd = viewMarkers.getViewRows();
        for (var i = 0; i < rowInd.length; i++) {
            var name = herds.getValue(rowInd[i],2);
            var address = herds.getValue(rowInd[i],3)
                         +" "+herds.getValue(rowInd[i],4)
                         +","+herds.getValue(rowInd[i],5)
                         +" "+herds.getValue(rowInd[i],6);
            var type = "Herd";
            var point = new GLatLng(parseFloat(herds.getValue(rowInd[i],8)),
                                    parseFloat(herds.getValue(rowInd[i],9))
                                   );
            var theUrl = herds.getValue(rowInd[i],10);
            var marker = createMarker(point,name,address,type,theUrl);
            mapDetail.addOverlay(marker);
          }
        };
    }

window.addEvent("domready",function() {


  var myAnimal = $$('.myAnimals');
  var map = $$('.maps');
  var searchAnimal = $$('.mySearchAnimals');

  map.addEvents({
            click: function() {
               //alert("the chart");
              googleMap2 = document.getElementById("googleMap");
              animalDetail2 = document.getElementById("animalDetail");
              animalDetailChart2 = document.getElementById("animalDetailChart");
              animalSearch2 = document.getElementById("animalSearch");
              animalSearch2.style.display = "none";
              animalDetail2.style.display = "none";
              animalDetailChart2.style.display = "none";
              googleMap2.style.display = "inline";

              }
            });

  myAnimal.addEvents({
            click: function() {
               //   alert("the animals");
              googleMap2 = document.getElementById("googleMap");
              animalDetail2 = document.getElementById("animalDetail");
              animalDetailChart2 = document.getElementById("animalDetailChart");
              animalSearch2 = document.getElementById("animalSearch");
              googleMap2.style.display = "none";
              animalSearch2.style.display = "none";
              animalDetail2.style.display = "inline";
              animalDetailChart2.style.display = "inline";

              }
            });

  searchAnimal.addEvents({
            click: function() {
               //  alert("the chart");
              googleMap2 = document.getElementById("googleMap");
              animalDetail2 = document.getElementById("animalDetail");
              animalSearch2 = document.getElementById("animalSearch");
              animalDetailChart2 = document.getElementById("animalDetailChart");
              animalSearch2.style.display = "inline";
              animalDetail2.style.display = "inline";
              animalDetailChart2.style.display = "inline";
              googleMap2.style.display = "none";

              }
            });

});