//var gDataset;
d3.csv("games.csv", function(error, dataset) {
	var w = 900;
	var h = 600;
	var container = d3.select('.container');
	var svg = container.append('svg')
	    .attr('width', w)
	    .attr('height', h);

	// background fill
	svg.append('rect')
	    .attr('class', 'background')
	    .attr('width', '100%')
	    .attr('height', '100%')
	    .attr('fill', 'mediumblue');
	
	console.log(dataset);
	//gDataset = dataset;

	// set category label
	//var categoryLabels = ['biscuit', 'chocolate'];
	var categoryLabels = Object.keys(dataset[0]);
	categoryLabels.some(function(v, i){
		if (v === 'year') { categoryLabels.splice(i, 1);}
	});
	//console.log(categoryLabels);
	svg.selectAll('text.categoryLabel')
		.data(categoryLabels)
		.enter()
		.append('text')
		.attr('class', 'categoryLabel')
		.attr('x', function(d, i){return (i + 0.5) * w / categoryLabels.length;})
		.attr('y', 20)
		.attr('text-anchor', 'middle')
		.attr('font-size', 12)
		.attr('font-family', 'Helvetica')
		.attr('font-weight', 'bold')
		.attr('value', function(d){return d;})
		.attr('fill','white')
		.style('cursor', 'pointer')
		//.attr('onclick', function(d){return "updateBar('" + d + "')";})
		.text(function(d){return d;});

	d3.selectAll('text.categoryLabel').on('click', function(){
		updateBar(this.getAttribute('value'));
	});

	// set year text
	svg.selectAll('text.year')
		.data(dataset)
		.enter()
		.append('text')
		.attr('class', 'year')
		.attr('x', function(d, i){return (i + 0.5) * w / dataset.length;})
		.attr('y', h - 5)
		.attr('text-anchor', 'middle')
		.attr('font-size', 9)
		.text(function(d){return d.year + '年';});

	//updateBar('chocolate');

	var updateBar = function(category) {
		var svg = d3.select('svg');
		//var dataset = gDataset; //svg.selectAll('rect.bar').data;
		var chartHeight = h - 20;
		var maxvalue = d3.max(dataset, function(d){return +d[category];});
		console.log(maxvalue);

		var scaleheight = d3.scale.linear()
		    //.domain([0, maxvalue])
		    .domain([0, 2700])
		    .range([0, chartHeight - 20]);

		var scaleSaturation = d3.scale.linear()
		    //.domain([0, maxvalue])
		    .domain([0, 2700])
		    .range([20, 80]);

		var bar = svg.selectAll('rect.bar')
		    .data(dataset);

		// 作成
		bar.enter()
			.append('rect')
			.attr('class', 'bar')
		    .attr('fill', function(d) { return 'hsla(0, 0%, 50%, 0)'; })
		    .attr('x', function(d, i) {
			    return i * w / dataset.length;
			})
		    .attr('width', Math.floor(w / dataset.length))
		    .attr('height', 0)
		    .attr('y', chartHeight)
		    .on('mouseover', function(){
				d3.select(this)
					.attr('fill', 'green');
			})
			.on('mouseout', function(){
				d3.select(this)
					.transition()
					.duration(200)
				    .attr('fill', function(d) { return 'hsl(0, '+ scaleSaturation(d[category]) +'%, 50%)'; })
			})


		// 削除
		bar.exit().remove();

		// 更新
		bar.transition()
			.delay(function(d,i){return i*50;})
			.duration(300)
		    .attr('fill', function(d) { return 'hsl(0, '+ scaleSaturation(d[category]) +'%, 50%)'; })
		    .attr('height', function(d){return scaleheight(d[category]);})
		    .attr('y', function(d){return chartHeight - scaleheight(d[category]);})
	};

	d3.select(self.frameElement).style("height", h + "px");

});