content	= document.getElementById('popup-content');
var container	= document.getElementById('popup');
var closer	= document.getElementById('popup-closer');
var sanSalvador	= ol.proj.fromLonLat([-89.0000, 13.6990]);
var overlay = new ol.Overlay({
    element: container,
    autoPan: true,
    autoPanAnimation: {
      duration: 250
    }
});
closer.onclick = function() {
  overlay.setPosition(undefined);
  closer.blur();
  return false;
};

var view = new ol.View({
    center: sanSalvador,
    zoom: 9.4
});
var bingMapsAerial = new ol.layer.Tile({
  preload: Infinity,
  source: new ol.source.BingMaps({
    key: 'AqGsAuRDjXHYrRrLeHXRICtHWKgKpCwZGzS9aGnz55FaqZgj5JtK6-lkG-fAoBjp',
    imagerySet: 'AerialWithLabelsOnDemand',
  })
});			
var osmLayer = new ol.layer.Tile({
    preload: 4,
    source: new ol.source.OSM()
});
var wmsSource = new ol.source.TileWMS({
	url: document.getElementById("url").value,
	params: {
		'LAYERS': document.getElementById("layer").value,
	},
	serverType: 'geoserver'
});
wmsLayer = new ol.layer.Tile({
	source: wmsSource
});
map = new ol.Map({
    target: 'map',
    //layers: [osmLayer,wmsLayer],
		layers: [bingMapsAerial,wmsLayer],		
    overlays: [overlay],
    loadTilesWhileAnimating: true,
    view: view
});
map.on('singleclick', function(evt) {
	let coordinate 		= evt.coordinate;
	let view            = map.getView();
	let source          = wmsLayer.getSource();
	let viewResolution  = view.getResolution();
	let viewProjection  = view.getProjection();
  //console.log(coordinate);
  //console.log(viewResolution);
  //console.log(viewProjection);
	let url             = source.getGetFeatureInfoUrl(evt.coordinate, viewResolution, viewProjection,{'INFO_FORMAT': 'application/json', 'FEATURE_COUNT': 50});
	if (url) {
		//var parser = new ol.format.GeoJSON();
		let r = new XMLHttpRequest();
		r.open("GET",url, true);
		r.onreadystatechange = function () {
			if (r.readyState != 4 || r.status != 200) return;
			data = JSON.parse(r.responseText);
			//console.log(data);
			showContent(data.features[0].properties,coordinate);
		};
		r.send();
	}
	overlay.setPosition(coordinate);
});
function flyTo(location, done) {
	var duration = 4000;
	//var zoom    = 14.2;
	var zoom    = 18.5;
	var parts   = 4;
	var called  = false;
	function callback(complete) {
		--parts;
		if (called) {
		  return;
		}
		if (parts === 0 || !complete) {
		  called = true;
		  done(complete);
		}
	}
	view.animate({
		center: location,
		duration: duration
	}, callback);
	view.animate({
		zoom: zoom - 1,
		duration: duration / 2
	}, {
		zoom: zoom,
		duration: duration / 2
	}, callback);
}