<?php
// encoding_decoding.php
// User experimentation with encoding and decoding systems
// RJM Programming
// July, 2021
$pfrom="The quick brown fox jumps over the lazy dog and tilde (~) followed closely behind, dragging along 0 Mostel!?";
$pto="";
$pvia="";
$blurb="Please choose encoding option(s) ...";
if (isset($_POST['from']) && isset($_POST['via'])) {
  $pfrom=str_replace('+',' ',urldecode($_POST['from']));
  $pvia=str_replace('+',' ',urldecode($_POST['via']));
  if (strpos(urldecode($_POST['via']), "base64_encode") !== false) {
    $pto=base64_encode($pfrom);
    $blurb=$pvia;
  } else if (strpos(urldecode($_POST['via']), "base64_decode") !== false) {    
    $pto=base64_decode($pfrom);
    $blurb=$pvia;
  } else if (strpos(urldecode($_POST['via']), "urlencode") !== false) {    
    $pto=urlencode($pfrom);
    $blurb=$pvia;
  } else if (strpos(urldecode($_POST['via']), "urldecode") !== false) {    
    $pto=urldecode($pfrom);
    $blurb=$pvia;
  }
  if (isset($_POST['ajax'])) {
    if ($pto != '') { 
      echo $pto; 
      exit;
    } else {
      echo '';
      exit;
    }
  }
}

