class Timer {
    constructor() {
        var time = 0;
        stop = true;
        setInterval(update,1000);
    }
    setStop(bool) { this.stop = bool; console.log(this.stop); }
    getStop() { return this.stop; }
    setTime(t) { this.time = t; }
    getTime() { return this.time; }
}

class Excerpt {
    constructor(a,b,c) {
        this.text = a;
        this.title = b;
        this.author = c;
    }
}

const input = document.getElementById('input');
const hidden = document.getElementById('hidden');
const btn = document.getElementById('button');
const clock = document.getElementById('timer');
const gross = document.getElementById('gross');
const net = document.getElementById('net');
const acc = document.getElementById('acc');
const err = document.getElementById('err');
const exArray = new Array();
const timer = new Timer();

var i = 1;
var entries = 0;
var right = 0, wrong = 0;
var inText = '';
var grossWPM = 0;
var netWPM = 0;
var accuracy = 0;
var txtPara;
var charIn = '';

const neuro = 'Cyberspace. A consensual hallucination experienced daily by billions of legitimate operators, in every nation, by children being taught mathematical concepts... A graphic representation of data abstracted from banks of every computer in the human system. Unthinkable complexity. Lines of light ranged in the nonspace of the mind, clusters and constellations of data. Like city lights, receding.';

function txtIn() {
    var str = this.value;
    charIn = str.slice(-1);

    inText += charIn;
    entries += 1;
    onType();

    timer.setStop(false);

    //Clear text field
    if ( str.slice(-1) == ' ' ) {
        this.value = '';
    }
}

function clkBtn() {
    var play = 'img/play.png', stop = 'img/stop.png';

    //Change image when button is clicked
    if ( this.getAttribute('src') == play ) {
        this.src = stop;
        timer.setStop(true);
    } else if ( this.getAttribute('src') == stop ) {
        this.src = play;
        stop = false;
        timer.setStop(false);
    }
}

function onType() {
    if ( !timer.getStop() ) {
        var holder = document.getElementById('holder');
        var i = inText.length - 1;


        //Create span element
        if ( inText.slice(-1) != neuro[i] ) {
            var wc = document.createElement('span');
            wc.textContent = neuro[i];
            wc.setAttribute('class','wrongc');
            holder.insertBefore(wc,hidden)
            hidden.innerHTML = neuro.slice(i+1);
            wrong += 1;
            i++;
        } else {
            var rc = document.createElement('span');
            rc.textContent = neuro[i];
            rc.setAttribute('class','rightc');
            holder.insertBefore(rc,hidden)
            hidden.innerHTML
            hidden.innerHTML = neuro.slice(i+1);
            right += 1;
            i++;
        }

        //Update Stats
        accuracy = ( right / ( right + wrong ) ) * 100;

        acc.innerHTML = 'Accuracy: ' + accuracy.toFixed(0) + '%';
        err.innerHTML = 'Errors: ' + wrong;
    }
}

function update() {
    if ( timer.getTime() != 60 && !timer.getStop() ) {
        timer.setTime(timer.getTime += 1)
        if ( timer.getTime() <= 60 ) {
            clock.innerHTML = 60 - timer.getTime();
        }

        //Update Stats
        grossWPM = ( entries / 5 ) / ( time / 60 );
        netWPM = grossWPM - ( wrong / ( time / 60 ) );

        gross.innerHTML = 'Gross WPM: ' + grossWPM.toFixed(0);
        net.innerHTML = 'Net WPM: ' + netWPM.toFixed(0);
    }
}

function init() {
    input.addEventListener('input',txtIn);
    btn.addEventListener('click',clkBtn);

    hidden.innerHTML = neuro;
}

window.addEventListener('load',init);