var PUNTOS=[];
var LINEA= 19;

 (function($) {  	 
		window.cargarpuntos = function (nuevaLinea, force = false) {
			if(nuevaLinea) {
				LINEA=nuevaLinea;
				$('#MAPA').gmap3('clear', { name: 'marker' });
				PUNTOS = [];
			}

			let now = new Date().getTime();
			
			$.ajax({
			  url: `mapa/index.php?json=1&nocache=${now}&linea=${LINEA}${force?'&force=true':''}`,
			  failure: function (x) {
				setTimeout( cargarpuntos, 30 * 3000);
			  },
			  success: function(data){
				$.each(data, function (i, movil) {				
					if (!PUNTOS[movil.name]) {
						PUNTOS[movil.name] = movil;

						pos = [movil.lat, movil.lng];
						
						$('#MAPA').gmap3({ 
							action:'addMarker',
							title: movil.name,
							name: movil.name,
							lat: movil.lat,
							lng: movil.lng,
							data: movil.data,
							options: {
								icon: new google.maps.MarkerImage('mapa/index.php?icono=' + movil.heading + '&color=' + movil.color 
									  ,new google.maps.Size(32, 32)								  
									  ,new google.maps.Point(0,0)								  
									  ,new google.maps.Point(8, 8)
							),
								draggable: false,
								animation: google.maps.Animation.DROP
							},
							events:{
								click: function(marker, event, data){
								  var map = $(this).gmap3('get'),
									  infowindow = $(this).gmap3({action:'get', name:'infowindow'});
								  if (infowindow){
									infowindow.open(map, marker);
									infowindow.setContent(marker.contenido);
								  } else {
									$(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: data}});
								  }
								}							
							},
							callback: function (m) {
								m.contenido = movil.data;
								PUNTOS[movil.name].marker = m;
							}
						  }
						  
						  ,  { action:'addOverlay',
								content:  '<div class="numero">' + movil.name + '</div>',
								latLng: pos,							
								offset:{
								  y:-12,
								  x:12
								}
							  }
							  
						  );
					}
					else {
						
						var pos = new google.maps.LatLng( movil.lat, movil.lng);
						if (m = PUNTOS[movil.name].marker) {
							m.setPosition (pos);
							m.set('data', movil.data);
							m.setIcon(new google.maps.MarkerImage('mapa/index.php?icono=' + movil.heading + '&color=' + movil.color
									  ,new google.maps.Size(32, 32)								  
									  ,new google.maps.Point(0,0)								  
									  ,new google.maps.Point(8, 8)
							));
							m.contenido =movil.data;
							movil.marker = m;
						}
						
						$('#MAPA .numero').remove();
						$('#MAPA').gmap3(
								{ action:'addOverlay',
									content:  '<div class="numero">' + movil.name + '</div>',
									latLng: [movil.lat, movil.lng],
									offset:{
									  y:-12,
									  x:12
									}
								  }
								  );
						PUNTOS[movil.name] = movil;
					}
				} );
				setTimeout( cargarpuntos, 30 * 1000);
			  }  
			});
			};
			
			
      $(function(){
        $('#MAPA').gmap3({ action:'init',
							options:{
							  center:[-26.82138953,-65.22368433],
							  zoom: 13
							}
						}
						
						, { action : 'geoLatLng',
							callback : function(latLng){
							  if (latLng){

						$('#MAPA').gmap3({ 
							action:'addMarker',
							title: 'Usted esta aqui!',
							lat: latLng.lat(),
							lng: latLng.lng()
						  });
						  
								// $(this).gmap3(
									 // { action: 'addCircle',
										// center: [ latLng.lat(), latLng.lng() ],
										// radius : 100,
										// fillColor : "#F4AFFF",
										// strokeColor : "#CB53DF"
									  // } 
								// );
								
							  }
							}
						  }
						
						);
		//cargarpuntos();
		});
})(jQuery);