source: extensions/GMaps/js/gmapsCategory.js @ 7500

/**
 * -----------------------------------------------------------------------------
 * file: gmapsCategory.js
 * file version: 1.1.1
 * date: 2010-10-28
 */

var markerImgProp = [
  null,
  { w:32, h:32, x:15, y:31 }, // s01
  { w:32, h:32, x:15, y:31 }, // s02
  { w:32, h:32, x:10, y:31 }, // s03
  { w:30, h:40, x:4, y:39 }, // s04
];



/**
 * create the map
 *
 * @param Object properties : map properties
 * @param Integer gmapsIndex : index in the map list
 */
function createMap(properties, gmapsIndex)
{
  var map = new google.maps.Map($("#"+properties.id).get(0),
    {
      backgroundColor:'#ffffff',
      mapTypeId: properties.mapType,
      zoom: properties.zoomLevel,
      center: gmaps.bounds.getCenter(),
      navigationControl: (properties.navigationControl==-1)?false:true,
      scrollwheel: (properties.navigationControl==-1)?false:true,
      scaleControl: (properties.scaleControl=='n')?false:true,
      streetViewControl: (properties.streetViewControl=='n')?false:true,
      mapTypeControl:(properties.mapTypeControl==-1)?false:true,
      mapTypeControlOptions:
        {
          style:properties.mapTypeControl
        },
      markerTitle:'',
    }
  );

  if(properties.kmlFileUrl!='')
  {
    kmlFile = new google.maps.KmlLayer(properties.kmlFileUrl,
      {
        preserveViewport:true
      }
    );
    kmlFile.setMap(map);
  }
  else
  {
    kmlFile=null;
  }

  re=/^mS(\d\d)_.*/i;
  iM=re.exec(properties.markerImg);
  if(iM!=null) iM=new Number(iM[1]);

  if(iM!=null)
  {
    map.markerImg = new google.maps.MarkerImage('plugins/GMaps/img/'+properties.markerImg,
        new google.maps.Size(markerImgProp[iM].w, markerImgProp[iM].h),
        new google.maps.Point(0,0),
        new google.maps.Point(markerImgProp[iM].x, markerImgProp[iM].y));
  }
  else
  {
    map.markerImg = null;
  }

  map.kmlFile=kmlFile;
  map.markers=new Array();
  map.gmapsIndex=gmapsIndex;
  map.viewportInitialized=false;
  map.callId=0;
  properties.gMap=map;
}

/**
 * load markers from the server
 *
 * @param Map map : the map
 */
function loadMarkers(map)
{
  map.callId++;

  datas={
    requestId:gmaps.requestId,
    callId:map.callId,
    bounds:{
        north:map.getBounds().getNorthEast().lat(),
        east:map.getBounds().getNorthEast().lng(),
        south:map.getBounds().getSouthWest().lat(),
        west:map.getBounds().getSouthWest().lng()
      },
    width:$(map.getDiv()).width(),
    height:$(map.getDiv()).height(),
    distanceTreshold:20,
    loadIndex:map.gmapsIndex,
  };


  $('#gmapsLoading').css('display', 'inline-block');
  $('#gmapsNbPhotos').html('');

  $.ajax(
    {
      type: "POST",
      url: "plugins/GMaps/gmaps_ajax.php",
      async: true,
      data: { ajaxfct:"public.maps.getMarkers", datas:datas },
      success:
        function(msg)
        {
          tmp=$.parseJSON(msg);
          if(gmaps.maps[tmp.loadIndex].gMap.callId==tmp.callId)
          {
            tmp.markers.sort(compareMarkers);
            applyMarkers(gmaps.maps[tmp.loadIndex].gMap, tmp.markers);
            $('#gmapsLoading').css('display', 'none');
            $('#gmapsNbPhotos').html('['+tmp.datas.nbPhotos+']');
          }
        }
    }
  );
}

/**
 * apply markers to map
 *
 * @param Map map : the google map object
 * @param Array markers : array of markers properties
 *                        each marker is an object with properties :
 *                          latitude, longitude, nbImg
 */
function applyMarkers(map, markers)
{
  /*
   * deleting markers from the map only if they are not in the new list
   */
  if(map.markers.length>0)
  {
    var i=0;
    while(i<map.markers.length)
    {
      newListIndex=markerInList(map.markers[i].uId, markers);
      if(newListIndex==-1)
      {
        map.markers[i].marker.setMap(null);
        map.markers.splice(i, 1);
      }
      else
      {
        markers.splice(newListIndex,1);
        i++;
      }
    }
  }

  /*
   * add new markers on the map
   */
  for(var i=0;i<markers.length;i++)
  {
    var marker = new google.maps.Marker(
      {
        position:new google.maps.LatLng(markers[i].lat, markers[i].lng),
        map: map,
        title:markers[i].nbImgTxt
      }
    );

    if(map.markerImg!=null) marker.setIcon(map.markerImg);

    marker.info=markers[i];
    marker.info.displayed=0;

    map.markers.push(
      {
        marker:marker,
        uId:markers[i].uId
      }
    );

    google.maps.event.addListener(
      marker,
      'click',
      function ()
      {
        displayWindowInfo(this);
      }
    );

    for(var index=0;index<marker.info.imgTn.length;index++)
    {
      switch(marker.info.imgTn[index].charAt(0))
      {
        case 'G':
          marker.info.imgTn[index]='./galleries/'+marker.info.imgTn[index].substr(1);
          break;
        case 'U':
          marker.info.imgTn[index]='./upload/'+marker.info.imgTn[index].substr(1);
          break;
      }
    }
  }
}

