var LEFT, MIDDLE, RIGHT, timeStamp;
LEFT = 0;
MIDDLE = 1;
RIGHT = 2;
timeStamp = 0;
var newDiv;

function remove()
{
  document.body.removeChild(newDiv);
}

function draw(e, clickType)
{
  console.log(clickType);
  console.log(e);
  newDiv = document.createElement("div");
  newDiv.setAttribute("style", "position: absolute; left: " + (e.pageX-6) + "px; top: " + (e.pageY-6) + "px; height: 10px; width: 10px; border: 1px dotted red; border-radius: 10px; z-index: 1000;");
  newDiv.setAttribute("id", "toDelete");
  //var t = document.createTextNode(clickType);
  //newDiv.appendChild(t);
  document.body.appendChild(newDiv);
  
  window.setTimeout(remove, 300);
}

document.body.addEventListener('contextmenu', function (e) {
  remove();
  //console.log(e.screenX, e.screenY);
  if (e.timeStamp - timeStamp < 350 && e.button === LEFT)

  
  if(e.button === LEFT){
    timeStamp = e.timeStamp;
    draw(e, "left");
  }
  else if(e.button === MIDDLE) {
    draw(e, "middle");
  }
  else if(e.button === RIGHT) {
    draw(e, "right");
  }
}, true);

document.body.addEventListener('click', function (e) {
  //console.log(e.screenX, e.screenY);
  if (e.timeStamp - timeStamp < 350 && e.button === LEFT){
    timeStamp = e.timeStamp;
    draw(e, "double");
    return;
  }
  
  if(e.button === LEFT){
    timeStamp = e.timeStamp;
    draw(e, "left");
  }
  else if(e.button === MIDDLE) {
    draw(e, "middle");
  }
  else if(e.button === RIGHT) {
    draw(e, "right");
  }
}, true);

{
    timeStamp = e.timeStamp;
    draw(e, "double");
    return;
  }