function TextualZoomControl() {
}
TextualZoomControl.prototype = new GControl();
TextualZoomControl.prototype.initialize = function(map) {
  var container = document.createElement("div");

  var zoomInDiv = document.createElement("div");
  this.setButtonStyle_(zoomInDiv);
  container.appendChild(zoomInDiv);
  zoomInDiv.appendChild(document.createTextNode("Zoom In"));
  GEvent.addDomListener(zoomInDiv, "click", function() {
    map.zoomIn();
  });

  var zoomOutDiv = document.createElement("div");
  this.setButtonStyle_(zoomOutDiv);
  container.appendChild(zoomOutDiv);
  zoomOutDiv.appendChild(document.createTextNode("Zoom Out"));
  GEvent.addDomListener(zoomOutDiv, "click", function() {
    map.zoomOut();
  });

  map.getContainer().appendChild(container);
  return container;
}

TextualZoomControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}

TextualZoomControl.prototype.setButtonStyle_ = function(button) {
  button.style.textDecoration = "underline";
  button.style.color = "#0000cc";
  button.style.backgroundColor = "white";
  button.style.font = "small Arial";
  button.style.border = "1px solid black";
  button.style.padding = "2px";
  button.style.marginBottom = "3px";
  button.style.textAlign = "center";
  button.style.width = "6em";
  button.style.cursor = "pointer";
}

function Rectangle(bounds, opt_weight, opt_color) {
  this.bounds_ = bounds;
  this.weight_ = opt_weight || 2;
  this.color_ = opt_color || "#888888";
}
Rectangle.prototype = new GOverlay();

// Creates the DIV representing this rectangle.
Rectangle.prototype.initialize = function(map) {
  var div = document.createElement("div");
  div.style.border = this.weight_ + "px solid " + this.color_;
  div.style.position = "absolute";
  map.getPane(G_MAP_MAP_PANE).appendChild(div);

  this.map_ = map;
  this.div_ = div;
}
Rectangle.prototype.remove = function() {
  this.div_.parentNode.removeChild(this.div_);
}

Rectangle.prototype.copy = function() {
  return new Rectangle(this.bounds_, this.weight_, this.color_,
                       this.backgroundColor_, this.opacity_);
}

Rectangle.prototype.redraw = function(force) {

  if (!force) return;
  var c1 = this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var c2 = this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast());

  this.div_.style.width = Math.abs(c2.x - c1.x) + "px";
  this.div_.style.height = Math.abs(c2.y - c1.y) + "px";
  this.div_.style.left = (Math.min(c2.x, c1.x) - this.weight_) + "px";
  this.div_.style.top = (Math.min(c2.y, c1.y) - this.weight_) + "px";
}

function CMApplication(element, center_lat, center_long){
	this.mapElement = element;
	this.messageElement = null;
	this.map = new GMap2(this.mapElement);
	this.center_long =  center_long;
	this.center_lat =  center_lat;
	this.marker = null;
	this.request = null;
	this.counter = 0;
	this.overlay = null;
	this.bToggleMarkerCreation = false;
	this.eMapClickEvent = null;
	this.current_zoom_level = 15;
	
	this.map.setCenter(new GLatLng(this.center_lat, this.center_long), this.current_zoom_level);
	this.eMapClickEvent = GEvent.bind(this.map, "click", this, this.onMapClick);
}

CMApplication.prototype.setDefaultMapLook = function(){
	this.map.addControl(new GLargeMapControl());
	this.map.addControl(new GMapTypeControl());
}

CMApplication.prototype.addControl = function(gcontrol){
	this.map.addControl(gcontrol);
}

CMApplication.prototype.setCenter = function(){
	GLog.write( "Test setCenter", "black");
	//Change the function later to accomodate the lat long arguments
	this.map.setCenter(new GLatLng(this.center_lat, this.center_long), this.map.getZoom());
	
}

CMApplication.prototype.setMessageElement = function(element){
    this.messageElement = element;
}

CMApplication.prototype.toggleMarkerCreation = function(){
	if (this.bToggleMarkerCreation){
		this.bToggleMarkerCreation = false;
	}else{
		this.bToggleMarkerCreation = true;
	}
	if (this.messageElement){
		this.messageElement.innerHTML += " Toggled to " + this.bToggleMarkerCreation;
	}
}

CMApplication.prototype.onMouseMove = function(latlng){
  var latLngStr = 'Center(Lat/Long) = (' + latlng.lng() + ', ' + latlng.lat() + ')<br>';
  if (this.messageElement){
    this.messageElement.innerHTML = latLngStr;
  }

}


CMApplication.prototype.tabInfoHtml = function(){
// Our info window content
	var label = "Location";
	var location_html = "<div id=\"imap\"><p class=\"map_p\">EMBASSY OF THE PHILIPPINES<br>130 Albert Street, Suite 606<br>Ottawa, Ontario K1P 5G4<br>Canada</p></div>";
	var infoTabs = [
	new GInfoWindowTab(label, location_html),
	//new GInfoWindowTab("Tab #2", "This is tab #2 content")
	];
	
	// Place a marker in the center of the map and open the info window
	// automatically
	var marker = new GMarker(this.map.getCenter());
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowTabsHtml(infoTabs);
	});
	this.map.addOverlay(marker);
	marker.openInfoWindowTabsHtml(infoTabs);
}

