// signature_signature.js
// RJM Programming
// May, 2017
// Help out signature_signature.html and others like it

var jsanimg=null, lastim='';
var topin=null,toplastta='',topfirst=true,toplthere=false, topelem=null, topielem=null, topcontext=null, topwidth=0, topheight=0, topvswidth=0, topvsheight=0, topvswidthoff=0, topvsheightoff=0;
var firstcall=true;savenow=0, lastsavenow=0, ppx=-1,ppy=-1,pmore='', isScribble=1;  //0;
var prevlines=[], lines=[];
var eighteen=18;
var jsrectbits=[0,0,0,0,0,0];
var jsclickno = 0;
var jsimgh=0, jsimgw=0;
var jsemail = "";
var jscf = "18px Verdana", lastjscf=jscf;
var precolcf = "black";
var colcf = "blue rgba(0,0,255,1.0)";
var xua = navigator.userAgent; 
var isiPad = /iPad/i.test(xua) || /iPhone/i.test(xua) || /iPhone OS 3_1_2/i.test(xua) || /Andrxoid/i.test(xua) || /iPhone OS 3_2_2/i.test(xua); 
var isTouch = /touch/i.test(xua) || /Touch/i.test(xua); 
var sscoords = (location.search.split('sscoords=')[1] ? decodeURIComponent(location.search.split('sscoords=')[1].split('&')[0]) : '');
var ninehundred = (location.search.split('ninehundred=')[1] ? eval(decodeURIComponent(location.search.split('ninehundred=')[1].split('&')[0])) : 900);
if (ninehundred > 900) sscoords='';

function imageask(tv) {
  if (tv == 'im' && lastim != tv) {
    lastim=tv;
    var ihuh=prompt('Enter an Image URL','');
    if (ihuh != null) {
    if (ihuh != '') {
    jsanimg = new Image();
    jsanimg.onload = function() {
      jsimgw = jsanimg.width;
      jsimgh = jsanimg.height;
    }
    jsanimg.onerror = function() {
      jsimgw = 0;
      jsimgh = 0;
      jsanimg = null;
    }
    jsanimg.src = ihuh; 
    }
    }
  }
}

function shapedraw() {
     var radis=0.0;
      if (parent.document.getElementById('colcf')) {
        colcf=parent.document.getElementById('colcf').value;
      }
  if (parent.document.getElementById('dcm')) {
    var dcmv=parent.document.getElementById('dcm').value;
    lastim=dcmv;
    if (dcmv == 'ro' || dcmv == '') {
        topcontext.beginPath();
        topcontext.rect(Math.min(jsrectbits[0],jsrectbits[2]),Math.min(jsrectbits[1],jsrectbits[3]),Math.abs(jsrectbits[2] - jsrectbits[0]),Math.abs(jsrectbits[3] - jsrectbits[1]));
      topcontext.strokeStyle = colcf.split(' ')[eval(-1 + colcf.split(' ').length)];
        topcontext.stroke();
    } else if (dcmv == 'im') {
        if (jsanimg != null && jsimgw != 0 && jsimgh != 0) {
        if (colcf.split(',').length == 4) {
        topcontext.globalAlpha = eval(colcf.split(',')[3].split(')')[0]);
        } else {
        topcontext.globalAlpha = 1.0;
        }
        topcontext.drawImage(jsanimg,Math.min(jsrectbits[0],jsrectbits[2]),Math.min(jsrectbits[1],jsrectbits[3]),Math.abs(jsrectbits[2] - jsrectbits[0]),Math.abs(jsrectbits[3] - jsrectbits[1]));
        }
    } else if (dcmv == 'rf') {
        topcontext.beginPath();
        topcontext.rect(Math.min(jsrectbits[0],jsrectbits[2]),Math.min(jsrectbits[1],jsrectbits[3]),Math.abs(jsrectbits[2] - jsrectbits[0]),Math.abs(jsrectbits[3] - jsrectbits[1]));
      topcontext.fillStyle = colcf.split(' ')[eval(-1 + colcf.split(' ').length)];
        topcontext.fill();
    } else if (dcmv == 'co') {
        topcontext.beginPath();
        radis=Math.sqrt(Math.abs(jsrectbits[2] - jsrectbits[0]) * Math.abs(jsrectbits[2] - jsrectbits[0]) + Math.abs(jsrectbits[3] - jsrectbits[1]) * Math.abs(jsrectbits[3] - jsrectbits[1]));
        topcontext.arc(jsrectbits[0],jsrectbits[1],radis,0,2*Math.PI);
      topcontext.strokeStyle = colcf.split(' ')[eval(-1 + colcf.split(' ').length)];
        topcontext.stroke();    
    } else if (dcmv == 'cf') {
        topcontext.beginPath();
        radis=Math.sqrt(Math.abs(jsrectbits[2] - jsrectbits[0]) * Math.abs(jsrectbits[2] - jsrectbits[0]) + Math.abs(jsrectbits[3] - jsrectbits[1]) * Math.abs(jsrectbits[3] - jsrectbits[1]));
        topcontext.arc(jsrectbits[0],jsrectbits[1],radis,0,2*Math.PI);
      topcontext.fillStyle = colcf.split(' ')[eval(-1 + colcf.split(' ').length)];
        topcontext.fill();    
    } else if (dcmv == 'lo') {
        topcontext.beginPath();
        topcontext.moveTo(jsrectbits[0],jsrectbits[1]);
        topcontext.lineTo(jsrectbits[2],jsrectbits[3]);
      topcontext.strokeStyle = colcf.split(' ')[eval(-1 + colcf.split(' ').length)];
        topcontext.stroke();    
    }
        if (isTouch || isiPad) { 
          parent.document.getElementById('dcm').value=' ';
        }
  } else if (dcmv != ' ') {
        topcontext.beginPath();
        topcontext.rect(Math.min(jsrectbits[0],jsrectbits[2]),Math.min(jsrectbits[1],jsrectbits[3]),Math.abs(jsrectbits[2] - jsrectbits[0]),Math.abs(jsrectbits[3] - jsrectbits[1]));
      topcontext.strokeStyle = colcf.split(' ')[eval(-1 + colcf.split(' ').length)];
        topcontext.stroke();
  }
}

