Triggering openPopup() with an AnimatedMarker in Leaflet

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width">             
        <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.min.js"></script>
        <script src="https://rawgithub.com/openplans/leaflet.animatedmarker/master/src/animatedmarker.js"></script>
        <script src="https://rawgithub.com/makinacorpus/leaflet.geometryutil/master/dist/leaflet.geometryutil.js"></script>
        <script type="text/javascript" src="https://maps.stamen.com/js/tile.stamen.js?v1.2.4"></script>  
        <style type="text/css">
            html, body {
                margin: 0 auto;
                padding: 0px;
                width: 100%;
                height: 100%;
            }
            #map {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>        
        <script type="text/javascript" src="./leaflet.geometryutil.js"></script>
        <script type="text/javascript" src="./trail.js"></script>
        <script type="text/javascript" src="./points-of-interest.js"></script>
        <script type="text/javascript">

var app = app || {};

app = (function(){

// alter Leaflet's Map's openPopup method so that multiple popups may be opened simultaneously
            L.Map = L.Map.extend({
                openPopup: function(popup) {
                    //this.closePopup(); 
                    this._popup = popup;
                    return this.addLayer(popup).fire('popupopen', {
                        popup: this._popup
                    });
                }
            });

// set up the map with, lat lon position, zoom level, and Stamen Terrain tiles
            var map = L.map('map').setView([32.5897, -116.4669], 13);
            var layer = new L.StamenTileLayer("terrain");
            map.addLayer(layer);

// variable for AnimatedMarker (will be added later)
            var animatedMarker;

// variable for geojson layer to display trail
            var trail = new L.geoJson(pct);
            trail.addTo(map);

// temporary array to store lat lon coordinates for animatedMarker
            var temp = [];

// create an empty feature group for POI markers and add it to map
            // add actual markers later
            var poi_markers = L.layerGroup().addTo(map);

// function that adds point of interest (poi) markers
            var fetchPOIs = function() {

var onEachFeature = function(feature, layer, animatedMarker){                    
                    var name = feature.properties.Name,
                        desc = feature.properties.Descriptio,
                        lat = feature.geometry.coordinates[1],
                        lon = feature.geometry.coordinates[0];

layer.bindPopup(popupContent(feature, layer, name, desc, lat, lon));

animatedMarker.on({'move': function(e){                      
                        // measure distance in pixels from animatedMarker to poi markers
                        var d = L.GeometryUtil.distance(map, e.latlng, [lat,lon]);
                        
                        // do a distance test to open / close popups
                        if (d < 100) { layer.openPopup(); }
                        if (d > 200) { layer.closePopup(); }
                        }
                    });
                };

// check point of interest data for what to add to popups
                var popupContent = function(feature, layer, name, desc, lat, lon) {                    
                    if (name && !desc) {
                        return "<h2>" + name + "</h2>";
                    } else if (name && desc) {
                        return "<h2>" + name + "</h2>" + "<p>" + desc + "</p>";
                    } else if (!name && desc) {
                        return "<p>" + desc + "</p>";
                    };
                }

// load markers (features from points-of-interest.js) in a geojson layer
                var markers = L.geoJson(features, {
                    // pass onEachFeature an anonymous function so that animatedMarker can then be passed as a parameter 
                    onEachFeature: function(feature, layer){
                        onEachFeature(feature, layer, animatedMarker);
                    }
                });
                
                // add the geojson markers to the feature group so that it's added to the map
                poi_markers.addLayer(markers);

};

// on eachLayer function for geojson
            var eachLayer = trail.eachLayer(function(layer){

var coordinates = layer.feature.geometry.coordinates,
                    len = coordinates.length,
                    i = 0;
                for (i; i<len; i++){
                    var lat = coordinates[i][1],
                        lon = coordinates[i][0];
                    // reverse order of lon, lat for L.polyline
                    temp.push([lat, lon]);
                }
            });

// create a polyline for animatedMarker path
            var line = new L.polyline(temp),
            
            // add the animatedMarker using the polyline latlngs
            animatedMarker = L.animatedMarker(line.getLatLngs(), {
                    autoStart: false,
                    distance: 2000,
                    interval: 1000
                });
            
            // function to keep map centered on animatedMarker as it moves
            var pan_map = function(){
                map.panTo({lon: animatedMarker['_latlng'].lng, lat: animatedMarker['_latlng'].lat});;
            };

// init the whole damn thing!
            var init  = function(){
                fetchPOIs();
                map.addLayer(animatedMarker);                                
                animatedMarker.start();
                setInterval(function(){
                    pan_map();
                }, 1000);
            }

return {
                init : init,
                animatedMarker: animatedMarker
            }
            
        })();

window.addEventListener('DOMContentLoaded', app.init);

</script>   
    </body>
</html>

Modified http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js to a secure url

Modified http://rawgithub.com/openplans/Leaflet.AnimatedMarker/master/src/AnimatedMarker.js to a secure url

Modified http://rawgithub.com/makinacorpus/Leaflet.GeometryUtil/master/dist/leaflet.geometryutil.js to a secure url

Modified http://maps.stamen.com/js/tile.stamen.js?v1.2.4 to a secure url

https://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js

https://rawgithub.com/openplans/Leaflet.AnimatedMarker/master/src/AnimatedMarker.js

https://rawgithub.com/makinacorpus/Leaflet.GeometryUtil/master/dist/leaflet.geometryutil.js

https://maps.stamen.com/js/tile.stamen.js?v1.2.4