var map;
var user = new L.FeatureGroup();
var weatherprecipitation;
var weatherprecipitationrefresh;
var weatherrain;
var weatherrainrefresh;
var weatherclouds;
var weathercloudsrefresh;

var weatherradar;
waypoints = '';
var weatherradarrefresh;
var weathersatellite;
var weathersatelliterefresh; 
var noTimeout = true;

$(document).idle({
	onIdle: function(){
		noTimeout = false;
		$( "#dialog" ).dialog({
			modal: true,
			buttons: {
				Close: function() {
					//noTimeout = true;
					$( this ).dialog( "close" );
				}
			},
			 close: function() {
				noTimeout = true;
		        }
		});
	},
	idle: 1800000})

$( document ).ready(function() {
	//setting the zoom functionality for either mobile or desktop
	if( navigator.userAgent.match(/Android/i)
	     || navigator.userAgent.match(/webOS/i)
	     || navigator.userAgent.match(/iPhone/i)
	     || navigator.userAgent.match(/iPod/i)
	     || navigator.userAgent.match(/BlackBerry/i)
	     || navigator.userAgent.match(/Windows Phone/i))
	{
		var zoom = 7;
	} else {
		var zoom = 8;
	}

	//create the map
	map = L.map('live-map', { zoomControl:false }).setView([53.38,2.29], zoom);
	//map = WE.map('live-map');
	//initialize the layer group for the aircrft markers
	layer_data = L.layerGroup();

	var southWest = L.latLng(-90,-180),
	    northEast = L.latLng(90,180);
	bounds = L.latLngBounds(southWest,northEast);
	//a few title layers
	var mapquestLayer = new MQ.mapLayer();
	map.addLayer(mapquestLayer);


	//create the bounding box to show the coverage area
	var polygon = L.polygon(
	   [ [[90, -180],
	    [90, 180],
	    [-90, 180],
	    [-90, -180]], // outer ring
	    [[42.14, 6.2],
	    [42.14, 1.0],
	    [46.92, 1.0],
	    [46.92, 6.2]] // actual cutout polygon
        ],{
	    color: '#000',
	    fillColor: '#000',
	    fillOpacity: 0.1,
	    stroke: false
	}).addTo(map);
	function locationPopup (feature, layer) {
		var output = '';
		output += '<div class="top">';
		    output += '<div class="left">';
			if (typeof feature.properties.image_thumb != 'undefined' && feature.properties.image_thumb != '') {
			    output += '<img src="'+feature.properties.image_thumb+'" /></a>';
			}
		    output += '</div>';
		    output += '<div class="right">';
			output += '<div class="callsign-details">';
			if (feature.properties.name == "") {
			    output += '<div class="callsign">'+feature.properties.location_id+'</div>';
			} else {
			    output += '<div class="callsign">'+feature.properties.name+'</div>';
			}
			output += '</div>';
		     output += '</div>';
		output += '</div>';
		output += '<div class="details">';
		    if (feature.properties.city != "")
		    {
			output += '<div>';
			    output += '<span>City</span>';
			    output += feature.properties.city;
			output += '</div>';
		    }
		    if (feature.properties.altitude != "" || feature.properties.altitude != 0)
		    {
			output += '<div>';
			    output += '<span>Altitude</span>';
			    output += Math.round(feature.properties.altitude*3,2809)+' feet - '+feature.properties.altitude+' m';
			output += '</div>';
		    }
		    if (feature.properties.country != "")
		    {
			output += '<div>';
			    output += '<span>Country</span>';
			    output += feature.properties.country;
			output += '</div>';
		    }
		output += '</div>';
		output += '</div>';
		layer.bindPopup(output);
	};

	function update_locationsLayer() {
		//var bbox = map.getBounds().toBBoxString();
		//locationsLayer = new L.GeoJSON.AJAX("/live-tracking-3d/location-geojson.php?coord="+bbox,{
		locationsLayer = new L.GeoJSON.AJAX("/live-tracking-3d/location-geojson.php",{
		    //onEachFeature: locationPopup,
		    pointToLayer: function (feature, latlng) {
			return L.marker(latlng, {
			    icon: L.icon({
				iconUrl: feature.properties.icon,
				iconSize: [16, 18]
				//iconAnchor: [0, 0],
				//popupAnchor: [0, -28]
			    })
			}).on('click', function() {
			    $(".showdetails").load("location-data.php?"+Math.random()+"&sourceid="+encodeURI(feature.properties.id));
			});
		    }
		}).addTo(map);
	};

	map.on('moveend', function() {
		//if (map.getZoom() > 7) {
		//	map.removeLayer(locationsLayer);
		//	update_locationsLayer();
		//} else {
			map.removeLayer(locationsLayer);
			update_locationsLayer();
		//}
	});
update_locationsLayer();
//adds the bootstrap tooltip to the map icons
function showBootstrapTooltip(){
    $('.leaflet-marker-icon').tooltip('destroy');
    $('.leaflet-marker-icon').tooltip({ html: true });
}

function genLayerPopup (feature, layer) {
	var output = '';
	output += '<div class="top">';
	if (typeof feature.properties.text != 'undefined') output += '&nbsp;'+feature.properties.text+'<br /> ';
	output += '</div>';
	layer.bindPopup(output);
};
});

