var data=[
    							{"category": "Datasets in Production", "title": 'Dataset Creation', "to": 2, "from": 0},
                  {"category": "Datasets in Production", "title": 'MO Briefing', "to": 2, "from":1},
                  {"category": "Datasets in Production", "title": 'Dataset Review - Open Data Team', "to": 5, "from":2}, 
                  {"category": "Datasets in Production", "title": 'Initial Risk Assessment Review', "to": 5, "from": 4},
                  {"category": "Datasets in Production", "title": 'Communication Plan - SP Portal', "to": 8, "from":5},
                  {"category": "Datasets in Approval", "title": 'Dataset Review - All Staff', "to": 8, "from": 5},
                  {"category": "Datasets in Approval", "title": 'Dataset Revisions (Staff Feedback)', "to": 9, "from": 8}, 
                  {"category": "Datasets in Approval", "title": 'Dataset Review - Service Providers', "to": 12, "from":9},
                  {"category": "Datasets in Approval", "title": 'Dataset Revisions (Services Provider Feedback)', "to": 13, "from": 12},
                  {"category": "Datasets in Approval", "title": 'Dataset Review/Approvals', "to": 18, "from": 13},
                  {"category": "Datasets in Approval", "title": 'Communication Plan - Dataset Postings', "to": 18, "from": 15}, 
                  {"category": "Datasets in Approval", "title": 'Submission to TBS', "to": 19, "from": 18},
                  {"category": "Released Datasets", "title": 'Posting on Geohub', "to": 19, "from": 18},
                  {"category": "Released Datasets", "title": 'Posting by TBS on Data Catalogue', "to": 20, "from": 19}
    ]

    var margin = {top: 100, right: 50, bottom: 50, left: 250},
        width = 900 - margin.left - margin.right,
        height = 490 - margin.top - margin.bottom;


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

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

		var colors = d3.scale.linear()
    							.domain([0, data.length])
    							.range(["#e8fe42",
"#3F8D67"])

    y.domain(data.map(function(d) { return d.title; }));
    x.domain([d3.min(data,function(d){return d.from;}), d3.max(data,function(d){return d.to;})]);

	
    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .ticks(10);

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
    		.ticks(14);

    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 + ")");

      svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis)
          .append("text")
          .attr("x", width-70)
          .attr("dy", "2.8em")
          .text("Duration (Weeks)");

      svg.append("g")
          .attr("class", "y axis")
          .call(yAxis);
var chart =
      svg.selectAll(".bar")

          .data(data)
          .enter().append("rect")
          .attr("class", "bar")
          .attr("y", function(d) { return y(d.title); })
          .attr("height", (height-50)/data.length)
          .attr("x", 0 )
          .attr("width", 0 )
					.attr("rx", 3.5)
					.attr("fill", function(d,i){
            return colors(i)
          });

		var tooltip = d3.select("body")
		.append('div')
		.attr('class', 'tooltip');

		tooltip.append('div')
		.attr('class', 'title');
		tooltip.append('div')
		.attr('class', 'dur');
		tooltip.append('div')
    .attr('class', 'category');
		tooltip.append('div')
    .attr('class', 'links'); 

		svg.selectAll(".bar")
		.on('mouseover', function(d,i) {
      
     d3.select(this).transition() 
     	.ease("quad")
     	.delay("100")
     	.duration("200")
     	.attr("r", 100)
     	

			tooltip.select('.title').html("<b>" + d.title + "</b>");
			tooltip.select('.dur').html("<b>Duration: </b>" + (d.to - d.from) + " week(s)");
      tooltip.select('.category').html("<b>Stage: </b>" + d.category);
      tooltip.select('.links').html("View current Datasets in this stage")

			tooltip.style('display', 'block');
			tooltip.style('opacity',2);
      

		})
		.on('mousemove', function(d) {
			tooltip.style('top', (d3.event.layerY + 10) + 'px')
			.style('left', (d3.event.layerX - 25) + 'px');
		})
		.on('mouseout', function() {
			tooltip.style('display', 'none');
			tooltip.style('opacity',0);
		});

chart.transition()
	.attr("width", function(d) { return x(d.to)-x(d.from) })
  .attr("x", function(d) { return x(d.from); })
	.delay(function(d,i) {return i*50})
	.duration(1000)
	.ease(d3.easeSinInOut)