var rosen;
var map;

function init() {
  rosen = new Rosen("map", {
    apiKey: "2jr5nchcswemrfjj67jvjaqu", // アクセスキーはサンプル用です。実際にご利用されるときは書き換えてください。
    consoleViewControl: true
  });

  rosen.on('selectLine', function(data) {
    console.log("data", data);
    if (data.lines.length > 0) {
      rosen.clearAll();
      showStationNumbersOnLine(data.lines.map(function(line) { return line.code; }));
    }
    else {
      console.log("路線なし");
    }
  });
}

function showStationNumbersOnLine(line_codes) {
  if (line_codes.length == 0) {
    return;
  }

  console.log("line_code", line_code);

  var line_code = line_codes[0];

  return rosen.getStationsByLineCode(line_code).then(function(stations) {
    console.log("stations", stations);

    var station_number_found = false;

    stations.forEach(function(station) {
      station.lines.forEach(function(line) {
        if (line.code == line_code) {
          console.log("line", line);

          if (line.station_number) {
            station_number_found = true;

            var color = "#" + line.color;
            var station_number = '<div style="background:white; font-size: 14px; padding: 0px 10px; height:20px; border: 4px solid ' + color + '; text-align:center; border-radius: 5px; display: table-cell; vertical-align:middle;">' + line.station_number + '</div>';

            var icon = L.divIcon({
              html: station_number,
              className: 'station_number',
              iconSize: [80, 30]
            });

            rosen.setStationMarker(station.code, {icon: icon});
          }
        }
      });
    });

    if (!station_number_found) {
      showStationNumbersOnLine(line_codes.slice(1));
    }
  });
}

window.addEventListener('load', init);