function mapType(selectObj) {
    var idx = selectObj.selectedIndex;
    var atype = selectObj.options[idx].value;
    var type = atype.split('-');
	document.cookie =  'MapType='+type+'; expires=Thu, 2 Aug 2100 20:47:11 UTC; path=/'
    if (type[0] == 'Mapbox') {
        document.cookie =  'MapType='+type[0]+'; expires=Thu, 2 Aug 2100 20:47:11 UTC; path=/'
	document.cookie =  'MapTypeId='+type[1]+'; expires=Thu, 2 Aug 2100 20:47:11 UTC; path=/'
    } else {
	document.cookie =  'MapType='+atype+'; expires=Thu, 2 Aug 2100 20:47:11 UTC; path=/'
    }
    window.location.reload();
}


function archivePause() {
    clearInterval(reloadPage);
    console.log('Pause');
}
function archivePlay() {
    reloadPage = setInterval(function(){if (noTimeout) getLiveData(0)},10000);
    console.log('Play');
}

//zooms in the map
function zoomInMap(){
  var zoom = map.getZoom();
  map.setZoom(zoom + 1);
}

//zooms in the map
function zoomOutMap(){
  var zoom = map.getZoom();
  map.setZoom(zoom - 1);
}

//figures out the user's location
function getUserLocation(){
  //if the geocode is currently active then disable it, otherwise enable it
  if (!$(".geocode").hasClass("active"))
  {
    //add the active class
    $(".geocode").addClass("active");
    //check to see if geolocation is possible in the browser
    if (navigator.geolocation) {
        //gets the current position and calls a function to make use of it
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        //if the geolocation is not supported by the browser let the user know
        alert("Geolocation is not supported by this browser.");
        //remove the active class
        $(".geocode").removeClass("active");
    }
  } else {
    //remove the user location marker
    removeUserPosition();
  }
}

//plots the users location on the map
function showPosition(position) {
    //creates a leaflet marker based on the coordinates we got from the browser and add it to the map
    var markerUser = L.marker([position.coords.latitude, position.coords.longitude], {
        title: "Your location",
        alt: "Your location",
        icon: L.icon({
          iconUrl: '/live-tracking-3d/images/map-user.png',
          iconRetinaUrl: '/live-tracking-3d/images/map-user@2x.png',
          iconSize: [40, 40],
          iconAnchor: [20, 40]
        })
    });
    user.addLayer(markerUser);
    map.addLayer(user);
    //pan the map to the users location
    map.panTo([position.coords.latitude, position.coords.longitude]);
}

//removes the user postion off the map
function removeUserPosition(){
  //remove the marker off the map
  map.removeLayer(user);
  //remove the active class
  $(".geocode").removeClass("active");
}

