// Isso aqui ja faz pegar todos os pais.

    var elements = [];

    function rightclick() {
      var rightclick;
      var e = window.event;

      // Detecta um clique esquerdo fora da caixa pra fechar ela.
      if(e.which == 1){

          var auxTarget = e.target;
          var dontDelete = false;
          // O carinha existe, vamos ver se eu cliquei dentro ou fora.
          if($("#containerCSSEditor")){
          while(auxTarget.tagName != "BODY"){
              if(auxTarget.getAttribute("id") == "containerCSSEditor")
              dontDelete = true;
              auxTarget = auxTarget.parentNode;
          }
          // Cliquei fora, pode deletar.
          if(!dontDelete) $("#containerCSSEditor").remove();
          }
      }

      if (e.which == 3 || e.button == 2){
          elements = [];
          var target = e.target;
          var left = e.pageX;
          var top = e.pageY;
          auxTarget = target;

          if($("#containerCSSEditor")){
            $("#containerCSSEditor").remove();
          }
          while(auxTarget.tagName != "BODY"){
            elements.push(auxTarget);
            auxTarget = auxTarget.parentNode;
          }

          // Cria o container Geral.
          var cssEditForm = document.createElement("div");
          cssEditForm.setAttribute("id", "containerCSSEditor");
          // Cria o titulo do css;
          var cssTitle = document.createElement("h3");
          cssTitle.setAttribute("id", "cssEditorTitle");
          cssTitle.append("CSS Aplicados");
          // Cria a lista e vamos comecar a tacar as coisa ali. (TODO)
          var cssULContainer = document.createElement("ul");
          cssULContainer.setAttribute("id", "CSSEditorUlContainer");
          // Agora comeca a adicionar os elementos da lista.
          for(var i = 0; i < elements.length; i++){
            if(i != 0){
              cssULContainer.append(document.createElement("hr"));
            }
            var cssEditorLi = document.createElement("li");
            cssEditorLi.setAttribute("class", "cssEditorLi");
            cssEditorLi.setAttribute("id", "EditorLi"+i);
            cssEditorLi.setAttribute("onclick", "abreEditorCSS(" + i + ")");
            cssEditorLi.innerHTML = "< " + elements[i].tagName.toLowerCase() + " class='" + elements[i].className + "' id='" + elements[i].id + "' >";
            cssULContainer.append(cssEditorLi);
          }
          cssEditForm.append(cssTitle);
          cssEditForm.append(cssULContainer);
          $("body").append(cssEditForm);
          $("#containerCSSEditor").css("top", top).css("left", left);
      }
    }

    function abreEditorCSS(index){
      var top = $("#containerCSSEditor").css("top");
      var left = $("#containerCSSEditor").css("left");
      $("#containerCSSEditor").remove();
      // Cria um novo editor, dessa vez com base em um form.
      var containerCSSEditorNode = document.createElement("div");
      containerCSSEditorNode.setAttribute("id", "containerCSSEditor");

      // Botar um titulo pra ficar mais bonitin
      var cssTitleNode = document.createElement("h3");
      cssTitleNode.setAttribute("id", "cssEditorTitle");
      cssTitleNode.append("Alterar CSS");
      containerCSSEditorNode.append(cssTitleNode);

      // Cria o form.
      var formCSSEditorNode = document.createElement("form");
      formCSSEditorNode.setAttribute("id", "formCSSEditor");
      formCSSEditorNode.setAttribute("method", "post");
      formCSSEditorNode.setAttribute("action", "google.com"); // TODO.
      // Agora cria os inputs do form
      // Nome do elemento.
      var inputNameCSSEditorNode = document.createElement("input");
      inputNameCSSEditorNode.setAttribute("readonly", "");
      inputNameCSSEditorNode.setAttribute("name", "divName");
      inputNameCSSEditorNode.setAttribute("id", "divName");
      inputNameCSSEditorNode.setAttribute("type", "text");
      inputNameCSSEditorNode.setAttribute("value", "< " + elements[index].tagName.toLowerCase() + " class='" + elements[index].className + "' id='" + elements[index].id + "' >");
      formCSSEditorNode.append(inputNameCSSEditorNode);

      //var val = getComputedStyle(elements[index]);
      //$("#formCSSEditor").append("<input id='cssValue' name='css' value='"+val+"' />");


      var inputCssCSSEditorNode = document.createElement("textarea");
      inputCssCSSEditorNode.setAttribute("rows", "30")
      inputCssCSSEditorNode.setAttribute("name", "inputCSSEditorCSS");
      inputCssCSSEditorNode.setAttribute("id", "inputCSSEditorCSS");
      inputCssCSSEditorNode.setAttribute("type", "text");
      inputCssCSSEditorNode.setAttribute("placeholder", "Carregando...");
      formCSSEditorNode.append(inputCssCSSEditorNode);

      // Botao de submit;
      var submitCSSEditorNode = document.createElement("button");
      submitCSSEditorNode.setAttribute("class", "button");
      submitCSSEditorNode.setAttribute("id", "saveButtonCSSEditor");
      submitCSSEditorNode.setAttribute("onclick", "removeFormCSSEditor");
      submitCSSEditorNode.innerHTML = "Enviar Alterações"
      // Agora comeca a putaria de juntar tudo.
      formCSSEditorNode.append(submitCSSEditorNode);
      containerCSSEditorNode.append(formCSSEditorNode);
      $("body").append(containerCSSEditorNode);
      // Aparentemente jquery so funciona se ele ja ta appended.
      $("#containerCSSEditor").css("top", top).css("left", left);
      // Por enquanto, nao quero nenhum submit.
      document.addEventListener("submit", function(e){
          e.preventDefault();
      })
    }

    function removeFormCSSEditor(){
    $("#containerCSSEditor").remove();
    }

    var sheet = (function(){
      var style = document.createElement("style");
      style.appendChild(document.createTextNode(""));
      document.head.appendChild(style);

      return style.sheet;
    });
    var v = sheet();
    v.insertRule(
      "#containerCSSEditor{"  +
        "position: absolute;" +
        "display: table;" +
        "height: 500px;" +
        "width: 400px;" +
        "background: #e6e6e6;" +
        "overflow: scroll;" +
        "border-radius: 10px;" +
        "border: 1px solid black;" +
        "padding-top: 10px;" +
      "}"
    );
    v.insertRule(
      "#containerCSSEditor input, #containerCSSEditor button, #containerCSSEditor textarea{" +
        "width: 80%; " +
        "box-sizing: border-box; " +
        "background: #616161; " +
        "margin-left: 10%;" +
        "margin-bottom: 4px; " +
        "color: #FFF; " +
        "font-family: monospace;" +
        "border-radius: 5px;" +
        "height: 20px;" +
        "z-index: 10;" +
      "}"
    );
    v.insertRule(
      "#cssEditorTitle{" +
        "margin-top: 0;" +
        "text-align: center;" +
        "padding-bottom: 10px;" +
        "border-bottom: 1px solid black;"+
      "}"
    )
    v.insertRule(
      "#CSSEditorUlContainer{" +
        "max-height: 450px;" +
        "overflow: scroll;" +
        "margin-left: -40px" +
      "}"
    );
    v.insertRule(
      ".cssEditorLi{" +
        "padding-top: 2px;" +
        "padding-bottom: 2px;" +
        "padding-left: 20px;" +
        "height: 25px;" +
        "width: 350px;" +
        "background: #e6e6e6;" +
        "font-size: 14px;" +
        "cursor: pointer;" +
        "list-style-type: none;" +
      "}"
    );
    v.insertRule(
      "#divName{"+
        "display: block;" +
        "text-align: center;" +
        "font-size: 14px;" +
      "}"
    );
    v.insertRule(
      "#saveButtonCSSEditor{" +
        "display: block;"+
      "}"
    );
    v.insertRule(
      "#inputCSSEditorCSS{" +
        "overflow: scroll;" +
        "height: 100%!important;" +
        "max-height: 360px!important;" +
        "margin-top: 10px!important;" +
        "margin-bottom: 10px!important;" +
      "}"
    );
    $("html").unbind().mousedown(rightclick);

    //window.onload = function() {
      document.addEventListener("contextmenu", function(e){
        if(e.which == 3 || e.button == 2){
          e.preventDefault();
        }
      }, false);
    //}