var vectorLayer = new ol.layer.Vector({
    title: "Románské kostely",
    projection: "EPSG:3857",
    source: new ol.source.Vector({
        format: new ol.format.GeoJSON()
    }),
    style: function(feat, res) {
        var icon = feat.get('icon');
        var img_src = "img/Ol_icon_red.png";
        if (icon == 'rotunda') {
            img_src = "img/Ol_icon_blue.png";
        }
        else if (icon == 'question') {
            img_src = "img/Ol_question_green.png";
        }
        // FIXME je offset k něčemu dobrý?
        var offset = feat.get('iconOffset');
        return [new ol.style.Style({
            image: new ol.style.Icon({
                src: img_src
                }),
            text: new ol.style.Text({
                font: 'bolder 10px serif',
                text: feat.get('title'),
                offsetY: 12,
                textBaseLine: "bottom"
            })
        })];
   }
});

var map = new ol.Map({
  target: "map",
  projection: "EPSG:3857",
  loadTilesWhileAnimating: true,
  loadTilesWhileInteracting: true,
  layers: [
    new ol.layer.Tile({
      title: "OSM Map",
      source: new ol.source.OSM()
    }),
    
    // to be filled in later
    vectorLayer 
  ],
  view: new ol.View({
    //Village Čihošť is the geographical center of Czechia
    center: ol.proj.fromLonLat([15.338611, 49.743889]),
    zoom: 8
  })
});

var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function(data) {
  if (httpRequest.readyState != 4 || httpRequest.status != 200) {
      return;
  }
  else {
      csv2geojson.csv2geojson(httpRequest.responseText, {
              latfield: 'lat',
              lonfield: 'lon',
              delimiter: '\t'
          },
          function(err, data) {
              var geoJsonFormat = new ol.format.GeoJSON();
              var features = geoJsonFormat.readFeatures(
                  data, {
                      featureProjection: 'EPSG:3857'
                  }
              );
              var layerSource = vectorLayer.getSource();
              layerSource.addFeatures(features);
          });
}};
httpRequest.open('GET', 'kostely.tsv');
httpRequest.send();

ol.control.WMSLegend = function(opt_options) {
    var options = opt_options || {};
    this.options = options;
    this.div = document.createElement('div');
    var legendP = document.createElement('p');
    legendP.innerHTML = 'Legend:';
    this.div.className = this.options.class + ' ol-unselectable';
    this.div.appendChild(legendP);
    ol.control.Control.call(this, {
        element: this.div
    });
};
ol.inherits(ol.control.WMSLegend, ol.control.Control);

ol.control.WMSLegend.prototype.drawLegendItem = function(layer) {
    if (layer.get('showLegend') === true) {
        try {
            var url = layer.getSource().getUrls()[0];
        }
        catch(err) {
            var url = layer.getSource().getUrl();
        }
        var legendImg = document.createElement('img');
        legendImg.src = url + '&version=' + this.options.wmsVersion + '&service=WMS&request=GetLegendGraphic&sld_version=1.1.0&layer=' + layer.getSource().getParams().layers + '&format=' + this.options.format;
        this.div.appendChild(legendImg);
    }
}

ol.control.WMSLegend.prototype.setMap = function(map){
    ol.control.Control.prototype.setMap.call(this, map);
    this.options.wmsVersion = this.options.wmsVersion || '1.3.0';
    this.options.format = this.options.format || 'image/png';
    var layers = map.getLayers().getArray();
    for (var i=0; i<layers.length; i++) {
        if (layers[i] instanceof ol.layer.Group) {
            var layersFromGroup = layers[i].getLayers().getArray();
            for (var j=0;j<layersFromGroup.length;j++) {
                this.drawLegendItem(layersFromGroup[j]);
            }
        } else {
            this.drawLegendItem(layers[i]);
        }
    }
};

map.controls =  ol.control.defaults({ attribution: false });
map.controls.extend([
  new ol.control.Attribution({
    collapsible: true
  }),
  new ol.control.MousePosition()
]);

var element = document.getElementById('popup');
 
var popup = new ol.Overlay({
    element: element,
    positioning: 'bottom-center',
    stopEvent: false,
    offset: [0, -10]
});
map.addOverlay(popup);

// display popup on click
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
    function(feature) {
      return feature;
    });

if (feature) {
  var coordinates = feature.getGeometry().getCoordinates();
  popup.setPosition(coordinates);
  $(element).popover({
    'placement': 'top',
    'html': true,
    'content': feature.get('description')
  });
  $(element).popover('show');
} else {
  $(element).popover('destroy');
}
});