var stack = d3.layout.stack()
		    .values(function (d) {
		        return d.points;
		    })
		    .order("reverse");


		var w = 800;
		var h = 600;
		var padding = [20, 10, 30, 120]; //Top, right, bottom, left

		var dateFormat = d3.time.format("%Y");

		var xScale = d3.time.scale()
		    .range([padding[3], w - padding[1] - padding[3]]);

		var yScale = d3.scale.linear()
		    .range([padding[0], h - padding[2]]);



		var xAxis = d3.svg.axis()
		    .scale(xScale)
		    .orient("bottom")
		    .ticks(8);


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

		//Set up stack method


		//area geneerator
		var area = d3.svg.area()
		    .x(function (d) {
		        return xScale(dateFormat.parse(d.x));
		    })
		    .y0(function (d) {
		        return yScale(d.y0);
		    })
		    .y1(function (d) {
		        return yScale(d.y0 + d.y);
		    })

		var colors = ["#860038", "#FDB927", "#CE1141", "#002B5C", "#0F586C"];
		//Now SVG goes into #container instead of body
		var svg = d3.select("#container")
		    .append("svg")
		    .attr("width", w)
		    .attr("height", h);



		d3.csv("nba.csv", function (data) {


		    var years = ["2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014"];

		    var dataset = [];

		    for (var i = 0; i < data.length; i++) {
		        dataset[i] = {
		            player: data[i].playerName,
		            points: []
		        };

		        for (var j = 0; j < years.length; j++) {
		            //default value
		            var pergame = null;
		            if (data[i][years[j]]) {
		                pergame = +data[i][years[j]];
		            }

		            dataset[i].points.push({
		                x: years[j],
		                y: pergame
		            });

		        }
		    }

		    stack(dataset);

		    console.log(dataset);

		    xScale.domain([
					d3.min(years, function (d) {
		            return dateFormat.parse(d);
		        }),
					d3.max(years, function (d) {
		            return dateFormat.parse(d);
		        })
				]);

		    var totals = [];

		    for (i = 0; i < years.length; i++) {
		        totals[i] = 0;
		        for (j = 0; j < dataset.length; j++) {
		            totals[i] += dataset[j].points[i].y;
		        }
		    }



		    yScale.domain([d3.max(totals), 0]);

		    console.log(yScale(totals))

		    var paths = svg.selectAll("path")
		        .data(dataset)
		        .enter()
		        .append("path")
		        .attr("class", "area")
		        .attr("d", function (d) {
		            return area(d.points);
		        })
		        .attr("stroke", function (d, i) {
		            return colors[i];
		        })
		        .attr("fill", function (d, i) {
		            return colors[i];
		        })
		        .attr('src', function (d, i) {
		            return "image" + i + ".png";
		        });;

		    //Append a title with the player name (so we get easy tooltips)
		    paths.append("title")
		        .text(function (d) {
		            return d.player;
		        });

		    //Create axes
		    svg.append("g")
		        .attr("class", "x axis")
		        .attr("transform", "translate(0," + (h - padding[2]) + ")")
		        .call(xAxis);

		    svg.append("g")
		        .attr("class", "y axis")
		        .attr("transform", "translate(" + padding[3] + ",0)")
		        .call(yAxis);



		});
/*	

		locationPhoto = [10, 20, 30, 40, 50]
	svg
		    .selectAll("image")
		    .data(locationPhoto)
		    .enter()
		    .append("image")
		    .attr("x", 680)
		    .attr("y", function (d, i) {
		        return d*11.5-100;
		    })
		    .attr("width", 110)
		    .attr("height", 110)
		    .attr("xlink:href", function (d, i) {
		        return "image" + i + ".png";
		    });
*/