function topinoff() {
   var usedtobe='';
   if (topin) {
     usedtobe=topin.value;
     topin.value='';
     //document.title+=(' here at ' + usedtobe);
   }
}

function ssj_setCookie(thisg) { // thanks to JavaScript and Ajax by Tom Negrino and Dori Smith
   var expireDate = new Date();
   expireDate.setMonth(expireDate.getMonth()+6);
   //alert(thisg);
   if (("sscoords=" + thisg + "; expires=" + expireDate.toGMTString()).length < ninehundred) {
   //alert(234);
   document.cookie = "sscoords=" + thisg + "; expires=" + expireDate.toGMTString();
   } else {
   ssj_deleteCookie();
   }
} 
 
function ssj_deleteCookie() { // thanks to JavaScript and Ajax by Tom Negrino and Dori Smith
   var expireDate = new Date();
   expireDate.setMonth(expireDate.getMonth()-6);
   document.cookie = "sscoords=; expires=" + expireDate.toGMTString();
} 

function ssj_cookieVal(fcall) {
  //document.title+=(" firstcall=" + firstcall + " and sscoords=" + sscoords);
  if (fcall && sscoords != '') {
   if (document.cookie == '') {
     //document.title+=(" Sscoords=" + sscoords);
     ssj_setCookie(sscoords);
   } 
  } else { 
   if (document.cookie != '') {
   var tCookie=document.cookie.split("; ");
   for (var j=0; j<tCookie.length; j++) {
    if ("sscoords" == tCookie[j].split("=")[0]) {
      if (firstcall && decodeURIComponent(tCookie[j].split("=")[1]) != "") {
      //document.title=tCookie[j];
    //alert(emailee + ' ... ' + decodeURIComponent(tCookie[j].split("=")[1]));
  // if (decodeURIComponent(tCookie[j].split("=")[1]).indexOf('@') != -1) {
  //    if (emailee.indexOf('@') == -1 || emailee == 'fill.in@email.to') {
  //      emailee=decodeURIComponent(tCookie[j].split("=")[1]).split('~')[0];
        //alert(emailee);
  //    } //else {
        //alert(98);
      //}
  //  }
      // if (decodeURIComponent(tCookie[j].split("=")[1]).split('~')[eval(-1 + decodeURIComponent(tCookie[j].split("=")[1]).split('~').length)].indexOf('|') != -1) {
      //alert(1122);
      //  preaddthis(decodeURIComponent(tCookie[j].split("=")[1]).split('~')[eval(-1 + decodeURIComponent(tCookie[j].split("=")[1]).split('~').length)]);
      // }
         sscoords = decodeURIComponent(tCookie[j].split("=")[1]);
     //document.title+=(" sscoords=" + sscoords);
      }
      return decodeURIComponent(tCookie[j].split("=")[1]);
    }
   } 
   } //else {
   //document.title+=(' 1111');
   //}
  }
  return '';
} 

function times_up() {
  savenow=0;
  context.clearRect(0, 0, elem.width, elem.height);
  if (document.getElementById('showit')) {
    document.getElementById('showit').style.display='inline';
  }
}

function touchWindowHandler(event) // thanks to http://stackoverflow.com/questions/1517924/javascript-mapping-touch-events-to-mouse-events
{
    var touches = event.changedTouches,
        first = touches[0],
        type = "";
         switch(event.type)
    {
        case "touchstart": type = "onclick"; 
        //alert(88 + moid + event.targetTouches.length); 
        break;
        
        default: return;
    }

             //initMouseEvent(type, canBubble, cancelable, view, clickCount, 
    //           screenX, screenY, clientX, clientY, ctrlKey, 
    //           altKey, shiftKey, metaKey, button, relatedTarget);

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
                              first.screenX, first.screenY, 
                              first.clientX, first.clientY, false, 
                              false, false, false, 0/*left*/, null);

    first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function muchlater() {
  if (parent.document.getElementById('dcm').value.indexOf('Text') == 0) parent.document.getElementById('dcm').value=' ';
}

