(function() {
// connect with MakeyMakey
    var body = d3.select('body')
    var quote = d3.select('h1#quote')
    var author = d3.select('h3#author')

    // background colours for each data file
    var colours = {
        space: '#FDBB30',
        left_arrow: '#ec008c', 
        right_arrow: '#ee3124',
        up_arrow: '#00b0dd',
        down_arrow: '#7ac143'
    }

    d3.queue()
        .defer(d3.json, 'data_space.json')
        .defer(d3.json, 'data_left_arrow.json')
        .defer(d3.json, 'data_right_arrow.json')
        .defer(d3.json, 'data_up_arrow.json')
        .defer(d3.json, 'data_down_arrow.json')
        .await(analyze)

    function getQuote(data) {
        return data[Math.floor(d3.randomUniform(0, data.length-1)())]
    }

    function renderQuote(d) {
        // console.log(d)
        quote.html(d.quote)
        author.html(d.author)
    }
        
    function analyze(error, space, left_arrow, right_arrow, up_arrow, down_arrow) {
        if (error) { throw error; }

        var allQuotes = space.concat(left_arrow, right_arrow, up_arrow, down_arrow)

        // console.log('allQuotes', allQuotes)

        // add some key events
        body.on('keydown', function() {
            // console.log('d3.event.keyCode:', d3.event.keyCode)
            // console.log('d3.event.key:', d3.event.key)

            var n = d3.event.keyCode

            if (n == 37) {
                console.log('Left Arrow')
                body.style('background', colours.left_arrow)
                renderQuote(getQuote(left_arrow))
            } else if (n == 38) {
                console.log('Up Arrow')
                body.style('background', '#00b0dd')
                renderQuote(getQuote(up_arrow))
            } else if (n == 39) {
                console.log('Right Arrow')
                body.style('background', '#ee3124')
                renderQuote(getQuote(right_arrow))
            } else if (n == 40) { 
                console.log('Down Arrow')
                body.style('background', '#7ac143')
                renderQuote(getQuote(down_arrow))
            } else if (n == 32) {
                console.log('SPACE')
                body.style('background', '#f47521')
                renderQuote(getQuote(allQuotes))
            } else {
                return null
            }
        })
        // .on('focus', function() {})

        // have a click event
        body.on('click', function() {
            body.style('background', '#FDBB30')
                quote.html('Place your character :)')
                author.html('(or use arrow keys)')
        })
    }

})()