<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Signature Signature - RJM Programming - May, 2017</title>
<link href='../PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<script type='text/javascript' src='signature_signature.js?new=fgfcdfjffvfvcvndklvvvwvfvvvkvvcovgvw'></script>
<script type='text/javascript'>
var spiesuff=location.search.split('piesuff=')[1] ? (location.search.split('piesuff=')[1].split('&')[0]) : ""; 
var urlsuff='', tpw='white', inactivitycountdown=10, awidth="0", aheight="0";
var cwidth=location.search.split('cwidth=')[1] ? (location.search.split('cwidth=')[1].split('&')[0]) : "0"; 
var cheight=location.search.split('cheight=')[1] ? (location.search.split('cheight=')[1].split('&')[0]) : "0"; 
if (document.URL.indexOf('cwidth=') != -1) { urlsuff='&nocookies=y&cwidth=' + cwidth + '&cheight=' + cheight;  }
if (cwidth == "0" && cheight == "0") {
  awidth=location.search.split('width=')[1] ? (location.search.split('width=')[1].split('&')[0]) : "0"; 
  aheight=location.search.split('height=')[1] ? (location.search.split('height=')[1].split('&')[0]) : "0"; 
}
var lastlongsig='', lastsscoords='', firstlast=true, secondlast=true, lastcs='';
var sscoords=location.search.split('sscoords=')[1] ? (location.search.split('sscoords=')[1].split('&')[0]) : ""; 
if (sscoords != "" && (cwidth != "0" || cheight != "0")) { tpw='white'; }
//if (sscoords != "" && document.URL.indexOf('cwidth=') != -1) { alert('here now'); }
var sscordsdelim="", wassscoords="";
var ie = 11;
var mode = 1;
var amode = 1;
var elem;
var elemLeft = 0;
var cf = "18px Verdana";
var elemTop = 0;
var context;
var elements = [];
var x=0, y=0, lastx=0, lasty=0;
var mx=0, my=0, mlastx=0, mlasty=0;
var clickno = 0;
var lastgo='';
var ssmaybe='';
var intotal="||";
var pold=false;
var isokaytoclear=true;
if (document.URL.indexOf('cwidth=') != -1) { isokaytoclear=false;  }
if (sscoords != "") sscordsdelim=",";
function poldone() {
  plotold(1);
  isokaytoclear=false;
  //setTimeout(poldone, 3000);
}
function plotold(which) {
      var css='';
      if ((ssmaybe.indexOf(",") != -1 && which == 0) || which > 0) {
        if (document.getElementById('longsignature').innerHTML == "") {
        document.getElementById('longsignature').innerHTML=ssmaybe;
        } else {
        sscoords=ssmaybe;
        }
        //if (document.URL.indexOf('cwidth=') != -1 && ssmaybe.length != 0) { if (top.document.title.indexOf(' ') != -1) { top.document.title='' + ssmaybe.length; } else if (top.document.title.indexOf('' + ssmaybe.length) == -1) {  top.document.title+=',' + ssmaybe.length;   } }
        if (parent.document.getElementById('raster')) {
        if (which == 0) intotal=(ssmaybe + "||");
        parent.document.getElementById("raster").value=ssmaybe;
        }
        var coordsare=[], colis='#000000';
        if (which == 0) {
          coordsare=(' ' + ssmaybe).replace(/\-/g,',-').replace(/,,/g,',').replace(' ,','').trim().split(',');
          context.strokeStyle='#000000';
          if (parent.document.getElementById('raster')) {
          //alert(coordsare.length + ' ... ' + (' ' + ssmaybe).replace(/\-/g,',-').replace(/,,/g,',').replace(' ,','').trim());
          if (isokaytoclear) {
          //if (document.URL.indexOf('cwidth=') != -1) { alert('Why'); }
          elem.width=elem.width;
          elem.height=elem.height;
          }
          }
        } else {
          //alert(((' ' + intotal + ' ').replace(/\|\|/g,'-').replace(/\-\-/g,'-').replace(/\-/g,',-').replace(/,,/g,',')).replace(' ,-','').replace(',- ','').trim());
          coordsare=((' ' + intotal + ' ').replace(/\|\|/g,'-').replace(/\-\-/g,'-').replace(/\-/g,',-').replace(/,,/g,',')).replace(' ,-','').replace(',- ','').trim().split(',');
          //alert(coordsare.length);
          context.strokeStyle='#000000';
          if (isokaytoclear) {
          //if (document.URL.indexOf('cwidth=') != -1) { alert('why'); }
          elem.width=elem.width;
          elem.height=elem.height;
          }
        }
        for (var ico=0; ico<coordsare.length; ico+=2) {
        if (('' + coordsare[ico]) != '') {
        if (eval(('' + coordsare[ico])) < 0 || eval(('' + coordsare[ico + 1])) < 0 || ico == 0) {
        //alert(Math.abs(eval(coordsare[ic])));
        context.beginPath();
        if (('' + coordsare[ico + 1]).indexOf('.') != -1) {
          //alert('found at ' + coordsare[ico + 1]);
          //alert('#' + ('000' + ('' + eval(('' + coordsare[ico + 1]).split('.')[1].substring(0,3)).toString(16))).slice(-2) + ('000' + ('' + eval(('' + coordsare[ico + 1]).split('.')[1].substring(3,6)).toString(16))).slice(-2) + ('000' + ('' + eval(('' + coordsare[ico + 1]).split('.')[1].substring(6,9)).toString(16))).slice(-2));
          css='#' + ('000' + ('' + eval(('' + coordsare[ico + 1]).split('.')[1].substring(0,3)).toString(16))).slice(-2) + ('000' + ('' + eval(('' + coordsare[ico + 1]).split('.')[1].substring(3,6)).toString(16))).slice(-2) + ('000' + ('' + eval(('' + coordsare[ico + 1]).split('.')[1].substring(6,9)).toString(16))).slice(-2);
          context.strokeStyle='#' + ('000' + ('' + eval(('' + coordsare[ico + 1]).split('.')[1].substring(0,3)).toString(16))).slice(-2) + ('000' + ('' + eval(('' + coordsare[ico + 1]).split('.')[1].substring(3,6)).toString(16))).slice(-2) + ('000' + ('' + eval(('' + coordsare[ico + 1]).split('.')[1].substring(6,9)).toString(16))).slice(-2);
          //context.fillStyle='#' + ('000' + ('' + eval(('' + coordsare[ico + 1]).split('.')[1].substring(0,3)).toString(16))).slice(-2) + ('000' + ('' + eval(('' + coordsare[ico + 1]).split('.')[1].substring(3,6)).toString(16))).slice(-2) + ('000' + ('' + eval(('' + coordsare[ico + 1]).split('.')[1].substring(6,9)).toString(16))).slice(-2);
              if (!pold) {
                pold=true;
                setTimeout(poldone, 3000);
              }
        } else if (css != "") {
          context.strokeStyle=css;
        }
        context.moveTo(Math.floor(Math.abs(eval(coordsare[ico]))),Math.floor(Math.abs(eval(coordsare[ico + 1]))));
        } else {
        if (('' + coordsare[ico + 1]).indexOf('.') != -1) {
          //alert('found at ' + coordsare[ico + 1]);
          //alert('#' + ('000' + ('' + eval(('' + coordsare[ico + 1]).split('.')[1].substring(0,3)).toString(16))).slice(-2) + ('000' + ('' + eval(('' + coordsare[ico + 1]).split('.')[1].substring(3,6)).toString(16))).slice(-2) + ('000' + ('' + eval(('' + coordsare[ico + 1]).split('.')[1].substring(6,9)).toString(16))).slice(-2));
          css='#' + ('000' + ('' + eval(('' + coordsare[ico + 1]).split('.')[1].substring(0,3)).toString(16))).slice(-2) + ('000' + ('' + eval(('' + coordsare[ico + 1]).split('.')[1].substring(3,6)).toString(16))).slice(-2) + ('000' + ('' + eval(('' + coordsare[ico + 1]).split('.')[1].substring(6,9)).toString(16))).slice(-2);
          context.strokeStyle='#' + ('000' + ('' + eval(('' + coordsare[ico + 1]).split('.')[1].substring(0,3)).toString(16))).slice(-2) + ('000' + ('' + eval(('' + coordsare[ico + 1]).split('.')[1].substring(3,6)).toString(16))).slice(-2) + ('000' + ('' + eval(('' + coordsare[ico + 1]).split('.')[1].substring(6,9)).toString(16))).slice(-2);
          //context.fillStyle='#' + ('000' + ('' + eval(('' + coordsare[ico + 1]).split('.')[1].substring(0,3)).toString(16))).slice(-2) + ('000' + ('' + eval(('' + coordsare[ico + 1]).split('.')[1].substring(3,6)).toString(16))).slice(-2) + ('000' + ('' + eval(('' + coordsare[ico + 1]).split('.')[1].substring(6,9)).toString(16))).slice(-2);
              if (!pold) {
                pold=true;
                setTimeout(poldone, 3000);
              }
        }
        context.lineTo(Math.floor(Math.abs(eval(coordsare[ico]))),Math.floor(Math.abs(eval(coordsare[ico + 1]))));
        if (which != 0 || 1 == 1) {
          context.stroke();
          if (eval(2 + ico) < coordsare.length) {
          context.beginPath();
          if (css != "") context.strokeStyle=css;
          context.moveTo(Math.floor(Math.abs(eval(coordsare[ico]))),Math.floor(Math.abs(eval(coordsare[ico + 1]))));
          }
        }
        }
        }
        }
        if (parent.document.getElementById('raster')) context.strokeStyle='#000000';
        //if (document.URL.indexOf('cwidth=') != -1) { alert('here'); }
      } else if (parent.document.getElementById('raster')) {
        parent.document.getElementById("raster").value='';
      }
}
function flagnearest(inx,iny,incol) {
        var coordsare=[], closest=0, cdist=-1.0;
        var alp="0123456789abcdef";
        var pcol="." + ('000' + ('' + eval(alp.indexOf(incol.toLowerCase().replace('#','').substring(0,1)) * 16 + alp.indexOf(incol.toLowerCase().replace('#','').substring(1,2)) * 1))).slice(-3) +  ('000' + ('' + eval(alp.indexOf(incol.toLowerCase().replace('#','').substring(2,3)) * 16 + alp.indexOf(incol.toLowerCase().replace('#','').substring(3,4)) * 1))).slice(-3) + ('000' + ('' + eval(alp.indexOf(incol.toLowerCase().replace('#','').substring(4,5)) * 16 + alp.indexOf(incol.toLowerCase().replace('#','').substring(5,6)) * 1))).slice(-3);
        var pcolalt=pcol;
        if (pcolalt == ".000000000") pcolalt = ".001001001";
        coordsare=((' ' + intotal + ' ').replace(/\|\|/g,'-').replace(/\-\-/g,'-').replace(/\-/g,',-').replace(/,,/g,',')).replace(' ,-','').replace(',- ','').trim().split(',');
        for (var ico=0; ico<coordsare.length; ico+=2) {
        if (('' + coordsare[ico]) != '') {
          if (ico == 0) {
            closest=1;
            cdist=eval((-inx + eval(('' + coordsare[ico]).replace('-',''))) * (-inx + eval(('' + coordsare[ico]).replace('-',''))) + eval((-iny + eval(('' + coordsare[ico + 1]).replace('-',''))) * (-iny + eval(('' + coordsare[ico + 1]).replace('-','')))));
            //alert('' + inx + ',' + iny + ';' + coordsare[ico] + "," + coordsare[ico + 1] + ' cdist=' + cdist);
          } else {
            if (eval((-inx + eval(('' + coordsare[ico]).replace('-',''))) * (-inx + eval(('' + coordsare[ico]).replace('-',''))) + eval((-iny + eval(('' + coordsare[ico + 1]).replace('-',''))) * (-iny + eval(('' + coordsare[ico + 1]).replace('-',''))))) < cdist) {
              closest=ico;
              closest++;
              cdist=eval((-inx + eval(('' + coordsare[ico]).replace('-',''))) * (-inx + eval(('' + coordsare[ico]).replace('-',''))) + eval((-iny + eval(('' + coordsare[ico + 1]).replace('-',''))) * (-iny + eval(('' + coordsare[ico + 1]).replace('-','')))));
            }
          }
         }
        }
        if (closest > 0) {  
          //parent.document.title=coordsare[0] + (' ' + closest + ' ... ' + pcol + ' ' + pcolalt);
          if (coordsare[closest].indexOf(pcol) == -1 && coordsare[closest].indexOf(pcolalt) == -1) {
            //parent.document.title=coordsare[0] + (' ' + closest + ' ... ' + pcol + ' ' + pcolalt + ' . ' + coordsare[eval(-1 + closest)] + ',' + coordsare[closest] + ' intotal=' + intotal);
            intotal=intotal.replace(coordsare[eval(-1 + closest)] + ',' + coordsare[closest], coordsare[eval(-1 + closest)] + ',' + coordsare[closest].split('.')[0] + pcolalt);
            //parent.document.title+=(' Intotal=' + intotal);
            if (parent.document.getElementById('raster')) {
              parent.document.getElementById('raster').value=parent.document.getElementById('raster').value.replace(coordsare[eval(-1 + closest)] + ',' + coordsare[closest], coordsare[eval(-1 + closest)] + ',' + coordsare[closest].split('.')[0] + pcolalt);
              if (parent.document.getElementById('rerasterize')) {
              parent.document.getElementById('rerasterize').value=parent.document.getElementById('raster').value;
              if (!pold) {
                pold=true;
                setTimeout(poldone, 3000);
              }
              }
              if (document.getElementById('longsignature').innerHTML == "") {
              document.getElementById('longsignature').innerHTML=parent.document.getElementById('raster').value;
              } else {
              document.getElementById('longsignature').innerHTML=document.getElementById('longsignature').innerHTML.replace(coordsare[eval(-1 + closest)] + ',' + coordsare[closest], coordsare[eval(-1 + closest)] + ',' + coordsare[closest].split('.')[0] + pcolalt);
              }
              if (sscoords == "") {
              sscoords=parent.document.getElementById('raster').value;
              lastgo=sscoords;
              } else {
              sscoords=sscoords.replace(coordsare[eval(-1 + closest)] + ',' + coordsare[closest], coordsare[eval(-1 + closest)] + ',' + coordsare[closest].split('.')[0] + pcolalt);
              lastgo=lastgo.replace(coordsare[eval(-1 + closest)] + ',' + coordsare[closest], coordsare[eval(-1 + closest)] + ',' + coordsare[closest].split('.')[0] + pcolalt); 
              }
  // alert(lastgo + ' ... ' + parent.document.getElementById('raster').value + ' +++ ' + document.getElementById('longsignature').innerHTML);
            }
            plotold(1);
          }  
        }
}
function dosscoordsraster() {    
    if (sscoords != '' && sscoords != lastgo) {
      lastgo=sscoords;
      if (parent.document.getElementById('raster')) {
      if (ssmaybe != '' && lastgo.indexOf(ssmaybe) == -1 && 1 == 2) {
      sscords=(ssmaybe + ',-' + lastgo).replace('-,-',',-');
      parent.document.getElementById('raster').value=(ssmaybe + ',-' + lastgo).replace('-,-',',-');
      lastgo=sscoords;
      } else {
      //alert('here = ' + lastgo);
      parent.document.getElementById('raster').value=lastgo;
      //parent.document.title=lastgo; 
      }
      }
       // if (document.URL.indexOf('cwidth=') != -1 && sscoords.length != 0) { if (top.document.title.indexOf(' ') != -1) { top.document.title='' + sscoords.length; } else if (top.document.title.indexOf('' + sscoords.length) == -1) {  top.document.title+=',' + sscoords.length;   } }
    }
    if (parent.document.getElementById('raster')) {
      setTimeout(dosscoordsraster,100);  
    }
}
function longsigparent() {
    var changed=false;
    if (parent.document) {
      if (parent.document.getElementById('parentlongsignature') || parent.document.getElementById('parentsscoords')) {
          document.body.style.backgroundColor='transparent';
          if (parent.document.getElementById('parentlongsignature')) {
            if (lastlongsig.length != document.getElementById('parentlongsignature').innerHTML.length && document.getElementById('parentlongsignature').innerHTML.length > 0) {
              lastlongsig=document.getElementById('parentlongsignature').innerHTML;
              parent.document.getElementById('parentlongsignature').innerHTML=lastlongsig;
              changed=true;
            }
          }
          if (parent.document.getElementById('parentsscoords')) {
            if (lastsscoords.length != document.getElementById('parentsscoords').value.length && document.getElementById('parentsscoords').value.length > 0) {
              lastsscoords=document.getElementById('parentsscoords').value;
              parent.document.getElementById('parentsscoords').value=lastsscoords;
              changed=true;
            }
          }
          if (changed && parent.document.getElementById('parentimgelement' + spiesuff)) {
            parent.document.getElementById('parentimgelement' + spiesuff).src=elem.toDataURL();
            parent.document.getElementById('parentimgelement' + spiesuff).style.zIndex='390';
            parent.document.getElementById('isignature' + spiesuff).style.zIndex='1';
            location.href='#animage';
            parent.document.getElementById('isignature' + spiesuff).style.display='none';
            parent.document.getElementById('divsignature' + spiesuff).style.display='none';
          } else if (changed && parent.document.getElementById('divsignature' + spiesuff)) {
            parent.document.getElementById('divsignature' + spiesuff).style.backgroundImage='URL("' + elem.toDataURL() + '")';
            parent.document.getElementById('divsignature' + spiesuff).style.zIndex='390';
            parent.document.getElementById('isignature' + spiesuff).style.zIndex='1';
            location.href='#animage';
            parent.document.getElementById('isignature' + spiesuff).style.display='none';
            parent.document.getElementById('divsignature' + spiesuff).style.display='none';
          } else {
            setTimeout(longsigparent, 2000);
          }
      }
    }
}
function inadown() {
  inactivitycountdown--;
  setTimeout(inadown, 1000);
}
function clicksas() {
  if (inactivitycountdown <= 0) {
    if (document.getElementById('sasys')) { document.getElementById('sasys').click(); if (firstlast) { firstlast=false; if (1 == 2) { setTimeout(longsigparent,500); } }  }
  } else {
    setTimeout(clicksas, eval(eval(1 + inactivitycountdown) * 1000));
  }
}
function bcheckls() {
//top.document.title='2';
if (parent.document.getElementById('parentimgelement' + spiesuff) && (cwidth != "0" || cheight != "0")) { 
//top.document.title='22';
  if (lastcs != '' && parent.document.getElementById('parentimgelement' + spiesuff).src == '' && inactivitycountdown <= 2) {
    //alert(lastcs);
       var asscoords=lastcs.split('|')[0].split(',');
       //wassscoords=sscoords;
       //sscoords = '';
       //sscoordsdelim='';
       context.beginPath();
       context.moveTo(Math.abs(eval(asscoords[0])),Math.abs(eval(asscoords[1])));
      //setTimeout(longsigparent, 3000);
       for (var iss=2; iss<asscoords.length; iss+=2) {
         if (eval(asscoords[iss]) < 0 || eval(asscoords[eval(1 + iss)]) < 0) {
          context.beginPath();
          context.moveTo(Math.abs(eval(asscoords[iss])),Math.abs(eval(asscoords[eval(1 + iss)])));
         } else {
          context.strokeStyle='#000000';
          context.lineTo(Math.abs(eval(asscoords[iss])),Math.abs(eval(asscoords[eval(1 + iss)])));
          context.stroke();
         }
       }
           var imgd = context.getImageData(0, 0, elem.width, elem.height);  // thanks to https://stackoverflow.com/questions/11472273/how-to-edit-pixels-and-remove-white-background-in-a-canvas-image-in-html5-and-ja
    var pix = imgd.data;
    var i, n;
    var newColor = {r:0,g:0,b:0, a:0};
    for (var i = 0, n = pix.length; i <n; i += 4) {
    var r = pix[i],
            g = pix[i+1],
            b = pix[i+2];
        // If its white then change it
        if (r == 255 && g == 255 && b == 255) { 
            // Change the white to whatever.
            pix[i] = newColor.r;
            pix[i+1] = newColor.g;
            pix[i+2] = newColor.b;
            pix[i+3] = newColor.a;
        }
      }
       context.putImageData(imgd, 0, 0);
       //alert('yeshuh');
       parent.document.getElementById('parentimgelement' + spiesuff).src=elem.toDataURL('image/png');
       //alert('yes');
  } else if (lastcs != '' && parent.document.getElementById('parentimgelement' + spiesuff).src == '') {
   setTimeout(bcheckls,1000);
  }
} else if (cwidth != "0" || cheight != "0") {
  setTimeout(bcheckls,500);
}
}
function rezeroalt() {
   rezero();
}
function checkls() {
if (sscoords == "" && (cwidth != "0" || cheight != "0")) { 
  if (document.getElementById('longsignature').innerHTML != '') { // && document.getElementById('parentimgelement')) {
    lastcs=document.getElementById('longsignature').innerHTML;
    setTimeout(bcheckls, 3000);
}
}
}
window.onload = (function() {
  
  var today = new Date();
  var dd = today.getDate();
  var mm = today.getMonth()+1; //January is 0!
  var yyyy = today.getFullYear();
  var hh = today.getHours();
  var minm = today.getMinutes(); //January is 0!
  var ss = today.getSeconds();
  if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    hh=hh;
  }
    if (parent.document.getElementById('raster')) {
   //alert(65);
      setTimeout(dosscoordsraster,100);
    } 
ie = (function(){  // thanks to  http://stackoverflow.com/questions/5574842/best-way-to-check-for-ie-less-than-9-in-javascript-without-library
    var undef,
        v = 3,
        div = document.createElement('div'),
        all = div.getElementsByTagName('i');
    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
        all[0]
    );
    return v > 4 ? v : undef;
}());
    elem = document.getElementById('canvaselement');
    context = elem.getContext("2d");
    //context.drawImage(img,0,0);
    elemLeft = elem.offsetLeft;
    elemTop = elem.offsetTop;
    // Add event listener for `click` events.
    elem.addEventListener('click', function(event) {
       if (x == 0 && y == 0 && lastx == 0 && lasty == 0) {
       if (event.pageX || event.pageY) {
       x = event.pageX - elemLeft;
       y = event.pageY - elemTop;
       } else {
       x = event.clientX - elemLeft;
       y = event.clientY - elemTop;
       }
       lastx=x;
       lasty=y;
       } else {
       lastx=x;
       lasty=y;
       if (event.pageX || event.pageY) {
       x = event.pageX - elemLeft;
       y = event.pageY - elemTop;
       } else {
       x = event.clientX - elemLeft;
       y = event.clientY - elemTop;
       }
       }
       inactivitycountdown=10;
       if (document.URL.indexOf('cwidth=') != -1 && lastcs != '' && sscoords == '') {
         //setTimeout(clicksas, 8000);
          lastcs='';
          elem.width=elem.width;
          elem.height=elem.height;
       }
       if (parent.document.getElementById('raster')) {
         if (parent.document.getElementById('refontnearest') && parent.document.getElementById('refontc')) {
         parent.document.getElementById('refontnearest').value='' + x + ',' + y;
         flagnearest(x, y, parent.document.getElementById('refontc').value);
         } else {
         parent.document.title='' + x + ',' + y;
         }
       }
    clickno = clickno + 1;
    });
    
    if (parent.document.getElementById('raster')) { // && document.URL.indexOf('cwidth=') == -1) {
      ssmaybe=location.search.split('nocookies=')[1] ? decodeURIComponent(location.search.split('nocookies=')[1].split('&')[0]) : '';
      //alert(ssmaybe);
      plotold(0);
      setTimeout(dosscoordsraster,100);
    } 
     
