/**** DECLARATION ****/
var t=0;

/**** RANDOM SHAPES GENERATOR ****/
function randomPos() {
  x = Math.floor(Math.random() * 1000);
  while ((x >= 200) || (x <= 150)) {
      x = Math.floor(Math.random() * 1000);
  };
  y = Math.floor(Math.random() * 1000);
  while ((y >= 200) || (y <= 150)) {
      y = Math.floor(Math.random() * 1000);
  };
  ml = Math.floor(Math.random() * 1000);
  while (ml >= 1000) {
      ml = Math.floor(Math.random() * 1000);
  };
  mt = Math.floor(Math.random() * 1000);
  while (mt >= 200) {
      mt = Math.floor(Math.random() * 1000);
  };
  color = '#'+Math.floor(Math.random()*16777215).toString(16);
  rad = Math.floor(Math.random() * 101);
  if (rad <= 50){
      document.getElementById('shape').style.borderRadius = "100%";
  } else {
      document.getElementById("shape").style.borderRadius = "0%";
  };
  document.getElementById('shape').style.width = x+"px";
  document.getElementById('shape').style.height = y+"px";
  document.getElementById('shape').style.marginLeft = ml+"px";
  document.getElementById('shape').style.marginTop = mt+"px";
  document.getElementById('shape').style.backgroundColor = color;
  document.getElementById('shape').style.display = "block";
};

/**** TIMING FUNCTIONALITY ****/
function displayTime() {
  clearInterval(myVar);
  document.getElementById('timeP').innerHTML = 'Your time: ' + s + "s";
  document.getElementById('shape').style.display = "none";
  rt = Math.random() * 1000;
  setTimeout(both, rt);
};
function both() {
  resetPeriod();
  randomPos();
}
function resetPeriod() {
  t=0;
  myVar = setInterval(myTimer, 100);
};
function myTimer() {
  t+=100;
  s = t/1000;s
};