var timerId;

​

function fadeOut() {

  var overlay=document.getElementById("overlay");

  var style = window.getComputedStyle(overlay);

  var opacity=style.getPropertyValue("opacity");

  if(opacity>0){

    overlay.style.opacity = opacity - 0.01;

    timerId = setTimeout(fadeOut,10);

  }

}

​

function fadeIn() {

  var overlay=document.getElementById("overlay");

  var style = window.getComputedStyle(overlay);

  var opacity= +overlay.style.opacity;

  if (opacity<1) {

    overlay.style.opacity = opacity + 0.01;

    timerId = setTimeout(fadeIn,10);

  }

}

var fadingOut = false;

addEventListener('click', function() {

  clearTimeout(timerId);

  console.log('click');

  if (fadingOut) {

    fadeIn();

    console.log('fading in', fadingOut);

  } else {

    fadeOut();

    console.log('fading out');

  }

  fadingOut = !fadingOut;

}, false);