function shuffle(a) {
  var j, x, i;
  for (i = a.length; i; i--) {
    j = Math.floor(Math.random() * i);
    x = a[i - 1];
    a[i - 1] = a[j];
    a[j] = x;
  }
}

onTop = document.getElementById('onTop');
inputAnswer = document.createElement("input");
passButt = document.createElement("input");
resetButt = document.createElement('input');
outputAnswer = document.getElementById("output");
outputStyleBase = outputAnswer.style.cssText;
compteurSpan = document.getElementById('compteur');
ratioSpan    = document.getElementById('ratio');
select = document.getElementById('select');
asPass = false

function selectChange(evt) {
  inputAnswer.style.float = "right";
  passButt.type = "button";
  passButt.style.float = "right";
  passButt.value = "Pass";
  resetButt.type = "button";
  resetButt.style.float = "right";
  resetButt.value = "Reset";

  var xmlHttp = new XMLHttpRequest();

  xmlHttp.onreadystatechange = function() { 
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
      loadFile(xmlHttp.responseText);
    }
  }
  xmlHttp.open("GET", "/default/" + select.options[select.selectedIndex].value, true);
  xmlHttp.send(null);
}
function loadFile( str ) {
  console.log( str )
  var last = JSON.parse(str);
  var res = []
  var indexRes = 0;
  var cmpGood = 0;
  var cmpBad = 0;
  res = last;
  shuffle(res.answer);
  compteurSpan.innerText = "0/" + res.answer.length;
  ratioSpan.innerText = "∅";
  outputAnswer.innerText = res.answer[indexRes].key;
  onTop.appendChild(inputAnswer);
  onTop.appendChild(passButt);
  onTop.appendChild(resetButt);
  if( res.answer[indexRes].style )
    outputAnswer.style = outputStyleBase + res.answer[indexRes].style;
  function pass() {
    console.log(inputAnswer.value)
    asPass = true
    var valid = "sry";

    if( res.answer[indexRes].value != undefined ) {
      valid = res.answer[indexRes].value;
    } else if( res.answer[indexRes].values != undefined ) {
      valid = res.answer[indexRes].values[0];
    }

    inputAnswer.value = "" + valid
  }
  function reset() {
    cmpGood = 0
    cmpBad = 0
    indexRes = 0
    res = last;
    shuffle(res.answer);
    compteurSpan.innerText = "0/" + res.answer.length;
    ratioSpan.innerText = "∅";
    outputAnswer.innerText = res.answer[indexRes].key;
    onTop.appendChild(inputAnswer);
    onTop.appendChild(passButt);
  }
  inputAnswer.onkeydown = function(event) {
    inputAnswer.style.borderColor = ""
    var ev = event || window.event;
    var key = ev.keyCode || ev.which || ev.charCode;
    if( key == 13 ) {
      if( ev.shiftKey ) {
        pass();
      } else {
        if( inputAnswer.value ) {
          inputAnswer.change();
        }
      }
    }
  }
  passButt.onclick = pass
  resetButt.onclick = reset
  inputAnswer.change = function() {
    var valid = false;
    if( res.answer[indexRes].value != undefined && res.answer[indexRes].value == inputAnswer.value )
      valid = true;
    else if( res.answer[indexRes].values != undefined ) {
      console.log( res.answer[indexRes].values )
      if( res.answer[indexRes].values.indexOf(inputAnswer.value) != -1 )
        valid = true;
    }

    if( valid ) {
      if( ! asPass ) {
        cmpGood+=1;
        console.log("Good");
      }else {
        console.log("Passed : " + res.answer[indexRes].value);
        asPass = false;
      }
      inputAnswer.style.borderColor = "#0F0"

      inputAnswer.value = "";
      if( indexRes+1 < res.answer.length ) {
        indexRes++;
        outputAnswer.innerText = res.answer[indexRes].key;
      } else {
        onTop.removeChild(inputAnswer);
        onTop.removeChild(passButt);
        if( cmpBad == 0 ) {
          outputAnswer.innerText = "Perfect !";				
        }else if( cmpGood/cmpBad > 0.9 * (res.answer.length + cmpBad) ) {
          outputAnswer.innerText = "Almost perfect !";							
        }else if( cmpGood/cmpBad > 0.75 * (res.answer.length + cmpBad) ) {
          outputAnswer.innerText = "Good !";							
        }else if( cmpGood/cmpBad > 0.5 * (res.answer.length + cmpBad) ) {
          outputAnswer.innerText = "Average";							
        }else if( cmpGood/cmpBad > 0.25 * (res.answer.length + cmpBad) ) {
          outputAnswer.innerText = "Can do better";							
        }else {
          outputAnswer.innerText = "Bad";							
        }
      }
    } else {
      console.log("Bad");
      inputAnswer.style.borderColor = "red"
      cmpBad+=1;
    }

    if( cmpBad > 0 )
      ratioSpan.innerText = "" + cmpGood/cmpBad;
    else
      ratioSpan.innerText = "∅";


    compteurSpan.innerText = indexRes + "/" + res.answer.length;
  }
}

function handleFileSelect(evt) {

  var files = evt.target.files; // FileList object
  var file = files[0];

  var reader = new FileReader();

  inputAnswer.style.float = "right";
  passButt.type = "button";
  passButt.style.float = "right";
  passButt.value = "Pass";
  resetButt.type = "button";
  resetButt.style.float = "right";
  resetButt.value = "Reset";




  reader.onload = function (evt) {
    loadFile( evt.target.result )
  }
  reader.readAsText(file, "UTF-8");
}
document.getElementById('getFile').addEventListener('change', handleFileSelect, false);
document.getElementById('select') .addEventListener ('change', selectChange, false);