// original code from http://www.roscripts.com/Context_Menu_in_Google_Maps_API-179.html
// menu display and functionality altered for this application

function ContextMenu(oMap){this.initialize(oMap);}

//Construct the DOM tree of the menu
ContextMenu.prototype.initLink = function(oMap){
	var that=this;
	
	// zoom in
	row = document.createElement("tr");
	cell = document.createElement("td");
	cell.innerHTML = "Zoom In";
	row.appendChild(cell);
	cell = document.createElement("td");
	cell.innerHTML = "<img height=\"16\" width=\"16\" src=\"/images/maps/mActionZoomIn.png\"/>";
	row.appendChild(cell);
	GEvent.addDomListener(row, 'click', function() {
		var point = that.map.fromContainerPixelToLatLng(that.clickedPixel);
		that.map.zoomIn(point,true);
		that.contextmenu.style.display='none';
	});
	this.tbl_container.appendChild(row);
	
	// zoom out
	row = document.createElement("tr");
	cell = document.createElement("td");
	cell.innerHTML = "Zoom Out";
	row.appendChild(cell);
	cell = document.createElement("td");
	cell.innerHTML = "<img height=\"16\" width=\"16\" src=\"/images/maps/mActionZoomOut.png\"/>";
	row.appendChild(cell);
	GEvent.addDomListener(row, 'click', function() {
		var point = that.map.fromContainerPixelToLatLng(that.clickedPixel);
		that.map.zoomOut(point,true);
		that.contextmenu.style.display='none';
	});
	this.tbl_container.appendChild(row);
	
	// center view
	row = document.createElement("tr");
	cell = document.createElement("td");
	cell.innerHTML = "Center Map Here";
	row.appendChild(cell);
	cell = document.createElement("td");
	cell.innerHTML = "<img height=\"16\" width=\"16\" src=\"/images/maps/mActionZoomToLayer.png\"/>";
	row.appendChild(cell);
	GEvent.addDomListener(row, 'click', function() {
		var point = that.map.fromContainerPixelToLatLng(that.clickedPixel);
		that.map.panTo(point);
		that.contextmenu.style.display="none";
	});
	this.tbl_container.appendChild(row);
	
	row = document.createElement("tr");
	cell = document.createElement("td");
	cell.colSpan="2";
	cell.innerHTML = "<hr/>";
	row.appendChild(cell);
	this.tbl_container.appendChild(row);
		
	// Search
	row = document.createElement("tr");
	cell = document.createElement("td");
	cell.innerHTML = "Radius Search";
	row.appendChild(cell);
	cell = document.createElement("td");
	cell.innerHTML = "<img height=\"16\" width=\"16\" src=\"/images/maps/zoom-layer.png\"/>";
	row.appendChild(cell);
	GEvent.addDomListener(row, 'click', function() {
		var point = that.map.fromContainerPixelToLatLng(that.clickedPixel);
		radiusSearch(point);
		that.contextmenu.style.display="none";
	});
	this.tbl_container.appendChild(row);
	
	row = document.createElement("tr");
	cell = document.createElement("td");
	cell.colSpan="2";
	cell.innerHTML = "<hr/>";
	row.appendChild(cell);
	this.tbl_container.appendChild(row);
	
	// add destination here
	row = document.createElement("tr");
	row.id = "addDestinationRow";
	cell = document.createElement("td");
	cell.innerHTML = "Add Destination Here";
	row.appendChild(cell);
	cell = document.createElement("td");
	cell.innerHTML = "<img height=\"16\" width=\"16\" src=\"http://maps.google.ca/intl/en_ca/mapfiles/icon_green.png\"/>";
	row.appendChild(cell);
	GEvent.addDomListener(row, 'click', function() {
		var point = that.map.fromContainerPixelToLatLng(that.clickedPixel);
		var waypt_index = addBlankWaypoint();  
		if(waypt_index>-1){
  		  createWaypoint(waypt_index,point,true);	
  		  labelWaypointFromLL(waypt_index);
                  repaintRoute();
		  that.contextmenu.style.display="none";
		}
	});
	this.tbl_container.appendChild(row);
	
	// add marker here
	row = document.createElement("tr");
	row.id = "addMarkerRow";
	cell = document.createElement("td");
	cell.innerHTML = "Add Marker Here";
	row.appendChild(cell);
	cell = document.createElement("td");
	cell.innerHTML = "<img height=\"16\" width=\"16\" src=\"http://maps.google.ca/intl/en_ca/mapfiles/icon_green.png\"/>";
	row.style.display = "none";
	row.appendChild(cell);
	this.tbl_container.appendChild(row);
	
	// add marker here
	row = document.createElement("tr");
	row.id = "deleteDestinationRow";
	cell = document.createElement("td");
	cell.innerHTML = "Delete Destination";
	row.appendChild(cell);
	cell = document.createElement("td");
	cell.innerHTML = "<img height=\"16\" width=\"16\" src=\"http://maps.google.ca/intl/en_ca/mapfiles/icon_green.png\"/>";
	row.style.display = "none";
	row.appendChild(cell);
	this.tbl_container.appendChild(row);
	
	
}

