(function() {
    'use strict';

    // japanese numbers data
    var nums = [
        { japanese: '〇', english: 0, reading: 'zero' }, // 〇
        { japanese: '一', english: 1, reading: 'ichi' }, // 一
        { japanese: '二', english: 2, reading: 'ni' }, // 二
        { japanese: '三', english: 3, reading: 'san' }, // 三
        { japanese: '四', english: 4, reading: 'yon' }, // 四 
        { japanese: '五', english: 5, reading: 'go' }, // 五
        { japanese: '六', english: 6, reading: 'roku' }, // 六
        { japanese: '七', english: 7, reading: 'nana' }, // 七
        { japanese: '八', english: 8, reading: 'hachi' }, // 八
        { japanese: '九', english: 9, reading: 'kyū' }  // 九
    ];

    // bind key event
    // can I do multiple binds?
    Mousetrap.bind('0', function(e, n) { update(n); });
    Mousetrap.bind('1', function(e, n) { update(n); });
    Mousetrap.bind('2', function(e, n) { update(n); });
    Mousetrap.bind('3', function(e, n) { update(n); });
    Mousetrap.bind('4', function(e, n) { update(n); });
    Mousetrap.bind('5', function(e, n) { update(n); });
    Mousetrap.bind('6', function(e, n) { update(n); });
    Mousetrap.bind('7', function(e, n) { update(n); });
    Mousetrap.bind('8', function(e, n) { update(n); });
    Mousetrap.bind('9', function(e, n) { update(n); });

    // run button events 
    btnEvents();

    // function to update text
    function update(n) {
        d3.select('#number').html(nums[n].japanese);
        d3.select('#reading').text(nums[n].reading);
        d3.selectAll('#number-btns li').style('opacity', 1);
        d3.select('#num-' + n).style('opacity', 0.4);

    }

    // event listeners for non keyboard
    function btnEvents() {
        _.times(10, function(n) {
            // fade the button out and change sets to use
            d3.select('#num-' + n).on('click', function() {
                // reset button opacity
                d3.selectAll('#number-btns li').style('opacity', 1);
                // fade out button selection
                d3.select(this).style('opacity', 0.4);
                update(n);
            });

       });
    }


})();