"use strict";

var selected = false;

var months,
	monthFormat = d3.time.format("%m");

var chartWidth = 200;
var chartHeight = 100;
var chartHeightMargin = 30;
var chartWidthMargin = 30;
var margin = {
		top: 25,
		right: 0,
		bottom: 50,
		left: 40
	},
	width = 1500 - margin.left - margin.right;
var numWide = Math.floor(width / (chartWidth + chartWidthMargin))
var height = margin.top + margin.bottom + (chartHeight + chartHeightMargin) * 250 / numWide;
var max_radius = 14;

var countFormat = d3.format(",.1%");

var x = d3.time.scale()
	.range([0, chartWidth]);


//var y = d3.scale.linear().domain([-1, 7]).range([100, 0])
//var y = d3.scale.linear().domain([-1, 1, 5, 8]).range([100, 60, 35, 0])
var y = d3.scale.linear().domain([0, 1 / 6, .8]).range([chartHeight, chartHeight / 2, 0])

var xAxis = d3.svg.axis()
	.scale(x)
	.orient('bottom')
	.tickSize('4')
	.tickFormat(d3.time.format("%b"));

var yAxis = d3.svg.axis()
	.scale(y)
	.orient('left')
	.tickSize('4')
	.tickValues([1 / 12, 1 / 6, .3, .5, .7])
	.tickFormat(d3.format(".1%"));


var yCat = d3.scale.linear().domain([0, 250 / numWide]).range([0, height - (chartHeight)])
var xCat = d3.scale.linear().domain([0, 4]).range([0, (chartWidth + chartWidthMargin) * 4])

var line = d3.svg.line()
	.x(function(d) {
		return x(d.date);
	})
	.y(function(d) {
		return y(d.valueSeasonal);
	});

var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");


d3.tsv("products-monthly-2014-top250.tsv", type, function(error, products) {
	console.log(products)
	products.sort(function(a, b) {
		return b.std - a.std
	})

	x.domain(d3.extent(months));

	// Container for a product line and circles.

	var product_container = svg.selectAll('.product')
		.data(products)
		.enter().append("g")
		.attr("class", "product")
		.attr("transform", function(d, i) {
			return "translate(" + xCat(i % numWide) + "," + yCat(Math.floor(i / numWide)) + ")"
		})
		.attr("id", function(d) {
			return "p" + d.code;
		});


	//
	// Lines.
	//

	product_container.append('g')
		.attr("transform", "translate(0," + y(0) + ")")
		.attr("class", function(d) {
			return "xAxis axis hidden id-" + d.code
		})
		.append('g').call(xAxis);


	product_container.append('g')
		//.attr("transform", "translate(0," + (chartHeight - 25) + ")")
		.attr("class", function(d) {
			return "hidden axis id-" + d.code
		})
		.append('g').call(yAxis);


	product_container.append("path")
		.attr("d", function(d) {
			return line(d.values);
		})
		.attr("class", function(d) {
			return d.code;
		});

	product_container.append("line")
		.attr({
			'x2': chartWidth,
			'y1': y(1 / 12),
			'y2': y(1 / 12),
			'stroke-dasharray': '5,5',
			'stroke': 'grey',
			'stroke-width': '.5px'
		})

	product_container.append("line")
		.attr({
			'x2': chartWidth,
			'y1': y(0),
			'y2': y(0),
			'stroke': 'grey',
			'stroke-width': '.5px'
		})

	// 
	// Text
	// 

	product_container.append('text')
		.text(function(d) {
			return d.name
		})
		.attr({
			'x': 2,
			'y': y(.73),
			'class': function(d) {
				return 'title hidden id-' + d.code
			}
		})

	product_container.append("rect")
		.attr({
			'height': chartHeight,
			'width': chartWidth,
			'opacity': 0
		})
		.on('mouseover', function(d) {
			d3.selectAll('.id-' + d.code).classed("hidden", false)
		})
		.on('mouseout', function(d) {
			d3.selectAll('.id-' + d.code).classed("hidden", true)
		});;

}); // @end d3.tsv()



function type(d, i) {
	var calculateStd = function(data, mean) {
		conslole.log('here')
		var sumSquaredDiff = 0;

		return
	}

	months = d3.range(1, 13).map(function(d) {
		return monthFormat.parse(String(d));
	}).filter(Number);

	var product = {
		code: d.Code,
		name: d.Title,
		values: null,
		annualTotal: 0,
		seasonalArray: []
	};
	for (var i = 1; i <= 12; i++) {
		product.annualTotal = product.annualTotal + +d['m' + i]
	}
	product.mean = product.annualTotal / 12

	product.values = months.map(function(m) {
		var value = Number(d['m' + Number(monthFormat(m))])
		var seasonal = value / product.annualTotal
			//var seasonal = (value / (product.annualTotal / 12)) - 1
		product.seasonalArray.push(seasonal)
		return {
			product: product,
			date: m,
			value: value,
			valueSeasonal: seasonal
		}
	});


	product.std = d3.deviation(product.seasonalArray)

	return product;
}