document.addEventListener('keydown', updateChar);
document.addEventListener('keyup', stopChar);

var i = 0;
var txt = '';
var speed = 50;
var keyisdown = 0;
var newpercentage = 0;

var tempwdth = 50;
var tempXTRA = 400;
var tempXOPQ = 60;

var fontstring = 'font-variation-settings: "wdth" 50, "XTRA" 400, "XOPQ" 60;';  
//------- experiment with keydown keyup

var timer;

function updateChar(e) {
//  console.log(e);
  if(keyisdown == 0){typeWriter()};
  keyisdown = 1;
  if(timer) return;
  timer= setInterval(growLetter, 1);
}

function stopChar() {
  keyisdown = 0;
  clearInterval(timer);
  timer= null;

  tempwdth = 50;
  tempXTRA = 400;
  tempXOPQ = 60;
}

//--------------the typewriter stuff

function typeWriter() {
  //clear the html initially for a text
  if (i === 0)
    document.getElementById("current").innerHTML = '';

  if (i < txt.length) {
  restoreText();
    document.getElementById("current").innerHTML += "<span id='"+i+"' class='visible' style='"+fontstring+"'>"+txt.charAt(i)+"</span>";
    i++;
    if(txt.charAt(i-1)==" "){typeWriter()};
  }
  if(i==txt.length){
	clearText();
	i++;
	setTimeout(newQuote, 4000);
  }
}

var quotes = [
  "I was at a festival or summer camp. I looked in the main room and saw loads of synths set up, they were going to play a gig. And my brother was going to play with them. I was so annoyed and upset that they didn't tell me.",
  "I was a designer, a weapons designer. I made a drone for a friend but he used it for evil. A woman got hurt, we were eating jelly. When he died she would go in an orphanage, I would be put in the army. My stomach was going to explode. In the army I finished painting my red stencils, warning signs. "
]
//var quotes = ["test1.", "test2."]

function newQuote() {
  //set the typing text
  txt = quotes[Math.floor(Math.random() * quotes.length)];
    
  //reset the index
  i = 0;
}

function clearText(){
    document.getElementById('current').classList.add("disappear");
}

function restoreText(){
    document.getElementById('current').classList.remove("disappear");
}

function growLetter() {
  targetwdth = 151;
  targetXTRA = 603;
  targetXOPQ = 175;
  document.getElementById(i-1).style.fontVariationSettings = "\"wdth\" " + tempwdth + ", \"XTRA\" " + tempXTRA + ", \"XOPQ\" " + tempXOPQ;

  tempwdth++;
  tempXTRA++;
//  tempXOPQ++;
}

newQuote();