spritz-like speed-reading

            
              var words;
var sentences;
var t;

//elements
var redicle = document.getElementById('redicle').firstElementChild;
var wpm = document.getElementById('wpm');
var copy = document.getElementById('text');
var complete = document.getElementById('completeTime');

function getORP(word){
  var orp = Math.ceil((word.length - 1) / 4);
  if(/\W/.test(word[orp])) orp = orp - 1;
  return orp;
}

function processText(text) {
  sentences = [0];
  var parenthesis = false;
  var quotes = false;
  words = text.replace(/((?=\w{15,})(\w{7})|(?!^\w{1,14})$)/g, '$1- ')
              .match(/[^\s-]+-?/g)
              .filter(function(v){return /[\w]/.test(v)})
              .map(function(v, i, arr) {
                if (/[.?!]/.test(v) && arr[i + 1]) sentences.push(i + 1);
                return {
                  content: v.replace(/[\(|\)\"]/g, ''),
                  orp: getORP(v),
                  parenthesis: checkP(v),
                  quotes: checkQ(v)
                }
              });

  function checkP(word) {
    word = word.replace(/[.?!,;:]/g, '');
    if (parenthesis && /\)$/.test(word)) {
      parenthesis = false;
      return true;
    }
    if (!parenthesis && /^\(/.test(word)) {
      if (/\)$/.test(word)) {
        return true
      };
      parenthesis = true;
    }
    return parenthesis;
  };

  function checkQ(word) {
    word = word.replace(/[.?!,;:]/g, '');
    if (quotes && /\"$/.test(word)) {
      quotes = false;
      return true;
    }
    if (!quotes && /^\"/.test(word)) {
      if (/\"$/.test(word)) return true;
      quotes = true;
    }
    return quotes;
  };
  
  completeTime();
};

function wrap(bool, type) {
  var classes = redicle.className.split(' ');
  if (bool) {
    if (classes.indexOf(type) < 0) classes.push(type);
  } else {
    if (classes.indexOf(type) >= 0) classes.splice(classes.indexOf(type), 1);
  }
  redicle.className = classes.join(' ');
};

processText(copy.value);

function applyWord(index) {
  redicle.innerHTML = '';
  var word = words[index];
  var percent = 38 / 100;
  var span = document.createElement('span');
  span.dataset.index = index;
  span.innerHTML = word.content.replace(/./g, function(char, i) {
    return i ===  getORP(word.content) ? '<b>' + char + '</b>' : char;
  });
  redicle.appendChild(span);
  //adjust location
  var orp = span.getElementsByTagName('b')[0];
  var center = Math.ceil(orp.offsetWidth / 2) - 2; //2px is half marker width
  span.style.left = (redicle.parentNode.offsetWidth * percent) - (orp.offsetLeft + center) + 'px';
  //wrap
  wrap(word.parenthesis, 'parenthesis');
  wrap(word.quotes, 'quotes');
};

function completeTime(){
  complete.innerText = (words.length / wpm.value).toFixed(1) + ' minutes';
};

function redicleIndex() {
  return redicle.firstElementChild ? parseInt(redicle.firstElementChild.dataset.index) : 0;
}

//controls
copy.addEventListener('blur', function() {
  pause();
  processText(copy.value);
});

document.getElementById('fastback').addEventListener('click', function() {
  pause();
  var index = redicleIndex();
  var goto = sentences.filter(function(v) {
    return v < index;
  }).pop() || 0;
  applyWord(goto);
});

document.getElementById('stepback').addEventListener('click', function() {
  pause();
  var index = redicleIndex();
  if (index !== 0) applyWord(index - 1);
});

document.getElementById('stop').addEventListener('click', function() {
  pause();
  redicle.innerHTML = '';
  redicle.className = '';
});

document.getElementById('play').addEventListener('click', function() {
  var classname = this.childNodes[0].className;
  if (classname.indexOf('play') >= 0) {
    var avgtime = 60000 / wpm.value;
    this.childNodes[0].className = classname.replace('play', 'pause');
    begin(avgtime);
  } else {
    pause();
  };
});

function begin(time){
  redicle.style.transitionDuration = (time*3) + 'ms';
  redicle.style.width = 0;
  redicle.style.marginLeft = '38%';
  redicle.style.backgroundColor = 'rgba(50,50,50,.8)';
  
  var b = setTimeout(function(){
    clearTimeout(b);
    redicle.removeAttribute('style');
    play(redicleIndex(), time);
  }, parseFloat(redicle.style.transitionDuration));
}

document.getElementById('stepforward').addEventListener('click', function() {
  pause();
  var index = redicleIndex();
  if (index !== words.length - 1) applyWord(index + 1);
});

document.getElementById('fastforward').addEventListener('click', function() {
  pause();
  var index = redicleIndex();
  var goto = sentences.filter(function(v) {
    return v > index;
  }).shift() || sentences.shift();
  applyWord(goto);
});

wpm.addEventListener('input', function(){
  this.style.width = this.value !== '' ? this.value.length + 'ch' : '1ch';
  completeTime();
});

var exceptions = [ 
  'ave.',
  'blvd.',
  'ct.',
  'dr.',
  'eg.',
  'etc.',
  'ie.',
  'mr.',
  'mrs.',
  'mo.',
  'rd.',
  'sr.',
  'st.',
  'ste.',
  'tpk.'
]

function play(index, time) {
  var ms = time;
  var word = words[index].content;
  if (/[,:;]$/.test(word)) ms = ms * 1.5;
  if (/\d+[^,:;.!?]{0,}$/.test(word)) ms = ms * 1.5;
  if (/[.?!]$/.test(word) && exceptions.indexOf(word.toLowerCase()) < 0) ms = ms * 3;
  applyWord(index);
  t = setTimeout(function() {
    if (words[index + 1]){
      play(index + 1, time);
    } else {
      pause();
      redicle.innerHTML = '';
      redicle.className = '';
    }
  }, ms);
}

function pause() {
  clearTimeout(t);
  var play = document.getElementById('play');
  var classname = play.childNodes[0].className;
  if (classname.indexOf('pause') >= 0) play.childNodes[0].className = classname.replace('pause', 'play');
}