function compareMarkers(m1,m2)
{
  if(m1.uId<m2.uId)
  {
    return(-1);
  }
  else if(m1.uId<m2.uId)
  {
    return(1);
  }
  return(0);
}

function markerInList(uniqueId, markerList)
{
  for(var i=0;i<markerList.length;i++)
  {
    if(markerList[i].uId==uniqueId) return(i)
  }
  return(-1);
}

/**
 * display the infowindow
 *
 * @param Marker marker : the marker
 */
function displayWindowInfo(marker)
{
  gmaps.currentInfo=marker.info;
  gmaps.infoWindow.close();
  gmaps.infoWindow.setContent($('#iGMapsInfoWindowContent').clone().each(renameId).get(0));
  gmaps.infoWindow.open(marker.map, marker);
  displayPictureInfo(gmaps.currentInfo.displayed);
}
function renameId(i, e)
{
  if(e.id!='') e.id='c'+e.id;
  $(e).children().each(renameId);
}


/**
 *
 */
function displayPictureInfo(index)
{
  gmaps.currentInfo.displayed=index;
  if(gmaps.currentInfo.imgName[index]=='')
  {
    $('#ciGMIWC_title').html('&nbsp;');
  }
  else
  {
    $('#ciGMIWC_title').html(gmaps.currentInfo.imgName[index]);
  }
  $('#ciGMIWC_img').attr('src', gmaps.currentInfo.imgTn[index]);

  $('#ciGMIWC_img').unbind();
  if(gmaps.currentInfo.imgCatsUrl[index].length==1)
  {
    $('#ciGMIWC_img').bind('click',
      function ()
      {
        window.location=gmaps.currentInfo.imgCatsUrl[gmaps.currentInfo.displayed][0];
      }
    );
  }
  else
  {
    $('#ciGMIWC_showcatList').html('');
    for(var i=0;i<gmaps.currentInfo.imgCatsUrl[index].length;i++)
    {
      $('#ciGMIWC_showcatList')
        .append('<li><a href="'+gmaps.currentInfo.imgCatsUrl[index][i]+'">'+gmaps.currentInfo.imgCatsNames[index][i]+'</a></li>');
    }
    $('#ciGMIWC_img, #ciGMIWC_showcat')
      .bind('mouseenter', function () { $('#ciGMIWC_showcat').css('display', 'block'); } )
      .bind('mouseleave', function () { $('#ciGMIWC_showcat').css('display', 'none'); } );
  }

  if(gmaps.currentInfo.nbImg>1)
  {
    $('#ciGMIWC_picnum').html((index+1)+'/'+gmaps.currentInfo.nbImgTxt);
    $('#ciWALeft, #ciWARight').css('display', 'inline-block');
  }
  else
  {
    $('#ciGMIWC_picnum').html(gmaps.currentInfo.nbImgTxt);
    $('#ciWALeft, #ciWARight').css('display', 'none');
  }
}

/**
 *
 */
function displayPicturePrev()
{
  gmaps.currentInfo.displayed--;
  if(gmaps.currentInfo.displayed<0) gmaps.currentInfo.displayed=gmaps.currentInfo.nbImg-1;
  displayPictureInfo(gmaps.currentInfo.displayed);
}

/**
 *
 */
function displayPictureNext()
{
  gmaps.currentInfo.displayed++;
  if(gmaps.currentInfo.displayed>=gmaps.currentInfo.nbImg) gmaps.currentInfo.displayed=0;
  displayPictureInfo(gmaps.currentInfo.displayed);
}


/**
 * check if zoomLevel
 */
function fitToBounds(bounds, mapIndex)
{
  gmaps.maps[mapIndex].gMap.fitBounds(bounds);

  if(gmaps.maps[mapIndex].zoomLevelMaxActivated &&
     gmaps.maps[mapIndex].gMap.getZoom() > gmaps.maps[mapIndex].zoomLevel)
  {
    gmaps.maps[mapIndex].gMap.setZoom(gmaps.maps[mapIndex].zoomLevel);
  }
}

