function read_json(selector) {
  try {
    return JSON.parse(document.querySelector('#' + selector).innerText)
  } catch(e) {
    console.log("json error!")
    return []
  }
}

let map_mode = false
if (window.location.hash.indexOf('map') !== -1) {
  document.body.parentNode.classList.add('map')
  map_mode = true
}

let map = L.map('mapid').setView([25, 0], 2);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.dark',
    style: 'mapbox://styles/mapbox/dark-v9',
    accessToken: 'pk.eyJ1IjoiZmFuc2FsY3kiLCJhIjoiY2pvN3I1czJwMHF5NDNrbWRoMWpteHlrdCJ9.kMpM5syQUhVjKkn1iVx9fg'
}).addTo(map);
let points = read_json('citations')
let address = read_json('address')
let source = [0,0]
if (address) {
  source = address.slice(3,5).map(n => parseFloat(n))
  console.log(address, source)
}

var redDot = L.icon({
  iconUrl: '../reddot.png',
  iconSize:     [17, 17], // size of the icon
  iconAnchor:   [8, 8], // point of the icon which will correspond to marker's location
  popupAnchor:  [0, -5] // point from which the popup should open relative to the iconAnchor
});

points.forEach(point => {
  /*
    [
      "Face Alignment by Local Deep Descriptor Regression",
      "Rutgers University",
      [
        "Rutgers University",
        "40.47913175",
        "-74.431688684404",
        "Rutgers Cook Campus - North, Biel Road, New Brunswick, Middlesex County, New Jersey, 08901, USA"
      ]
    ]
  */

  const latlng = point.slice(5,7).map(n => parseFloat(n))
  // console.log(point)
  if (!latlng.length || isNaN(latlng[0]) || isNaN(latlng[1])) return
  var marker = L.marker(latlng, { icon: redDot }).addTo(map);
  marker.bindPopup([
    "<b>", point[0], "</b>",
    "<br>",
    point[1],
  ].join(''))
  // var arcStyle = {
  //   color: 'rgb(245, 246, 150)',
  //   fillColor: 'rgb(245, 246, 150)',
  //   opacity: 0.8,
  //   weight: '1',
  //   vertices: 100,
  // }
  // L.Polyline.Arc(source, latlng, arcStyle).addTo(map);
  // console.log(latlng)
  var pathStyle = {
    color: 'rgb(245, 246, 150)',
    fillColor: 'rgb(245, 246, 150)',
    opacity: 0.8,
    weight: '1',
  }
  L.bezier({
    path: [
      [
          {lat: source[0], lng: source[1]},
          {lat: latlng[0], lng: latlng[1]},
      ],
    ]
  }, pathStyle).addTo(map)
})

var marker = L.marker(source, { icon: redDot }).addTo(map);
marker.bindPopup([
  "<b>", document.querySelector('h2').innerText, "</b>",
  '<br/>',
  address[0]
].join(''))