var map;
var home = new google.maps.LatLng(40.90, -77.5);

// Defines control for centering map
function HomeControl(controlDiv, map) {

  // Set CSS styles for the DIV containing the control
  // Setting padding to 5 px will offset the control
  // from the edge of the map
  controlDiv.style.padding = '5px';

  // Set CSS for the control border
  var controlUI = document.createElement('DIV');
  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '1px';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to set the map to Home';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior
  var controlText = document.createElement('DIV');
  controlText.style.fontFamily = 'Arial,sans-serif';
  controlText.style.fontSize = '12px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '4px';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to Chicago
  google.maps.event.addDomListener(controlUI, 'click', function() {
    map.panTo(home)
  });
}

function initialize() {
    var myOptions = {
      zoom: 7,
      center: home,
      mapTypeId: google.maps.MapTypeId.TERRAIN,
      scrollwheel: false
    }
    map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);
     // Create the DIV to hold the control and call the HomeControl() constructor
    // passing in this DIV.
    var homeControlDiv = document.createElement('DIV');
    var homeControl = new HomeControl(homeControlDiv, map);

    homeControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
    /*map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(home, 7);
    var customUI = map.getDefaultUI();
    customUI.zoom.scrollwheel = false;
    map.setUI(customUI);
    */
    //map.setMapType(G_PHYSICAL_MAP);
    //map.addControl(new CenterControl());
    populate();
  
}

/*
 * void
 * addMarker(point, xhtml)
 *
 * Adds marker with given xhtml at given point on map.
 */
 
function populate()
{
    // contact proxy, add markers
    var xhr = null;

    // instantiate XMLHttpRequest object 
    try
    {
        xhr = new XMLHttpRequest();
    }
    catch (e)
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // handle old browsers
    if (xhr == null)
    {
        alert("Ajax not supported by your browser!")
        return;
    }
    
    // construct URL
    var url = "proxy.php";

    // add markers
    xhr.onreadystatechange = function() {
        
      // only handle requests in "loaded" state
      if (xhr.readyState == 4)
      {
         
        // embed response in page if possible
        if (xhr.status == 200)
        {
          // evaluate proxy response
          var markers = eval("(" + xhr.responseText + ")");
          counter = markers.length;      
            // place markers on map
            for(i in markers)
            {
              // get latitude and longitude
              var point = new google.maps.LatLng(markers[i].lat, 
                                      markers[i].lng); 
              // Generate XHTML for text box
              var info = '<div style=\"width:350px;\">' + 
                         '<h3 style=\"text-align:center;text-shadow:none\">' +
                         '<a style=\"text-decoration:none;color:#0E53A7\"' + 
                             'href=\"' + markers[i].site + '\" target=\"_blank\">' + 
                             markers[i].name + 
                         '</a></h3>' +
                         '<p style=\"text-align:justify\">'+ markers[i].description + '</p>' +
                         '</div>';
           
              // place marker on map
              addMarker(point, info, markers[i].groomed, counter);
                    
              //generate table of info
              insertRow(markers[i], counter--);
            }
        }
        else
          alert("Error with Ajax call!");
        }
    };
    xhr.open("GET", url, true);
    xhr.send(null);
}

/*
 * insertRow 
 *
 */

function insertRow(info, count)
{
  var row=document.getElementById(info.region).insertRow(0);
  row.insertCell(0).innerHTML=count+". ";
  row.insertCell(1).innerHTML="<a href=\"" + info.site + "\" target=\"_blank\">" + info.name + "</a>";
  //row.insertCell(2).innerHTML=info.address;
}

/*
 * addMarker
 * 
 */
 
function addMarker(point, xhtml, isGroomed, count)
{
    // create icon
    //var markerIcon = new GIcon(G_DEFAULT_ICON);
    var image;
    // change image
    if(isGroomed==1)
        //markerIcon.image = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+count+"|FF0000|000000";
        image = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+count+'|6899D3|FFFFFF';
    else
        //markerIcon.image = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+count+"|00FF00|000000";
        image = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+count+'|00AB6F|FFFFFF';
    
    // instantiate marker
    var marker = new google.maps.Marker({     
        position:point,
        map:map,
        icon:image,
    });
    var infowindow = new google.maps.InfoWindow({
        content: xhtml
    });    

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });

    // add marker to map
    //map.addOverlay(marker);
}

google.maps.event.addDomListener(window, 'load', initialize);