//
// 1 - Crie um outro script js e coloque -> "var js_el_um = document.getElementById('el_um');" para selecionar um canvas com id igual a "el_um". Você pode configurar a tag canvas da maneira que quiser no html.
// 2 - Crie uma nova instância do objeto pintarTela, passando o elemento guardado na variável "js_el_um". Exemplo -> "var programa_um_criado = new pintarTela(js_el_um);"
// 
// Opcionalmente, você pode colocar uma image a ser pintada dentro do programa. Para isso, você precisará da url da imagem e passar como segundo parâmetro do objeto pintarTela. Como exemplo, vamos criar uma segunda instância do programa:
// 
//      var js_el_dois = document.getElementById('el_dois');
//      var img2_url ="img/img2.svg";
//      var programa_dois_criado = new pintarTela(js_el_dois, img2_url);
//    
//    Se você quiser redimensionar uma imagem em um mesmo canvas, use a função retornada ao rodar o objeto canvas (programa). Exemplo:
//    
//    Vamos supor que o tamanho do canvas em programa_dois_criado foi alterado. Como pintarTela() retorna a função desenharImagem, com o primeiro parâmetro a ser passado é a nova largura e o segundo, a nova altura, podemos colocar programa_dois_criado(NovaLargura, NovaAltura)


function pintarTela(el, img_url){
       
    var canvas, ctx, flag = false,
        prevX = 0,
        currX = 0,
        prevY = 0,
        currY = 0,
        dot_flag = false;

    var cor = "rgba(0,0,0,0.3)";
      var espessura = 2;
    
  
        canvas = el;
        ctx = canvas.getContext("2d");
        w = canvas.width;
        h = canvas.height;
    
                        //movimento do mouse
        canvas.addEventListener("mousemove", function (e) {
            findxy('move', e)
        }, false);
        canvas.addEventListener("mousedown", function (e) {
            findxy('down', e)
        }, false);
        canvas.addEventListener("mouseup", function (e) {
            findxy('up', e)
        }, false);
        canvas.addEventListener("mouseout", function (e) {
            findxy('out', e)
        }, false);



            
                        //movimento do dedo em dispositivos touchscreen
                         canvas.addEventListener("touchmove", function (e) {
            findFingerXY('arrastando', e)
        }, false);
        canvas.addEventListener("touchstart", function (e) {
           findFingerXY('inicio', e)
        }, false);
        canvas.addEventListener("touchend", function (e) {
            findFingerXY('fim', e)
        }, false);






                        
        

        function desenharImagem(ImgL, ImgA){

              
                    
            var base_image = new Image();
            base_image.src = img_url

            base_image.onload = function(){
                                    
                                    if(ImgL && ImgA){
                                        
                                             ctx.clearRect(0, 0, w, h); //apaga o canvas anterior
                                            ctx.drawImage(base_image, 0, 0, ImgL, ImgA);
                                        
                                    } else {
                                    
                ctx.drawImage(base_image, 0, 0);
                }
                                    
                                }//fechar base_image.onload
                                
        } //Fecha desenharImagem
                            
                            
                            
                            if(img_url){ desenharImagem();}


            

            //criar os controladores
            var controles = document.createElement("div");
            var seletor_de_cor = document.createElement("input");
            var seletor_de_espessura = document.createElement("input");
           

            
            seletor_de_cor.type = "color";
            seletor_de_cor.value = "#000";
            seletor_de_espessura.type = "range";
            seletor_de_espessura.value = "2";
            seletor_de_espessura.min = "1";
            seletor_de_espessura.max = "20";

            controles.appendChild(seletor_de_cor);
            controles.appendChild(seletor_de_espessura);

            //aparência do programa Pintar Tela
                   el.style = "border: solid 1px; cursor: url('scripts/pincelCursor.svg'), auto; display: block; margin: auto;";//Imagem do usuário OpenClipart-Vectors do Pixabay
                   var posXel = el.offsetLeft;
            
            var controlesESTILO = "margin: 5px auto 30px auto; padding: 10px; box-sizing: border-box; background-color: #dbdbdb; border-radius: 3px; display: flex; flex-direction: row; align-items: center; justify-content: center; width: "+w+"px; text-align: center;";

                            
            controles.style = controlesESTILO;
            seletor_de_cor.style = "width: 40px; height: 40px; margin-left: 10px; cursor: pointer;";
            seletor_de_espessura.style = "width: 100px; height: 40px; margin-left: 10px; cursor: pointer;";

            //adicionando os controles no documento após o canvas
            el.parentNode.insertBefore(controles, el.nextSibling);

         

            function hexToRgbA(hex){
                var c;
                if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
                    c= hex.substring(1).split('');
                    if(c.length== 3){
                        c= [c[0], c[0], c[1], c[1], c[2], c[2]];
                    }
                    c= '0x'+c.join('');
                    return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',0.4)';
                }
                throw new Error('Bad Hex');
            }
    

   
    
    function mudarCor() {

        var nova_cor = hexToRgbA(seletor_de_cor.value);
       
        cor = nova_cor;
    
    }

    function mudarEspessura() {

        espessura = seletor_de_espessura.value;

    }


    //Escutar quando a cor muda
    seletor_de_cor.addEventListener('change', function(){

        mudarCor(seletor_de_cor);

    });

    //Escutar quando a espessura muda
    seletor_de_espessura.addEventListener('input', function(){

        mudarEspessura();

    });
    
    function draw() {
        ctx.beginPath();
        ctx.moveTo(prevX, prevY);
        ctx.lineTo(currX, currY);
        ctx.strokeStyle = cor;
        ctx.lineWidth = espessura;
        ctx.stroke();
        ctx.closePath();
    }
    

           //Função para pegar posição do mouse
          	function findxy(estado, e) {
        if (estado == 'down') {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.getBoundingClientRect().left;
            currY = e.clientY - canvas.getBoundingClientRect().top;
    
            flag = true;
            dot_flag = true;
            if (dot_flag) {
                ctx.beginPath();
                ctx.fillStyle = cor;
                ctx.fillRect(currX, currY, 2, 2);
                ctx.closePath();
                dot_flag = false;
            }
        }//fecha if estado == down
        if (estado == 'up' || estado == "out") {
            flag = false;
        }
        if(estado == 'move') {
            if (flag) {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.getBoundingClientRect().left;
                currY = e.clientY - canvas.getBoundingClientRect().top;
                draw();
            }
                            
        }//if estado == move
                    
           }//fecha função findxy

        
        //função para pegar a posição do dedo em tela touchscreen
    
        var X_ant = 0, Y_ant = 0, X_atual = 0, Y_atual = 0, estaDesenhando = false;

          function drawDedo() {
        ctx.beginPath();
        ctx.moveTo(X_ant, Y_ant);
        ctx.lineTo(X_atual, Y_atual);
        ctx.strokeStyle = cor;
        ctx.lineWidth = espessura;
        ctx.stroke();
        ctx.closePath();
    }
    
        function findFingerXY(estado, e){
                
                if(estado == 'inicio') {console.log("INICIO");
                    
                        X_ant = X_atual;
                        Y_ant = Y_atual;
                        
                        X_atual = e.touches[0].clientX - canvas.getBoundingClientRect().left;
        Y_atual = e.touches[0].clientY - canvas.getBoundingClientRect().top;
                    
                        ctx.beginPath();
        ctx.fillStyle = cor;
        ctx.fillRect(X_atual, Y_atual, 2, 2);
        ctx.closePath();
                                                                
                        estaDesenhando = true;
                    
                }
            
            if(estado == 'fim'){
                
                    console.log('PAROU');
                    estaDesenhando = false;
                
            }
            
            if (estado == 'arrastando'){console.log("ARRASTANDO");
                                                                    
                    e.preventDefault();
                
                    if(estaDesenhando){
                            
                            X_ant = X_atual;
                            Y_ant = Y_atual;

                            X_atual = e.touches[0].clientX - canvas.getBoundingClientRect().left;
                            Y_atual = e.touches[0].clientY - canvas.getBoundingClientRect().top;

                            drawDedo();
                        
                    }
                
            }
            
            
            
        }//fecha a função dindFingerXY


        return desenharImagem;

}//Fecha a função pintarTela