$(function() {
  var infoWindows = [];
  
  var markers = [
                                  [41.450264,2.253864,"Hotel Miramar","ok","https://www.badaweb.com/logos/mapa/19981023161200-383.png"],
            ];
  
  var map;
  var markerInput=[];
  
  var infoWindowMaker=function(markeri,nombre,mac){
    markeri.addListener('click', function() {
          for (var i=0;i<infoWindows.length;i++) {
             infoWindows[i].close();
          }
          infowindow = new google.maps.InfoWindow({
            content: '<a href="https://www.hotelmiramar.es/" target="_blank">'+nombre+'&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></a>'
          });
          infowindow.open(map,markeri);
          infoWindows.push(infowindow);
    });
  }

var mapRefresh=function(first){
  var bounds = new google.maps.LatLngBounds();
  
	infoWindows = [];

  for (var i = 0; i < markerInput.length; i++) {
    markerInput[i].setMap(null);
  }

	markers.forEach(function(point) {
	 	generateIcon(point[3], function(src) {
		  var pos = new google.maps.LatLng(point[0], point[1]);
		
	  	bounds.extend(pos);
      
      markeri=new google.maps.Marker({
		  	position: pos,
			  map: map,
			  title: point[2],
			  icon: point[4]
		  });
		  
		  infoWindowMaker(markeri,point[2],point[4]);
	
		  markerInput.push(markeri);
		});
	});
	
	if(first){map.fitBounds(bounds);}
}

var initializeMaps=function() {
  map = new google.maps.Map(document.getElementById('map'));
  mapRefresh(true);
}

var generateIconCache = {};

function generateIcon(number, callback) {
  if (generateIconCache[number] !== undefined) {
    callback(generateIconCache[number]);
  }
  
  fillColor='#5cb85c';
  if(number=='ko'){
    fillColor='#d9534f';
  }else if(number=='updating'){
    fillColor='#f0ad4e';
  }else if(number=='service'){
    fillColor='#5bc0de';
  }

  imageWidth = imageHeight = 35;

  var svg = d3.select(document.createElement('div')).append('svg')
    .attr('viewBox', '0 0 54.4 54.4')
    .attr('height',imageHeight)
    .attr('width',imageWidth)
    .append('g')

  var circles = svg.append('circle')
    .attr('cx', '27.2')
    .attr('cy', '27.2')
    .attr('r', '21.2')
    .style('fill', fillColor);

  var path = svg.append('path')
    .attr('d', 'M27.2,0C12.2,0,0,12.2,0,27.2s12.2,27.2,27.2,27.2s27.2-12.2,27.2-27.2S42.2,0,27.2,0z M6,27.2 C6,15.5,15.5,6,27.2,6s21.2,9.5,21.2,21.2c0,11.7-9.5,21.2-21.2,21.2S6,38.9,6,27.2z')
    .attr('fill', '#FFFFFF');
/*
  var text = svg.append('text')
    .attr('dx', 27)
    .attr('dy', 32)
    .attr('text-anchor', 'middle')
    .attr('style', 'font-size: 8px; fill: #FFFFFF; font-family: Arial, Verdana; font-weight: bold')
    .text(number);
*/
  var svgNode = svg.node().parentNode.cloneNode(true);

  var xmlSource = (new XMLSerializer()).serializeToString(svgNode);
  
  var imgSrc='data:image/svg+xml;base64,' + btoa(encodeURIComponent(xmlSource).replace(/%([0-9A-F]{2})/g, function(match, p1) {
      return String.fromCharCode('0x' + p1);
  }));

  generateIconCache[number] = imgSrc;
  callback(imgSrc);
}

initializeMaps();

var ajaxRefreshServer=function(){
  $.get("https://dashboard.bestfreewifi.com/routers/map.ajax",{
    order_by:$('#order_by').val(),
  },function(data){
    markers=[];
    
    if((typeof data)=='string'){
      data=JSON.parse(data);
    }
    
    for(var i in data) {
      if(data[i].geo_lat && data[i].geo_lon){
        markers.push([data[i].geo_lat,data[i].geo_lon,data[i].nombre,data[i].status,data[i].logo]);
      }
    }
    mapRefresh(false);
    setTimeout(ajaxRefreshServer, 10000);
  });
}
setTimeout(ajaxRefreshServer, 1000);

$('#map_show').change(function(){mapRefresh(false)});
$('#order_by').change(ajaxRefreshServer);
});