function touchHandler(event) // thanks to http://stackoverflow.com/questions/1517924/javascript-mapping-touch-events-to-mouse-events
{
    var touches = event.changedTouches,
        first = touches[0],
        type = "";
    //if (event.targetTouches.length == 1) {

    switch(event.type)
    {
        case "touchstart": type="mousedown"; break;
        case "touchmove":  type="mousemove"; break;        
        case "touchend":   type="mouseup"; break;
        default: return;
    }

             //initMouseEvent(type, canBubble, cancelable, view, clickCount, 
    //           screenX, screenY, clientX, clientY, ctrlKey, 
    //           altKey, shiftKey, metaKey, button, relatedTarget);

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
                              first.screenX, first.screenY, 
                              first.clientX, first.clientY, false, 
                              false, false, false, 0/*left*/, null);

    first.target.dispatchEvent(simulatedEvent);
    
    event.preventDefault();
    event.stopPropagation();
    
    switch(type)
    {
        case "mousedown": if (isScribble == 1) { isScribble=2;
       if (event.pageX || event.pageY) {
        ppx=event.pageX - elemLeft;
        ppy=event.pageY - elemTop;
       } else {
        ppx=event.clientX - elemLeft;
        ppy=event.clientY - elemTop;
       }
        lastx=0;  // new to scribble
        lasty=0;
        x=0;
        y=0;
 } 
 break;
        case "mousemove": if (isScribble == 2) {

       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;
       }
       }
       
       
       
    
    if (x != lastx || y != lasty) {
      //document.getElementById('divannotation').style.display='block';
      //document.getElementById('myisubject').style.display = 'inline';
      //document.getElementById('myiemail').style.display = 'inline';
    //context.strokeStyle=document.getElementById('mycolour').value;
    context.beginPath();
    context.moveTo(x,y);
    context.lineTo(lastx,lasty);
    context.stroke();
    if (topelem) {
        topcontext.beginPath();
        topcontext.moveTo((eval(x) + eval(topvswidthoff)),(eval(y) + eval(topvsheightoff)));
        topcontext.lineTo((eval(lastx) + eval(topvswidthoff)),(eval(lasty) + eval(topvsheightoff)));
       if (topin) {
         topin.value='--';
       }
      if (parent.document.getElementById('colcf')) {
        colcf=parent.document.getElementById('colcf').value;
      }
        topcontext.strokeStyle = colcf.split(' ')[eval(-1 + colcf.split(' ').length)];
        topcontext.stroke();
        toplthere=true;
    }
    if (sscoords == '') sscoordsdelim='';
    if (('*' + sscoords + '*').indexOf(lastx + ',' + lasty + '*') == -1) {
      if (sscoords.indexOf(',') != -1) savenow=sscoords.length;
      sscoords+=sscordsdelim + '-' + lastx;
      sscordsdelim=',';
      sscoords+=sscordsdelim + lasty;
      if (savenow != 0) {
        lastsavenow=savenow;
		savenow=sscoords.length;
      }
    }
    if (('*' + sscoords + '*').indexOf(x + ',' + y + '*') == -1) {
      if (sscoords.indexOf(',') != -1) savenow=sscoords.length;
      sscoords+=sscordsdelim + x;
      sscordsdelim=',';
      sscoords+=sscordsdelim + y;
      if (savenow != 0) {
        lastsavenow=savenow;
		savenow=sscoords.length;
      }
    }
    wassscoords='';
    if (document.getElementById('showit')) {
      document.getElementById('showit').style.display='inline';
      if (1 == 2 && document.getElementById('animage')) {
        document.getElementById('animage').src = elem.toDataURL("image/png");
      }
    }
	}


    }
    break;        
        case "mouseup":  if (isScribble == 2) { pmore=' pm '; isScribble=1; } break;
        default: return;
    }
    
    //}

}


function toptouchHandler(event) // thanks to http://stackoverflow.com/questions/1517924/javascript-mapping-touch-events-to-mouse-events
{
    var touches = event.changedTouches,
        first = touches[0],
        type = "";
    //if (event.targetTouches.length == 1) {

    switch(event.type)
    {
        case "touchstart": type="mousedown"; break;
        case "touchmove":  type="mousemove"; break;        
        case "touchend":   type="mouseup"; break;
        default: return;
    }

             //initMouseEvent(type, canBubble, cancelable, view, clickCount, 
    //           screenX, screenY, clientX, clientY, ctrlKey, 
    //           altKey, shiftKey, metaKey, button, relatedTarget);

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
                              first.screenX, first.screenY, 
                              first.clientX, first.clientY, false, 
                              false, false, false, 0/*left*/, null);

    first.target.dispatchEvent(simulatedEvent);
    
    event.preventDefault();
    event.stopPropagation();
    
    switch(type)
    {
        case "mousedown": 
       if (topin) {
         topin.value='- -' + isScribble + ',' + lastx + ',' + lasty + ',' + x + ',' + y;
       }
       if (isScribble == 1) { isScribble=2;
       if (event.pageX || event.pageY) {
        ppx=event.pageX - elemLeft;
        ppy=event.pageY - elemTop;
       } else {
        ppx=event.clientX - elemLeft;
        ppy=event.clientY - elemTop;
       }



       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;
       }
       }
       //parent.document.title+=' here';
    
    
    if (parent.document.getElementById('dcm')) {
    if (parent.document.getElementById('dcm').value != ' ') {
    
    
    if (topin) {
    if (topin.value == '' || (topin.value + ',').indexOf('- -1,0,0,0,0,') == 0 || (topin.value.indexOf('- -') == 0 && topin.value.indexOf(',0,0,0,0') == -1)) {
      if (topin.value == '') {
        if (eval(jsclickno % 2) == 0) {  // lower left
      jsrectbits[eval(jsclickno % 2)] = x;
      jsrectbits[eval(jsclickno % 2) + 1] = y;
        if (1 == 2) parent.document.title+=' oNclicK at x,y=' + x + ',' + y + ' ' + topin.value;
        if (parent.document.getElementById('dcm')) {
        if (parent.document.getElementById('dcm').value.indexOf('Text') == 0) {
    jsclickno = jsclickno + 1;
      jsrectbits[eval(jsclickno % 2) * 2] = x;
      jsrectbits[eval(jsclickno % 2) * 2 + 1] = y;
        }
        }
        } else {  // upper right
      jsrectbits[eval(jsclickno % 2) * 2] = x;
      jsrectbits[eval(jsclickno % 2) * 2 + 1] = y;
        if (1 == 2) parent.document.title+=' oNClicK at x,y=' + x + ',' + y + ' ' + topin.value;
        shapedraw();
        }
        topin.value = '';
      } else {
        if (eval(jsclickno % 2) != 0) {  // upper right
      jsrectbits[eval(jsclickno % 2) * 2] = x;
      jsrectbits[eval(jsclickno % 2) * 2 + 1] = y;
        if (1 == 2) parent.document.title=' oNClick at x,y=' + x + ',' + y + ' ' + topin.value;
        shapedraw();
        } else {   // lower left
      jsrectbits[eval(jsclickno % 2)] = x;
      jsrectbits[eval(jsclickno % 2) + 1] = y;
        if (1 == 2) parent.document.title=' oNclick at x,y=' + x + ',' + y + ' ' + topin.value;
        if (parent.document.getElementById('dcm')) {
        if (parent.document.getElementById('dcm').value.indexOf('Text') == 0) {
    jsclickno = jsclickno + 1;
      jsrectbits[eval(jsclickno % 2) * 2] = x;
      jsrectbits[eval(jsclickno % 2) * 2 + 1] = y;
        }
        }
        }
        topin.value = '- -';
      }
    jsclickno = jsclickno + 1;
    } else {
      if (topin.value.indexOf(',0,0,0,0') != -1) {
      //parent.document.title=topin.value;
      topin.value = '- -';
      } //else {
      //parent.document.title=topin.value;
      //}
    }
    }

    }
    }

        lastx=0;  // new to scribble
        lasty=0;
        x=0;
        y=0;
 } 
 break;
        case "mousemove":        
       if (topin) {
         topin.value='---';
       }
       if (isScribble == 2) {

       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;
       }
       }
       
       
       
    
    if (x != lastx || y != lasty) {
      //document.getElementById('divannotation').style.display='block';
      //document.getElementById('myisubject').style.display = 'inline';
      //document.getElementById('myiemail').style.display = 'inline';
    //context.strokeStyle=document.getElementById('mycolour').value;
    topcontext.beginPath();
    topcontext.moveTo(x,y);
    topcontext.lineTo(lastx,lasty);
       if (topin) {
         topin.value='----';
       }
      if (parent.document.getElementById('colcf')) {
        colcf=parent.document.getElementById('colcf').value;
      }
    topcontext.strokeStyle = colcf.split(' ')[eval(-1 + colcf.split(' ').length)];
    topcontext.stroke();
	}


    }
    break;        
        case "mouseup":         
       
    if (isScribble == 2) { 
    setTimeout(topinoff,300);
    pmore=' pm '; 
    isScribble=1; 
    } 
    break;
        default: return;
    }
    
    //}

}


