// BEGIN MAP FUNCTION
function map() {
	var info_pane = document.getElementById("info_pane");
	
	//Globals for use later
	var countries;
	var cities;

	//Year of CO2 data to map
	var year = "2010";

	//Width and height
	var w = 1200;
	var h = 500;

	//Define map projection
	var projection = d3.geo.mercator()
						   .center([ 55, 55 ])
						   .translate([ w/2, h/2 ])
						   .scale([ w/3.5 ]);

	//Define path generator
	var path = d3.geo.path()
					 .projection(projection);

	//
	//Configure zoom behavior
	//
	var maxZoomIn = w*2;
	var maxZoomOut = w/7;

	var zoom = d3.behavior.zoom()
		.translate( projection.translate() )
		.scale( projection.scale() )
		.scaleExtent([ maxZoomOut, maxZoomIn ])
		//Defines the on("zoom") event!  That is, what
		//to do on double-click or mousewheel roll.
		.on("zoom", function(d) {

			//Get the translate and scale values from this event
			var t = d3.event.translate;
			var s = d3.event.scale;
			
			//Update the zoom and projection objects with these
			zoom.translate(t);
			projection.translate(t).scale(s);
			
			//Recalculate paths (given new t and s values)
			countries.attr("d", path);

			//Recalculate cities (same idea)
			cities.attr("cx", function(d) {
					   return projection([d.longitude, d.latitude])[0];
				   })
				   .attr("cy", function(d) {
					   return projection([d.longitude, d.latitude])[1];
				   });
		});

	//Define zoom in and out functions that we can call easily later
	var zoomIn = function() {
		var newScale = Math.min(projection.scale() * 2, maxZoomIn);
		zoomTo(newScale);
	};

	var zoomOut = function() {
		var newScale = Math.max(projection.scale() / 2, maxZoomOut);
		zoomTo(newScale);
	};

	//Define zoomTo function to which we can pass a new scale value
	zoomTo = function(newScale) {

		var t = projection.translate(),
			s = projection.scale();
		
		t[0] -= w / 2;
		t[0] *= newScale / s;
		t[0] += w / 2;

		t[1] -= h * 0.55;
		t[1] *= newScale / s;
		t[1] += h * 0.55;
		
		zoom.translate(t).scale(newScale);
		projection.translate(t).scale(newScale);

		//Finally, transition paths and circles into place

		countries.transition()
			.ease("linear")
			.delay(50)
			.duration(500)
			.attr("d", path);

		cities.transition()
			.ease("linear")
			.duration(500)
			.attr("cx", function(d) {
				return projection([d.longitude, d.latitude])[0];
			})
			.attr("cy", function(d) {
				return projection([d.longitude, d.latitude])[1];
			})
			.attr("r", function(d) {
				return Math.sqrt(+d.population / w * 0.1);
			});	

	};

	//Assign zoom button behavior
	d3.select("#zoomIn")
		.on("click", function() {
			zoomIn();
		});

	d3.select("#zoomOut")
		.on("click", function() {
			zoomOut();
		});


	//Define quantize scale to sort data values into buckets of color
	//Colors by Cynthia Brewer (colorbrewer2.org), YlOrRd
	var color = d3.scale.quantize()
						.range([ "#ffffb2", "#fecc5c", "#fd8d3c", "#f03b20", "#bd0026" ]);

	//Create SVG
	var mapSVG = d3.select("#map")
				.append("svg")
				.attr("width", w)
				.attr("height", h);
				
	// create tooltip 
	/*
	var tooltip = d3.select("body").append("div")
		.attr("class", "tooltip")
		.style("opacity",0); */

	//Load in CO2 data
	d3.csv("co2_emissions.csv", function(data) {

		//Set input domain for color scale
		color.domain([
			d3.min(data, function(d) { return +d[year]; }), 
			d3.max(data, function(d) { return +d[year]; })
		]);

		//Load in GeoJSON data
		d3.json("test.json", function(json) {
			
			//Merge the CO2 data and GeoJSON into a single array
			//
			//Loop through once for each CO2 data value
			for (var i = 0; i < data.length; i++) {
		
				//Grab country name
				var dataCountryCode = data[i].countryCode;
				
				//Grab data value, and convert from string to float
				var dataValue = +data[i][year];
		
				//Find the corresponding country inside the GeoJSON
				for (var j = 0; j < json.features.length; j++) {
				
					//We'll check the official ISO country code
					var jsonCountryCode = json.features[j].properties.iso_a3;
		
					if (dataCountryCode == jsonCountryCode) {
				
						//Copy the data value into the GeoJSON
						json.features[j].properties.co2 = dataValue;
						
						//Stop looking through the JSON
						break;
						
					}
				}		
			}

			//Create a group to contain all the country paths.
			//This is primarily to catch zoom events, even when
			//the mouse is positioned over the ocean.
			var countriesGroup = mapSVG.append("g")
									.attr("id", "countriesGroup")
									.call(zoom);  //Bind zoom listener to the countries group

			//Create a rectangle in the background.
			//This is purely to ensure this group fills the whole
			//SVG image, so mousewheel events are caught.
			countriesGroup.append("rect")
				.attr("id", "map_rect")
				.attr("x", 0)
				.attr("y", 0)
				.attr("width", w)
				.attr("height", h);

			//Bind data and create one path per GeoJSON feature
			countries = countriesGroup.selectAll("path")
			   .data(json.features)
			   .enter()
			   .append("path")
			   .attr("d", path)
			   .style("fill", "rgba(8,81, 156, 0.6)");

			//Load in cities data
/* 			d3.csv("cities.csv", function(data) {
				
				cities = svg1.selectAll("circle")
				   .data(data)
				   .enter()
				   .append("circle")
				   .attr("cx", function(d) {
					   return projection([d.longitude, d.latitude])[0];
				   })
				   .attr("cy", function(d) {
					   return projection([d.longitude, d.latitude])[1];
				   })
				   .attr("r", function(d) {
						return 10;
						//return Math.sqrt(+d.population / w * 0.01);
				   })
				   .attr("id", function(d) { return d.country; })
				   .style("fill", "red")
				   .style("opacity", 0.5)
				   .on("click", function(d) {
						
						// create tooltip
						var tooltip = d3.select("body").append("div")
							.attr("class", "tooltip")
							.style("opacity",0);
						
						tooltip.html("Lorem Ipsum" + " Lorem Ipsum <span class='close'>&times;</span></br></br>" + d.summary + "</br></br>" + d.link)
						.style("top", d3.event.pageY + 5 + "px")
						.style("left", d3.event.pageX - 50 + "px")
						.style("opacity", 1);
						
						d3.select(".close")
							.on("click", function(d) {
								// select and remove the tooltip
								d3.select(".tooltip").remove();
								//tooltip.style("opacity", 0);
							});							

				   });
				
			}); */

		});  //End d3.json()

	});  //End d3.csv()
}