if (check_for_supervision()) {
  document.getElementById('rform').innerHTML+="<input style='display:inline-block;' onclick='sendchallenge(this.id);' id='rchallenge' name='rchallenge' align='center' type='button' value='Share Last Bits'></input>";
  document.getElementById('rform').innerHTML+="<input style='display:inline-block;' onclick='sendchallenge(this.id);' id='ichallenge' name='ichallenge' align='center' type='button' value='Share All'></input>";
}
    
    if (sscoords != "" && (cwidth != "0" || cheight != "0")) {
       var asscoords=sscoords.split('|')[0].split(',');
       wassscoords=sscoords;
       sscoords = '';
       sscoordsdelim='';
       context.beginPath();
       context.moveTo(Math.abs(eval(asscoords[0])),Math.abs(eval(asscoords[1])));
      //setTimeout(longsigparent, 3000);
       for (var iss=2; iss<asscoords.length; iss+=2) {
         if (eval(asscoords[iss]) < 0 || eval(asscoords[eval(1 + iss)]) < 0) {
          context.beginPath();
          context.moveTo(Math.abs(eval(asscoords[iss])),Math.abs(eval(asscoords[eval(1 + iss)])));
         } else {
          context.strokeStyle='#000000';
          context.lineTo(Math.abs(eval(asscoords[iss])),Math.abs(eval(asscoords[eval(1 + iss)])));
          context.stroke();
         }
       }
           var imgd = context.getImageData(0, 0, elem.width, elem.height);  // thanks to https://stackoverflow.com/questions/11472273/how-to-edit-pixels-and-remove-white-background-in-a-canvas-image-in-html5-and-ja
    var pix = imgd.data;
    var i, n;
    var newColor = {r:0,g:0,b:0, a:0};
    for (var i = 0, n = pix.length; i <n; i += 4) {
    var r = pix[i],
            g = pix[i+1],
            b = pix[i+2];
        // If its white then change it
        if (r == 255 && g == 255 && b == 255) { 
            // Change the white to whatever.
            pix[i] = newColor.r;
            pix[i+1] = newColor.g;
            pix[i+2] = newColor.b;
            pix[i+3] = newColor.a;
        }
      }
       context.putImageData(imgd, 0, 0);
       parent.document.getElementById('parentimgelement' + spiesuff).src=elem.toDataURL('image/png');
       parent.document.getElementById('parentimgelement' + spiesuff).style.zIndex='390';
       parent.document.getElementById('divsignature' + spiesuff).style.zIndex='390';
       parent.document.getElementById('isignature' + spiesuff).style.zIndex='1';
       parent.document.getElementById('isignature' + spiesuff).style.display='none';
       parent.document.getElementById('divsignature' + spiesuff).style.display='none';
    } else if (cwidth != "0" || cheight != "0") {
       setTimeout(inadown, 900);
       setTimeout(clicksas, 10000);   
    }
   
    });
    
       
