var margin = {top: 40, right: 40, bottom: 30, left: 120},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

var chart = 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 + ")");
      
var data = [{
	name: 'Stato della Chiesa',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1582
	},
	{
		name: 'gregoriano',
		time_start: 1582,
		time_end: 2014
	}]
},
{
	name: 'Portogallo',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1582
	},
	{
		name: 'gregoriano',
		time_start: 1582,
		time_end: 2014
	}]
},
{
	name: 'Regno di Napoli',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1582
	},
	{
		name: 'gregoriano',
		time_start: 1582,
		time_end: 2014
	}]
},
{
	name: 'Spagna',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1582
	},
	{
		name: 'gregoriano',
		time_start: 1582,
		time_end: 2014
	}]
},
{
	name: 'Venezia',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1582
	},
	{
		name: 'gregoriano',
		time_start: 1582,
		time_end: 2014
	}]
},
{
	name: 'Francia',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1583
	},
	{
		name: 'gregoriano',
		time_start: 1583,
		time_end: 2014
	}]
},
{
	name: 'Baviera',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1583
	},
	{
		name: 'gregoriano',
		time_start: 1583,
		time_end: 2014
	}]
},
{
	name: 'Austria',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1584
	},
	{
		name: 'gregoriano',
		time_start: 1584,
		time_end: 2014
	}]
},
{
	name: 'Ungheria',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1589
	},
	{
		name: 'gregoriano',
		time_start: 1589,
		time_end: 2014
	}]
},
{
	name: 'Svezia',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1592
	},
	{
		name: 'gregoriano',
		time_start: 1592,
		time_end: 1600
	},
	{
		name: 'giuliano',
		time_start: 1600,
		time_end: 1753
	},
	{
		name: 'gregoriano',
		time_start: 1753,
		time_end: 2014
	}]
},
{
	name: 'Prussia',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1610
	},
	{
		name: 'gregoriano',
		time_start: 1610,
		time_end: 2014
	}]
},
{
	name: 'Danimarca',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1700
	},
	{
		name: 'gregoriano',
		time_start: 1700,
		time_end: 2014
	}]
},
{
	name: 'Toscana',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1749
	},
	{
		name: 'gregoriano',
		time_start: 1749,
		time_end: 2014
	}]
},
{
	name: 'Regno Unito',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1752
	},
	{
		name: 'gregoriano',
		time_start: 1752,
		time_end: 2014
	}]
},
{
	name: 'Russia',
	calendar: [{
		name: 'giuliano',
		time_start: 1400,
		time_end: 1923
	},
	{
		name: 'gregoriano',
		time_start: 1923,
		time_end: 2014
	}]
},
{
	name: 'Giappone',
	calendar: [{
		name: 'giapponese',
		time_start: 1400,
		time_end: 1853
	},
	{
		name: 'gregoriano',
		time_start: 1853,
		time_end: 2014
	}]
},
{
	name: 'Corea',
	calendar: [{
		name: 'coreano',
		time_start: 1400,
		time_end: 1896
	},
	{
		name: 'gregoriano',
		time_start: 1896,
		time_end: 2014
	}]
},
{
	name: 'Cina',
	calendar: [{
		name: 'cinese',
		time_start: 1400,
		time_end: 1912
	},
	{
		name: 'gregoriano',
		time_start: 1912,
		time_end: 2014
	}]
}];

var x = d3.scale.linear()
  .domain ([1400,2014])
  .range([0, width]);

var countries = _.chain(data)
  .map(function(country){ return country.name; })
  .reverse()
  .value();

var y = d3.scale.ordinal()
  .domain(countries)
  .rangeRoundBands([height, 0]);

var color = d3.scale.ordinal()
  .domain(['giuliano','gregoriano','giapponese','coreano','cinese'])
  .range(["#8dd3c7","#fb8072","#80b1d3","#fdb462","#bc80bd","#ccebc5","#ffffb3","#ffed6f","#bebada","#b3de69","#fccde5","#d9d9d9"]);
   
var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
  .tickFormat(d3.format("4"))
  .tickSize(-height);
    
var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left");

var rows = chart.selectAll('.row')
    .data(data, function(country){ return country.name; });

rows.enter().append('g')
    .attr('class', 'row')
    .attr('transform', function(country) { return 'translate(0, ' + y(country.name) + ')'; })
  .append('rect')
    .attr('class','border')
    .attr('width', width)
    .attr('height', y.rangeBand());

rows.selectAll('.bar')
    .data(function(country){ return country.calendar; })
.enter().insert('rect',':first-child')
    .attr('class', 'bar')
    .attr('x', function(interval){ return x(interval.time_start); })
    .attr('width', function(interval){ return x(interval.time_end)-x(interval.time_start); })
    .attr('height', y.rangeBand())
    .attr('fill', function(interval){ return color(interval.name); });
    
chart.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);
       
chart.append("g")
  .attr("class", "y axis")
  .call(yAxis);

// 1582
chart.append('text')
  .attr('class','date')
  .attr('x', x(1582))
  .text('1582')
  .style('font-size', '12px')
  .style('font-weight', 'bold');
chart.append('line')
  .attr('class', 'date_tick')
  .attr('x1', x(1582))
  .attr('x2', x(1582))
  .attr('y1', 2)
  .attr('y2', 7);

// date di cambiamento
rows.selectAll('.date')
    .data(function(country){ return [country.calendar[0].time_end]; })
  .enter().append('text')
    .attr('class','date')
    .text(function(d){ return d; })
    .attr('x', function(d){ return x(d); })
    .attr('y', y.rangeBand()/2 )
    .attr('dx', '-4px')
    .attr('dy', '0.35em');

// nomi calendari
chart.append('text')
  .text('Gregorian')
  .attr('class','calname')
  .attr('x', 550)
  .attr('y', 160);

chart.append('text')
  .text('Julian')
  .attr('class','calname')
  .attr('x', 150)
  .attr('y', 290);