(function() {
    'use strict';

    var width = 960,
        height = 630;
        // margin not used as want it to be flush

    var svg = d3.select('#vis').append('svg')
        .attr({
            class: 'axis',
            width: width,
            height: height
        });

    function renderXAxis() {

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

        var xAxis = d3.svg.axis()
            .scale(scale)
            .orient('top')
            .ticks(40);

        svg.append('g')
            .attr({
                class: 'x-axis',
                transform: function() {
                    return 'translate(0,' + height + ')';
                }
            })
            .call(xAxis);

        d3.selectAll('g.x-axis g.tick')
            .append('line')
                .classed('grid-line', true)
                .attr({
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: -height
                });
    }

    function renderYAxis() {

        var scale = d3.scale.linear()
            .domain([0, height]) // want to keep y as it is
            .range([0, height]);

        var yAxis = d3.svg.axis()
            .scale(scale)
            .orient('right')
            .ticks(20);

        svg.append('g')
            .attr({
                class: 'y-axis',
                transform: 'translate(0, 0)'
            })
            .call(yAxis);

        d3.selectAll('g.y-axis g.tick')
            .append('line')
                .classed('grid-line', true)
                .attr({
                    x1: 0,
                    y1: 0,
                    x2: width,
                    y2: 0
                });
    }

    d3.select('#grid-bt').on('click', function() {
        var grid = d3.selectAll('g.tick');
        if (grid.empty()) {
            renderYAxis();
            renderXAxis();
        } else {
            grid.remove();
        }
        
    });

})();