(function() {
    'use strict';

    // var data = d3.range(0, 12); // [0, 1, 2, 3, 4 etc]
    var data = [
        { realName: 'Ralph Fiennes', filmName: 'M. Gustave' }, 
        { realName: 'F. Murray Abraham', filmName: 'Mr. Moustafa' },  
        { realName: 'Mathieu Amalric', filmName: 'Serge X.' },
        { realName: 'Adrien Brody', filmName: 'Dmitri' },
        { realName: 'Willem Dafoe', filmName: 'Jopling' },
        { realName: 'Jeff Goldblum', filmName: 'Deputy Kovacs' },
        { realName: ' Harvey Keitel', filmName: 'Ludwig' },
        { realName: 'Jude Law', filmName: 'Young Writer' },
        { realName: ' Bill Murray', filmName: '   M. Ivan' },
        { realName: 'Edward Norton', filmName: 'Henckels' },
        { realName: ' Saoirse Ronan', filmName: 'Agatha' },
        { realName: 'Jason Schwartzman', filmName: 'M. Jean' } 
    ]
    console.log('number of items in array: ' + data);

    // vars
    var rectWidth = 140,
        rectHeight = 280,
        amountInRow = 5;

    var svg = d3.select('svg'); // already added via the grid

    svg.selectAll('rect')
        .data(data)
        .enter()
        .append('rect')
            .attr({
                width: rectWidth,
                height: rectHeight, 
                x: function(d,i) { 
                    // use the index and width to place rect
                    // check the amount in row to set `i` to 0
                    if (i <= amountInRow) return (rectWidth+10)*i + 40;
                    else return (rectWidth+10)*(i-(amountInRow+1)) + 40;
                },
                y: function(d,i) { 
                    // check the amount in row to make new row
                    if (i <= amountInRow) return 70;
                    else return rectHeight + 110;
                }
            })
            .style({
                fill: 'transparent',
                stroke: 'none'
            })
        .on('mouseover', function(d, i) {
            d3.select('header h1').text(d.realName);
            d3.select('header p').text(d.filmName);
        });    

})();