CMApplication.prototype.addRectangularOverlayExample = function(){
	// Display a rectangle in the center of the map at about a quarter of
	// the size of the main map
        if (this.overlay) {return;}
	var bounds = this.map.getBounds();
	var southWest = bounds.getSouthWest();
	var northEast = bounds.getNorthEast();
	var lngDelta = (northEast.lng() - southWest.lng()) / 4;
	var latDelta = (northEast.lat() - southWest.lat()) / 4;
	var rectBounds = new GLatLngBounds(
	new GLatLng(southWest.lat() + latDelta, southWest.lng() + lngDelta),
	new GLatLng(northEast.lat() - latDelta, northEast.lng() - lngDelta));
	this.overlay = new Rectangle(rectBounds);
	this.map.addOverlay(this.overlay);
}

CMApplication.prototype.removeRectangularOverlayExample = function(){
	if (this.overlay){
	  this.map.removeOverlay(this.overlay);
	  this.overlay = null;
	}
}

CMApplication.prototype.onMapClick = function(overlay,  point){

	GLog.write("Overlay = " + overlay + "Point = " + point.x  + " " + point.y);	

	if (!this.bToggleMarkerCreation || this.marker){return;}
	
	this.marker = this.createMarker(point);
	this.map.addOverlay(this.marker);
}

CMApplication.prototype.createMarker = function(point){
	var marker = new GMarker(point, {draggable: true, title : "<b>Marker Title</b>" });
	
	GEvent.addListener(marker, "dragstart", function() {
		this.map.closeInfoWindow();
	});
	
	GEvent.addListener(marker, "dragend", function() {
	marker.openInfoWindowHtml("Just bouncing along...");
	});
	
	GEvent.addListener(marker, "click", function() {
	marker.openInfoWindowHtml("test");
  	});
	
	return marker;

}

CMApplication.prototype.deleteMarker = function(){
	if (this.marker){
		this.map.removeOverlay(this.marker);
		this.map.closeInfoWindow();
		this.marker = null;
	}
	
}

CMApplication.prototype.triggerClickEventOnMarker = function(){
	if (this.marker){
		GEvent.trigger(this.marker,  "click", this.marker.getPoint())
	}
}

CMApplication.prototype.loadXmlthruAjax = function(xmlfile){
 alert(xmlfile);
    this.request = GXmlHttp.create();
    this.request.open("GET", xmlfile, true);
    this.request.onreadystatechange = function() {
      if (this.request.readyState == 4) {
        var xmlDoc = this.request.responseXML;
        var markers = xmlDoc.documentElement.getElementsByTagName("Field");
        for (var i = 0; i < markers.length; i++) {
          var x = parseFloat(markers[i].getElementsByTagName("long"));
          var y = parseFloat(markers[i].getElementsByTagName("lat"));
          var point = new GPoint(x,y);
          var marker = new GMarker(point);
          this.map.addOverlay(marker);
        }
      }
      alert("readystate = " +  this.request.readyState);
    }
    this.request.send(null);
}

CMApplication.prototype.testLoadXmlthruAjax = function(xmlfile){
  GDownloadUrl(xmlfile, function(data, responseCode) {
 
  var xml = GXml.parse(data);
  var markers = xml.documentElement.getElementsByTagName("Field");
  for (var i = 0; i < markers.length; i++) {
    GLog.write(parseString(markers[i].getAttribut("name")));	
    var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                            parseFloat(markers[i].getAttribute("lng")));
    this.map.addOverlay(new GMarker(point));
  }
});
}

//<MontrealSoccerFields>
	//<Field name="Brossard " lat="45.4268" long="-73.4699"></Field>
CMApplication.prototype.runGoogleAjaxExample = function(){
this.map.setCenter(new GLatLng(37.4419, -122.1419), 13);
var test;
GDownloadUrl("data.xml",  function(data, responseCode){
alert(data);
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")));
	//alert(point);
	//alert(this.map);
	app.map.addOverlay(new GMarker(point));
	}
});
alert (this.map)
}

/*
function loadXml(xml)
{
alert(xml);
var markers = xml.documentElement.getElementsByTagName("Field");
for (var i = 0; i < markers.length; i++) {
	var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
	parseFloat(markers[i].getAttribute("long")));
	var fieldname = markers[i].getAttribute("name");
	app.map.addOverlay(new GMarker(point));
	}
}



// Creates a marker whose info window displays the given number
function createMarkerReference(point, fieldname) {
  var marker = new GMarker(point);

  // Show this marker's index in the info window when it is clicked
  var html = "Field<b>" + fieldname + "</b>";
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });

  return marker;
}

CMApplication.prototype.onMapClickReference = function(overlay,point){
var center = this.map.getCenter();
var latLngStr = 'Center(Lat/Long) = (' + center.lng() + ', ' + center.lat() + ')<br>' +  'Point(Lat/Long) = (' + point.x + ', ' + point.y + ')<br>';
		GLog.write( latLngStr, "black");
		this.messageElement.innerHTML = latLngStr;
		if (overlay) {
		this.map.removeOverlay(overlay);
		alert("1");
		}
		else if (point) {
		marker = createMarker(point, this.counter);
		this.map.addOverlay(marker);
		}
		this.map.panTo(new GLatLng(point.y, point.x));
		this.map.openInfoWindow(point, document.createTextNode("Center Point"));
}
*/