// Setup the svg element size and margins
var margin = {top: 20, right: 20, bottom: 20, left: 20},
    width = 1200 - margin.left - margin.right,
    height = 800 - margin.top - margin.bottom;

// Set the projection methods for the world map
var projection = d3.geoMercator()
                   .translate([width/2, height/1.5])
                   .scale((width - 1) / 2 / Math.PI);

// Set the world map path
var path = d3.geoPath()
    .projection(projection);

// Create a variable to hold the main svg element
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

// Group to hold the maps and borders
var g = svg.append('g')
           .attr('id', 'world-map');

// Add a clip path element to the world map group
// for the x axis 
g.append('clipPath')
 .attr('id', 'clip-path')
 .append('rect')
 .attr('x', 0)
 .attr('y', 30)
 .attr('width', width)
 .attr('height', height - 30)

// Group to hold all of the earthquake elements
var gQuakes = svg.append('g')
                 .attr('id', 'all-quakes');

// Import the geoJSON file for the world map
d3.json('https://s3-us-west-2.amazonaws.com/s.cdpn.io/25240/world-110m.json', function(error, world) {
	if(error) throw error;
	
	// Setup 24 hours ago object
	var dateObj = new Date();
	dateObj.setDate(dateObj.getDate() - 1);
	
	// Append the World Map
	var worldMap = g.append('path')
	 .attr('clip-path', 'url(#clip-path)') // attaches the clip path to not draw the map underneath the x axis
	 .datum(topojson.merge(world, world.objects.countries.geometries)) // draws a single land object for the entire map
	 .attr('class', 'land')
	 .attr('d', path)
	
	// Append the World Map Country Borders
	g.append('path')
	 .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
	 .attr('class', 'boundry')
	 .attr('d', path);
	
	// Create the x scale based on the domain of the 24 hour ago object and now
	var x = d3.scaleTime()
						.domain([dateObj, new Date()])
						.range([0, width - margin.right - margin.left]);

	// Append the xAxis on top
	var xAxis = svg.append('g')
								 .attr('id', 'xAxis')
								 .attr('transform', 'translate(20, 20)')
								 .call(d3.axisTop(x));
	
	// Import the last 24 hours of earthquake data from USGS
	d3.json('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson', function(error, data) {
		if(error) throw error;
		var quake = data.features.reverse();
		
		// Create a group with the quake id to hold the quake circle and pulse circle
		var earthquakeGroups = gQuakes.selectAll('g')
		   .data(quake)
		   .enter().append('g')
		   .attr('id', function(d) {
			     return d.id;
		   })
		   .attr('class', 'quake-group');
		
		//Create the pulse-circle circles for the earthquake pulse
		gQuakes.selectAll('.quake-group')
		   .append('circle')
		   .attr('class', 'circle pulse-circle')
		   .attr('cx', function(d) {
			     return projection([d.geometry.coordinates[0], d.geometry.coordinates[1]])[0];
		   })
		   .attr('cy', function(d) {
			     return projection([d.geometry.coordinates[0], d.geometry.coordinates[1]])[1];
		   })
			 .attr('r', function(d) {
			     return 0;
		   })
		   .attr('fill', '#fff');
		
		// Create the main quake circle with title
		gQuakes.selectAll('.quake-group')
		  .append('circle')
			.attr('cx', function(d) {
			     return projection([d.geometry.coordinates[0], d.geometry.coordinates[1]])[0];
		   })
		  .attr('cy', function(d) {
			     return projection([d.geometry.coordinates[0], d.geometry.coordinates[1]])[1];
		   })
		  .attr('r', 0 )
		  .attr('class', 'circle quake-circle')
		  .style('fill', 'red')
		  .style('opacity', 0.75)
		  .append('title')
		  .text(function(d) {
		  	return 'Magnitue ' + d.properties.mag + ' ' + d.properties.place;
		  });

		
		// Function that calculates the difference between the earthquake and 24 hours ago and
		// creates a delay property.
		var setQuakeDelay = function() {
			for(var i = 0, max = quake.length; i < max; i++){
				var timeDiff = quake[i].properties.time - dateObj;
				var timeDiffObj = new Date(timeDiff);
				quake[i].delay = Date.parse(timeDiffObj) / 5000; // Speed up the animation, otherwise it would take 24 hours ><
			}
		}
		setQuakeDelay();
		
		// Grab the longest delay for the xAxis marker
		var longestDelay = quake[quake.length - 1].delay;
		
		// Changes the radius of the earthquakes to their magnitue using a transition
		// and the delay created from the setQuakeDelay function
		var quakeCircles = svg.selectAll('.quake-circle')
			 .data(quake)
			 .transition()
			 .delay(function(d) {
				 return d.delay;
			 })
			 .duration(1000)
			 .attr('r', function(d) {
			   if(d.properties.mag < 0) {
					 return 0.1;
				 } else {
					 return d.properties.mag				 
				 }
			 });
		
		// Changes the radius of the pulse circle to eight times the magnitude
		// and fades out as it expands over two seconds
		var pulseCircles = svg.selectAll('.pulse-circle')
			 .data(quake)
			 .transition()
			 .delay(function(d) {
				 return d.delay;
			 })
			 .duration(2000)
			 .attr('r', function(d) {
			   if(d.properties.mag < 0) {
					 return 0.1 * 8;
				 } else {
				 	 return d.properties.mag * 8;
				 }
			 })
			 .style('opacity', 0)
		   .remove()
		
		// Add the time marker that moves across the xAxis while the animation it playing.
		// It's not perfectly in sync, but it's close enough for this example. The length of 
		// the animation is equal to the longest delay that we calculated earlier.
		var timeline = xAxis.append('circle')
		     .attr('class', 'transition-circle')
		     .attr('cx', 0)
		     .attr('cy', 0)
		     .attr('r', 3)
		     .style('fill', 'red')
		     .transition()
			   .ease(d3.easeLinear)
		     .duration(longestDelay + 1000)
		     .attr('cx', 1120)
	})
})