echo "
<html>
<head>
<script type='text/javascript'>
  var multi=false;
  var interim='';
  var xhr=null;
  var newform=null;

  function showStuff(evt) {
  if (xhr != null) {
  if (xhr.readyState == 4) {
    if (xhr.status == 200) {
     interim=xhr.responseText;
    }
  }
  }
  }

  function ajaxit() {
   var dto='';
   if (document.getElementById('tvia').value.indexOf('btoa') == 0 && interim == '') {
      dto=btoa(document.getElementById('tfrom').value);
    } else if (document.getElementById('tvia').value.indexOf('atob') == 0 && interim == '') {
      try {
      dto=atob(document.getElementById('tfrom').value);
      } catch(ecvd) { dto=' ';  alert('You have some invalid characters for atob to handle.'); }
   } else if (document.getElementById('tvia').value.toUpperCase().indexOf('encodeURIComponent'.toUpperCase()) == 0 && interim == '') {
      dto=encodeURIComponent(document.getElementById('tfrom').value);
   } else if (document.getElementById('tvia').value.toUpperCase().indexOf('decodeURIComponent'.toUpperCase()) == 0 && interim == '') {
      dto=decodeURIComponent(document.getElementById('tfrom').value);
   } else if (document.getElementById('tvia').value.toUpperCase().indexOf('encodeURI'.toUpperCase()) == 0 && interim == '') {
      dto=encodeURI(document.getElementById('tfrom').value);
   } else if (document.getElementById('tvia').value.toUpperCase().indexOf('decodeURI'.toUpperCase()) == 0 && interim == '') {
      dto=decodeURI(document.getElementById('tfrom').value);
   } else if (document.getElementById('tvia').value.indexOf('btoa') == 0 && interim != '') {
      dto=btoa(interim);
    } else if (document.getElementById('tvia').value.indexOf('atob') == 0 && interim != '') {
      try {
      dto=atob(interim);
      } catch(ecvd) { dto=' ';  alert('You have some invalid characters for atob to handle.'); }
   } else if (document.getElementById('tvia').value.toUpperCase().indexOf('encodeURIComponent'.toUpperCase()) == 0 && interim != '') {
      dto=encodeURIComponent(interim);
   } else if (document.getElementById('tvia').value.toUpperCase().indexOf('decodeURIComponent'.toUpperCase()) == 0 && interim != '') {
      dto=decodeURIComponent(interim);
   } else if (document.getElementById('tvia').value.toUpperCase().indexOf('encodeURI'.toUpperCase()) == 0 && interim != '') {
      dto=encodeURI(interim);
   } else if (document.getElementById('tvia').value.toUpperCase().indexOf('decodeURI'.toUpperCase()) == 0 && interim != '') {
      dto=decodeURI(interim);
   }
   if (dto != '') {
   if (dto == ' ') {
   document.getElementById('topoption').innerHTML=document.getElementById('topoption').innerHTML.replace('atob(', '(');
   //alert(document.getElementById('topoption').innerHTML);
   } else {
   interim=dto;
   }
   } else {
   xhr=new XMLHttpRequest();
   newform=new FormData();
   if (interim != '') {
   newform.append('from', interim);
   } else {
   newform.append('from', document.getElementById('tfrom').value);
   }
   newform.append('via', document.getElementById('tvia').value);
   newform.append('ajax', 'y');
   xhr.open('post', './encoding_decoding.php', true);
   xhr.onreadystatechange = showStuff;
   xhr.send(newform);
   }
  }
  
  function consider(sio) {
   if (sio.value.trim() != '') {
    if (document.getElementById('topoption').innerHTML.indexOf(');') != -1) {
     document.getElementById('topoption').innerHTML=document.getElementById('topoption').innerHTML.replace(' = ', ' = ' + sio.value + '(').replace(');', '));');
     ajaxit();
     if (document.getElementById('sende').innerHTML == '') {
       document.getElementById('sende').innerHTML='<input style=background-color:orange; onclick=\"multi=true;\" id=xende name=complex value=\"' + document.getElementById('topoption').innerHTML + '\" type=submit></input>';
       document.getElementById('sviaextra').innerHTML='<input style=background-color:orange; onclick=\"multi=true; document.getElementById(' + \"'\" + 'xende' + \"'\" + ').click();\" title=\"Do all the options individually clicked\" style=display:inline-block; id=zende value=\"+\" type=button></input>';
     } else {
       document.getElementById('xende').value=document.getElementById('topoption').innerHTML;
     }
    } else {
     document.getElementById('topoption').innerHTML='[... To] = ' + sio.value + '([From ...]);';
     ajaxit();
    }
   }
  }
  
  function multistuff() {
   if (interim == '') {
    var trythis=document.getElementById('topoption').innerHTML.replace('[From ...]', '\"' + document.getElementById('tfrom').value + '\"').replace('[... To]', 'document.getElementById(' + \"'\" + 'tto' + \"'\" + ').value');
    eval(trythis);
    document.getElementById('tvia').value='';
    //alert('Am going to try ' + document.getElementById('topoption').innerHTML.replace('[From ...]', '\"' + document.getElementById('tfrom').value + '\"').replace('[... To]', 'document.getElementById(' + \"'\" + 'tto' + \"'\" + ').value'));
    document.getElementById('sende').innerHTML='';
    document.getElementById('sviaextra').innerHTML='';
    document.getElementById('topoption').innerHTML=document.getElementById('topoption').innerHTML.replace(');', ') ;');
    interim='';
   } else {
    document.getElementById('tto').value=interim;
    document.getElementById('tvia').value='';
    document.getElementById('sende').innerHTML='';
    document.getElementById('sviaextra').innerHTML='';
    document.getElementById('topoption').innerHTML=document.getElementById('topoption').innerHTML.replace(');', ') ;');
    interim='';
   }
   return false;
  }
  
  function maybeclient() {
    if (multi) { 
      multi=false;
      return multistuff(); 
    }
    document.getElementById('tvia').value=document.getElementById('tvia').value.toLowerCase().replace('uri','URI').replace('component','Component');
    if (document.getElementById('tvia').value == '') {
      return false;
    } else if (document.getElementById('tvia').value.indexOf('base64') == 0) {
      return true;
    } else if (document.getElementById('tvia').value.indexOf('url') == 0) {
      return true;
    } else if (document.getElementById('tvia').value.indexOf('atob') == 0) {
      try {
      document.getElementById('tto').value=atob(document.getElementById('tfrom').value);
      } catch(ecvd) {  
       alert('You have some invalid characters for atob to handle.'); 
      }
    } else if (document.getElementById('tvia').value.indexOf('btoa') == 0) {
      document.getElementById('tto').value=btoa(document.getElementById('tfrom').value);
    document.getElementById('sende').innerHTML='';
    document.getElementById('sviaextra').innerHTML='';
    document.getElementById('topoption').innerHTML=document.getElementById('topoption').innerHTML.replace(');', ') ;');
    interim='';
    } else if (document.getElementById('tvia').value.toUpperCase().indexOf('encodeURIComponent'.toUpperCase()) == 0) {
      document.getElementById('tto').value=encodeURIComponent(document.getElementById('tfrom').value);
    document.getElementById('sende').innerHTML='';
    document.getElementById('sviaextra').innerHTML='';
    document.getElementById('topoption').innerHTML=document.getElementById('topoption').innerHTML.replace(');', ') ;');
    interim='';
    } else if (document.getElementById('tvia').value.toUpperCase().indexOf('decodeURIComponent'.toUpperCase()) == 0) {
      document.getElementById('tto').value=decodeURIComponent(document.getElementById('tfrom').value);
    document.getElementById('sende').innerHTML='';
    document.getElementById('sviaextra').innerHTML='';
    document.getElementById('topoption').innerHTML=document.getElementById('topoption').innerHTML.replace(');', ') ;');
    interim='';
    } else if (document.getElementById('tvia').value.toUpperCase().indexOf('encodeURI'.toUpperCase()) == 0) {
      document.getElementById('tto').value=encodeURI(document.getElementById('tfrom').value);
    document.getElementById('sende').innerHTML='';
    document.getElementById('sviaextra').innerHTML='';
    document.getElementById('topoption').innerHTML=document.getElementById('topoption').innerHTML.replace(');', ') ;');
    interim='';
    } else if (document.getElementById('tvia').value.toUpperCase().indexOf('decodeURI'.toUpperCase()) == 0) {
      document.getElementById('tto').value=decodeURI(document.getElementById('tfrom').value);
    document.getElementById('sende').innerHTML='';
    document.getElementById('sviaextra').innerHTML='';
    document.getElementById('topoption').innerHTML=document.getElementById('topoption').innerHTML.replace(');', ') ;');
    interim='';
    }
    return false;
  }
</script>
</head>
<body>
<h1>User experimentation with encoding and decoding systems</h1>
<h3>RJM Programming - July, 2021</h3>
<form onsubmit='return maybeclient();' method=POST action=./encoding_decoding.php>
<table style=width:90%; border=60>
<tr><th>From ... </th><th> ... <input title='Please note multiple (ie. multi-layered) encodings are recognized if possible' style=background-color:yellow; type=submit value=via></input><span id=sviaextra></span> ... </th><th> ... To</th></tr>
<tr><td style=vertical-align:top;text-align:center;><textarea style='width:100%;background-color:rgb(240,240,240);' rows=15 name=from id=tfrom>" . $pfrom . "</textarea></td><td style=vertical-align:top;text-align:center;><select style=background-color:rgb(250,250,250); title='Please note multiple (ie. multi-layered) encodings are recognized if possible via individual option selections here in that order' size=11 name=via id=tvia onchange=consider(this);>
<option id=topoption value='" . strtoupper($pvia) . "'>" . $blurb . "</option>
<option value='base64_encode'>base64_encode</option>
<option value='base64_decode'>base64_decode</option>
<option value='btoa'>btoa</option>
<option value='atob'>atob</option>
<option value='urlencode'>urlencode</option>
<option value='urldecode'>urldecode</option>
<option value='encodeURIComponent'>encodeURIComponent</option>
<option value='decodeURIComponent'>decodeURIComponent</option>
<option value='encodeURI'>encodeURI</option>
<option value='decodeURI'>decodeURI</option>
</select></td><td style=vertical-align:top;text-align:center;><textarea readonly rows=15 style=width:100%; name=to id=tto>" . $pto . "</textarea></td></tr>
<tr><td colspan=3><input title='Please note multiple (ie. multi-layered) encodings are recognized if possible' style=background-color:yellow; id=ende value='Encode or Decode' type=submit></input><span id=sende></span></td></tr>
</table>
</body>
</html>";

?>