//$.getJSON("data/ff8f1e8f-6cf5-4a7b-835b-5e2226c1e771_03b9b6b4-c8ab-4182-8902-1620eebe8889.json", function (data) {
$.getJSON("data/ff8f1e8f-6cf5-4a7b-835b-5e2226c1e771_de7df5b5-edd5-4070-840f-68854ffab9aa.json", function (data) {
    var images = {};
    var mapContainer = $("<div />", {id: "mainMap", class: "mapDiv"});
    mapContainer.appendTo("body");
    var tiles = {
        "osm": L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
        }),
        "openstreetmap": L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }),
        "esri sat": L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
            attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
        }),
        "google sat": L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
            maxZoom: 20,
            subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
        })
    };
    var map = L.map("mainMap", {layers: [tiles.osm], maxZoom: 22, maxNativeZoom: 19});

    function styleTrack(feature) {
        var styles = {};
        styles.color = data.colors[feature.properties.activity_type];
        return styles;
    }

    var highlighted = null;

    function onClick(e) {
        var start = e.target.feature.geometry.properties.start_timestamp;
        var end = e.target.feature.geometry.properties.end_timestamp;
        var changed = highlighted !== e.target.feature;
        $.each(images, function (timestamp, board) {
                if ((timestamp >= start && timestamp < end) && changed) {
                    board.image.first().addClass("highlight");
                } else {
                    board.image.removeClass("highlight");
                    highlighted = null;
                }
            }
        );
        if (changed) {
            highlighted = e.target.feature;
        }
    }

    var coords = [];

    function onEachFeature(feature, layer) {
        layer.setStyle(styleTrack(feature));
        layer.on('click', onClick);
        if (feature.coordinates.length > 1) {
            coords = coords.concat(feature.coordinates.map(function (p) {
                return [p[1], p[0], 0.1];
            }));
        }
    }

    var track = L.geoJSON(data['track'], {
        //style: styleTrack,
        onEachFeature: onEachFeature
    }).addTo(map);

    map.fitBounds(track.getBounds());

    var heat = L.heatLayer(coords);
    L.control.layers(tiles, {"heatmap": heat}).addTo(map);

    var marker = null;
    var list = $("<ul />");
    $.each(data["boards"], function (index, entry) {
        //console.log(index, entry);
        var item = $("<li>", {class: entry.extra_data.activity_type});
        var container = $("<div>", {class: "board"});
        var image = $("<img>", {src: entry.image.replace("static/progress/", ""), height: 200});
        image.attr("data-time", entry.timestamp);
        image.hover(function () {
            marker = L.geoJSON(entry.coordinate).addTo(map);
        }, function () {
            map.removeLayer(marker);
        });
        images[entry.timestamp] = {image: image, coordinate: entry.coordinate};
        image.appendTo(container);
        container.appendTo(item);
        item.appendTo(list);
    });
    list.appendTo("body");
});