var person_data = {9999: {'mentioned': 0, 'recipient': 193, 'creator': 167}, 1690: {'mentioned': 150, 'recipient': 1, 'creator': 0}, 1691: {'mentioned': 0, 'recipient': 2, 'creator': 0}, 1692: {'mentioned': 5, 'recipient': 0, 'creator': 0}, 1693: {'mentioned': 0, 'recipient': 0, 'creator': 0}, 1694: {'mentioned': 0, 'recipient': 0, 'creator': 0}, 1695: {'mentioned': 0, 'recipient': 0, 'creator': 0}, 1696: {'mentioned': 5, 'recipient': 0, 'creator': 0}, 1697: {'mentioned': 0, 'recipient': 0, 'creator': 0}, 1698: {'mentioned': 0, 'recipient': 0, 'creator': 0}, 1699: {'mentioned': 3, 'recipient': 1, 'creator': 0}, 1700: {'mentioned': 0, 'recipient': 3, 'creator': 2}, 1701: {'mentioned': 0, 'recipient': 4, 'creator': 0}, 1702: {'mentioned': 0, 'recipient': 12, 'creator': 1}, 1703: {'mentioned': 0, 'recipient': 25, 'creator': 3}, 1704: {'mentioned': 0, 'recipient': 37, 'creator': 21}, 1705: {'mentioned': 0, 'recipient': 300, 'creator': 20}, 1706: {'mentioned': 0, 'recipient': 80, 'creator': 33}, 1707: {'mentioned': 0, 'recipient': 81, 'creator': 43}, 1708: {'mentioned': 0, 'recipient': 116, 'creator': 58}, 1709: {'mentioned': 0, 'recipient': 113, 'creator': 54}, 1710: {'mentioned': 0, 'recipient': 91, 'creator': 35}, 1711: {'mentioned': 0, 'recipient': 146, 'creator': 58}, 1712: {'mentioned': 0, 'recipient': 110, 'creator': 79}, 1713: {'mentioned': 0, 'recipient': 110, 'creator': 20}, 1714: {'mentioned': 0, 'recipient': 113, 'creator': 4}, 1715: {'mentioned': 0, 'recipient': 187, 'creator': 27}, 1716: {'mentioned': 0, 'recipient': 196, 'creator': 76}, 1717: {'mentioned': 0, 'recipient': 122, 'creator': 96}, 1718: {'mentioned': 0, 'recipient': 152, 'creator': 65}, 1719: {'mentioned': 0, 'recipient': 151, 'creator': 77}, 1720: {'mentioned': 0, 'recipient': 189, 'creator': 42}, 1721: {'mentioned': 0, 'recipient': 122, 'creator': 16}, 1722: {'mentioned': 0, 'recipient': 152, 'creator': 30}, 1723: {'mentioned': 0, 'recipient': 115, 'creator': 24}, 1724: {'mentioned': 10, 'recipient': 102, 'creator': 49}, 1725: {'mentioned': 0, 'recipient': 115, 'creator': 40}, 1726: {'mentioned': 0, 'recipient': 88, 'creator': 33}, 1727: {'mentioned': 0, 'recipient': 134, 'creator': 61}, 1728: {'mentioned': 0, 'recipient': 75, 'creator': 56}, 1729: {'mentioned': 0, 'recipient': 153, 'creator': 58}, 1730: {'mentioned': 0, 'recipient': 114, 'creator': 29}, 1731: {'mentioned': 0, 'recipient': 126, 'creator': 32}, 1732: {'mentioned': 0, 'recipient': 109, 'creator': 39}, 1733: {'mentioned': 0, 'recipient': 97, 'creator': 32}, 1734: {'mentioned': 0, 'recipient': 92, 'creator': 29}, 1735: {'mentioned': 0, 'recipient': 37, 'creator': 13}};

		var unknownYear = "9999",
			unknownYearText = "?",
			showUnknown = false;
		
		var all_charts = ['creator','recipient','mentioned'],
			all_chart_titles = ['Letters written','Addressee of letters','Mentioned in'];
		
		var have = { creator : false , 
				recipient: false, 
				mentioned: false, 
				unknown : false };	
					
		// Switch old data format to new data format.
		// TODO: do this in Pylons template
		var person_data_keys = Object.keys(person_data);
		var person_data_without_unknown = [], year;
		
		for( var  i=0;i<person_data_keys.length;i++) {
			year = person_data_keys[i]
			if( year != unknownYear ) {
				counts = person_data[year];
				person_data_without_unknown.push( {
					'year' : year, 
					'mentioned' : counts.mentioned,
					'recipient' : counts.recipient,
					'creator' : counts.creator
				} );
			}
		}
		
		var person_data_with_unknown = person_data_without_unknown.slice(); // Shallow clone!
		
		if( unknownYear in person_data ) {
			counts = person_data[unknownYear];
			person_data_with_unknown.push( {
				'year' : unknownYear,
				'mentioned' : counts.mentioned,
				'recipient' : counts.recipient,
				'creator' : counts.creator
			
			}); // Add here to ensure it's at the end of the array.
			
			have.unknown = true;
		}
	
	// Check we have data for each graph
	for( var i=0; i<all_charts.length; i++ ) {
	
		var c = all_charts[i];
		for( var j = 0; j < person_data_with_unknown.length ; j++ ) {
			if( person_data_with_unknown[j][c] != 0 ) {
				have[c] = true;
				break;
			}
		}
	}
	
	// Specify the charts we have
	var charts = [], chart_titles = [];
	for( i=0;i < all_charts.length; i++ ) {
		if( have[all_charts[i]] ) {
			charts.push( all_charts[i] );
			chart_titles.push( all_chart_titles[i] );
		}
	}
	

	var  svg_height_base = 100,
		 svg_chart_gap = 50,
			label_space_bottom = 20,
			label_space_top = 20,
			label_space_left = 35,
			label_space_right = 15,
			label_offset = 6
			;
		
	var svg_width = d3.select( "#chart" ).style( "width" );
	svg_width = svg_width.substring( 0, svg_width.length - 2 );
	
	var chart_width = svg_width - label_space_left - label_space_right;
		
	//
	// Create the Chart
	//
	
	// Get height
	var svg_height = svg_height_base * charts.length + svg_chart_gap * ( charts.length-1 );
		
	var svgChart = d3.select( '#chart' )
				.append("svg")
				.attr("class", "chart single" )
				.attr("width", svg_width )
				.attr("height", svg_height )
				;
	
	var bars_are = "seperate"; // could be : "stacked" , "split"
	
	var axes = [];
	
	function getMax( person_data, includeUnknown ) {
	
		return d3.max( person_data, function( d ) {
			if ( !includeUnknown && d.year == unknownYear ) {
				return 0;
			}
			
			if( bars_are == "stacked" ) {
				return d.creator + d.recipient + d.mentioned;
			}
			
			return d3.max( [d.creator, d.recipient, d.mentioned ] );	
		} );

	}
	
	function getXScaleDomain( showUnknown) {
		var xDomain = [];
		for( var j=0;j<person_data_length;j++) {
			var year = person_data[j].year;
			
			if ( showUnknown || year != unknownYear ) {
				if( year == unknownYear )
					xDomain.push( unknownYearText );
				else
					xDomain.push( year );
			}
		}
		
		return xDomain;
	}
	
	function getXAxisTicks( xScaleDomain, chart_width ) {
		// Work out what years to display given space.
		var xAxisTicksDomain = xScaleDomain;
		var xAxisTicks = [];
		var widthBar = chart_width / xAxisTicksDomain.length;
		var ticks_every = 10;
		
		if( widthBar > 40 )
			ticks_every = 1;
		else if( widthBar > 20 )
			ticks_every = 3;
		else if( widthBar > 10 )
			ticks_every = 5;
		
		for( var j=0;j<xAxisTicksDomain.length;j++) {
			var val = xAxisTicksDomain[j];
			if( j % ticks_every == 0 || val == unknownYearText ) {
				xAxisTicks.push(val);
			}
		}
		
		return xAxisTicks;
	}
	
	function getYAxisTickNumber( max_value, bars_are ) {
		// Vertical lines
		var y_ticks = 3;
		if( max_value < y_ticks ) {
			y_ticks = max_value;
		}
		else if( bars_are != 'seperate' && max_value >= y_ticks * 3) {
			y_ticks *= 3;
		}
		return y_ticks;
	}
	
	function getChart( number ) {
		if( number < charts.length ) {
			return charts[number];
		}
		return "";
	}
	
	if( showUnknown ) {
		person_data = person_data_with_unknown;
	} else {
		person_data = person_data_without_unknown;
	}
	
	var max_value = getMax( person_data, showUnknown );
	
	// Make an empty copy
	var person_data_dummy = [];
	for( var  i=0; i<person_data.length; i++) {
		person_data_dummy.push( {
				'year' : person_data[i].year, 'mentioned' : 0, 'recipient' : 0, 'creator' : 0
		} );
	}
	
	person_data = person_data_dummy;	
	person_data_length = person_data.length;
	
	var beginning = true;
	
	for( var i=0; i<charts.length; i++ ) {
	
		var chart = charts[i];
		if( have[chart] ) {
			
			var chart_height = svg_height_base - label_space_top - label_space_bottom;
			var chart_x = label_space_left,
				chart_y = ( i * (svg_height_base + svg_chart_gap) ) + label_space_top;
				
				
			// Draw title
			svgChart.append("text")
				.classed( "chart-title", 1 )
				.classed( chart, 1 )
				.attr("x",chart_x + 5 )
				.attr("y",chart_y - 5 )
				.text(chart_titles[i])
				;
				
			//
			// Create Y scale
			//
			var yScale = d3.scale.linear();
			
			var stretchLowerYScale = false;
			//stretchLowerYScale = ( (max_value / 4) > 10 );		
			//if( stretchLowerYScale )
			//	yScale.domain( [0,10,max_value] ).range( [chart_height,chart_height - chart_height/4,0] ); // enhance values between 1 and 10 so we can see them easier.
			//else
			yScale.domain( [0,max_value] ).rangeRound( [chart_height,0] );
			
			//
			// Create Xscale
			//
			var xScaleDomain = getXScaleDomain( showUnknown );
			var xScale = d3.scale.ordinal()
				.domain( xScaleDomain )
				.rangeRoundBands([0, chart_width], 0.2 )
				;
				
			var y_ticks = getYAxisTickNumber( max_value, bars_are );
			
			var yTickMarks = yScale.ticks(y_ticks);
			//if( stretchLowerYScale ) {
			//	yTickMarks.push(10);
			//}
			svgChart.append( "svg:g" ).classed("guidelines", 1 ).selectAll( "line.guideline." + chart )
				.data( yTickMarks, function(d,j) { return (d==0) ? 0 : j + "-" + chart; }  )
				.enter().append("line")
					.classed( "guideline", 1 )
					.classed( chart, 1 )
					.attr("x1", chart_x )
					.attr("x2", chart_x + chart_width )
					.attr("y1", function(d) { return chart_y + yScale(d); })
					.attr("y2", function(d) { return chart_y + yScale(d); })
					;
			
			//
			// Axes
			//
			var xAxisTicks = getXAxisTicks( xScale.domain(), chart_width );
			var xAxis = d3.svg.axis()
				.scale(xScale)
				.orient("bottom")
				.tickValues( xAxisTicks )
				;
			
			var yAxis = d3.svg.axis()
				.scale( yScale )
				.orient( "left" )
				.tickFormat( d3.format("f") )
				.ticks( y_ticks )
				.tickSize( 4,2,0 );
				;
				
			if( bars_are != 'seperate' ) {
				yAxis.tickSubdivide( 4 );
			}
			else {
				yAxis.tickSubdivide( 0 )
			}
			
			axes[chart] = {
				x: xAxis,
				y: yAxis
			};
			
			svgChart.append( "svg:g" )
				.classed( "xaxis", 1 ).classed( "axis", 1 ).classed("label", 1 ).classed( chart, 1 )
				.attr( "transform", "translate(" + chart_x + "," + (chart_y + chart_height) + ")" )
				.call( xAxis )
				;
				
			svgChart.append( "svg:g" )
				.classed( "yaxis",1 ).classed( "axis", 1 ).classed( "label", 1 ).classed( chart, 1 )
				.attr( "transform", "translate(" + chart_x + "," + chart_y + ")" )
				.call( yAxis )
				;
			
			}
		}
	
	function updateCharts( duration, delay ) {
		
		person_data = ( showUnknown ) ? person_data_with_unknown : person_data_without_unknown;			
		person_data_length = person_data.length;
		
		max_value = getMax( person_data, showUnknown, chart );
				
		var chart_height = svg_height_base - label_space_top - label_space_bottom;
		var chart_x = label_space_left;
		
		if( bars_are == "stacked" || bars_are == "split" ) {
			chart_height = svg_height - label_space_top - label_space_bottom;
		}
					
		//
		// Update Y scale
		//
		//stretchLowerYScale = ( (max_value / 4) > 10 );
		//if( stretchLowerYScale )
		//	yScale.domain( [0,10,max_value] ).range( [chart_height,chart_height - chart_height/4,0] ); // enhance values between 1 and 10 so we can see them easier.
		//else
		yScale.domain( [0,max_value] ).range( [chart_height,0] );
		
		
		//
		// Update Xscale
		//
		var xScaleDomain = getXScaleDomain( showUnknown );
		xScale.domain( xScaleDomain );
		
		//
		// Axes
		//
		
		// Work out what years to display given space.
		var xAxisTicks = getXAxisTicks( xScale.domain(), chart_width );
		
		var y_ticks = getYAxisTickNumber( max_value, bars_are )
		
		// Update axes.
		for( j = 0; j < charts.length; j++ ) {
			var chart = charts[j];
			var xAxis = axes[chart].x;
			var yAxis = axes[chart].y;
		
			xAxis.scale(xScale)
				.tickValues( xAxisTicks )
				;
			
			yAxis.scale(yScale)
				.ticks(y_ticks)
				;
			
			if( bars_are != 'seperate' ) {
				yAxis.tickSubdivide(4);
			}
			else {
				yAxis.tickSubdivide(0)
			}
			
			svgChart.select( ".xaxis." + chart )
				.transition().duration( duration )
				.call(xAxis)
				;
					
			svgChart.select( ".yaxis." + chart )
				.transition().duration( duration )
				.call(yAxis)
				;
		}
		
		// Vertical lines
		var yTickMarks = yScale.ticks(y_ticks);
		//if( stretchLowerYScale ) {
		//	yTickMarks.push(10);
		//}
	
		var guidelines = svgChart.select( "g.guidelines" ).selectAll( "line.guideline." + getChart( 0 ) )
			.data( yTickMarks , function(d,i) { return (d==0) ? 0 : i + "-" + getChart( 0 ); } );
			
		guidelines.enter().append( "line" )
				.classed("guideline", 1 )
				.classed( getChart( 0 ), 1 )
				.attr("x1", chart_x)
				.attr("x2", chart_x + chart_width )
				.attr("y1", chart_y )
				.attr("y2", chart_y )
				;
				
		guidelines.exit().remove();
		
		guidelines
			.transition().duration( duration )
			.attr( "y1", function(d) { return label_space_top + yScale(d); } )
			.attr( "y2", function(d) { return label_space_top + yScale(d); } )
			;
		
		function fade( item, fade_in ) {
			if( fade_in ) {
				svgChart.selectAll( item ).transition().duration( duration/2 ).delay( 3*duration/2).style( 'opacity','1' );
			} else {
				svgChart.selectAll( item ).transition().duration( 3*duration/2 ).style( 'opacity', '0' );
			}
		}
			
		if( bars_are == "stacked" || bars_are == "split" ) {
			for ( i = 0; i < charts.length-1; i++ ) { // first ones
				fade( ".xaxis." + charts[i], false );
			}
			
			for ( i = 1; i < charts.length; i++ ) { // last ones
				fade( ".yaxis." + charts[i] , false );
				fade( ".guideline." + charts[i], false );
				fade( ".chart-title." + charts[i], false );
			}
			
			var title = "";
			if( charts.length == 3 )
				title = chart_titles[0] + ", " + chart_titles[1] + " and " + chart_titles[2];
			else if ( charts.length == 2 )
				title = chart_titles[0] + " and " + chart_titles[1];
			else if ( charts.length == 1 )
				title = chart_titles[0];
			
			svgChart.select( ".chart-title." + getChart( 0 ) )
				.text( title )
			
		}
		if( bars_are == "seperate" ) {
			
			for ( i = 0; i < charts.length-1; i++ ) {
				fade( ".xaxis." + charts[i], true );
			}
			
			for ( i = 1; i < charts.length; i++ ) {
				fade( ".yaxis." + charts[i] , true );
				fade( ".guideline." + charts[i], true );
				fade( ".chart-title." + charts[i], true );
			}
			
			if( charts.length > 0 ) {
				svgChart.select( ".chart-title." + getChart( 0 ) )
					.text( chart_titles[0] )
			}
		}
		
		for( var i=0; i<charts.length; i++ ) {
		
			var chart = charts[i];
			if( have[chart] ) {
			
				var chart_y = ( i * (svg_height_base + svg_chart_gap) ) + label_space_top;
				if( bars_are == "stacked" || bars_are == "split" ) {
					chart_y = label_space_top;
				}
				
				//
				// Bars
				//
				var bars = svgChart.selectAll("rect." + chart ).data(person_data, function(d) { 
					return d.year + "-" + chart; 
				});
				
				// Create any new bars
				bars.enter().append("rect")
					.classed( "bar" , 1 )
					.classed( chart , 1 )
					.attr("x", chart_x + chart_width + 2 ) // hide off right
					.attr("y", chart_y + chart_height )
					.attr("width", xScale.rangeBand() )
					.attr("height", 0 )
					.classed( "unknown", function (d) { return d.year == unknownYear; } )
					;
				
				// Remove unwanted bars
				bars.exit()
					.transition().duration( duration )
					.attr("x", chart_x + chart_width + 2 ) // hide off right
					.remove()
					;
				
				bars.append("title")
						.text(function(d) {
							var year = (d.year != unknownYear) ? d.year : "Years unknown" ;
							return year + ": " + d[chart] + " " + chart_titles[i];
						})
					;

				if( beginning ) {
					// when first open we don't want things to move in from right.
					bars.attr("x", function( d, i ) { return chart_x + xScale(i); });
				}
				
				// Update all bars
				bars.transition().duration( duration ).delay( delay )
					.attr("x", function( d, i ) {
						var offset = 0;
						if( bars_are == "split" ) {
							if( chart == getChart( 1 ) )
								offset = xScale.rangeBand() / charts.length;
							else if( chart == getChart( 2 ) )
								offset = xScale.rangeBand() * 2 / charts.length ;
						}
								
						return chart_x + xScale(i) + offset;
					} )
					.attr("y", function( d ) {
						var value = d[chart]
						
						if( bars_are == "stacked" ) {
							if( chart == getChart( 0 ) )
								for( j=1;j<charts.length;j++) 
									value += d[charts[j]];
							else if( chart == getChart( 1 ) )
								for( j=2;j<charts.length;j++) 
									value += d[charts[j]];
						}
						
						return chart_y + yScale(value); 
					} )
					.attr("width", function() {
						if( bars_are == "split" )
							return xScale.rangeBand() / charts.length;
						
						return xScale.rangeBand();
					})
					.attr("height", function(d) {
						return chart_height - yScale(d[chart]); 
					} )
					;
				
				}
									
			}
			
			beginning = false;
		}

	
	function hide( selectors, hide ) {
		for( var i=0;i<selectors.length;i++) {
			d3.select(selectors[i]).style("display", (hide) ? "none" : "inline-block" );
		}
	}
	
	function highlight( selectors, highlight ) {
		for( var i=0;i<selectors.length;i++) {
			d3.select(selectors[i]).classed( "highlight", highlight );
		}
	}
	
	function unknownShow( show ) {
		if( show ) {
			highlight( ["#show_unknown"],true );
			highlight( ["#hide_unknown"],false );
			
			showUnknown = true;
			
		} else {
			highlight( ["#hide_unknown"],true );
			highlight( ["#show_unknown"],false );
			
			showUnknown = false;
		}
		
		updateCharts( 1000, function (d,i) {
				return (person_data_length - i - 1) * (1200 / person_data_length);
			} );
	}
	
	function switchBars( bars_should_be ) {
		bars_are = bars_should_be;
		
		if( bars_are == "seperate" ) {
			highlight( ["#bars_seperate"],true );
			highlight( ["#bars_stacked","#bars_split"], false );
		}
		else if( bars_are == "stacked" ) {
			highlight( ["#bars_stacked"],true );
			highlight( ["#bars_seperate","#bars_split"],false );
		}
		else { // ( bars_are == "split" )
			highlight( ["#bars_split"],true );
			highlight( ["#bars_seperate","#bars_stacked"],false );
		}
		
		updateCharts( 1000, function (d,i) {
				return (person_data_length - i - 1) * (1200 / person_data_length);
		} );
	}
		
	if( charts.length > 0 ) {
		var buttons = "";
		
		if( have.unknown ) {
			buttons += '<div class="buttons">';
			buttons += '<button id="hide_unknown" class="highlight" onclick="unknownShow(false);">Hide unknown</button>';
			buttons += '<button id="show_unknown"  onclick="unknownShow(true);">Show unknown</button>';
			buttons += '</div>';
		}
		
		if( charts.length > 1 ) {
			buttons += '<div class="buttons">';
			buttons += '<button class="highlight" id="bars_seperate" onclick="switchBars(\'seperate\');">Seperate charts</button>';
			buttons += '<button id="bars_stacked" onclick="switchBars(\'stacked\');">Stack bars</button>';
			buttons += '<button id="bars_split" onclick="switchBars(\'split\');">Split bars</button>';
			buttons += '</div>';
		}
		
		if( buttons != "" ) {
			d3.select('#chart_buttons').html(buttons);
		}
		
		updateCharts( 500, function (d,i) {
				return i * (1200/person_data_length);
			} ) ;
	}