// 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){
        e.preventDefault();
        if($("#containerCSSEditor")){
        $("#containerCSSEditor").remove();
        }
        var target = e.target;
        var left = e.pageX;
        var top = e.pageY;
        console.log(top);
        console.log(left);
        auxTarget = target;
        while(auxTarget.tagName != "BODY"){
        //console.log(auxTarget);
        elements.push(auxTarget);
        auxTarget = auxTarget.parentNode;
        }
        //console.log(elements);
        // 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 + ")");
        cssEditorLi.style.height = "50px";
        cssEditorLi.style.width = "100%";
        cssEditorLi.style.background = "#e6e6e6";
        cssEditorLi.style.fontSize = "12px";
        cssEditorLi.style.cursor = "pointer";
        cssEditorLi.innerHTML = "< " + elements[i].tagName.toLowerCase() + " class='" + elements[i].className + "' >";
        cssULContainer.append(cssEditorLi);
        }
        cssEditForm.append(cssTitle);
        cssEditForm.append(cssULContainer);
        $("body").append(cssEditForm);
        $("#containerCSSEditor").css("top", top).css("left", left).css("border-radius", "10px").css("border", "1px solid black");
        return false;
    }
    return false;
    }

    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 formCSSEditorNode = document.createElement("form");
    formCSSEditorNode.setAttribute("id", "formCSSEditor");
    formCSSEditorNode.setAttribute("method", "post");
    formCSSEditorNode.setAttribute("action", "google.com"); // TODO.
    formCSSEditorNode.style.display = "table";
    // 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);
    inputNameCSSEditorNode.style.display = "block";
    inputNameCSSEditorNode.style.textAlign = "center";
    inputNameCSSEditorNode.style.fontSize = "14px";
    formCSSEditorNode.append(inputNameCSSEditorNode);
    // Botao de submit;
    var submitCSSEditorNode = document.createElement("button");
    submitCSSEditorNode.setAttribute("class", "button");
    submitCSSEditorNode.setAttribute("onclick", "removeFormCSSEditor");
    submitCSSEditorNode.style.display = "block";
    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).css("height", "400px");
    // 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: 300px;" +
        "width: 400px;" +
        "background: #e6e6e6;" +
        "overflow: scroll;" +
      "}"
    );
    v.insertRule(
      "#cssEditorTitle{" +
        "text-align: center;" +
        "padding-bottom: 10px;" +
        "border-bottom: 1px solid black;"+
      "}"
    )
    v.insertRule(
      "#CSSEditorUlContainer{" +
        "max-height: 300px;" +
        "overflow: scroll;" +
      "}"
    );
    $("html").unbind().mousedown(rightclick);

    //window.onload = function() {
    document.addEventListener("contextmenu", function(e){
    e.preventDefault();
    }, false);
    //}