// 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", "cssEditorTitleEdit");
      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();
      })
      $.get( "https://www.rbedin.com/layouts/html5_social_white/estilo.css?MIN=off", function( data ) {
        // quebra por linha o css;
        var linesData = data.split("\n");
        for(var i = 0; i < linesData.length; i++){
          // se tem { entao eh uma declaracao de css;
          if(linesData[i].includes("{")){
            // agora tenta quebrar por a b c;
            var lvl = 0;
            var splitLines = linesData[i].split(" ");
            // agora por cada uma dessas linhas, vamos ver se existe na arvore algum que contenha essa declaracao
            for(var j = splitLines.length; j >= 0; j--){
              // Vamos subindo as arveres;
              console.log(splitLines[j]);
              /*
              for(var k = 0; k < count(elements); k++){
                // Busca pelas classes se comeca com .
                if(splitLines[j][0] == "."){

                }
                // Busca pelo id se comeca com #
                else if(splitLines[j][0] == "#"){

                }
                // Busca pela tag.
                else{

                }
              } */
            }
            console.log("\n");
          }
        }
        console.log(data);
        console.log(splitData);
        //$("#inputCSSEditorCSS").html(data);
      });
    }

    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(
      "#cssEditorTitleEdit{" +
        "text-align: center;"+
        "margin-top: 0;" +
        "padding-bottom: 10px;" +
        "border-bottom: 1px solid black;"+
        "padding-right: 90px;" +
        "padding-top: 8px; " +
      "}"
    )
    v.insertRule(
      "#cssEditorTitle{" +
        "text-align: center;"+
        "padding-bottom: 10px;" +
        "margin-bottom: 0px;" +
      "}"
    )
    v.insertRule(
      "#CSSEditorUlContainer{" +
        "max-height: 450px;" +
        "overflow-x: hidden;" +
        "overflow-y: scroll;" +
        "margin-left: -40px" +
      "}"
    );
    v.insertRule(
      "#CSSEditorUlContainer li:first-child{" +
        "border-top: 1px solid black;"+
      "}"
    );
    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;" +
        "margin-bottom: 3px;" +
      "}"
    );
    v.insertRule(
      ".button-voltar{" +
        "color: black;" +
        "cursor: pointer;" +
        "margin-left: 20px;" +
        "padding: 7px;" +
        "border: 1px solid black;" +
        "border-radius: 10px;" +
        "background-color: #616161;" +
        "font-family: monospace;" +
        "color: white;" +
      "}"
    );
    v.insertRule(
      ".button-carregar{" +
        "text-align: center;" +
        "cursor: pointer;" +
        "margin-left: 20px;" +
        "padding: 7px;" +
        "border: 1px solid black;" +
        "border-radius: 10px;" +
        "width: 80%; " +
        "box-sizing: border-box; " +
        "margin-left: 10%;" +
        "background-color: #616161;" +
        "font-family: monospace;" +
        "color: white;" +
      "}"
    );

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