(function() {
    'use strict';


var data = [
    {
        name: 'S',
        born: 1977,
        colour: '#FDBB30'
    },
    {
        name: 'H',
        born: 1978,
        colour: '#7AC143'
    },
    {
        name: 'M',
        born: 2001,
        colour: '#EC008C'
    },
    {
        name: 'A',
        born: 2004,
        colour: '#00B0DD'
    },
    {
        name: 'K',
        born: 2007,
        colour: '#EE3124'
    },
    {
        name: 'Z',
        born: 2014,
        colour: '#F47521'
    },
];

var dates = [1988, 1998, 2001, 2004, 2007, 2015, 2018, 2021, 2023, 2026, 2029, 2050];

var w = 900,
    h = 300;

// // svg container
var svg = d3.select('#vis').append('svg')
    .attr({
        width: w,
        height: h
    });

var scale = d3.scale.linear()
            .domain([0, 100])
            .range([40, w - 40]);

console.log(scale(28));
// reference for date selection    
var selectedDate = 2015;

// create navigation
function buttons() {
    var nav = d3.select('nav').append('ul');

    var li = nav.selectAll('li')
        .data(dates)
        .enter()
        .append('li');
    li
        .text(function (d) { return d; })
        .style('pointer-event', 'none');

    li 
        .on('click', function (d) {
            selectedDate = d;
            render();
        });

}

// create chart
function bar() {
    // group 
    var g = svg.selectAll('g') 
        .data(data)
        .enter()
        .append('g')
        .classed('gBar', true);

    // name
    g.append('text')
        .attr({
            class: 'name',
            x: 20,
            y: function (d,i) { return ySpacing(i); },
        })
        .text(function (d) { return d.name; });

    // bar
    g.append('rect')
        .attr({
            x: 40,
            y: function (d,i) { return ySpacing(i) -5; },
            width: 0,
            height: 8
        })
        .style({
            stroke: 'none',
            fill: function (d) { return d.colour; }
        })
        .transition() // a little motion
        .attr({
            width: function (d) { 
                if (age(d.born, selectedDate) < 0) {
                    return 0;
                } else {
                    return scale(age(d.born, selectedDate)); 
                }    
            }
        });

    // age
    g.append('text')
        .attr({
            class: 'age',
            x: function (d) { 
                if (age(d.born, selectedDate) < 0) {
                    return 40;
                } else {
                    return scale(age(d.born, selectedDate)) + 60; 
                }    
            },
            y: function (d,i) { return ySpacing(i); },
        })
        .text(function (d) { 
            if (age(d.born, selectedDate) < 0) {
                return 'not born';
            } else {
                return age(d.born, selectedDate); 
            }    
        });
}

// calculate age
function age(_birth, _date) {
    // use moment.js to calc age
    var a = moment([_birth, 0]);
    var b = moment([_date, 0]);

    return b.diff(a, 'years');
}
// calculate spacing (so I can change in one place)
function ySpacing(_i) {
   return  _i*40 + 40; 
}
// update on selection
function render() {
    d3.selectAll('.gBar').remove();
    bar();
}

// render navigation options
buttons();
// render initial chart
render();


})();