function sendtheemail() {
  if (document.getElementById('myform')) {
    if (document.getElementById('myform').innerHTML.indexOf('email' + 'to') == -1) {
      document.getElementById('myform').enctype='application/x-www-urlencoded';
      document.getElementById('myform').innerHTML+='<input type="hidden" value="' + parent.document.getElementById('jsemail').value + '" title="Email to" id="emailto" name="emailto"></input>';
      document.getElementById('myform').innerHTML+='<input type="hidden" value="' + topelem.toDataURL('image/png') + '" title="Content" id="contentto" name="contentto"></input>';
      document.getElementById('mysbut').click();
    }
  }
}

function regularly() {
  if (parent.document.getElementById('dcm')) {
    if (parent.document.getElementById('dcm').value =='im') imageask('im');
  }
  if (parent.document.getElementById('jsemail') && parent.document.getElementById('jsemailb')) {
    if (parent.document.getElementById('jsemail').value.indexOf('@') > 0) {
      if (parent.document.getElementById('jsemail').value.indexOf(' ') != -1) {
        parent.document.getElementById('jsemail').value=parent.document.getElementById('jsemail').value.replace(/\ /g,'');
        parent.document.getElementById('jsemailb').style.display='none';
        sendtheemail();
      } else {
        parent.document.getElementById('jsemailb').style.display='inline';
      }
    }
  }
  if (parent.document.getElementById('myta')) {
    if (parent.document.getElementById('myta').value != '') {
     if (toplastta != parent.document.getElementById('myta').value) {
      var starth=20, izero=0, fstarth=20, jzero=0;
      //topcontext.clearRect(0, 0, eval(topwidth.replace('px','')), eval(topvsheightoff));
      if (parent.document.getElementById('jscf')) {
        jscf=parent.document.getElementById('jscf').value;
        if (jscf.indexOf('px') != -1) {
          eighteen=(" " + jscf).split('px')[0].trim().split(' ')[eval(-1 + (" " + jscf).split('px')[0].trim().split(' ').length)];
        }
      }
      if (parent.document.getElementById('colcf')) {
        colcf=parent.document.getElementById('colcf').value;
      }
      topcontext.font = jscf;
      topcontext.strokeStyle = colcf.split(' ')[eval(-1 + colcf.split(' ').length)];
      topcontext.fillStyle = colcf.split(' ')[eval(-1 + colcf.split(' ').length)];
      lines=parent.document.getElementById('myta').value.split(String.fromCharCode(10));
      var istart=0, iend=0;
      if (parent.document.getElementById('dcm')) {
         if (parent.document.getElementById('dcm').value.indexOf('Text') == 0) {
           iend=1;
         }
      }
      for (var ii=istart; ii<=iend; ii++) {
      for (var ilines=0; ilines<lines.length; ilines++) {
        //topcontext.clearRect(0, 0, eval(topwidth.replace('px','')), eval(topvsheightoff));
        if (prevlines.length > ilines) {
        if (prevlines[ilines] != lines[ilines]) {
        izero=jzero;
        if (jzero == 0 && prevlines[ilines] != '' && lines[ilines] != '' && lines[ilines].indexOf(prevlines[ilines]) == 0 && lastjscf != jscf) {
          izero=eval(eval('' + eighteen) / 2.5) * eval(prevlines[ilines].length);
          //alert(eval(fstarth + 0) + ' at top vs bottom at ' + eval(starth + 20) + ' and left at ' + izero + ' for width ' + eval(eval(topwidth.replace('px','')) - izero));
          if (ii == istart) topcontext.clearRect(izero, Math.max(0,eval(fstarth - 15) / 1), eval(eval(topwidth.replace('px','')) - izero), eval(starth * 0 + 20) / 1);
          if (ii == iend) topcontext.strokeText(lines[ilines].substring(prevlines[ilines].length),eval(eval('' + izero) + 5),starth);
        } else {
          if (ii == istart) topcontext.clearRect(izero, Math.max(0,eval(fstarth - 15)), eval(eval(topwidth.replace('px','')) - izero), eval(starth * 0 + 20));
          if (ii == iend) topcontext.strokeText(lines[ilines],eval(eval('' + izero) + 5),starth);
        }
        }
        } else {
        if (ii == istart) topcontext.clearRect(0, Math.max(0,eval(fstarth - 15)), eval(topwidth.replace('px','')), eval(starth * 0 + 20));
        if (ii == iend) topcontext.strokeText(lines[ilines],eval(eval('' + izero) + 5),starth);
        }
        starth+=20;
        fstarth=starth;
        if (ii == iend) prevlines[ilines]=lines[ilines];
      }
      if (parent.document.getElementById('dcm')) {
         if (parent.document.getElementById('dcm').value.indexOf('Text') == 0) {
           if (eval(ppx) > 0 && eval(x) > 0) {
           izero=x;
           } else {
           izero=ppx;
           }
           jzero=izero;
           if (eval(ppy) > 0 && eval(y) > 0) {
           fstarth=eval(y + 15);
           } else {
           fstarth=eval(ppy + 15);
           }
           starth=fstarth;
           //alert(izero + "," + fstarth);
        if (isTouch || isiPad) { 
          setTimeout(muchlater,10000);
        }
         }
      }
      }
      toplastta=parent.document.getElementById('myta').value;
      lastjscf=jscf;
     }
    }
  }
  if (savenow != 0) {
    if (savenow != lastsavenow) {
     if (document.getElementById('showi')) {
       if (document.getElementById('animage')) {
        document.getElementById('animage').src = elem.toDataURL("image/png");
       }
       document.getElementById('showi').style.display='inline';
     }
    }
  }
  setTimeout(regularly,1000);
}  

