var w = 700,
	h = 400,
	margin = { top: 50, right: 20, bottom: 20, left: 40 },
	svg = d3.select("#header2").append("svg").attr("width", w).attr("height", h);


	d3.csv('data.csv', function(error, data) {  
		data.forEach(function(d) {                    
			d.temp = +d["Max TemperatureF"];
			d.date = d["EST"];
		   	});     

		//Hung Do: parse the date in text to real_date
		var parseDate = d3.time.format("%Y-%m-%d").parse;
			data.forEach(function(d) {
			d.date = parseDate(d.date);
			});

		var xScale = d3.time.scale()
			.domain([d3.time.day.offset(data[0].date,-1),d3.time.day.offset(data[data.length-1].date,1)])
			.range([margin.left, w - margin.right]);  // Set margins for x specific

		var yScale = d3.scale.linear()
			.domain([0, d3.max(data, function (d) { return d.temp + 10; })])
			.range([margin.top, h - margin.bottom]);  // Set margins for y specific

	      // Add a X and Y Axis (Note: orient means the direction that ticks go, not position)
		var xAxis = d3.svg.axis().scale(xScale)
			.orient("top")
			.tickFormat(d3.time.format("%a %d"))
			.ticks(d3.time.days, 1);

		var yAxis = d3.svg.axis().scale(yScale).orient("left");

		var rectAttrs = {
	          x: function(d) { return xScale(d.date)-10; },
	          y: function(d) { return yScale(d.temp)-10; },
	          width: function(d) { return d.temp-10; },
			  height: function(d) { return d.temp-10; },
			  fill: "green"
	      };

		svg.append("g").attr({
			"class": "x axis",  // Give class so we can style it
			transform: "translate(" + [0, margin.top] + ")"  // Translate just moves it down into position (or will be on top)
			}).call(xAxis)

		;  // Call the xAxis function on the group

		// Adds Y-Axis as a 'g' element
		svg.append("g").attr({
			"class": "axis",
			transform: "translate(" + [margin.left, 0] + ")"
			}).call(yAxis);  // Call the yAxis function on the group

	  
	  svg.append("text")
	      .attr("text-anchor", "end")  // this makes it easy to centre the text as the transform is applied to the anchor
	      .attr("transform", "translate("+ (80) +","+(h-100)+")rotate(-90)")  // text is drawn off the screen top left, move down and out and rotate
	      .text("Temperature (F)");
	  
	  
		svg.append("text")
	      .attr("text-anchor", "end")  // this makes it easy to centre the text as the transform is applied to the anchor
	      .attr("transform", "translate("+ (w) +","+(margin.top+20)+")")  // centre below axis
	      .text("Week February 7-13, 2016");


	      svg.selectAll("rect")
	          .data(data)
	          .enter()
	          .append("rect")
	          .attr(rectAttrs)  // Get attributes from circleAttrs var
	          .on("mouseover", handleMouseOver)
	      .on("mouseout", handleMouseOut)
	    ;


		var formatDate = d3.time.format("%a %d");

	      // Create Event Handlers for mouse
	      function handleMouseOver(d, i) {  // Add interactivity

	            // Use D3 to select element, change color and size
	            d3.select(this).attr({
	              fill: "orange"
	            });

	            // Specify where to put label of text
	            svg.append("text").attr({
	               id: "t" + d.x + "-" + d.y + "-" + i,  // Create an id for text so we can select it later for removing on mouseout
	                x: function() { return xScale(d.date) - 20; },
	                y: function() { return yScale(d.temp) - 20; }
	            })
	            .text(function() {
	              return [ d.temp +"F on "+ formatDate(d.date) ];  // Value of the text
	            });
	          }

	      function handleMouseOut(d, i) {
	            // Use D3 to select element, change color back to normal
	            d3.select(this).attr({
	              fill: "green"
	            });

	            // Select text by id and then remove
	            d3.select("#t" + d.x + "-" + d.y + "-" + i).remove();  // Remove text location
	          }
	});