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

var 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 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 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 {
   //alert("length=" + thisg.length);
   //}
} 
 
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 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)));
        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 regularly() {
  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');
            topcontext = topelem.getContext("2d");
            topwidth=('' + topelem.width).replace('px','');
            topheight=('' + topelem.height).replace('px','');
            //alert('yes again');
          }
        }
      }
    }
    
    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)));
           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);    

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

	} else {

    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)));
        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('visible')
      showornot;
    } else if (topielem) { // a signature, so hide iframe
      //alert('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';
      if (parent.document.getElementById('toptd')) {
        if (parent.document.getElementById('toptd').innerHTML.indexOf('button') == -1) {
          parent.document.getElementById('toptd').innerHTML+="<br><div style='position: absolute; top:200px; left:860px; float:right;' id='dmycbox'><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></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>";
        }
      }
    } 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></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>";
        }
      }
    }
}

setTimeout(canvas_events, 2000);