// Isso aqui ja faz pegar todos os pais.

    var elements = [];
    var posicaoX = 0;
    var posicaoY = 0;

    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){
          var auxTarget = e.target;
          var act = true;
          if(auxTarget.getAttribute("id") == "containerCSSEditor" || auxTarget.parentNode.getAttribute("id") == "containerCSSEditor" || auxTarget.parentNode.getAttribute("id") == "CSSEditorUlContainer"){
            act = false;
          }
          if(act){
            elements = [];
            var target = e.target;
            posicaoX = e.pageX;
            posicaoY = e.pageY;
            auxTarget = target;

            if($("#containerCSSEditor")){
                $("#containerCSSEditor").remove();
            }

            while(auxTarget.tagName != "BODY"){
                elements.push(auxTarget);
                auxTarget = auxTarget.parentNode;
            }

            criarListaCSS(false);
          }
        }
    }

    function criarListaCSS(verdade){

        $("#containerCSSEditor").remove();

        // 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++){
            var cssEditorLi = document.createElement("li");
            cssEditorLi.setAttribute("class", "cssEditorLi");
            cssEditorLi.setAttribute("id", "EditorLi"+i);
            cssEditorLi.setAttribute("onclick", "abreEditorCSS(" + i + ")");
            var classe = elements[i].className;
            var idElemento = elements[i].id;

            if(classe != ""){
                classe = "."+classe;
            }
            if(idElemento != ""){
                idElemento = "#"+idElemento;
            }

            if(!verdade){
                if(classe != "" && classe != ""){
                    cssEditorLi.innerHTML = elements[i].tagName.toLowerCase() + classe + " " + idElemento;
                    cssULContainer.append(cssEditorLi);
                }
            }else{
                cssEditorLi.innerHTML = elements[i].tagName.toLowerCase() + classe + " " + idElemento;
                cssULContainer.append(cssEditorLi);
            }
        }

        cssEditForm.append(cssTitle);
        cssEditForm.append(cssULContainer);
        if(!verdade){
            var voltarCSSEditorNode = document.createElement("article");
            voltarCSSEditorNode.setAttribute("class", "button-carregar");
            voltarCSSEditorNode.setAttribute("id", "carregar");
            voltarCSSEditorNode.setAttribute("onclick", "criarListaCSS(true)");
            voltarCSSEditorNode.innerHTML = "Carregar todos os elementos";
            cssEditForm.append(voltarCSSEditorNode);
        }

        $("body").append(cssEditForm);
        $("#containerCSSEditor").css("top", posicaoY).css("left", posicaoX);
    }


    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");

      var voltarCSSEditorNode = document.createElement("article");
      voltarCSSEditorNode.setAttribute("class", "button-voltar");
      voltarCSSEditorNode.setAttribute("id", "voltarButton");
      voltarCSSEditorNode.setAttribute("onclick", "criarListaCSS(false)");
      voltarCSSEditorNode.innerHTML = "Voltar"
      containerCSSEditorNode.append(voltarCSSEditorNode);

      var quebraLinha = document.createElement("br");
      containerCSSEditorNode.append(quebraLinha);

      // 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);

      // Agora as regras.
      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 getAllStyles(elem) {
      if (!elem) return []; // Element does not exist, empty list.
      var win = document.defaultView || window, style, styleNode = [];
      if (win.getComputedStyle) { /* Modern browsers */
          style = win.getComputedStyle(elem, '');
          for (var i=0; i<style.length; i++) {
              styleNode.push( style[i] + ':' + style.getPropertyValue(style[i]) );
              //               ^name ^           ^ value ^
          }
      } else if (elem.currentStyle) { /* IE */
          style = elem.currentStyle;
          for (var name in style) {
              styleNode.push( name + ':' + style[name] );
          }
      } else { /* Ancient browser..*/
          style = elem.style;
          for (var i=0; i<style.length; i++) {
              styleNode.push( style[i] + ':' + style[style[i]] );
          }
      }
      return styleNode;
    }





    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: 600px;" +
        "width: 450px;" +
        "background: #e6e6e6;" +
        "overflow-x: hidden;" +
        "overflow-y: 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{" +
        "text-align: center;"+
        "padding-bottom: 10px;" +
        "border-bottom: 1px solid black;"+
      "}"
    )
    v.insertRule(
      "#CSSEditorUlContainer{" +
        "max-height: 450px;" +
        "overflow-x: hidden;" +
        "overflow-y: scroll;" +
        "margin-left: -40px" +
      "}"
    );
    v.insertRule(
      ".cssEditorLi{" +
        "padding-top: 15px;" +
        "padding-bottom: 7px;" +
        "padding-left: 25px;" +
        "height: 25px;" +
        "width: 100%;" +
        "background: #e6e6e6;" +
        "font-size: 14px;" +
        " transition: transform .2s;" +
        "border-bottom: 1px solid black;" +
        "cursor: pointer;" +
        "list-style-type: none;" +
      "}"
    );
    v.insertRule(
      ".cssEditorLi:hover{" +
        "background: #b3b3b3;" +
        "padding-left: 10px;" +
        "transform: scale(1.1);" +
        "border: 1px solid black;" +
        "margin-top: 3px;" +
      "}"
    );
    v.insertRule(
      ".button-voltar{" +
        "color: black;" +
        "cursor: pointer;" +
        "margin-left: 20px;" +
        "padding: 7px;" +
        "border: 1px solid black;" +
        "border-radius: 10px;" +
        "background-color: #5692b0;" +
      "}"
    );
    v.insertRule(
      ".button-carregar{" +
        "text-align: center;" +
        "color: black;" +
        "cursor: pointer;" +
        "margin-left: 20px;" +
        "padding: 7px;" +
        "border: 1px solid black;" +
        "border-radius: 10px;" +
        "background-color: #5692b0;" +
        "width: 80%; " +
        "box-sizing: border-box; " +
        "margin-left: 10%;" +
      "}"
    );

    v.insertRule(
      "#divName{"+
        "display: block;" +
        "text-align: center;" +
        "font-size: 14px;" +
      "}"
    );

    v.insertRule(
      "#inputCSSEditorCSS{" +
        "overflow-x: hidden;" +
        "overflow-y: 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);
    //}