var w = 700,
			h = 400,
			margin = { top: 30, right: 20, bottom: 20, left: 60 },
			svg3 = d3.select("#header3").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.tempmin = +d["Min TemperatureF"];
				d.tempmean = +d["Mean 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 formatDate = d3.time.format("%a %d");

		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

	      // We're passing in a function in d3.max to tell it what we're maxing (y value)
	    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");

     
	      // Adds X-Axis as a 'g' element
	      svg3.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);
	  
	  
		  svg3.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)");
		  
		  
	  		svg3.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");
		 
		  // Adds Y-Axis as a 'g' element
	      svg3.append("g").attr({
	        "class": "axis",
	        transform: "translate(" + [margin.left, 0] + ")"
	      }).call(yAxis);  // Call the yAxis function on the group

 
 
			var rectAttrs = {
				cx: function(d) { return xScale(d.date)-10; },
				cy: function(d) { return yScale(d.temp)-10; },
			
				r: 5,
				fill: "green"
			};
			var rectAttrsmin = {
				cx: function(d) { return xScale(d.date)-10; },
				cy: function(d) { return yScale(d.tempmin)-10; },
				r: 5,
			
				fill: "red"
			};
			var rectAttrsmean = {
				cx: function(d) { return xScale(d.date)-10; },
				cy: function(d) { return yScale(d.tempmean)-10; },
				r: 5,
			
				fill: "blue"
			};
		
		
	      var ordinal = d3.scale.ordinal()
	        .domain(["Lowest Temperature", "Mean Temperature", "Highest Temperature"])
	        .range([ "red","blue","green"]);

	      svg3.append("g")
	        .attr("class", "legendOrdinal")
	         .attr("transform", "translate("+w/2+", "+(h-40)+")");

	      var legendOrdinal = d3.legend.color()
	        .shape("path", d3.svg.symbol().type("triangle-up").size(150)())
	        .shapePadding(120)
	    	.labelOffset(10)
	        .scale(ordinal)
	    	.cells(3)
	    	.orient('horizontal')
	    	;
		  svg3.select(".legendOrdinal")
		    .call(legendOrdinal);

			svg3.selectAll("rect1")
				.data(data)
				.enter()
				.append("circle")
				.attr(rectAttrs) 
				.on("mouseover", handleMouseOver)
				.on("mouseout", handleMouseOut)
			;

			svg3.selectAll("rect2")
				.data(data)
				.enter()
				.append("circle")
				.attr(rectAttrsmin)  
				.on("mouseover", handleMouseOvermin)
				.on("mouseout", handleMouseOutmin)
			;
 
			svg3.selectAll("rect3")
				.data(data)
				.enter()
				.append("circle")
				.attr(rectAttrsmean)  
				.on("mouseover", handleMouseOvermean)
				.on("mouseout", handleMouseOutmean)
			;

			// Hung Do: mouse move high temprature
			function handleMouseOver(d, i) {  // Add interactivity

				d3.select(this).attr({
				fill: "orange"
				});
			 
				svg3.append("text").attr({
				id: "t" + d.x + "-" + d.y + "-" + i,   
				x: function() { return xScale(d.date) - 20; },
				y: function() { return yScale(d.temp) - 20; }
				})
				.text(function() {
				return [ d.temp +"F on "+ formatDate(d.date) ];   
				});
			}

			function handleMouseOut(d, i) {
				d3.select(this).attr({
				fill: "green"
				});
				d3.select("#t" + d.x + "-" + d.y + "-" + i).remove(); 
			}


			function handleMouseOvermin(d, i) { 

				d3.select(this).attr({
				fill: "orange"
				});

				svg3.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.tempmin) - 20; }
					})
					.text(function() {
						return [ d.tempmin +"F on "+ formatDate(d.date) ];  // Value of the text
					});
			}	
		
			function handleMouseOutmin(d, i) {
			// Use D3 to select element, change color back to normal
				d3.select(this).attr({
				fill: "red"
				});

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

				d3.select(this).attr({
				fill: "orange"
				});

				svg3.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.tempmean) - 20; }
					})
					.text(function() {
						return [ d.tempmean +"F on "+ formatDate(d.date) ];  // Value of the text
					});
			}	
		
			function handleMouseOutmean(d, i) {
			// Use D3 to select element, change color back to normal
				d3.select(this).attr({
				fill: "blue"
				});

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