function canvas_events() {
    //alert(1);
    if (parent.document) {
    //alert(11);
      if (document) {
    //alert(111);
        if (parent.document != document) {   // we are being supervised above another application wanting to access a signature
    //alert(1111);
          if (parent.document.getElementById('topcanvas') && parent.document.getElementById('topiframe')) {
            //alert('yes');
            topelem=parent.document.getElementById('topcanvas');
            topielem=parent.document.getElementById('topiframe');
            if (1 == 1) {
            if (parent.document.getElementById('inthemiddleofsomething') == null) {
              var honehuhs=parent.document.getElementsByTagName('h1');
              if (honehuhs.length > 0) {
                honehuhs[0].innerHTML+="<input id='inthemiddleofsomething' value='' type='hidden'></input>";
              }
            
            } //else {
              //alert(90);
            //}
            }
            if (parent.document.getElementById('inthemiddleofsomething')) {
            topin=parent.document.getElementById('inthemiddleofsomething');
            } //else {
            //alert(98);
            //}
            topcontext = topelem.getContext("2d");
            topwidth=('' + topelem.width).replace('px','');
            topheight=('' + topelem.height).replace('px','');
            //alert('yes again');


    if (topelem && topin && 1 == 1) {   // onclick discrete clicks section
    // Add event listener for `click` events.
    topelem.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;
       }
       }
       //parent.document.title+=' here';
    
    if (topin) {
    if (topin.value == '' || (topin.value + ',').indexOf('- -1,0,0,0,0,') == 0 || (topin.value.indexOf('- -') == 0 && topin.value.indexOf(',0,0,0,0') == -1)) {
      if (topin.value == '') {
        if (eval(jsclickno % 2) == 0) {  // lower left
      jsrectbits[eval(jsclickno % 2)] = x;
      jsrectbits[eval(jsclickno % 2) + 1] = y;
        if (1 == 2) parent.document.title+=' oNclicK at x,y=' + x + ',' + y + ' ' + topin.value;
        if (parent.document.getElementById('dcm')) {
        if (parent.document.getElementById('dcm').value.indexOf('Text') == 0) {
    jsclickno = jsclickno + 1;
      jsrectbits[eval(jsclickno % 2) * 2] = x;
      jsrectbits[eval(jsclickno % 2) * 2 + 1] = y;
        }
        }
        } else {  // upper right
      jsrectbits[eval(jsclickno % 2) * 2] = x;
      jsrectbits[eval(jsclickno % 2) * 2 + 1] = y;
        if (1 == 2) parent.document.title+=' oNClicK at x,y=' + x + ',' + y + ' ' + topin.value;
        shapedraw();
        }
        topin.value = '';
      } else {
        if (eval(jsclickno % 2) != 0) {  // upper right
      jsrectbits[eval(jsclickno % 2) * 2] = x;
      jsrectbits[eval(jsclickno % 2) * 2 + 1] = y;
        if (1 == 2) parent.document.title=' oNClick at x,y=' + x + ',' + y + ' ' + topin.value;
        shapedraw();
        } else {   // lower left
      jsrectbits[eval(jsclickno % 2)] = x;
      jsrectbits[eval(jsclickno % 2) + 1] = y;
        if (1 == 2) parent.document.title=' oNclick at x,y=' + x + ',' + y + ' ' + topin.value;
        if (parent.document.getElementById('dcm')) {
        if (parent.document.getElementById('dcm').value.indexOf('Text') == 0) {
    jsclickno = jsclickno + 1;
      jsrectbits[eval(jsclickno % 2) * 2] = x;
      jsrectbits[eval(jsclickno % 2) * 2 + 1] = y;
        }
        }
        }
        topin.value = '- -';
      }
    jsclickno = jsclickno + 1;
    } else {
      if (topin.value.indexOf(',0,0,0,0') != -1) {
      //parent.document.title=topin.value;
      topin.value = '- -';
      } //else {
      //parent.document.title=topin.value;
      //}
    }
    }

    });
    }





           // }
          }
        }
      }
    }
    
    ssj_cookieVal(firstcall);
    firstcall=false;
    if (sscoords == '' && document.getElementById('longsignature')) {
      sscoords=document.getElementById('longsignature').innerHTML.replace('"','').replace('"','');
      document.getElementById('longsignature').innerHTML='';
    }
    
    regularly();
    elem = document.getElementById('canvaselement');
    context = elem.getContext("2d");
    
    if (topfirst) {
    topfirst=false;
    if (topelem) {
            topvswidth=('' + elem.width).replace('px','');
            topvsheight=('' + elem.height).replace('px','');
            if (eval(topheight) >= eval(topvsheight) && eval(topwidth) >= eval(topvswidth)) {
             topvswidthoff=0;
             topvsheightoff=eval(eval(topheight) - eval(topvsheight));
             if (document.getElementById('rest')) {
               document.getElementById('rest').style.display='none';
             }
            //alert('yes yes');
            } else {
            //alert(topvswidth + ' no ' + topwidth + ' ' + topvsheight + ' no ' + topheight);
             topelem=null;
             topielem=null;
             topcontext=null;
             topwidth=0;
             topheight=0;
             topvswidth=0;
             topvsheight=0;
             topvswidthoff=0;
             topvsheightoff=0;
            }
    }
    }
    
    if (sscoords != '') {
       var asscoords=sscoords.split(',');
       wassscoords=sscoords;
       sscoords = '';
       sscoordsdelim='';
       context.beginPath();
       context.moveTo(Math.abs(eval(asscoords[0])),Math.abs(eval(asscoords[1])));
       if (topelem) {
        topcontext.beginPath();
        topcontext.moveTo(Math.abs(eval(asscoords[0]) + eval(topvswidthoff)),Math.abs(eval(asscoords[1]) + eval(topvsheightoff)));
       }
       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)])));
          if (topelem) {
           topcontext.beginPath();
           topcontext.moveTo(Math.abs(eval(asscoords[iss]) + eval(topvswidthoff)),Math.abs(eval(asscoords[eval(1 + iss)]) + eval(topvsheightoff)));
          }
         } else {
          context.lineTo(Math.abs(eval(asscoords[iss])),Math.abs(eval(asscoords[eval(1 + iss)])));
          context.stroke();
          if (topelem) {
           topcontext.lineTo(Math.abs(eval(asscoords[iss]) + eval(topvswidthoff)),Math.abs(eval(asscoords[eval(1 + iss)]) + eval(topvsheightoff)));
       //if (topin) {
       //  topin.value='------';
       //}
      if (parent.document.getElementById('colcf')) {
        colcf=parent.document.getElementById('colcf').value;
      }
           topcontext.strokeStyle = precolcf.split(' ')[eval(-1 + colcf.split(' ').length)];
           topcontext.stroke();
           toplthere=true;
          }
         }
       }
       if (document.getElementById('myh4')) document.getElementById('myh4').innerHTML='You have 9 seconds to Two finger gesture or Right click Copy (or Save Image as...) Canvas signature.';
       if (document.getElementById('showi')) {
       if (document.getElementById('animage')) {
        document.getElementById('animage').src = elem.toDataURL("image/png");
       }
       document.getElementById('showi').style.display='inline';
       }
       setTimeout(times_up, 9000);
    }
    
    document.body.addEventListener('keyup', function(event) {
       if (isScribble == 2 || isScribble == 1) {
        isScribble=0;
       }
    });
    
    
    

    if (isTouch || isiPad) { 
    elem.addEventListener("touchstart", touchHandler, true);
    elem.addEventListener("touchmove", touchHandler, true);
    elem.addEventListener("touchend", touchHandler, true);
    elem.addEventListener("touchcancel", touchHandler, true);  
    
    if (topelem) {
    topelem.addEventListener("touchstart", toptouchHandler, true);
    topelem.addEventListener("touchmove", toptouchHandler, true);
    topelem.addEventListener("touchend", toptouchHandler, true);
    topelem.addEventListener("touchcancel", toptouchHandler, true);  
    }  

    //elem.addEventListener('touchstart', function(event) {
    //   if (isScribble == 1) {
    //    isScribble=2;
    //   }
    //});

	} else {
    if (topelem) {
    topelem.addEventListener('mouseup', function(event) {
       if (isScribble == 2) {
       setTimeout(topinoff,300);
         pmore=' pxm '; isScribble=1;
       }
    });
    
    topelem.addEventListener('touchend', function(event) {
       if (isScribble == 2) {
        pmore=' pxzm '; 
        isScribble=1;
       }
    });

    topelem.addEventListener('touchstart', function(event) {
       if (isScribble == 1) {
        pmore=' pxqm '; 
        isScribble=2;
       }
    });


    topelem.addEventListener('mousedown', function(event) {
       if (topin) {
         topin.value='- -' + isScribble + ',' + lastx + ',' + lasty + ',' + x + ',' + y;
       }
       if (isScribble == 1) {
        pmore=' pxam '; 
        isScribble=2;
       if (event.pageX || event.pageY) {
        ppx=event.pageX - elemLeft;
        ppy=event.pageY - elemTop;
       } else {
        ppx=event.clientX - elemLeft;
        ppy=event.clientY - elemTop;
       }
        lastx=0;  // new to scribble
        lasty=0;
        x=0;
        y=0;
       }
    });
        
    topelem.addEventListener('mousemove', function(event) {
       //if (topin) {
       //  topin.value='-------';
       //}
       if (isScribble == 2) {

       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;
       }
       if (ppx >= 0 && ppy >= 0) {
       lastx=ppx;
       lasty=ppy;
       ppx=-1;
       ppy=-1;
       } else {
       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;
       }
       }
           
    if (x != lastx || y != lasty) {
      //document.getElementById('divannotation').style.display='block';
      //document.getElementById('myisubject').style.display = 'inline';
      //document.getElementById('myiemail').style.display = 'inline';
    //context.strokeStyle=document.getElementById('mycolour').value;
    topcontext.beginPath();
    topcontext.moveTo(x,y);
    topcontext.lineTo(lastx,lasty);
       if (topin) {
         if (topin.value != '') topin.value+=' --------';
       }
      if (parent.document.getElementById('colcf')) {
        colcf=parent.document.getElementById('colcf').value;
      }
    topcontext.strokeStyle = colcf.split(' ')[eval(-1 + colcf.split(' ').length)];
    topcontext.stroke();
    //document.title+=pmore + ' here';
	}


    }

    });
    }

    elem.addEventListener('mouseup', function(event) {
       if (isScribble == 2) {
         pmore=' pxm '; isScribble=1;
       }
    });
    
    elem.addEventListener('touchend', function(event) {
       if (isScribble == 2) {
        pmore=' pxzm '; 
        isScribble=1;
       }
    });

    elem.addEventListener('touchstart', function(event) {
       if (isScribble == 1) {
        pmore=' pxqm '; 
        isScribble=2;
       }
    });


    elem.addEventListener('mousedown', function(event) {
       if (isScribble == 1) {
        pmore=' pxam '; 
        isScribble=2;
       if (event.pageX || event.pageY) {
        ppx=event.pageX - elemLeft;
        ppy=event.pageY - elemTop;
       } else {
        ppx=event.clientX - elemLeft;
        ppy=event.clientY - elemTop;
       }
        lastx=0;  // new to scribble
        lasty=0;
        x=0;
        y=0;
       }
    });
        
    elem.addEventListener('mousemove', function(event) {
       if (isScribble == 2) {

       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;
       }
       if (ppx >= 0 && ppy >= 0) {
       lastx=ppx;
       lasty=ppy;
       ppx=-1;
       ppy=-1;
       } else {
       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;
       }
       }
           
    if (x != lastx || y != lasty) {
      //document.getElementById('divannotation').style.display='block';
      //document.getElementById('myisubject').style.display = 'inline';
      //document.getElementById('myiemail').style.display = 'inline';
    //context.strokeStyle=document.getElementById('mycolour').value;
    context.beginPath();
    context.moveTo(x,y);
    context.lineTo(lastx,lasty);
    context.stroke();
    if (topelem) {
        topcontext.beginPath();
        topcontext.moveTo((eval(x) + eval(topvswidthoff)),(eval(y) + eval(topvsheightoff)));
        topcontext.lineTo((eval(lastx) + eval(topvswidthoff)),(eval(lasty) + eval(topvsheightoff)));
       if (topin) {
         topin.value='---------';
       }
      if (parent.document.getElementById('colcf')) {
        colcf=parent.document.getElementById('colcf').value;
      }
        topcontext.strokeStyle = colcf.split(' ')[eval(-1 + colcf.split(' ').length)];
        topcontext.stroke();
        toplthere=true;
    }
    if (sscoords == '') sscoordsdelim='';
    if (('*' + sscoords + '*').indexOf(lastx + ',' + lasty + '*') == -1) {
      if (sscoords.indexOf(',') != -1) savenow=sscoords.length;
      sscoords+=sscordsdelim + '-' + lastx;
      sscordsdelim=',';
      sscoords+=sscordsdelim + lasty;
      if (savenow != 0) {
        lastsavenow=savenow;
		savenow=sscoords.length;
      }
    }
    if (('*' + sscoords + '*').indexOf(x + ',' + y + '*') == -1) {
      if (sscoords.indexOf(',') != -1) savenow=sscoords.length;
      sscoords+=sscordsdelim + x;
      sscordsdelim=',';
      sscoords+=sscordsdelim + y;
      if (savenow != 0) {
        lastsavenow=savenow;
		savenow=sscoords.length;
      }
    }
    wassscoords='';
    if (document.getElementById('showit')) {
      document.getElementById('showit').style.display='inline';
      if (1 == 2 && document.getElementById('animage')) {
        document.getElementById('animage').src = elem.toDataURL("image/png");
      }
    }
    //document.title+=pmore + ' here';
	}


    }

    });
    }
    
    if (topielem && !toplthere) {  // no signature, so allow for one to be created
      //alert('a visible')
      showornot();
    } else if (topielem) { // a signature, so hide iframe
      //alert('a invisible');
      showornot();
    }
   
}

