Untitled

<html>
  <body onload="document.getElementById('button').style.top=Math.round (Math.random()*200);document.getElementById('button').style.left=Math.round (Math.random()*200);">
  <div id="button" style="position: absolute; background-color: red; width: 50; height: 50;" onclick="createlevel(this);" >s</div>
  <div style="width: 200px; height: 500px; background: rgba(0,0,0,0.5); display:none; position: fixed; top: 10px; left: 20px; " id="sharp"> </div>
  <style>
  .mainOL {
    padding-left : 20px;
    list-style-type: none;
  }
  .list {
    color: black;
    padding: 3px;
    margin-right: 20px;
    font-size: 18;
  }
  .list:hover {
    background: rgba(0,0,0,0.2);
  }
  </style>
  <script>
  window.pcts = [{"text" : "nts"} , {"text" : "nt2s"}];
  window.CMPATCH = [];
    function createpunct () {
        var mainOL = document.createElement ("ol");
        mainOL.className = "mainOL";
        var mainDIV = document.getElementById('sharp');
        mainDIV.appendChild(mainOL);

        window.pcts.forEach (function (i , key) {
            var li = document.createElement ("li");
            li.innerHTML = i.text;
            li.className = "list";
            mainOL.appendChild (li);
        });
    }
  window.iOPEN = false;
  document.addEventListener ("keyup" , function (e) {
    if (window.event.key=="Shift" )
        sharchange (false);
  });
  document.addEventListener ("keydown" , function (e) {
    if (window.event.key=="Shift")
        sharchange (true);
    if (window.event.key=="F7")
        sharchange ("rev");
  });

  document.addEventListener ("click" , function (e) {
    if (window.CMPATCH.length==0)
        return;
    //e.path.forEach (function (i , key) {
    for (var i = 0 ; e.path[i]!=null ; i++) {
        if (e.path[i].is_cm==true) {
            //window.CMPATCH.forEach (function (c , k) {
            for (var c = 0 ; window.CMPATCH[c]!=null ; c++) {
                if (window.CMPATCH[c]==e.path[i]) {

                    if (window.CMPATCH[c+1]!=null) {
                        window.CMPATCH[c+1].remove();
                        window.CMPATCH.splice (c+1 , 9999999)
                    }
                    return;
                }
            };
        }

    };

    if (e.timeStamp!=window.CMPATCH[0].timeStamp) {
        window.CMPATCH[0].creator.cOPEN = false;
        window.CMPATCH[0].remove();
        window.CMPATCH = [];
    }
  });


  function createlevel(el) {
    if (el.cOPEN)
      return;
    var mainDIV = document.createElement ("div");
    mainDIV.style.position = "absolute";
    mainDIV.style.top = window.event.pageY;
    mainDIV.style.left = window.event.pageX;
    mainDIV.style.width = "200";
    mainDIV.style.height = "300";
    mainDIV.style.zIndex = "300";
    mainDIV.creator = el;
    mainDIV.is_cm = true;
    mainDIV.timeStamp = window.event.timeStamp;

    //mainDIV.id = "ol";
    mainDIV.onclick = function () {createlevel(this);};
    mainDIV.style.background = "blue";
    document.body.appendChild (mainDIV);
    console.debug (mainDIV);
    el.cOPEN = true;
    window.CMPATCH[window.CMPATCH.length] = mainDIV;
  }

  function sharchange (state) {
    if (state==true) {
        document.getElementById ("sharp").style.display='';
     } else if (state==false && window.menulock!=true) {
        document.getElementById ("sharp").style.display='none';
     } else if (state=="rev") {
        if (document.getElementById ("sharp").style.display == "none") {
            window.menulock = true;
            document.getElementById ("sharp").style.display='';
        } else {
            window.menulock = false;
            document.getElementById ("sharp").style.display='none';
        }
    }
  }

  </script>

  </body>
</html>