ContextMenu.prototype.bind = function(method) {
	var self = this;
	var opt_args = [].slice.call(arguments, 1);
	return function() {
		var args = opt_args.concat([].slice.call(arguments));
		return method.apply(self, args);
	}
}

//The object 'constructor'
ContextMenu.prototype.initialize = function(oMap){
	this.map = oMap;
	var that=this;
	
	this.contextmenu = document.createElement("div");
	this.contextmenu.style.display="none";
	//CSS class name of the menu
	this.contextmenu.className="contextmenu";
	
	
	var tbl = document.createElement("table");
	this.contextmenu.appendChild(tbl);	
	this.tbl_container = document.createElement("tbody");
    	tbl.appendChild(this.tbl_container);
    	
	this.initLink();
	
	this.map.getContainer().appendChild(this.contextmenu);	

	//Event listeners that will interact with our context menu
	GEvent.addListener(oMap,"singlerightclick",function(pixel,tile,overlay) {
		row = document.getElementById("addDestinationRow");
		row.style.display = "";
		row = document.getElementById("addMarkerRow");
		row.style.display = "none";
		row = document.getElementById("deleteDestinationRow");
		row.style.display = "none";
  
		if (overlay) { 
			if (overlay instanceof GMarker) {
				// may alter / replace the menu.
				GEvent.trigger(overlay,"singlerightclick");
			}
		}
		that.clickedPixel = pixel;
		var x=pixel.x;
		var y=pixel.y;
		//Prevents the menu to go out of the map margins, in this case the expected menu size is 150x110
		if (x > that.map.getSize().width - 160) { x = that.map.getSize().width - 160 }
		if (y >that.map.getSize().height - 120) { y = that.map.getSize().height - 120 }
		var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(x,y));  
		pos.apply(that.contextmenu);
		that.contextmenu.style.display = "";
	});
	GEvent.addListener(oMap, "move", function() {
		that.contextmenu.style.display="none";
	});
	GEvent.addListener(oMap, "click", function(overlay,point) {
		that.contextmenu.style.display="none";
	});	
}

ContextMenu.prototype.showDataMarkerMenu = function(aindex,iindex,id){
  row = document.getElementById("addDestinationRow");
  row.style.display = "none";
  //row = document.getElementById("deleteDestinationRow");
  //row.style.display = "none";
  
  row = document.getElementById("addMarkerRow");
  row.style.display = "";

  GEvent.clearListeners(row,'click');

  // to ensure a copy of the values is around for the listener  
  var ai = aindex; var ii = iindex; var idd = id;var ctm = this.contextmenu;
  var l = GEvent.addDomListener(row, 'click', function() {
        createKnownWaypoint(gmarkers[ai][ii].getLatLng(),ai,idd);
  	GEvent.removeListener(l);
  	ctm.style.display="none";
  });
}

ContextMenu.prototype.showDestinationMenu = function(index){
  row = document.getElementById("addDestinationRow");
  row.style.display = "none";
  //row = document.getElementById("addMarkerRow");
  //row.style.display = "none";
  
  row = document.getElementById("deleteDestinationRow");
  row.style.display = "";

  GEvent.clearListeners(row,'click');

  // to ensure a copy of the values is around for the listener  
  var ai = index;var ctm = this.contextmenu;
  var l = GEvent.addDomListener(row, 'click', function() {
  	removeWaypoint(ai);
  	GEvent.removeListener(l);
  	ctm.style.display="none";
  });
}