source: extensions/rv_gmaps/trunk/template/data_handler.js @ 12698

function PwgDataHandler( map, opts )
{
        this._map = map;
        this._infoWindow = new google.maps.InfoWindow();
        this.options = jQuery.fn.extend(
                {
                        markerOptions: {},
                        show_all_img_src: null
                }
                , opts || {} );

        google.maps.event.addListener( map, "infowindowclose", function() {map.getInfoWindow().pwgMarker=null;} );
}

PwgDataHandler.prototype =  {

_map: null,
_infoWindow: null,
options: {},
_markers: [],
_navHtmlIds: ["gotoPrevImage", "gotoNextImage"],
_timerBindPictureNavigation: null,
_prevResult: { nb_items:0 },


terminate: function()
{
        this._map = null;
        try {
                for (i=0; i<this._markers.length; i++)
                        this._markers[i].pwg = null;
                this._markers.length = 0;
        }
        catch(e){}
},

handle: function( data )
{
        var i;
        if (document.title != data.title )
                document.title = data.title;
        var elt = document.getElementById("aPageUrl");
        if (elt && elt.href!=data.page_url.urlNoHtm() )
        {
                elt.href = data.page_url.urlNoHtm();
                elt.innerHTML = data.title;
                elt.title = Localization.fmt1("go to %s", data.title);
        }
        var elt = document.getElementById("aBlowup");
        if (elt && elt.href!=data.blowup_url.urlNoHtm())
                 elt.href = data.blowup_url.urlNoHtm();

        var elt = document.getElementById("aKml");
        if (elt && elt.href!=data.kml_url.urlNoHtm())
        {
                 elt.href = data.kml_url.urlNoHtm();
                 elt.title = Localization.fmt1("opens %s in Google Earth", data.title);
        }
        var changed = true;
        if (this._prevResult.nb_items==data.nb_items && this._markers.length==data.image_clusters.length )
        {
                changed = false;
                if (this._markers.length>0 && !this._markers[0].getPosition().equals( data.image_clusters[0].position ) )
                        changed=true;
        }

        if (changed)
        {
                var newMarkers = [];
                var infoWindowMarker = this._infoWindow.pwgMarker;

                for (i=0; i<data.image_clusters.length; i++)
                {
                        var cluster = data.image_clusters[i];
                        var theTitle = "";
                        if (cluster.nb_items>1)
                                theTitle = Localization.fmt1("%d photos", cluster.nb_items);
                        else
                                theTitle = cluster.items[0].name;

                        var marker;
                        marker = this._markers.pop();
                        if (marker && marker==infoWindowMarker)
                        {
        marker.setMap(null);
                                google.maps.event.clearListeners(marker, "click" );
                                google.maps.event.clearListeners(marker, "dblclick" );
                                this._infoWindow.pwgMarker = infoWindowMarker = null;
                                if (document.is_debug) glog('removed marker with infoWindow');
                                marker = this._markers.pop();
                        }

                        if (!marker)
                        {
                                marker = new google.maps.Marker(this.options.markerOptions);
        marker.setPosition(cluster.position);
        marker.setTitle(theTitle);
                                google.maps.event.addListener( marker, "click", pwgBind(this, this._onMarkerClick, marker) );
                                google.maps.event.addListener( marker, "dblclick", pwgBind(this, this._onMarkerDblClick, marker) );
        marker.setMap(this._map);
                        }
                        else
                        {
                                marker.currentImageIndex=0;
                                marker.setPosition( cluster.position );
                                marker.setTitle(theTitle);
                                marker.setMap(this._map);
                        }

                        newMarkers.push(marker);

                        marker.pwg = {
                                nb_items: cluster.nb_items,
                                images: cluster.items,
                                bounds: cluster.bounds,
                                blowup_url: cluster.blowup_url
                                };
                }

                for (i=0; i<this._markers.length; i++)
                {
                        this._markers[i].setMap(null);
                        google.maps.event.clearListeners(this._markers[i], "click" );
                        google.maps.event.clearListeners(this._markers[i], "dblclick" );
                }

                this._markers = newMarkers;

                this._prevResult.nb_items=data.nb_items;
        }

        document.getElementById("dataLoadStatus").innerHTML = Localization.fmt1("%d photos", data.nb_items);
},

_onMarkerClick: function( marker )
{
        if (this._infoWindow.pwgMarker == marker )
                return; // already open
        var content = "";
        if ( !marker.currentImageIndex )
                marker.currentImageIndex = 0;
        content += '<div class="gmiw_header" style="' + (marker.pwg.images.length>1 ? '': 'display:none')+ '">';
        content += '<span id="pwgImageCounters">'+this.buildCurrentPictureCounterHtml(marker)+'</span> ';
        content += '<a href="javascript:void(0);" id="'+this._navHtmlIds[0]+'">';
        content +=    '<span>'+ "&laquo; " + Localization.get('Prev') + '</span>';
        content += '</a>';
        content += " ";
        content += '<a href="javascript:void(0);" id="'+this._navHtmlIds[1]+'">';
        content +=    '<span>'+Localization.get('Next') + " &raquo;"+'</span>';
        content += '</a>';
        content += " ";
        var imgShowAll = '';
        if (this.options.show_all_img_src)
                imgShowAll = '<img src="'+this.options.show_all_img_src+'" alt="" style="border:0" /> ';
        content += '<a id="pwgImageBlowup" href="'+marker.pwg.blowup_url+'" onclick="return PwgDataHandler.blowupUrl(this.href);" title='+Localization.getQ('show all photos around this location')+'>'+
                                                imgShowAll+ '<span>'+Localization.get('Show all')+'</span>'+
                                        '</a>';
        content += '</div>';
        content += '<div id="pwgImageDetail">' + this.buildCurrentPictureHtml( marker ) + '</div>';

        this._infoWindow.setContent( content );
        this._infoWindow.setPosition( marker.getPosition() );
        this._infoWindow.open( this._map );

        // bind to next / prev a little later because sometimes the nodes are not immediately created
        if (this._timerBindPictureNavigation) clearTimeout(this._timerBindPictureNavigation);
        this._timerBindPictureNavigation = null;
        if (marker.pwg.images.length>1)
                this._timerBindPictureNavigation = setTimeout( pwgBind(this, this._onTimeoutBindPictureNavigation, marker), 250 );
},

_onMarkerDblClick: function( marker )
{
        this._map.fitBounds( marker.pwg.bounds );
},

buildCurrentPictureHtml: function( marker )
{
        var imageDetail = marker.pwg.images[marker.currentImageIndex];
        var res = "";
        res += '<div class="gmiw_imageTitle">' + imageDetail.name + "</div>";
        res +=
'<div class="gmiw_imageContent">' +
'<div class="gmiw_imageWrap">'+
  '<a href="'+imageDetail.page_url+'">' +
  '<img src="' + imageDetail.tn + '" alt="thumb" />'+
'</a></div>' +
'<div class="gmiw_imageComment">' + imageDetail.comment + '</div>' +
'</div>';
        return res;
},

buildCurrentPictureCounterHtml: function( marker )
{
        var res =
                '<b>'+(marker.currentImageIndex+1)+'</b>'+
                '/' +
                '<b>'+marker.pwg.images.length+'</b>';
        if (marker.pwg.nb_items>marker.pwg.images.length)
                res+= " "+Localization.fmt1("out of %d", marker.pwg.nb_items );
        return res;
},


_onTimeoutBindPictureNavigation: function( marker )
{
        clearTimeout(this._timerBindPictureNavigation);
        this._timerBindPictureNavigation = null;
        this._infoWindow.pwgMarker = marker;
        for (var i=0; i< this._navHtmlIds.length; i++)
        {
                var elt = document.getElementById( this._navHtmlIds[i] );
                if (elt)
                        google.maps.event.addDomListener(elt, "click", pwgBind(this, this._onPictureNavigate, marker, i) );
        }
},

_onPictureNavigate: function(marker, dir )
{
        if (dir==0) dir=-1;
        marker.currentImageIndex += dir;
        if (marker.currentImageIndex<0)
                marker.currentImageIndex = marker.pwg.images.length-1;
        else if (marker.currentImageIndex >= marker.pwg.images.length)
                marker.currentImageIndex = 0;

        try {
                var elt = document.getElementById( "pwgImageDetail" );
                elt.innerHTML = this.buildCurrentPictureHtml( marker );
        }
        catch (e)
        {
                alert (e.message);
        }

        try {
                var elt = document.getElementById( "pwgImageCounters" );
                elt.innerHTML = this.buildCurrentPictureCounterHtml( marker );
        }
        catch (e)
        {
                alert (e.message);
        }
        return false;
}

}

PwgDataHandler.blowupUrl = function(theUrl)
{
        jQuery.fx.off = true;
        jQuery.nyroModalManual( {
                url: theUrl,
                forceType: 'iframe',
                width: 1920
        });
        return false;
}


String.prototype.urlNoHtm = function()
{
        return this.replace( "&amp;", "&" );
}