//determines the users heading based on the iphone
function getCompassDirection(){

  //if the compass is currently active then disable it, otherwise enable it
  if (!$(".compass").hasClass("active"))
  {
    //add the active class
    $(".compass").addClass("active");
    //check to see if the device orietntation event is possible on the browser
    if (window.DeviceOrientationEvent) {
      //first lets get the user location to mak it more user friendly
      getUserLocation();
      //disable dragging the map
      map.dragging.disable();
      //disable double click zoom
      map.doubleClickZoom.disable();
      //disable touch zoom
      map.touchZoom.disable();
      //add event listener for device orientation and call the function to actually get the values
      window.addEventListener('deviceorientation', capture_orientation, false);
    } else {
      //if the browser is not capable for device orientation let the user know
      alert("Compass is not supported by this browser.");
      //remove the active class
      $(".compass").removeClass("active");
    }
  } else {
    //remove the event listener to disable the device orientation
    window.removeEventListener('deviceorientation', capture_orientation, false);
    //reset the orientation to be again north to south
    $("#live-map").css({ WebkitTransform: 'rotate(360deg)'});
    $("#live-map").css({'-moz-transform': 'rotate(360deg)'});
    $("#live-map").css({'-ms-transform': 'rotate(360deg)'});
    //remove the active class
    $(".compass").removeClass("active");
    //remove the user location marker
    removeUserPosition();
    //enable dragging the map
    map.dragging.enable();
    //enable double click zoom
    map.doubleClickZoom.enable();
    //enable touch zoom
    map.touchZoom.enable();
  }

}

//gets the users heading information
function capture_orientation (event) {
 //store the values of each of the recorded elements in a variable
   var alpha;
   var css;
    //Check for iOS property
    if(event.webkitCompassHeading) {
      alpha = event.webkitCompassHeading;
      //Rotation is reversed for iOS
      css = 'rotate(-' + alpha + 'deg)';
    }
    //non iOS
    else {
      alpha = event.alpha;
      webkitAlpha = alpha;
      if(!window.chrome) {
        //Assume Android stock and apply offset
        webkitAlpha = alpha-270;
        css = 'rotate(' + alpha + 'deg)';
      }
    }    
  
  //we use the "alpha" variable for the rotation effect
  $("#live-map").css({ WebkitTransform: css});
  $("#live-map").css({'-moz-transform': css});
  $("#live-map").css({'-ms-transform': css});
}

function update_genLayer(url) {
    genLayer = new L.GeoJSON.AJAX(url,{
	onEachFeature: genLayerPopup,
	pointToLayer: function (feature, latlng) {
	    return L.circle(latlng, feature.properties.radius, {
                    fillColor: feature.properties.fillcolor,
                    color: feature.properties.color,
                    weight: feature.properties.weight,
                    opacity: feature.properties.opacity,
                    fillOpacity: feature.properties.fillOpacity
            });
	}
    }).addTo(map);
};

//adds a new weather radar layer on to the map
function showWeatherPrecipitation(){
  //if the weatherradar is currently active then disable it, otherwise enable it
  if (!$(".weatherprecipitation").hasClass("active"))
  {
    //loads the function to load the weather radar
    loadWeatherPrecipitation();
    //automatically refresh radar every 2 minutes
    weatherprecipirationrefresh = setInterval(function(){loadWeatherPrecipitation()}, 120000);
    //add the active class
    $(".weatherprecipitation").addClass("active");
  } else {
      //remove the weather radar layer
      map.removeLayer(weatherprecipitation);
      //remove the active class
      $(".weatherprecipitation").removeClass("active");
      //remove the auto refresh
      clearInterval(weatherprecipitationrefresh);
  }       
}
//adds a new weather radar layer on to the map
function showWeatherRain(){
  //if the weatherradar is currently active then disable it, otherwise enable it
  if (!$(".weatherrain").hasClass("active"))
  {
    //loads the function to load the weather radar
    loadWeatherRain();
    //automatically refresh radar every 2 minutes
    weatherrainrefresh = setInterval(function(){loadWeatherRain()}, 120000);
    //add the active class
    $(".weatherrain").addClass("active");
  } else {
      //remove the weather radar layer
      map.removeLayer(weatherrain);
      //remove the active class
      $(".weatherrain").removeClass("active");
      //remove the auto refresh
      clearInterval(weatherrainrefresh);
  }       
}
//adds a new weather radar layer on to the map
function showWeatherClouds(){
  //if the weatherradar is currently active then disable it, otherwise enable it
  if (!$(".weatherclouds").hasClass("active"))
  {
    //loads the function to load the weather radar
    loadWeatherClouds();
    //automatically refresh radar every 2 minutes
    weathercloudsrefresh = setInterval(function(){loadWeatherClouds()}, 120000);
    //add the active class
    $(".weatherclouds").addClass("active");
  } else {
      //remove the weather radar layer
      map.removeLayer(weatherclouds);
      //remove the active class
      $(".weatherclouds").removeClass("active");
      //remove the auto refresh
      clearInterval(weathercloudsrefresh);
  }       
}

