var svg = d3.select('#map')
	.attr('width', 700)
	.attr('height', 375)

function getOrdinal(n) {
   var s=["th","st","nd","rd"],
       v=n%100;
   return n+(s[(v-20)%10]||s[v]||s[0]);
}

var offset = 1

var projection = d3.geoConicConformal()
  .parallels([38 + 18 / 60, 39 + 27 / 60])
  .rotate([77, -37 - 40 / 60])
  .fitExtent([ [0,0], [700,375] ], $md)

var path = d3.geoPath(projection)

d3.json('https://gist.githubusercontent.com/lazarogamio/46eb927278b78a31542aca5d70b16420/raw/43ef8d62a2a13b4b88af30d63ce598f1de91c99a/maryland-3.json', function(data) {
	console.debug(data)

	svg.append('g')
		.append('path')
    	.datum($md)
    	.attr('d', path)
    	.attr('class', 'state-backdrop')

    var district = svg.append('g')
    
    var congress = svg.append('text')
		.attr('class', 'ticker-sub')
		.attr('x', 180)
		.attr('y', 255)

	var ticker = svg.append('text')
		.attr('class', 'ticker-year')
		.attr('x', 180)
		.attr('y', 215)

	var update = function(index) {

		d3.select('.current').classed('current',false)

		district.append('path')
			.datum(data.features[index])
			.attr('class', 'district current')
			.attr('d', function(d) {
				return path(d[0])
			})

		congress.text(getOrdinal(index+offset+1) + ' Congress')
		ticker.text(((index+offset)*2) + 1789)

	}

	d3.select('#start').on('click', function() {
		var curr = 0
		var interval = window.setInterval(function() {

			if (curr <= data.features.length-1) {
				update(curr)
				curr ++
			} else {
				clearInterval(interval)
			}

		}, 150)
	})



})