(function() {
    'use strict';

    // start with an initial array [0, 1, 2, ... 12]
    var multiplyArray = d3.range(13);
    // have a timer for updating to next question
    var updateTimer;
    // initial speed setting for update and delay
    var speed = 2000;
    // fade spped button to match setting 
    d3.select('#speedFast').style('opacity', 0.4);
    // speed event listeners so user can change timing
    speedEvents('#speedSlow', 4000);
    speedEvents('#speedFast', 2000);
    speedEvents('#speedLightning', 1000);
    // function to save writing same code over
    function speedEvents(_id, _speed) {
        d3.select(_id).on('click', function() {
            // enure only this btn is selected
            d3.selectAll('.speedBtn').style('opacity', 1);
            d3.select(this).style('opacity', 0.4);
            speed = _speed;
            // reset the timer with new speed
            clearInterval(updateTimer);
            updateTimer = setInterval(update, speed);
        });
    }

    // function to remove items from the array
    // via user selection with buttons
    function disableSet(n) {
        var i = multiplyArray.indexOf(n);
        if (i != -1) {
            multiplyArray.splice(i, 1);
        }
    }

    // event listeners for limiting multiplication sets
    // loop for each button for multiplication sets
    function filterSets() {
        _.times(13, function(n) {
            // fade the button out and change sets to use
            d3.select('#set-' + n).on('click', function() {
                // if in array, remove it
                if (_.includes(multiplyArray, n)) {
                    // fade out the button to show it's been selected
                    d3.select(this).style('opacity', 0.4);
                    // remove from the array
                    disableSet(n);
                    // console.log(multiplyArray);
                // else push it back in array
                } else {
                    // ensure button isn't selected
                    d3.select(this).style('opacity', 1);
                    // add number to array
                    multiplyArray.push(n);
                    // console.log(multiplyArray);
                }
            });
       });
    }

    // random multiplication 
    function multiply() {
        // random number from the array
        var x = _.sample(multiplyArray),
        // random number to multiply against
        y = _.random(0, 12);

        // render to the interface
        ui();
        // update the interface text elements
        function ui() {
            d3.select('#xValue').text(x);
            d3.select('#yValue').text(y);
            d3.select('#answer')
                .transition()
                .delay(speed/2)
                .text('= ' + answer());
        }
        // calculate the answer
        function answer() {
            return x * y;
        }
    }

    function update() {
        // reset the text
        d3.select('#xValue').text('');
        d3.select('#yValue').text('');
        d3.select('#answer').text('');
        // trigger the question/sum
        multiply();
    }

    // initiate event listeners for the table set selection
    filterSets();
    // run the first question
    multiply();

    // then continue questioning 
    updateTimer = setInterval(update, speed);


})();