function showornot() {
    if (topielem && !toplthere) {  // no signature, so allow for one to be created
      //alert('visible');
      topielem.style.display='block';
      topielem.style.zIndex='9';
      topielem.style.position='absolute';
      topielem.style.left=eval(topvswidthoff) + 'px';
      topielem.style.top=eval(topvsheightoff) + 'px';
      topielem.style.width=eval(topvswidth) + 'px';
      topielem.style.height=eval(topvsheight) + 'px';
      //alert('z visible');
      if (parent.document.getElementById('toptd')) {
        if (parent.document.getElementById('toptd').innerHTML.indexOf('button') == -1) {
          parent.document.getElementById('toptd').innerHTML+="<br><div id='dmycbox'><input id=mycbox onclick=\"if (this.value.indexOf('Show ') == 0) { document.getElementById('topiframe').style.display='block'; this.value=this.value.replace('Show ','Hide '); } else { document.getElementById('topiframe').style.display='none'; this.value=this.value.replace('Hide ','Show ');  }\" type=button value='Hide Signature Panel Creator'></input><br><br>Email To (optional): <input id='jsemail' type='text' onblur='jsemail=this.value;' value='" + jsemail + "'></input>&nbsp;<input id='jsemailb' style='display:none;' type='button' onclick=\"document.getElementById('jsemail').value+=' ';\" value='Email'></input><br><br><select id='dcm' title='Discrete click/touch mode'><option value=>Discrete Click/Touch Mode [Rectangle (outline)]</option><option value='lo'>Line</option><option value='im'>Image (sized via two clicks)</option><option value='ro'>Rectangle (outline)</option><option value='rf'>Rectangle (filled)</option><option value='co'>Circle (outline via centre then point on circle)</option><option value='cf'>Circle (filled via centre then point on circle)</option><option value='Text'>Text (of textarea) Top Left</option><option value=' '>Discrete Click/Touch Mode (no action)</option></select><br><br>Canvas Font: <input id='jscf' type='text' onblur='jscf=this.value;' value='" + jscf + "'></input> <input id='colcf' type='text' style='color:blue;' onblur=\"colcf=this.value; this.style.color=this.value.split(' ')[eval(-1 + this.value.split(' ').length)];\" value='" + colcf + "'></input><br><br><textarea title='What is typed here goes over to canvas to left' style='border:8px dashed yellow;' id='myta' rows=80 cols=60 value=''></textarea></div>";
        } else {
          parent.document.getElementById('dmycbox').innerHTML="<input style='position: absolute; top:200px; left:860px; float:right;' id=mycbox onclick=\"if (this.value.indexOf('Show ') == 0) { document.getElementById('topiframe').style.display='block'; this.value=this.value.replace('Show ','Hide '); } else { document.getElementById('topiframe').style.display='none'; this.value=this.value.replace('Hide ','Show ');  }\" type=button value='Hide Signature Panel Creator'></input>";
        }
        if (isTouch || isiPad) { 
          parent.document.getElementById('dcm').value=' ';
        }
      }
    } else if (topielem) { // a signature, so hide iframe
      //alert('invisible');
      topielem.style.display='none';
      topielem.style.zIndex='9';
      topielem.style.position='absolute';
      topielem.style.left=eval(topvswidthoff) + 'px';
      topielem.style.top=eval(topvsheightoff) + 'px';
      topielem.style.width=eval(topvswidth) + 'px';
      topielem.style.height=eval(topvsheight) + 'px';
      if (parent.document.getElementById('toptd')) {
        if (parent.document.getElementById('toptd').innerHTML.indexOf('button') == -1) {
          parent.document.getElementById('toptd').innerHTML+="<br><div id='dmycbox'><input id=mycbox onclick=\"if (this.value.indexOf('Show ') == 0) { document.getElementById('topiframe').style.display='block'; this.value=this.value.replace('Show ','Hide '); } else { document.getElementById('topiframe').style.display='none'; this.value=this.value.replace('Hide ','Show ');  }\" type=button value='Show Signature Panel Creator'></input><br><br>Email To (optional): <input id='jsemail' type='text' onblur='jsemail=this.value;' value='" + jsemail + "'></input>&nbsp;<input id='jsemailb' style='display:none;' type='button' onclick=\"document.getElementById('jsemail').value+=' ';\" value='Email'></input><br><br><select id='dcm' title='Discrete click/touch mode'><option value=>Discrete Click/Touch Mode [Rectangle (outline)]</option><option value='lo'>Line</option><option value='im'>Image (sized via two clicks)</option><option value='ro'>Rectangle (outline)</option><option value='rf'>Rectangle (filled)</option><option value='co'>Circle (outline via centre then point on circle)</option><option value='cf'>Circle (filled via centre then point on circle)</option><option value='Text'>Text (of textarea) Top Left</option><option value=' '>Discrete Click/Touch Mode (no action)</option></select><br><br>Canvas Font: <input id='jscf' type='text' onblur='jscf=this.value;' value='" + jscf + "'></input> <input id='colcf' type='text' style='color:blue;' onblur=\"colcf=this.value; this.style.color=this.value.split(' ')[eval(-1 + this.value.split(' ').length)];\" value='" + colcf + "'></input><br><br><textarea title='What is typed here goes over to canvas to left' style='border:8px dashed yellow;' id='myta' rows=80 cols=60 value=''></textarea></div>";
        } else {
          parent.document.getElementById('dmycbox').innerHTML="<input style='position: absolute; top:200px; left:860px; float: right;' id=mycbox onclick=\"if (this.value.indexOf('Show ') == 0) { document.getElementById('topiframe').style.display='block'; this.value=this.value.replace('Show ','Hide '); } else { document.getElementById('topiframe').style.display='none'; this.value=this.value.replace('Hide ','Show ');  }\" type=button value='Show Signature Panel Creator'></input>";
        }
        if (isTouch || isiPad) { 
          parent.document.getElementById('dcm').value=' ';
        }
      }
    }
}

setTimeout(canvas_events, 2000);