//var gDataset;
d3.csv("sweets.csv", function(error, dataset) {
	var w = 800;
	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', '#fee');
	
	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 === 'month') { 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', 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(){
		d3.selectAll('text.categoryLabel.on')
			.attr('class', 'categoryLabel');
		d3.select(this)
			.attr('class', 'categoryLabel on');
		updateBar(this.getAttribute('value'));
	});
	
	var maxTotal = d3.max(dataset, function(d){return +d.total;});
	var scaleTotal = d3.scale.linear()
		.domain([0, maxTotal])
		.range([0, w / 8]);
		
	svg.selectAll('circle')
		.data(dataset)
		.enter()
		.append('circle')
		.attr('cx', function(d, i) {return ((i % 4) + 0.5) * (w / 4);})
		.attr('cy', function(d, i) {return (Math.floor(i / 4) + 0.5) * (h / 3);})
		.attr('r', function(d){return scaleTotal(d.total);})
		.attr('fill', 'hsla(0, 0%, 100%, 1.0)')
		
	// set month text
	svg.selectAll('text.month')
		.data(dataset)
		.enter()
		.append('text')
		.attr('class', 'month')
		.attr('x', function(d, i) {return ((i % 4) + 0.5) * (w / 4);})
		.attr('y', function(d, i) {return (Math.floor(i / 4) + 0.5) * (h / 3);})
		.attr('text-anchor', 'middle')
		.text(function(d){return d.month + '月';});
	
	/*
		var data = [];
	Object.keys(dataset).forEach(function(key){
		data.push({
			kind: key,
			amount: dataset.chocolate
		});
	});
	console.log(data);
	*/
	
	//console.log(d3.selectAll('circle')[0][0].getAttribute('r'));
	
	//console.log(dataset[0]);
	for (var i = 0; i < 12; i++) {
		var jan = d3.entries(dataset[i]);
		jan.shift(); // remove first (month)
		jan.pop(); // remove last (total)
		console.log(jan);
		
		var color = d3.scale.ordinal()
	    	.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
		//var radius = w / 8;
		var radius = Math.ceil(d3.selectAll('circle')[0][i].getAttribute('r'));
		var arc = d3.svg.arc()
	    	.outerRadius(radius)
			.innerRadius(radius / 2);
	    var pie = d3.layout.pie()
			.sort(null)
			.value(function(d){return +d.value;});
		
		var g = svg.selectAll('g.arc-' + i)
	      //.data(pie(dataset))
	      .data(pie(jan))
		  .enter()
		  .append('g')
	      .attr("class", function(d) { return "arc arc-" + i + " " + d.data.key; })
	      .attr("transform", "translate(" + ((i % 4) + 0.5) * (w / 4) + "," + (Math.floor(i / 4) + 0.5) * (h / 3) + ")");
	            
	     g.append('path')
	     	.attr('d', arc)
	     	.style('fill', function(d){ return color(d.data.key); });
		 /*
		 g.append("text")
	      .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
	      .attr("dy", ".35em")
	      .style("text-anchor", "middle")
	      .text(function(d) { return d.data.key; });
	     */
	}
	
	//updateBar('chocolate');

	var updateBar = function(category) {
		//d3.selectAll('.arc ' + category)
	};
	
	var updateBar2 = 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, 2500])
		    .range([0, chartHeight - 20]);

		var scaleSaturation = d3.scale.linear()
		    //.domain([0, maxvalue])
		    .domain([0, 2500])
		    .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', 'red');
			})
			.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");
	
});