(function() {
    'use strict';

    var items = 9, // number of div containers required
        rows = 3, // number items in a single row
        rowId = 0; // reference for the row ID

    var w = 200,
        h = 100,
        colour = d3.scale.category10();

    var container = d3.select('body').append('section').classed('l-content main-wrapper', true);


    function render(_items, _rows) {
        // loop through number of items to render the responsive grid
        for (var i = 0; i < _items; ++i) {

            if ( (i % rows) === 0 || i === 0) {

                rowId++; // increment the row ID      
                addRow(); // add row
                addDiv(); // then add div to row

            } else {
                addDiv(); // add div to row
            }
        }

        function addRow() {
            container.append('div')
                    .classed('pure-g rows', true)
                    .attr('id', function() { return 'row-id-' + rowId; });
        }

        function addDiv() {
            var divId = i + 1; // ensure ID starts at 1 (not 0)

            d3.select('#row-id-' + rowId)
                .append('div')
                    .classed('pure-u-1 pure-u-md-1-' + rows, true)
                    .attr('id', function() { return 'svg-id-' + divId; })
                .call(addSvg);       
        }

        function addSvg(selection) {
            var svg = selection.append('svg')
                    .attr({
                        width: w,
                        height: h
                    });

            svg.append('rect')
                    .attr({
                        x: 0,
                        y: 0,
                        width: w, 
                        height: h
                    })
                    .style({
                        fill: colour(i),
                        stroke: 'none'
                    });

            svg.append('text')
                    .attr({
                        x: 10,
                        y: 20
                    })
                    .text(i+1);
        }
    }

    render(items, rows);

    // slider code for demo controls (not needed to create the responsive grid)
    // https://github.com/turban/d3.slider
    
    // ensure slider text is showing current render values
    d3.select('#slider-text-items').text(items);
    d3.select('#slider-text-rows').text(rows);

    // update items
    d3.select('#slider-items').call(d3.slider().value(items).min(5).max(50).on('slide', function(evt, value) {
        items = d3.round(value); // ensure whole number
        d3.select('#slider-text-items').text(items); // update the text to show value
        d3.selectAll('.rows').remove(); // remove all the rows
        rowId = 0; // ensure ID is starting at zero
        render(items, rows); // update with new amount of items

    }));

    // update users
    d3.select('#slider-rows').call(d3.slider().value(rows).min(1).max(5).on('slide', function(evt, value) {
        rows = d3.round(value);
        d3.select('#slider-text-rows').text(rows);
        d3.selectAll('.rows').remove(); 
        rowId = 0;
        render(items, rows); // update with new rows

    }));

})();