//adds a new weather radar layer on to the map
function showWeatherRadar(){
  //if the weatherradar is currently active then disable it, otherwise enable it
  if (!$(".weatherradar").hasClass("active"))
  {
    //loads the function to load the weather radar
    loadWeatherRadar();
    //automatically refresh radar every 2 minutes
    weatherradarrefresh = setInterval(function(){loadWeatherRadar()}, 120000);
    //add the active class
    $(".weatherradar").addClass("active");
  } else {
      //remove the weather radar layer
      map.removeLayer(weatherradar);
      //remove the active class
      $(".weatherradar").removeClass("active");
      //remove the auto refresh
      clearInterval(weatherradarrefresh);
  }       
}

//actually loads the weather radar
function loadWeatherPrecipitation()
{
    if (weatherprecipitation)
    {
      //remove the weather radar layer
      map.removeLayer(weatherprecipitation);  
    }
    
    weatherprecipitation = L.tileLayer('http://{s}.tile.openweathermap.org/map/precipitation/{z}/{x}/{y}.png', {
	attribution: 'Map data © OpenWeatherMap',
        maxZoom: 18,
        transparent: true,
        opacity: '0.7'
    }).addTo(map);
}
//actually loads the weather radar
function loadWeatherRain()
{
    if (weatherrain)
    {
      //remove the weather radar layer
      map.removeLayer(weatherrain);
    }
    
    weatherrain = L.tileLayer('http://{s}.tile.openweathermap.org/map/rain/{z}/{x}/{y}.png', {
	attribution: 'Map data © OpenWeatherMap',
        maxZoom: 18,
        transparent: true,
        opacity: '0.7'
    }).addTo(map);
}
//actually loads the weather radar
function loadWeatherClouds()
{
    if (weatherclouds)
    {
      //remove the weather radar layer
      map.removeLayer(weatherclouds);
    }
    
    weatherclouds = L.tileLayer('http://{s}.tile.openweathermap.org/map/clouds/{z}/{x}/{y}.png', {
	attribution: 'Map data © OpenWeatherMap',
        maxZoom: 18,
        transparent: true,
        opacity: '0.6'
    }).addTo(map);
}
//actually loads the weather radar
function loadWeatherRadar()
{
    if (weatherradar)
    {
      //remove the weather radar layer
      map.removeLayer(weatherradar);  
    }
    
    weatherradar = L.tileLayer('http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{z}/{x}/{y}.png?' + parseInt(Math.random()*9999), {
        format: 'image/png',
        transparent: true,
        opacity: '0.5'
    }).addTo(map);
}

//adds a new weather satellite layer on to the map
function showWeatherSatellite(){
  //if the weatherradar is currently active then disable it, otherwise enable it
  if (!$(".weathersatellite").hasClass("active"))
  {
    //loads the function to load the weather satellite
    loadWeatherSatellite();
    //automatically refresh satellite every 2 minutes
    weathersatelliterefresh = setInterval(function(){loadWeatherSatellite()}, 120000);
    //add the active class
    $(".weathersatellite").addClass("active");
  } else {
      //removes the weather satellite layer
      map.removeLayer(weathersatellite);
      //remove the active class
      $(".weathersatellite").removeClass("active");
      //remove the auto refresh
      clearInterval(weathersatelliterefresh);
  }       
}

//actually loads the weather satellite
function loadWeatherSatellite()
{
    if (weathersatellite)
    {
      //remove the weather satellite layer
      map.removeLayer(weathersatellite);  
    }
    
    weathersatellite = L.tileLayer('http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/goes-east-vis-1km-900913/{z}/{x}/{y}.png?' + parseInt(Math.random()*9999), {
        format: 'image/png',
        transparent: true,
        opacity: '0.65'
    }).addTo(map);
}