// img_svg.js
// RJM Programming
// January, 2022
// Change an img via user_of_signature_signature.htm canvas

 var eijimges=document.getElementsByTagName('img'); 
 var eijimg;
 var eijdurl='';
 var eijpre='';
 var eijprechash='', eijchash='';
 var eijuoss=null;
 var eijpasseddu='', eijorigpasseddu='';
 var eijtextcss=location.search.split('textcss=')[1] ? decodeURIComponent(location.search.split('textcss=')[1].split('&')[0]) : '';
 var eijimagecss=location.search.split('imagecss=')[1] ? decodeURIComponent(location.search.split('imagecss=')[1].split('&')[0]) : '';
 var eijcss=location.search.split('css=')[1] ? decodeURIComponent(location.search.split('css=')[1].split('&')[0]) : '';
 var xcanvas;
 var xctx;
 var xbase_image;
 
 function preeifsetup() {
   eijimges=document.getElementsByTagName('img'); 
   if (eval('' + eijimges.length) > 0) {
     imageToUri(eijimges[0].src);
     //alert(eijimges[0].src);
   } //else {
     //alert('oops');
   //}
 }
 
 function eijsetup() {
 eijimges=document.getElementsByTagName('img'); 
 if (eval('' + eijimges.length) > 0) {
 eijimg = document.querySelector('img');
 
 if (!document.getElementById('gstyle')) {
   var odivio=document.createElement('div');
   odivio.id='gstyle';
   odivio.innerHTML='';
   document.getElementsByTagName('body')[0].appendChild(odivio);
 }

  if (eijcss != '') {
  var eijgstyleis='';
  if (eijcss == eijtextcss) {
    eijgstyleis=' <style> </style> ';
    eijgstyleis=eijgstyleis.replace('</style', ' img, canvas { ' + eijtextcss + ' } </style');
    if (eijimagecss != '') { eijgstyleis=eijgstyleis.replace(' } </style', ' ' + eijimagecss + ' } </style');   }
  } else if (eijcss == eijimagecss) {
    eijgstyleis=' <style> </style> ';
    eijgstyleis=eijgstyleis.replace('</style', ' img, canvas { ' + eijimagecss + ' } </style');
    if (eijtextcss != '') { eijgstyleis=eijgstyleis.replace(' } </style', ' ' + eijtextcss + ' } </style');   }
  } else {
    eijgstyleis=' <style> </style> ';
    eijgstyleis=eijgstyleis.replace('</style', ' img, canvas { ' + eijcss + ' } </style');
    if (eijtextcss != '') { eijgstyleis=eijgstyleis.replace(' } </style', ' ' + eijtextcss + ' } </style');   }
    if (eijimagecss != '') { eijgstyleis=eijgstyleis.replace(' } </style', ' ' + eijimagecss + ' } </style');   }
  }
  if (eijgstyleis != '') { document.getElementById('gstyle').innerHTML=eijgstyleis;   }
  }

 if (document.getElementById('gstyle')) {
   if (document.getElementById('gstyle').innerHTML.indexOf('canvas {') != -1) {
     eijprechash=document.getElementById('gstyle').innerHTML.split('canvas {')[1].split('}')[0];
   }
 }
 if (eijimges[0].outerHTML.indexOf(' style="') != -1) {
   eijchash=eijpre + '#' + encodeURIComponent(eijprechash + eijimges[0].outerHTML.split(' style="')[1].split('"')[0]);
 }
 if (('' + eijimges[0].title) != 'Click me for canvas annotation editing (discrete click shapes and freeform scribbling) functionality in new window.') {
  console.log('eijimges[0].outerHTML');
  eijimges[0].title='Click me for canvas annotation editing (discrete click shapes and freeform scribbling) functionality in new window.';
  if (eijimges[0].outerHTML.indexOf(' onclick=') == -1) {
  console.log('onclick');
  eijimges[0].onclick=function() { if (eijuoss) { if (eijuoss.closed) { eijuoss=null; }   }   if (!eijuoss) { setTimeout(eijmonitoru,6000); if (eijorigpasseddu == '' && 1 == 6) { imageToUri(eijimges[0].src); }  eijpasseddu=eijorigpasseddu; eijuoss=window.open('/HTMLCSS/user_of_signature_signature.htm?rand=' + Math.floor(Math.random() * 198765432) + '&elemode=img' + eijchash,'_blank','top=20,left=20,width=' + eval(0.9 * eval('' + screen.width)) + ',height=' + eval(0.8 * eval('' + screen.height)) + ''); } else { eijuoss.focus();  }  };
  } else if (eijimges[0].outerHTML.indexOf('down=') == -1) {
  console.log('onmousedown');
  eijimges[0].onmousedown=function() {  if (eijuoss) { if (eijuoss.closed) { eijuoss=null; }   } if (!eijuoss) { setTimeout(eijmonitoru,6000); if (eijorigpasseddu == '' && 1 == 6) { imageToUri(eijimges[0].src); }  eijpasseddu=eijorigpasseddu; eijuoss=window.open('/HTMLCSS/user_of_signature_signature.htm?rand=' + Math.floor(Math.random() * 198765432) + '&elemode=img' + eijchash,'_blank','top=20,left=20,width=' + eval(0.9 * eval('' + screen.width)) + ',height=' + eval(0.8 * eval('' + screen.height)) + ''); } else { eijuoss.focus();  }  };
  eijimges[0].ontouchdown=function() {  if (eijuoss) { if (eijuoss.closed) { eijuoss=null; }   } if (!eijuoss) { setTimeout(eijmonitoru,6000); if (eijorigpasseddu == '' && 1 == 6) { imageToUri(eijimges[0].src); }  eijpasseddu=eijorigpasseddu; eijuoss=window.open('/HTMLCSS/user_of_signature_signature.htm?rand=' + Math.floor(Math.random() * 198765432) + '&elemode=img' + eijchash,'_blank','top=20,left=20,width=' + eval(0.9 * eval('' + screen.width)) + ',height=' + eval(0.8 * eval('' + screen.height)) + ''); } else { eijuoss.focus();  }  };
  }
 }
 }
 }
 
 function imageToUri(url) { // thanks to https://stackoverflow.com/questions/25690641/img-url-to-dataurl-using-javascript
    xcanvas = document.createElement('canvas');
    xctx = xcanvas.getContext('2d');
    xbase_image = new Image();
    xbase_image.onload = function() {
        xcanvas.width = xbase_image.width;
        xcanvas.height = xbase_image.height;
        
        eijpre='&cancontw=' + xcanvas.width + '&canconth=' + xcanvas.height;

        xctx.drawImage(xbase_image, 0, 0);
    
        eijorigpasseddu=xcanvas.toDataURL('image/png');
        eijpasseddu=eijorigpasseddu;
        eijimges[0].src=eijorigpasseddu;
        //alert(eijorigpasseddu);
        //xcanvas.remove();
    };
    xbase_image.src = url;
    
 }

 function eijmonitoru() {
   if (eijuoss) { if (eijuoss.closed) { eijuoss=null; }   }  
   if (eijuoss) {
     if (eijuoss.document.getElementById('topcbutton')) {
     if (eijuoss.document.getElementById('topcbutton').innerHTML.indexOf(' ') != -1) {
       eijuoss.document.getElementById('topcbutton').innerHTML=eijuoss.document.getElementById('topcbutton').innerHTML.replace(' ','');
       window.focus();
     }
     }
    var eijthispdu=eijuoss.document.getElementById('topcanvas').toDataURL('image/png');
    if (eijpasseddu != eijthispdu) {
      if (document.getElementById('antiu')) {
      document.getElementById('antiu').style.display='inline-block';
      }
      eijpasseddu=eijthispdu;
  //var eijxnewimg=document.createElement('img');
  //eijxnewimg.onload = function() {
    // draw the image onto the canvas
    //eijimg.getContext('2d').drawImage(eijxnewimg, 0, 0);
    // draw the image onto the image
    //eijimg.src=eijxnewimg.src;
  //}
  //eijxnewimg.src = eijpasseddu;
  
    eijimges[0].src=eijthispdu;
  
    }
     setTimeout(eijmonitoru, 6000);
   }
 }
 
 function eijuossc() {
   if (eijuoss) { if (eijuoss.closed) { eijuoss=null; }   }  
   if (!eijuoss) { 
     setTimeout(eijmonitoru,6000); 
     eijorigpasseddu=eijimges[0].src; //toDataURL('image/png'); 
     eijpasseddu=eijorigpasseddu;
     //eijuoss=window.open('//www.rjmprogramming.com.au/HTMLCSS/user_of_signature_signature.htm' + eijchash,'_blank','top=20,left=20,width=' + eval(0.9 * eval('' + screen.width)) + ',height=' + eval(0.8 * eval('' + screen.height)) + ''); 
     eijuoss=window.open('/HTMLCSS/user_of_signature_signature.htm' + eijchash,'_blank','top=20,left=20,width=' + eval(0.9 * eval('' + screen.width)) + ',height=' + eval(0.8 * eval('' + screen.height)) + ''); 
   } else {
     eijuoss.focus();
   } 
 }
 
 function eijantiuossc() {
  if (eijuoss) { if (eijuoss.closed) { eijuoss=null; }   }  
  if (eijuoss) { 
  //var eijznewimg=document.createElement('img');
  //eijznewimg.onload = function() {
    // draw the image onto the canvas
    //eijimg.getContext('2d').drawImage(eijznewimg, 0, 0);
    //eijpasseddu=eijuoss.document.getElementById('topcanvas').toDataURL('image/png');
  //}
  //eijznewimg.src = eijorigpasseddu;
  
  eijimg.src=eijorigpasseddu;
  
  } 
 }

 setTimeout(preeifsetup, 3000);
 setTimeout(eijsetup, 8000);