/**
 * Make a request for JSON over HTTP, pass resulting text to callback when ready
 */
function makeRequest(url, callback) {

	//initialise the XMLHttpRequest object
	var httpRequest = new XMLHttpRequest();

	//set an event listener for when the HTTP state changes
	httpRequest.onreadystatechange = function () {
	
		//a successful HTTP request returns a state of DONE and a status of 200
		if (httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 200) {
				callback(JSON.parse(httpRequest.responseText));
		}
	};

	//prepare and send the request
	httpRequest.open('GET', url);
	httpRequest.send();
}  

/**
 * This is a normal function that will be used as the callback
 */
function myCallback(jsonData){

	// jsonData contains the parsed data in JSON format
	// do something with it here
}

//get the journey data and add to the map when ready
makeRequest(url, myCallback);

 /**
  * Everything here is a comment.
  */

/*
 Everything in here is a comment.
*/

/* Also works like this */

// This is a comment

if (condition1) {
	// statement 1;
	
} else if (condition2) {
	// statement 2
	
} else if (condition3) {
	// statement 3
	
} else {
	// statement 4
}

// greet the visitor with an alert box
if (language === "German") {
	alert("Guten Tag");
	
} else if (language === "English") {
	alert("Hello");
	
} else if (language === French) {
	alert("Bonjour")
	
} else {
	alert("Sorry, I don't speak" + language);
}

// store the proj4 string for the CRS that you are transforming FROM 
// this one is WGS84 (what Leaflet is using)
const p_wgs84 = "+proj=longlat +datum=WGS84 +no_defs";

// store the proj4 string for the CRS that you are transforming TO
// this one is British National Grid
const p_osgb = "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs";

// use those proj4 strings to create a proj4 object
const transformer = proj4(p_wgs84, p_osgb);

// transform coordinates to OSGB
let xy = transformer.forward([-2.345, 53.456]);

//xy[0] = longitude;
//xy[1] = latitude;

// add listener for click event on the map
map.on('click', onMapClick);

/**
 * Event handler for map click
 */
function onMapClick(e) {
	
	// add a popup to the marker and open it
	console.log( "you clicked at " + e.latlng );
}

// sign in anonymously - this helps stop your database being abused
firebase.auth().signInAnonymously().catch(function(error) {
  console.log(error.code);
  console.log(error.message);
});

// create a global reference to the 'clicks' collection in your database
myDb = firebase.database().ref().child('clicks');

// push the data into the database, set inline callback
myDb.push(data, function(error) {

  //if no error is returned to the callback, then it was loaded successfully
  if (!error) { 
    console.log("successfully added to firebase!");

    // otherwise pass the error to the console
  } else {
    console.error(error);
  }
});

// prepare the data to update in the database (deleting is done by updating to null)
let updates = {};
updates['/clicks/' + snapshot.key] = null;	//snapshot is the database snapshot

// update the point location in the database and callback to console
firebase.database().ref().update(updates, function(error) {
  if (!error) {
    console.log("successfully deleted point!");
  } else {
    console.error(error);
  }
});

// prepare the data to update in the database
let updates = {};
updates['/clicks/' + snapshot.key] = data;	//snapshot is the database snapshot

// update the point location in the database and callback to console
firebase.database().ref().update(updates, function(error) {
  if (!error) {
    console.log("successfully updated firebase!");
  } else {
    console.error(error);
  }
});

/**
 * Add two numbers together
 */
function addUp(arg1, arg2) {
  return arg1 + arg2;
}

//get my name from the function and store it in a variable called result
var result = addup(2, 4);

//result = 6

// load the geojson data, style it, set events and add to map
geojson = L.geoJson(countries, { }).addTo(map);

// load the geojson data and style it
geojson = L.geoJson(countries, { 
	style: {
		weight: 0.5,
		color: 'white',
		fillOpacity: 1,
		fillColor: 'lightgrey',
	}
}).addTo(map);

geojson = L.geoJson(countries, {
	style: style,		//set the style using a function
}).addTo(map);

/**
 * This function styles the data (a single country)
 */
function style(feature) {
	
	//return a style
	return {
		weight: 0.5,
		color: 'white',
		fillOpacity: 1,
		fillColor: getColour(feature.properties.POP_EST)	//the colour is set using a function
	};
}

// load the geojson data, style it, set events and add to map
geojson = L.geoJson(countries, {
	style: style,			//set the style using your function
	onEachFeature: setEvents,	//set the hover events using your function
}).addTo(map);

/**
 * Create a function to tie the mouseover and mouseout events to re-styling the layer
 */
function setEvents(feature, layer) {
	layer.on({
		mouseover: highlightFeature,
		mouseout: resetHighlight,
	});
}

const latlng = L.latLng(50.5, 30.5);

// add thousands separators to a string representing a number
parseFloat(numberAsString).toLocaleString('en-GB');

// add thousand separators to a number (results in a string)
number.toLocaleString('en-GB');

// if you DON'T want to edit the value
const myVariable = "Jonny";

// if you DO want to edit the value
let myVariable = "Jonny";