//http://bl.ocks.org/mbostock/1558011

var sem40;
var mes3;
var mes6;
var mes9;
var mes12;

function dominio(d,arrMin,arrMax){
		
	if(d=='sem40'){
		return [arrMin[0],arrMax[0]];
	}else if(d=='mes3'){
		return [arrMin[1],arrMax[1]];
	}else if(d=='mes6'){
		return [arrMin[2],arrMax[2]];
	}else if(d=='mes9'){
		return [arrMin[3],arrMax[3]];
	}else if(d=='mes12'){
		return [arrMin[4],arrMax[4]];
	}else{
		return d3.extent(arrMin, arrMax);
	}
}


function GraphParallelCoordinates(vec1,vec2,vec3,vec4,vec5,data){
	
	d3.select("#parallelSvg").remove();
	
	sem40 = vec1;
	mes3 = vec2;
	mes6 = vec3;
	mes9 = vec4;
	mes12 = vec5;
	
	var m = [30, 10, 10, 10],
    w = 1500 - m[1] - m[3],
    h = 600 - m[0] - m[2];

	var x = d3.scale.ordinal().rangePoints([0, w], .5),
		y = {};

	var line = d3.svg.line(),
		axis = d3.svg.axis().orient("left"),
		background,
		foreground;

	var svg = d3.select("#parallelFamily").append("svg")
		.attr("id", "parallelSvg")
		.attr("width", w + m[1] + m[3])
		.attr("height", h + m[0] + m[2])
	  .append("g")
		.attr("transform", "translate(" + m[3] + "," + m[0] + ")");

		
	d3.csv(data, function(error, dataset) {
		if (error) throw error;

	  
		//calcular proporciones en las escalas para que los percentiles queden rectos
		var arrMin0 = 	[	d3.min(dataset, function(p) { return p["sem40"]; }),
							d3.min(dataset, function(p) { return p["mes3"]; }),
							d3.min(dataset, function(p) { return p["mes6"]; }),
							d3.min(dataset, function(p) { return p["mes9"]; }),
							d3.min(dataset, function(p) { return p["mes12"]; })
						];
	  
		var arrProporMin = 	[
								(sem40[sem40.length-1] - arrMin0[0]) / (sem40[sem40.length-1] - sem40[0]),
								(mes3[mes3.length-1] - arrMin0[1]) / (mes3[mes3.length-1] - mes3[0]),
								(mes6[mes6.length-1] - arrMin0[2]) / (mes6[mes6.length-1] - mes6[0]),
								(mes9[mes9.length-1] - arrMin0[3]) / (mes9[mes9.length-1] - mes9[0]),
								(mes12[mes12.length-1] - arrMin0[4]) / (mes12[mes12.length-1] - mes12[0])
							];
		
		var proporMax = d3.max(arrProporMin);
		
		var arrMin1 =	[
							sem40[sem40.length-1] - (sem40[sem40.length-1] - sem40[0]) * proporMax,
							mes3[mes3.length-1] - (mes3[mes3.length-1] - mes3[0]) * proporMax,
							mes6[mes6.length-1] - (mes6[mes6.length-1] - mes6[0]) * proporMax,
							mes9[mes9.length-1] - (mes9[mes9.length-1] - mes9[0]) * proporMax,
							mes12[mes12.length-1] - (mes12[mes12.length-1] - mes12[0]) * proporMax
						];
		
		//--------------------------------------------------------------------------------//
		var arrMax0 = 	[	d3.max(dataset, function(p) { return p["sem40"];}), 
							d3.max(dataset, function(p) { return p["mes3"]; }),
							d3.max(dataset, function(p) { return p["mes6"]; }),
							d3.max(dataset, function(p) { return p["mes9"]; }),
							d3.max(dataset, function(p) { return p["mes12"]; })
						];
		var arrProporMax = 	[
								(arrMax0[0] - sem40[sem40.length-1]) / (sem40[sem40.length-1] - sem40[0]),
								(arrMax0[1] - mes3[mes3.length-1]) / (mes3[mes3.length-1] - mes3[0]),
								(arrMax0[2] - mes6[mes6.length-1]) / (mes6[mes6.length-1] - mes6[0]),
								(arrMax0[3] - mes9[mes9.length-1]) / (mes9[mes9.length-1] - mes9[0]),
								(arrMax0[4] - mes12[mes12.length-1]) / (mes12[mes12.length-1] - mes12[0])
							];
		
		proporMax = d3.max(arrProporMax);
		
		var arrMax1 =	[
							sem40[sem40.length-1] + (sem40[sem40.length-1] - sem40[0]) * proporMax,
							mes3[mes3.length-1] + (mes3[mes3.length-1] - mes3[0]) * proporMax,
							mes6[mes6.length-1] + (mes6[mes6.length-1] - mes6[0]) * proporMax,
							mes9[mes9.length-1] + (mes9[mes9.length-1] - mes9[0]) * proporMax,
							mes12[mes12.length-1] + (mes12[mes12.length-1] - mes12[0]) * proporMax
						];
		//---------------------------------------------------------------------------------//
	  
		// Extract the list of dimensions and create a scale for each.
		x.domain(dimensions = d3.keys(dataset[0]).filter(function(d) {
			return d != "Codigo" && (y[d] = d3.scale.linear()
			.domain(dominio(d,arrMin1, arrMax1))
			.range([h, 0]));
		}));

		// Add grey background lines for context.
		background = svg.append("g")
			.attr("class", "background")
			.selectAll("path")
			.data(dataset)
			.enter().append("path")
			.attr("d", path)
			.attr("codigo",getCodigo);
		  
		// Add blue foreground lines for focus.
		foreground = svg.append("g")
			.attr("class", "foreground")
			.selectAll("path")
			.data(dataset)
			.enter().append("path")
			.attr("d", path)
			.attr("codigo",getCodigo);
		  
		// Add a group element for each dimension.
		var g = svg.selectAll(".dimension")
			.data(dimensions)
			.enter().append("g")
			.attr("class", "dimension")
			.attr("transform", function(d) { return "translate(" + x(d) + ")"; });

		// Add an axis and title.
		g.append("g")
			.attr("class", "axis")
			.each(function(d) { d3.select(this).call(axis.scale(y[d])); })
			.append("text")
			.attr("text-anchor", "middle")
			.attr("y", -9)
			.text(String);

		// Add and store a brush for each axis.
		g.append("g")
			.attr("class", "brush")
			.each(
				function(d) { d3.select(this).call(y[d].brush = d3.svg.brush().y(y[d]).on("brush", brush));
			})
			.selectAll("rect")
			.attr("x", -8)
			.attr("width", 16);
		
		d3.select("[codigo=A1]").attr("style", "stroke: #FF0000; stroke-opacity: 1; opacity: 1");
		d3.select("[codigo=A2]").attr("style", "stroke: #FE9A2E; stroke-opacity: 1; opacity: 1");
		d3.select("[codigo=A3]").attr("style", "stroke: #3ADF00; stroke-opacity: 1; opacity: 1");
		d3.select("[codigo=A4]").attr("style", "stroke: #FE9A2E; stroke-opacity: 1; opacity: 1");
		d3.select("[codigo=A5]").attr("style", "stroke: #FF0000; stroke-opacity: 1; opacity: 1");
	});

	// Returns the path for a given data point.
	function path(d) {
		return line(dimensions.map(function(p) { return [x(p), y[p](d[p])]; }));
	}

	function getCodigo(d) {
		return d.Codigo;
	}
	
	// Handles a brush event, toggling the display of foreground lines.
	function brush() {
	  var actives = dimensions.filter(function(p) { return !y[p].brush.empty(); }),
		  extents = actives.map(function(p) { return y[p].brush.extent(); });
		  
	  foreground.style("display", function(d) {
		if(actives.every(function(p, i) {
			return extents[i][0] <= d[p] && d[p] <= extents[i][1];
		})){
			return null;
		}else{
			return "none";
		};
	  });
	  
	 
	}
}