source: extensions/GMaps/js/gmapsMarkup.js @ 11342

/**
 * -----------------------------------------------------------------------------
 * file: gmapsMarkup.js
 * file version: 1.1.1
 * date: 2011-04-13
 */

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
    ];


function markupMaps()
{
  /**
   * create the map
   *
   * @param Object properties : map properties
   * @param Integer gmapsIndex : index in the map list
   */
  this.createMap = function (properties, gmapsIndex)
  {
    var bounds = new google.maps.LatLngBounds(
          new google.maps.LatLng(properties.mapBounds.south, properties.mapBounds.west),
          new google.maps.LatLng(properties.mapBounds.north, properties.mapBounds.east)
        ),
        map = new google.maps.Map($("#"+properties.id).get(0),
          {
            backgroundColor:'#ffffff',
            mapTypeId: properties.mapType,
            zoom: properties.zoomLevel,
            center: 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.bounds=bounds;
    map.kmlFile=kmlFile;
    map.markers=new Array();
    map.gmapsIndex=gmapsIndex;
    map.width=properties.width;
    map.height=properties.height;
    map.callId=0;
    map.allowBubble=properties.allowBubble;
    map.initialized=false;
    properties.gMap=map;


    if(properties.geolocated)
    {
      if(properties.fitToBounds)
      {
        fitToBounds(map.bounds, gmapsIndex);
      }
      else
      {
        map.setCenter(map.bounds.getCenter());
      }
    }

    if(properties.markerVisible)
    {
      loadMarkers(map);
    }
    else
    {
      initializeMapViewport(gmapsIndex);
    }
  };

  /**
   * load markers from the server
   *
   * @param Map map : the map
   */
  var loadMarkers = function(map)
  {
    if(map.getBounds()==null) return(false);
    map.callId++;

    datas={
      requestId:gmapsMarkup.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.width,
      height:map.height,
      distanceTreshold:20,
      loadIndex:map.gmapsIndex
    };

    $.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(gmapsMarkup.maps[tmp.loadIndex].gMap.callId==tmp.callId)
            {
              tmp.markers.sort(compareMarkers);
              applyMarkers(gmapsMarkup.maps[tmp.loadIndex].gMap, tmp.markers);
              initializeMapViewport(tmp.loadIndex);
            }
          }
      }
    );
  };

  /**
   * 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
   */
  var applyMarkers = function(map, markers)
  {
    if(map==null) return(false);

    /*
     * 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
        }
      );

      if(map.allowBubble)
      {
        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;
        }
      }
    }
  };

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

  var markerInList=function(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
   */
  var displayWindowInfo=function(marker)
  {
    gmapsMarkup.currentInfo=marker.info;
    gmapsMarkup.infoWindow.close();
    gmapsMarkup.infoWindow.setContent($('#iGMapsInfoWindowContent').clone().each(renameId).get(0));
    gmapsMarkup.infoWindow.open(marker.map, marker);
    displayPictureInfo(gmapsMarkup.currentInfo.displayed);
  };
  var renameId=function(i, e)
  {
    if(e.id!='') e.id='c'+e.id;
    $(e).children().each(renameId);
  };


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

    $('#ciGMIWC_img').unbind();
    if(gmapsMarkup.currentInfo.imgCatsUrl[index].length==1)
    {
      $('#ciGMIWC_img').bind('click',
        function ()
        {
          window.location=gmapsMarkup.currentInfo.imgCatsUrl[gmapsMarkup.currentInfo.displayed][0];
        }
      );
    }
    else
    {
      $('#ciGMIWC_showcatList').html('');
      for(var i=0;i<gmapsMarkup.currentInfo.imgCatsUrl[index].length;i++)
      {
        $('#ciGMIWC_showcatList')
          .append('<li><a href="'+gmapsMarkup.currentInfo.imgCatsUrl[index][i]+'">'+gmapsMarkup.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(gmapsMarkup.currentInfo.nbImg>1)
    {
      $('#ciGMIWC_picnum').html((index+1)+'/'+gmapsMarkup.currentInfo.nbImgTxt);
      $('#ciWALeft, #ciWARight').css('display', 'inline-block');
    }
    else
    {
      $('#ciGMIWC_picnum').html(gmapsMarkup.currentInfo.nbImgTxt);
      $('#ciWALeft, #ciWARight').css('display', 'none');
    }
  };

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

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


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

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

  var initializeMapViewport=function(mapIndex)
  {
    if(mapIndex>-1 && !gmapsMarkup.maps[mapIndex].gMap.initialized)
    {
      // reduce copyright size... ^_^
      $('#'+gmapsMarkup.maps[mapIndex].id+' span, #'+gmapsMarkup.maps[mapIndex].id+' a').css('font-size', '55.0%');

      if(gmapsMarkup.maps[mapIndex].markerVisible)
      {
        google.maps.event.addListener(
          gmapsMarkup.maps[mapIndex].gMap,
          'dragend',
          function()
          {
            loadMarkers(this);
          }
        );

        google.maps.event.addListener(
          gmapsMarkup.maps[mapIndex].gMap,
          'zoom_changed',
          function()
          {
            loadMarkers(this);
            gmapsMarkup.infoWindow.close();
          }
        );
      }


      if(gmapsMarkup.maps[mapIndex].kmlZoom && gmapsMarkup.maps[mapIndex].gMap.kmlFile!=null)
      {
        google.maps.event.addListenerOnce(
          gmapsMarkup.maps[mapIndex].gMap.kmlFile,
          'defaultviewport_changed',
          function()
          {
            fitToBounds(gmapsMarkup.maps[mapIndex].gMap.kmlFile.getDefaultViewport(), mapIndex);
          }
        );

      }

      gmapsMarkup.maps[mapIndex].gMap.initialized=true;
    }
  };

}


$(window).load(function ()
  {
    var mm=new markupMaps();

    // all maps have the same initials bounds
    gmapsMarkup.currentInfo=null;

    gmapsMarkup.infoWindow = new google.maps.InfoWindow();
    google.maps.event.addListener(
     gmapsMarkup.infoWindow,
     'closeclick',
     function () {
       //$('body').append($('#iGMapsInfoWindowContent'));
       gmapsMarkup.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:gmapsMarkup.categoryId, mapId:'y' },
        success:
          function(msg)
          {
            gmapsMarkup.requestId=msg;

            for(var i=0;i<gmapsMarkup.maps.length;i++)
            {
              // prepare google map maps
              $('#'+gmapsMarkup.maps[i].id).css(
                {
                  width: gmapsMarkup.maps[i].width+'px',
                  height:gmapsMarkup.maps[i].height+'px'
                }
              );

              mm.createMap(gmapsMarkup.maps[i], i);
            }
          }
      }
    );


    if($('#iGMapsInfoWindow').length==0)
    {
      $('body').append($('<div/>',
                        {
                          id:'iGMapsInfoWindow',
                          css:{display:'none'},
                        }
                      ).append($('<div/>',
                                  {
                                    id:'iGMapsInfoWindowContent'
                                  }
                                ).append($('<div/>',
                                            {
                                              id:'iGMIWC_title',
                                              html:'(title)'
                                            }
                                          )
                                        ).append($('<table/>',
                                                    {
                                                      id:'iGMIWC_thumb'
                                                    }
                                                  ).append($('<tr/>')
                                                            .append($('<td/>',
                                                                      {
                                                                        css:{width:'28px'}
                                                                      }
                                                                     ).append($('<div id="iWALeft" onclick="mm.displayPicturePrev();"/>')
                                                                             )
                                                                   )
                                                            .append($('<td/>').append($('<img/>',
                                                                                          {
                                                                                            id:'iGMIWC_img',
                                                                                            src:''
                                                                                          }
                                                                                        )
                                                                                      )
                                                                   )
                                                            .append($('<td/>',
                                                                      {
                                                                        css:{width:'28px'}
                                                                      }
                                                                    ).append($('<div id="iWARight" onclick="mm.displayPictureNext();">')
                                                                            )
                                                                  )
                                                          )
                                                )
                                       .append($('<div/>',
                                                  {
                                                    id:'iGMIWC_picnum',
                                                    html:'0/0 photo'
                                                  }
                                                )
                                              )
                                       .append($('<div/>',
                                                  {
                                                    id:'iGMIWC_showcat',
                                                    css:{display:'none'}
                                                  }
                                                ).append($('<span/>',
                                                            {
                                                              html:'gmaps_i_show_this_picture_in'
                                                            }
                                                          )
                                                        )
                                                  .append($('<ul/>',
                                                            {
                                                              id:'iGMIWC_showcatList'
                                                            }
                                                          )
                                                        )
                                              )
                              )
                    );
    }

  }
);