var currentPosition = {
    lat: 51.0420162,
    lon: 13.7976983
}
var geoListeners = []

function POI(info) {
    this.info = info
}

POI.prototype.getDistance = function() {
    return WGS84Util.distanceBetween({
        coordinates: [this.info.lon, this.info.lat]
    }, {
        coordinates: [currentPosition.lon, currentPosition.lat]
    })
}

POI.prototype.makeArrowEl = function() {
    var el = $('<div class="geo-arrow"><p class="arrow"><span>➢</span></p><p class="dist"></p></div>')

    var update = function() {
        var bearing = -180.0 * Math.atan2(
            this.info.lat - currentPosition.lat,
            this.info.lon - currentPosition.lon
        ) / Math.PI
        el.find('.arrow span').css('transform', 'rotate(' + (bearing - (currentPosition.heading || 0)) + 'deg)')
        if (typeof currentPosition.heading === 'number')
          el.find('.arrow span').text("➡")

        el.find('.dist').text(formatDistance(this.getDistance()))
    }.bind(this)

    // Initialize:
    update()
    // hook onGeo listener
    geoListeners.push(update)

    return el
}

function onGeo(geo) {
    console.log("onGeo", geo)
    currentPosition = {
        lat: geo.coords.latitude,
        lon: geo.coords.longitude,
        heading: geo.heading
    }
    // call listeners
    geoListeners.forEach(function(f) {
        f(currentPosition)
    })
}

function formatDistance(x) {
    if (x >= 1000) {
        return (Math.round(x / 100) / 10) + " km"
    } else {
        return Math.round(x) + " m"
    }
}

function makeLink(link) {
    var a = $('<a></a>')
    a.attr('href', link.indexOf("://") < 0 ? "http://" + link : link)
    a.text(link.replace(/^\w+?:\/\//, "").replace(/\/+$/, ""))
    return a
}

navigator.geolocation.getCurrentPosition(function(geo) {
    onGeo(geo)
    navigator.geolocation.watchPosition(onGeo, null, {
        enableHighAccuracy: true
    })
})

var h3 = $('<h3 id="foodlocator">Imbißmöglichkeiten anzeigen</h3>')
$('article').append(h3)

var ran = false
h3.click(function() {
    if (ran) return
    ran = true

    h3.addClass('expanded')
    h3.text("Lade Imbißmöglichkeiten...")

    $.ajax({
        url: "pois.json",
        success: function(json) {
            var pois = json.elements.map(function(info) {
                return new POI(info)
            }).filter(function(poi) {
                return poi.getDistance() <= 1000
            }).sort(function(a, b) {
                return a.getDistance() - b.getDistance()
            })

            var dl = $('<dl id="food"></dl>')
            pois.forEach(function(poi) {
                if (!poi.info.tags.name) {
                    console.warn("No name:", poi.info)
                    return  // Skip
                }

                var dt = $('<dt><a></a></dt>')
                dt.find('a').
                  attr('href', "https://www.openstreetmap.org/" + poi.info.type + "/" + poi.info.id).
                  text(poi.info.tags.name)

                if (poi.info.tags['addr:street'] && poi.info.tags['addr:housenumber']) {
                    var addr = $('<span class="addr"></span>')
                    addr.text(poi.info.tags['addr:street'] + " " +
                              poi.info.tags['addr:housenumber'])
                    dt.append(addr)
                }
                if (poi.info.tags.website) {
                    var addr = $('<span class="website"></span>')
                    addr.append(makeLink(poi.info.tags.website))
                    dt.append(addr)
                }
                dt.prepend(poi.makeArrowEl())
                dl.append(dt)

                if (poi.info.tags.opening_hours) {
                    poi.info.tags.opening_hours.split(/\s*;\s*/g).forEach(function(range) {
                        var dd = $('<dd></dd>')
                        dd.text(range)
                        dl.append(dd)
                    })
                }
            })
            $('article').append(dl)
            h3.text("Imbißmöglichkeiten in der Umgebung")
            $('article').append("<p style='margin-top: 1.5em'>Quelle: OpenStreetMap. Stündlich aktualisiert mithilfe Overpass Turbo.</p>")
        },
        error: function() {
            h3.text("Fehler! Versuch z.B. osm24.eu stattdessen.")
        }
    })
})