//var gDataset;
d3.csv("sweets.csv", function(error, dataset) {
	// svg のサイズ
	var w = 500;
	var h = 500;
	
	// containerクラスの要素を選択
	var container = d3.select('.container');
	
	// containerの中にsvgを追加
	var svg = container.append('svg')
	    .attr('width', w)
	    .attr('height', h);

	// 背景の色
	svg.append('rect')
	    .attr('class', 'background')
	    .attr('width', '100%')
	    .attr('height', '100%')
	    .attr('fill', '#fee');
	
	console.log(dataset);
	//gDataset = dataset;

	// カテゴリラベルのテキストをセット
	var categoryLabels = Object.keys(dataset[0]); // データセット1行目のキー配列
	categoryLabels.some(function(v, i){
		if (v === 'month') { categoryLabels.splice(i, 1);} // monthは不要なので削除
	});
	//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', 9)
		.attr('font-family', 'Helvetica')
		.attr('font-weight', 'bold')
		.attr('value', function(d){return d;})
		.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')); // updateBar()関数を呼びだし：引数はテキストのvalue属性の値
	});

	// 月のテキストをセット
	svg.selectAll('text.month')
		.data(dataset)
		.enter()
		.append('text')
		.attr('class', 'month')
		.attr('x', function(d, i){return (i + 0.5) * w / dataset.length;})
		.attr('y', h - 5)
		.attr('text-anchor', 'middle')
		.text(function(d){return d.month + '月';});

	//updateBar('chocolate');

	// updateBar()関数
	var updateBar = function(category) {
		var svg = d3.select('svg'); // svg要素
		//var dataset = gDataset; //svg.selectAll('rect.bar').data;
		var chartHeight = h - 20; // グラフの高さ：svgの高さマイナス20ピクセル
		var maxvalue = d3.max(dataset, function(d){return +d[category];}); // カテゴリの値の最大値
		console.log(maxvalue);

		// 高さをスケールする関数 (0~2500 を 0~chartHeight-20 に収める)
		var scaleheight = d3.scale.linear()
		    //.domain([0, maxvalue])
		    .domain([0, 2500])
		    .range([0, chartHeight - 20]);

		// 色の彩度をスケールする関数 (0~2500 を 20~80 に収める)
		var scaleSaturation = d3.scale.linear()
		    //.domain([0, maxvalue])
		    .domain([0, 2500])
		    .range([20, 80]);
		    
		//　barクラスのrectを全選択し、データをセットする
		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) // y座標はchartHeight関数で計算
		    .on('mouseover', function(){ // マウスオーバーイベント
				d3.select(this)
					.attr('fill', 'red'); // 色を赤色に
			})
			.on('mouseout', function(){ // マウスアウトイベント
				d3.select(this)
					.transition() // アニメーション
					.duration(200) // 200ミリセカンド
				    .attr('fill', function(d) { return 'hsl(0, '+ scaleSaturation(d[category]) +'%, 50%)'; }) // 色を設定色に
			})


		// バーの削除
		bar.exit().remove();

		// バーの更新
		bar.transition() // アニメーション
			.delay(function(d,i){return i*50;}) // 項目ごとに50ミリ秒遅延
			.duration(300) // 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]);}) // Y座標を設定
	};

	d3.select(self.frameElement).style("height", h + "px"); // blocks公開時の高さを設定

});