var width = document.getElementById('vis')
        .clientWidth;
    var height = document.getElementById('vis')
        .clientHeight;

    var margin = {
        top: 10,
        bottom: 100,
        left: 100,
        right: 120
    };

    var svg = d3.select('#vis')
        .append('svg')
        .attr('width', width)
        .attr('height', height)
        .append('g')
        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

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

    width = width - margin.left - margin.right;
    height = height - margin.top - margin.bottom;

    var dateParse = d3.timeParse('%Y %b');
    var tooltipFormat = d3.timeFormat('%B %Y');

    var x_scale = d3.scaleTime()
        .range([0, width]);

    var y_scale = d3.scaleLinear()
        .range([height, 0]);

    var band_scale = d3.scaleBand()
        .range([0, width]);

    var line = d3.line()
        .x(function(d) {
            return x_scale(dateParse(d.date));
        })
        .y(function(d) {
            return y_scale(+d.value);
        })
        .curve(d3.curveBasis);

    var x_axis = d3.axisBottom()
        .scale(x_scale);

    var y_axis = d3.axisLeft()
        .scale(y_scale);

    d3.json('https://www.ons.gov.uk/employmentandlabourmarket/peoplenotinwork/unemployment/timeseries/mgsx/lms/data', function(data) {
        data = data['months'];

        x_scale.domain(d3.extent(data, function(d) {
            return dateParse(d.date);
        }))

        y_scale.domain([0, d3.max(data, function(d) {
            return +d.value;
        })]);

        band_scale.domain(data.map(function(d) {
            return dateParse(d.date);
        }));

        var lines = svg.selectAll('.line')
            .data([data]);

        lines
            .enter()
            .append('path')
            .attr('class', 'line')
            .attr('fill', 'none')
            .attr('stroke', 'black')
            .attr('d', line);

        var bars = svg.selectAll('.bar')
            .data(data);

        bars
            .enter()
            .append('rect')
            .attr('class', 'bar')
            .attr('x', function(d) {
                return band_scale(dateParse(d.date));
            })
            .attr('width', band_scale.bandwidth())
            .attr('height', height)
            .attr('y', 0)
            .attr('fill', 'black')
            .attr('opacity', 0)
            .on('mouseover', mouseOver)
            .on('mousemove', mouseMove)
            .on('mouseout', mouseOut);

        svg.append('g')
            .attr('transform', 'translate(0, ' + height + ')')
            .call(x_axis);

        svg.append('g')
            .call(y_axis);

        function mouseOver(d) {
            console.log(d);
            var date = dateParse(d.date);
            var displayDate = tooltipFormat(date);

            d3.select(this)
                .style('opacity', 1)

            tooltip
                .style('display', null)
                .html('<p>Date: ' + displayDate + '<br>Unemployment Rate: ' + d.value + '%</p>');
        };

        function mouseMove(d) {
            tooltip
                .style('top', (d3.event.pageY - 20) + "px")
                .style('left', (d3.event.pageX + 20) + "px");
        };

        function mouseOut(d) {
            d3.select(this)
                .style('opacity', 0)

            tooltip
                .style('display', 'none');
        };
    })