var contextmenu = null;
var clickedPixel=null;

function getContextContent(menu){
  var content = '';
  for(var i=0; i<menu.length; i++){
    if(menu[i].separator){
      content += '<tr>'
                +'  <td colspan="2" align="center">'
                +'    <hr style="padding:0; margin:0; width:85%;" />'
                +'  </td>'
                +'</tr>';
    } else {
      content += '<tr class="menuMouseOver" onclick="callFunctionAndHide(\''+menu[i].functionName+'\');">'
                +'  <td>'
                +'    <img src="'+menu[i].img+'" width="20px" height="20px" />'
                +'  </td>'
                +'  <td>'
                +'    '+menu[i].label
                +'  </td>'
                +'</tr>';
    }
  }
  return '<table cellspacing="0" cellpadding="3" width="100%">'+content+'</table>';
}

function refreshMenu(){
  var menu = new Array();
  if(myLoginStatus.result=='OK'){
    menu.push({label:'Locate me here',functionName:"startAddLocationMode",img:getUserAvatarLink(myLoginStatus.idUser, 'map', myLoginStatus.avatar)},
              {separator:true});
  }
  menu.push({label:"Add POD here",functionName:"startAddPodMode",img:"/Img/pushpin/pushpin.gif"},
            {separator:true},
            {label:"Zoom In",functionName:"zoomInHere",img:"/Img/zoomplus.png"},
            {label:"Zoom out",functionName:"zoomOutHere",img:"/Img/zoommoins.png"},
            {separator:true},
            {label:"Centre map here",functionName:"centreMapHere",img:"/Img/center.png"});
  contextmenu.innerHTML = generateWindow(getContextContent(menu));
}

function initContextMenuOnMap(){
  // === create the context menu div ===
  contextmenu = document.createElement("div");
  contextmenu.style.display="none";
  contextmenu.style.width="170px";

  refreshMenu();
  
  map.map.getContainer().appendChild(contextmenu);

  // === listen for singlerightclick ===
  GEvent.addListener(map.map,"singlerightclick",function(pixel,tile) {
    // store the "pixel" info in case we need it later
    // adjust the context menu location if near an egde
    // create a GControlPosition
    // apply it to the context menu, and make the context menu visible
    clickedPixel = pixel;
    var x=pixel.x;
    var y=pixel.y;
    if (x > map.map.getSize().width - 170) { x = map.map.getSize().width - 170 }
    if (y > map.map.getSize().height - 200) { y = map.map.getSize().height - 200 }
    var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(x,y));  
    pos.apply(contextmenu);
    contextmenu.style.display = "block";
  });

  // === If the user clicks on the map, close the context menu ===
  GEvent.addListener(map.map, "click", hideContextMenu);
  GEvent.addListener(map.map, "moveend", hideContextMenu);
  GEvent.addListener(map.map, "movestart", hideContextMenu);
}


function hideContextMenu(){
  contextmenu.style.display="none";
}

function callFunctionAndHide(functionName) {
  // perform the requested operation
  var point = map.map.fromContainerPixelToLatLng(clickedPixel)
  eval(functionName+'('+point.lat()+', '+point.lng()+');');
  hideContextMenu();
}      


function zoomInHere() {
  // perform the requested operation
  var point = map.map.fromContainerPixelToLatLng(clickedPixel)
  map.map.zoomIn(point,true);
}      
function zoomOutHere() {
  // perform the requested operation
  var point = map.map.fromContainerPixelToLatLng(clickedPixel)
  map.map.setCenter(point,map.map.getZoom()-1); // There is no map.zoomOut() equivalent
}      
function centreMapHere() {
  // perform the requested operation
  var point = map.map.fromContainerPixelToLatLng(clickedPixel)
  map.map.setCenter(point);
}