function fetchFacetData(d,timeScale,facet){
	returnArr =[];
	d.forEach(function(d){
		(timeScale==="weekly")? 
			returnArr.push({date: new Date(d.date), value: d[facet]}) : 
			returnArr.push({date: d.date, value: d[facet]});
	});
	return returnArr;
}

function prettyPrintYAxis(facet){
	switch(facet){
		case "numberOfThings":
			return "Number of Things"
			break;
		case "percentageOfThings":
			return "% Utility"
			break;
		case "priceOfThings":
			return "Cost ($M)"
			break;
		default:
			return "Y Axis Label";
	}
}

function renderLineGraph(facet,timeScale,passedData){
	var animDuration = 1000;
  	//console.log(facet,timeScale,passedData);
	var margin = {top: 8, right: 70, bottom: 35, left: 45},
    width = $("#graph-container").width() - margin.left - margin.right,
    height = $("#graph-container").height() - margin.top - margin.bottom;

	var x = d3.time.scale().range([0, width]);
	var	y = d3.scale.linear().range([height, 0]);

	var yAxis = d3.svg.axis().scale(y).ticks(4).tickSize(-width).orient("right");
	x.domain([new Date(passedData[0].date), new Date(passedData[passedData.length - 1].date)]);
	y.domain([0, d3.max(passedData, function(d) { return d[facet]; })]).nice();

	switch(timeScale){
		case "weekly":
			var xAxis = d3.svg.axis().scale(x).ticks(passedData.length).tickSize(-height).tickFormat(d3.time.format("%a %m/%d")).tickPadding(15);
			break;
		case "monthly":
    		x = d3.scale.ordinal().domain(["Sept 15'","Oct 15'","Nov 15'","Dec 15'","Jan 16'","Feb 16'","Mar 16'"]).rangePoints([0, width]);
			var xAxis = d3.svg.axis().scale(x).ticks(passedData.length).tickSize(-height).tickPadding(15);
			break;
		case "quarterly":
			x = d3.scale.ordinal().domain(["Q3 14'","Q4 14'","Q1 15'","Q2 15'","Q3 15'","Q4 15'","Q1 16'"]).rangePoints([0, width]);
			var xAxis = d3.svg.axis().scale(x).ticks(passedData.length).tickSize(-height).tickPadding(15);
			break;
		default:
			console.log("switch error on yAxis assignment");
			var xAxis = d3.svg.axis().scale(x).ticks(passedData.length).tickSize(-height).tickFormat(d3.time.format("%a %m/%d")).tickPadding(15);
		break;
	}


	var area = d3.svg.area()
			    .x(function(d) {return x(d.date); })
			    .y0(height)
			    .y1(function(d) { return y(d.value); })
			    .interpolate("monotone");

	// A line generator, for the dark stroke.
	var line = d3.svg.line()
	    .x(function(d) {return x(d.date);})
	    .y(function(d) {return y(d.value);})
	    .interpolate("monotone");

	  // Add an SVG element with the desired dimensions and margin.
	  var wrapper = d3.select("#graph-container");
	  var svg = wrapper.append("svg")
	      .attr("width", width + margin.left + margin.right)
	      .attr("height", height + margin.top + margin.bottom)
	      .attr("id","chart-svg-container")
	    .append("g")
	      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

	  // Add the x-axis.
	  svg.append("g")
	      .attr("class", "x axis")
	      .attr("transform", "translate(0," + (height) + ")")
	      .call(xAxis);

	  // Add the y-axis.
	  svg.append("g")
	      .attr("class", "y axis")
	      .attr("transform", "translate(" + (width)+ ",0)")
	      .call(yAxis);

		svg.append('g')
    		.attr('transform', 'translate(' + (width+margin.right/1.5) + ', ' + (height/2) + ')')
    		.append('text')
    		.attr('text-anchor', 'middle')
    		.attr("id","y-axis-label")
    		.attr('transform', 'rotate(90)')
    		.text(prettyPrintYAxis(facet));

	  var facetData = fetchFacetData(passedData,timeScale,facet);

	  svg.selectAll('.line')
	    	.data([facetData])
	    	.enter()
	      	.append('path')
	        	.attr('class', 'line')
	        	.attr("id","current-path")
	        	.style('stroke',"steelblue")
	        .attr('d',function(d){return line(d);});

	svg.append("path")
        .data([facetData])
        .attr("class", "area")
        .attr("d", function(d){return area(d);});

    var totalLength = d3.select("#current-path").node().getTotalLength();

    d3.select("#current-path")
      .attr("stroke-dasharray", totalLength + " " + totalLength)
      .attr("stroke-dashoffset", totalLength)
      .transition()
        .duration(animDuration/1.5)
        .ease("linear")
        .attr("stroke-dashoffset", 0);

    d3.selectAll(".area").transition().delay(animDuration).duration(animDuration).style("opacity",1);

}

function refreshGraph(){
	$("#chart-svg-container").remove();
	renderLineGraph($("#graph-picklist-y").val(),$("#graph-picklist-x").val(),data[$("#graph-picklist-x").val()]);
}

$(document).ready(function() {
	renderLineGraph('numberOfThings','weekly',data.weekly);
});