jQuery(document).ready(function() {
  //jQuery(".ean13").mask("9999999999999");
  jQuery(".parcelas").mask("99");
  jQuery(".form input").val("");
  jQuery(".form textarea").val("");
  jQuery(".parcelas").val("10");
  var img = new Image();
  var img_cada = new Image();
  var img_virgula = new Image();
  var scale = 3;
  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  const FONT_NAME_1 = 'Futura_ExtraBlackitalic';
  const FONT_NAME_2 = 'Gotham_UltraItalic';
  const FONT_NAME_3 = 'Gotha_MediumItalic';
  var lines;
  function printAt(index, context , text, x, y, lineHeight, fitWidth) {
    lines = text.split('\n');
    
    for (var i = 0; i<lines.length; i++)
        context.fillText(lines[i], x, y + (i*lineHeight) );
  }
  var patt = /,/g;
  result = false;
  var descricaoW = 0;
  var descricaoT = "";
  function validador(index, id, x, y, cnt) {
    var indexi = index+1;
    var txt = jQuery("#form-"+indexi+" "+id).val();
    if (txt) {
      txt = jQuery("#form-"+indexi+" "+id).val();
    } else {
      txt = cnt;
    }
    result = patt.test(txt);
    if (id == ".descricao") {
      descricaoW = ctx.measureText(","+jQuery("#form-"+indexi+" .descricao").val()).width;
      printAt(index, ctx, txt, x, y, 70*scale, 550*scale);
    } else if (id == ".preco" && result) {
        ctx.fillText(txt.replace(/,.*/,''), x-widthPrecoPor2/2-(60-space1)*scale, y);
        canvas.style.letterSpacing = -11*scale+"px";
        ctx.font = 200*scale/fontPrice+`px "${FONT_NAME_1}"`;
        if(txt.replace(/.*,/,'')>0){
            ctx.fillText(txt.replace(/.*,/,''), canvas.width/2+widthPrecoPor/2+20*scale, y-130*scale/fontPrice);
            jQuery(img_virgula).attr("src", "assets/img/img-virgula.png").load(function() {
                ctx.drawImage(img_virgula,canvas.width/2+widthPrecoPor/2-widthPrecoPor2,canvas.height-this.naturalHeight-10*scale/tamPrice-space2*quantPrice*scale,this.naturalWidth-4*scale*tamPrice,this.naturalHeight-4*scale*tamPrice);
            });
        }
        widthPrecoPor = widthPrecoPor + widthPrecoPor2;
    } else {
        ctx.fillText(txt, x, y);
    }

}
  var widthPrecoPor, widthPrecoPor2, posY, letterSpacingPreco, fontPrice, tamPrice, space1 = 0;
  var space2 = 10;
  var href_old;
  var href = location.hash.replace("#",'');
  if(href==""){href="oferta"}
  var normal = 0;
  function desenhar() {
    var indexi;
    ctx.resetTransform();
    ctx.clearRect(0, 0, canvas.width*5, canvas.height*5);
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.restore();
    ctx.shadowBlur = 30;
    ctx.shadowOffsetY = 0;
    ctx.shadowOffsetX = 0;
    jQuery(".forms form").each(function(index){
      ctx.resetTransform();
      ctx.fillStyle = '#000';
      ctx.textAlign='center';
      indexi = index+1;
      valor = jQuery("#form-"+indexi+" .preco").val().replace(/[^0-9,]+/g,'');
      jQuery("#form-"+indexi+" .preco").val(valor);
      if (href == "oferta" || !href){
        normal = 0;
      } else {
        jQuery("#form-"+indexi+" .preco").attr("placeholder", 'Preço');
        normal = 58;
      }

canvas.style.letterSpacing = "0";
      ctx.font = 75.5*scale+`px "${FONT_NAME_2}"`;
      posY = canvas.height/2-(66+normal)*scale
      validador(index, ".descricao", canvas.width/2, posY, "DESCRIÇÃO\n DO PRODUTO");
      
      posY = posY+75.5*scale*lines.length-10*scale*lines.length;
      ctx.font = 51*scale+`px "${FONT_NAME_3}"`;
      validador(index, ".caracteristicas", canvas.width/2, posY, "Características");
      ctx.font = 18*scale+`px "${FONT_NAME_3}"`;
      var widthEan = ctx.measureText(jQuery("#form-"+indexi+" .ean13").val()).width;
      if(widthEan==0){widthEan=ctx.measureText(jQuery("1234567890123").val()).width}
      validador(index, ".ean13", canvas.width-widthEan/2-35*scale, canvas.height-20*scale, "1234567890123");
      
      quantPrice = jQuery("#form-"+indexi+" .preco").val().replace(/,.*/,'').length;
      if(quantPrice==1){
         fontPrice = 1;
         tamPrice = 1;
      } else if(quantPrice==2) {
         fontPrice = quantPrice*.7;
         tamPrice = quantPrice*3;
      } else {
         fontPrice = quantPrice*.6;
         tamPrice = quantPrice*3;
      }
      if(jQuery("#form-"+indexi+" .preco").val().charAt(0)==1){
         if(quantPrice>1){
            fontPrice = quantPrice*.6;
            tamPrice = quantPrice*3;
         }
          letterSpacingPreco = 90/fontPrice;
          space1 = 0;
      } else {
          letterSpacingPreco = 38/fontPrice;
          space1 = 40;
      }
      ctx.fillStyle = '#E41C25';
      canvas.style.letterSpacing = -11*scale+"px";
      ctx.font = 200*scale/fontPrice+`px "${FONT_NAME_1}"`;
      widthPrecoPor2 = ctx.measureText(jQuery("#form-"+indexi+" .preco").val().replace(/.*,/,'')).width;
      canvas.style.letterSpacing = -letterSpacingPreco*scale+"px";
      ctx.font = 400*scale/fontPrice+`px "${FONT_NAME_1}"`;
      widthPrecoPor = ctx.measureText(jQuery("#form-"+indexi+" .preco").val().replace(/,.*/,'')).width;
      validador(index, ".preco", canvas.width/2, canvas.height-20*scale-space2*quantPrice*scale, "00");
      if (widthPrecoPor==0) {
        widthPrecoPor = ctx.measureText("00").width;
      }
      
      jQuery(img).attr("src", "assets/img/img-r$.png").load(function() {
        ctx.drawImage(img,20*scale,canvas.height/2+this.naturalHeight+8*scale*tamPrice,this.naturalWidth,this.naturalHeight);
      });
      
      jQuery(img_cada).attr("src", "assets/img/img-cada.png").load(function() {
        ctx.drawImage(img_cada,canvas.width/2+widthPrecoPor/2-widthPrecoPor2+110*scale/fontPrice,canvas.height-this.naturalHeight-80*scale/fontPrice-space2*quantPrice*scale,this.naturalWidth-6.66*scale*tamPrice,this.naturalHeight-2*scale*tamPrice);
      });
    });
  }

function downloadCanvas(link, filename) {
    link.href = document.getElementById('myCanvas').toDataURL();
    link.download = filename;
  }

jQuery("#imprimir").on('click', function(e) {
    var cont = 0;
    jQuery(".form input, .form textarea").each(function(){
      if(jQuery(this).val() == "") {
        jQuery(this).css("border-color", "#F00");
        cont++;
      }
    });
    if(cont == 0) {
      jQuery(".col-right").hide();
      jQuery("#myCanvas").css("max-height", '100%');
      jQuery("#myCanvas").css("top", 0);
      window.print();
      jQuery(".col-right").show();
      jQuery("#myCanvas").css("max-height", '842px');
      jQuery("#myCanvas").css("top", jQuery(window).scrollTop());
    }
  });

jQuery(".form input, .form textarea").on('keyup', function(e) {
    var code = e.key;
    jQuery(this).css("border-color", "#ccc");
    desenhar();
  })
  .blur(function() {
    if(jQuery(this).val() == ""){
      jQuery(this).css("border-color", "#F00");
    }
  });
  desenhar();
    if(href=="oferta"){
        jQuery("#myCanvas").css("background-image", "url(http://www.lojasgiga.com.br/cartaz-novo/assets/img/bg-1.jpg)");
    } else {
        jQuery("#myCanvas").css("background-image", "url(http://www.lojasgiga.com.br/cartaz-novo/assets/img/bg-2.jpg)");
    }
  
  jQuery("nav a").on('click', function(e) {
    href_old = href;
    href = jQuery(this).attr("href").replace("#",'');
    if(href != href_old) {
        if(href=="oferta"){
            jQuery("#myCanvas").css("background-image", "url(http://www.lojasgiga.com.br/cartaz-novo/assets/img/bg-1.jpg)");
        } else {
            jQuery("#myCanvas").css("background-image", "url(http://www.lojasgiga.com.br/cartaz-novo/assets/img/bg-2.jpg)");
        }
        desenhar();
    }
  });
});