// JavaScript Document
 var mapDiv=document.getElementById('map');
  var map=null;
  var groupIcon=null;
  var ageIcon=null;
  var clusterer;
  var agences;
  var urlAgences;

function createXHR()
{
var xmlHttp;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  return xmlHttp;
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    return xmlHttp;
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      return xmlHttp;
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
}

      
  function initMap(latitude,longitude,zoom){
  	
    if (GBrowserIsCompatible()) {

      groupIcon = new GIcon();
      groupIcon.image = document.getElementById('icone_multi_agence').value ;
      groupIcon.iconAnchor = new GPoint(19, 40);
      groupIcon.infoWindowAnchor = new GPoint(10, 20);
      groupIcon.iconSize = new GSize(38, 40);

      ageIcon = new GIcon();
      ageIcon.image = document.getElementById('icone_mono_agence').value ;
      ageIcon.infoWindowAnchor = new GPoint(0,0);
      ageIcon.iconSize = new GSize(25, 31);
      ageIcon.iconAnchor = new GPoint(11, 30);

      map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(latitude, longitude),zoom);
      map.setUIToDefault();
      
      clusterer=new Clusterer(map);
      clusterer.SetMaxVisibleMarkers(5);
      clusterer.SetMinMarkersPerCluster(2);
      clusterer.SetIcon(groupIcon);
      clusterer.SetMaxLinesPerInfoBox(10);
      clusterer.gridSize = 10;
      
      getLatLngAgences();
      
      //petit hack pour laffichage du skin orpi
      //devrait utiliser GEvent::load
      setTimeout(function(){
                    var img = document.getElementById("lmc3d").getElementsByTagName("img")[0];
                    img.src = document.getElementById('media_path').value + "images/map/mapcontrols3dOrpi.png";
                    var img = document.getElementById("lmc3d").getElementsByTagName("img")[1];
                    img.src = document.getElementById('media_path').value + "images/map/mapcontrols3dOrpi.png";
                    var img = document.getElementById("lmc3d").getElementsByTagName("img")[2];
                    img.src = document.getElementById('media_path').value + "images/map/mapcontrols3dOrpi.png";
                    var img = document.getElementById("lmc3d").getElementsByTagName("img")[3];
                    img.src = document.getElementById('media_path').value + "images/map/mapcontrols3dOrpi.png";
                    var img = document.getElementById("lmczb").getElementsByTagName("img")[0];
                    img.src = document.getElementById('media_path').value + "images/map/mapcontrols3dOrpi.png";

                  },3000);
      
    }
  }
  
  function getLatLngAgences(){
    var xhr = createXHR();
    xhr.onreadystatechange=function(){
      if(xhr.readyState==4){
        var txt = xhr.responseText;
        txt = txt.split("###");
        agences = eval('('+txt[1]+')');
        urlAgences = txt[0];
        agences.sort(compareNames);
        var l = agences.length;
        for(var a=0;  a<l;  ++a)
        {
          var agence=agences[a];
          var marker=new GMarker(new GLatLng(agence.ageLatitude,agence.ageLongitude),{icon:ageIcon});
          agence.marker=marker;
          GEvent.addListener(marker,'click',call(PopUp,a));
          clusterer.AddMarker(marker);
        }
      }
    }
    xhr.open("GET","ajax_get_lat_lng_agences.ajax.php",true);
    xhr.send(null);
  }

  function compareNames(a,b)
  {
    if(a.ageAgence<b.ageAgence)
      return-1;
    else if(a.ageAgence>b.ageAgence)
      return 1;
    else
      return 0;
  }
  
  function call (func,arg)
  {
    return function()
           {
              func(arg);
           };
  }

  function PopUp(a)
  {
      var agence=agences[a];
      var html="<table><tbody><tr><td style='vertical-align: middle'><a href='"+agence.url+"'><img src='"+agence.ageOfficePhoto+"' style='width:75px;' /></a></td><td style='vertical-align: middle'><a style='text-decoration:none;color:#777' href='"+agence.url+"'>"+agence.ageAgence+"<br />"+agence.ageAdresse1+"<br />"+agence.ageCp+" "+agence.vilLibelle+"<br />Tel : "+agence.ageTelephone+"</a></td></tr><tr><td></td><td><a href='"+agence.url+"' target='_blank' title='Site web' class='agenceResultLinksRed'>Site web</a></td></tr></tbody></table>";
      agence.marker.openExtInfoWindow(map,"extInfoWindow_funkyBox_beak",html,{beakOffset: 3});
  }