</script>
</head>
<body style='background-color:pink;'>
<table><tr><td>
<script type='text/javascript'>
if (cwidth == "0" && cheight == "0" && awidth == "0" && aheight == "0") {
  document.write('<canvas title="Ready for you to sign 💳 away ..." id="canvaselement" width=850 height=200 style="background-color:white; position: absolute; top:0; left:0; border-bottom:5px solid yellow; border-right:5px solid blue;"></canvas></td><td>');
} else if (cwidth == "0" && cheight == "0") {
  document.write('<canvas title="Ready for you to sign 💳 away ..." id="canvaselement" width=' + awidth + ' height=' + aheight + ' style="background-color:' + tpw + '; position: absolute; top:0; left:0;"></canvas></td><td>');
} else {
  document.write('<canvas title="Ready for you to sign 💳 away ..." id="canvaselement" width=' + cwidth + ' height=' + cheight + ' style="background-color:' + tpw + '; position: absolute; top:0; left:0;"></canvas></td><td>');
}
</script>
</td></tr></table>
<div id='rest'>
<br><br><br><br><br><br><br><br><br><br><h1>Signature Signature <div style='display:inline-block;' id='rform'></div></h1>
<h3>RJM Programming - May, 2017</h3>
<h4 id='myh4'></h4>
<span id="showit" style='display:none;'><input id=sasys style="background-color:yellow;" value="Show and Save Your Signature (as above)" type=button onclick="if (wassscoords != '') { if ((document.URL.split('?')[0].split('#')[0] + ('?sscoords=' + wassscoords + urlsuff).replace('=,','=')).length > ninehundred) { document.getElementById('sscoords').value=preprenwpixellate(wassscoords.replace('=,','='),'POST'); document.getElementById('mysbut').click();  } else { location.href=document.URL.split('?')[0].split('#')[0] + preprenwpixellate(('?sscoords=' + wassscoords + urlsuff).replace('=,','='),'GET'); }   } else { if ((document.URL.split('?')[0].split('#')[0] + ('?sscoords=' + sscoords + urlsuff).replace('=,','=')).length > ninehundred) {  document.getElementById('sscoords').value=preprenwpixellate(sscoords.replace('=,','='),'POST'); document.getElementById('mysbut').click();   } else { location.href=document.URL.split('?')[0].split('#')[0] + preprenwpixellate(('?sscoords=' + sscoords + urlsuff).replace('=,','='),'GET'); } }"></input></span>
<span id="showi" style='display:none;'><br><br>And below is an image version of the last signature ...<br><br><img style='width:850px;height:200px;border-bottom:5px solid yellow; border-right:5px solid blue; border-top:1px solid white; border-left:1px solid white;' id='animage' src='' title='Image version of last canvas'></img></span>
<div id='divit'><iframe style=display:none; onclick="window.open(document.getElementById('myppform').action,'_blank');" title="Pixellated Negative and click for new window display" width=850 height=200 name=myip id=myip src=></iframe><form id=myppform target=myip method=POST action="//www.rjmprogramming.com.au/PHP/pixellate.php?lookfor=postget">  <input type=hidden name=width id=divwidth value=850></input> <input type=hidden name=height id=divheight value=200></input> <input type=hidden name=tarea id=tarea value=""></input> <input style="display:none;" type=submit id=myipsub value=Pixellate></input> </form></div>
</div>
<div id='longsignature' style='display:none;'></div>
<form id='myform' style='display:none;' action='./signature_signature.php' method='POST' target='_self'>
<input type='hidden' name='sscoords' id='sscoords' value=''></input>
<input type='submit' id='mysbut' value='Submit'></input>
</form>
<iframe onload='setTimeout(checkls,500);' id='myask' src='./signature_signature.php?d=f' style='display:none;'></iframe>
<input type='hidden' id='pcoords' value=''></input>
</body>
</html>