var w = 700,
        h = 400,
        margin = { top: 30, right: 100, bottom: 20, left: 60 },
     svg4 = d3.select("#header4").append("svg").attr("width", w).attr("height", h);
 
  
d3.csv('data.csv', function(error, data) {  // NEW
  data.forEach(function(d) {                    // NEW
    d.temp = +d["Max TemperatureF"];
	d.tempmin = +d["Min TemperatureF"];
	d.tempmean = +d["Mean TemperatureF"];
	
	d.date = d["EST"];
	                       // NEW
  });                                             // NEW



//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");


    // We're passing in a function in d3.max to tell it what we're maxing (x value)
	 //     var xScale = d3.scale.linear()
 // .domain([data[0].date,data[data.length-1].date])
 //           .range([margin.left, w - margin.right]);  // Set margins for x specific


  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([10, 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
    svg4.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);
  
  
  	svg4.append("text")
        .attr("text-anchor", "end")  
        .attr("transform", "translate("+ (80) +","+(h-100)+")rotate(-90)")  
        .text("Temperature (F)");
	  
	  
	svg4.append("text")
        .attr("text-anchor", "end")  
        .attr("transform", "translate("+ (w) +","+(margin.top+20)+")")  
        .text("Week February 7-13, 2016");



		
		var linearSize = d3.scale.linear().domain([0,10]).range([3, 13]);

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

		var legendSize = d3.legend.size()
		  .scale(linearSize)
		  .shape('circle')
		  .shapePadding(15)
		  .labelOffset(20)
		  .cells(3)
		  .labels(["Low","Mean","High"])
		  .orient('horizontal');

		svg4.select(".legendSize")
		  .call(legendSize);
	 
	 
	 
    // Adds Y-Axis as a 'g' element
    svg4.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: 13,
		fill: "orange"
	};
	var rectAttrsmin = {
		cx: function(d) { return xScale(d.date)-10; },
		cy: function(d) { return yScale(d.tempmin)-10; },
		r: 3,
		
		fill: "orange"
	};
	var rectAttrsmean = {
		cx: function(d) { return xScale(d.date)-10; },
		cy: function(d) { return yScale(d.tempmean)-10; },
		r: 7,
		
		fill: "orange"
	};


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

	svg4.selectAll("rect2")
		.data(data)
		.enter()
		.append("circle")
		.attr(rectAttrsmin)  
		.on("mouseover", handleMouseOvermin)
		.on("mouseout", handleMouseOutmin)
	;

	svg4.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: "blue"
		});
		 
		svg4.append("text").attr({
		id: "t" + d.x + "-" + d.y + "-" + i,   
		x: function() { return xScale(d.date) - 20; },
		y: function() { return yScale(d.temp) - 30; }
		})
		.text(function() {
		return [ d.temp +"F on "+ formatDate(d.date) ];   
		});
	}

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


	function handleMouseOvermin(d, i) { 

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

		svg4.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: "orange"
		});

		// 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: "blue"
		});

		svg4.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: "Orange"
		});

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