function initializeMapViewport(mode, mapIndex)
{
  if(mapIndex>-1 &&
     ($('#'+gmaps.maps[mapIndex].id+'Content').dialog('isOpen') && mode=='loaded' || mode=='open') &&
     (gmaps.maps[mapIndex].gMap.viewportInitialized==false)
    )
  {
    /*
     * if the container is not visible when map are built, they are
     * not initialized correctly
     *
     * when dialog is opened for the first time, proceed to map
     * finalization :
     *  - resize
     *  - center the map
     *  - add handlers on events 'dragend' and 'zoom_change'
     *    allowing to reload markers according to the new viewport
     */
    google.maps.event.trigger(gmaps.maps[mapIndex].gMap, 'resize');

    // reduce copyright size... ^_^
    $('#'+gmaps.maps[mapIndex].id+' span, #'+gmaps.maps[mapIndex].id+' a').css('font-size', '55.0%');


    if(gmaps.geolocated)
    {
      if(gmaps.maps[mapIndex].fitToBounds, mapIndex)
      {
        fitToBounds(gmaps.bounds, mapIndex);
      }
      else
      {
        gmaps.maps[mapIndex].gMap.setCenter(gmaps.bounds.getCenter());
      }
    }
    else
    {
      fitToBounds(gmaps.maps[mapIndex].gMap.kmlFile.getDefaultViewport(), mapIndex);
    }

    google.maps.event.addListener(
      gmaps.maps[mapIndex].gMap,
      'dragend',
      function()
      {
        loadMarkers(this);
        $('#gmapsBoundMap').css('display', 'inline');
        $('#gmapsBoundKml').css('display', 'inline');
      }
    );

    google.maps.event.addListener(
      gmaps.maps[mapIndex].gMap,
      'zoom_changed',
      function()
      {
        loadMarkers(this);
        gmaps.infoWindow.close();
        $('#gmapsBoundMap').css('display', 'inline');
        $('#gmapsBoundKml').css('display', 'inline');
      }
    );

    gmaps.maps[mapIndex].gMap.viewportInitialized=true;
  }

  if(mapIndex>-1) loadMarkers(gmaps.maps[mapIndex].gMap);
}


$(window).load(function ()
  {
    // all maps have the same initials bounds
    gmaps.currentInfo=null;

    gmaps.bounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(gmaps.bounds.south, gmaps.bounds.west),
      new google.maps.LatLng(gmaps.bounds.north, gmaps.bounds.east)
    );

    gmaps.infoWindow = new google.maps.InfoWindow();
    google.maps.event.addListener(
     gmaps.infoWindow,
     'closeclick',
     function () {
       $('body').append($('#iGMapsInfoWindowContent'));
       gmaps.infoWindow.setContent('');
       $('#ciGMIWC_img').unbind();
     }
    );

    /*
     * initialize map on the server side (call the 'public.maps.init'
     * function)
     */
    $.ajax(
      {
        type: "POST",
        url: "plugins/GMaps/gmaps_ajax.php",
        async: true,
        data: { ajaxfct:"public.maps.init", category:gmaps.categoryId, mapId:'n' },
        success:
          function(msg)
          {
            gmaps.requestId=msg;
            for(var i=0;i<gmaps.maps.length;i++)
            {
              initializeMapViewport('loaded', i);
            }
          }
      }
    );

    for(var i=0;i<gmaps.maps.length;i++)
    {
      // prepare google map maps
      createMap(gmaps.maps[i], i);

      // if size map depends from windows size, apply new dimensions to map
      if(gmaps.maps[i].sizeMode=='A')
      {
        $('#'+gmaps.maps[i].id).css(
          {
            width: ($(window).width()*gmaps.popupAutomaticSize)+'px',
            height:($(window).height()*gmaps.popupAutomaticSize)+'px'
          }
        );
      }

      // initialize dialog box for maps
      $('#'+gmaps.maps[i].id+'Content').dialog(
        {
          autoOpen:false,
          width:'auto',
          height:'auto',
          modal: true,
          closeText:'X',
          dialogClass: 'gmapsPopup',
          title: gmaps.maps[i].title,
          open: function ()
            {
              initializeMapViewport('open', $(this).data('index'));
            }
        }
      ).data('index', i);

      if(gmaps.geolocated)
      {
        $('div.gmapsPopup div.ui-dialog-titlebar')
        .append('<a href="#" id="gmapsBoundMap" style="display:none;" onclick="fitToBounds(gmaps.bounds, '+i+'); $(this).css(\'display\', \'none\').blur(); return(false);">'+
                '<span>&there4;</span></a>');
        $('#gmapsBoundMap').attr('title', gmaps.lang.boundmap);
      }

      if(gmaps.maps[i].gMap.kmlFile!=null)
      {
        $('div.gmapsPopup div.ui-dialog-titlebar')
          .append('<a href="#" id="gmapsBoundKml" onclick="fitToBounds(gmaps.maps['+i+'].gMap.kmlFile.getDefaultViewport(), '+i+'); $(this).css(\'display\', \'none\').blur(); return(false);">'+
                  '<span>&sim;</span></a>');
        $('#gmapsBoundKml').attr('title', gmaps.lang.boundkml);
      }

      $('div.gmapsPopup div.ui-dialog-titlebar')
      .append('<span id="gmapsLoading" style="display:none;"><img src="./plugins/GrumPluginClasses/icons/processing.gif"><span>'+gmaps.lang.loading+'</span></span>');

      $('#ui-dialog-title-iGMapsIconContent')
      .append('<span id="gmapsNbPhotos"></span>');


    }

  }
);