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

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 (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() {
    
    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 (sscoords != '') {
       var asscoords=sscoords.split(',');
       wassscoords=sscoords;
       sscoords = '';
       sscoordsdelim='';
       context.beginPath();
       context.moveTo(Math.abs(eval(asscoords[0])),Math.abs(eval(asscoords[1])));
       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.lineTo(Math.abs(eval(asscoords[iss])),Math.abs(eval(asscoords[eval(1 + iss)])));
          context.stroke();
         }
       }
       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 (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';
	}


    }

    });
    }
}

setTimeout(canvas_events, 2000);