<?php
  $drawi='';
  $restl="calc(50% - 600px)";
  $onehundred="100";
  $seventy="70";
  $yf="false";
  if (isset($_GET['width'])) {
    $onehundred=str_replace('+','_',urldecode($_GET['width']));
    $restl="" . (20 + $onehundred) . "px";
  } else if (isset($_POST['width'])) {
    $onehundred=str_replace('+','_',urldecode($_POST['width']));
    $restl="" . (20 + $onehundred) . "px";
  }
  if (isset($_GET['height'])) {
    $seventy=str_replace('+','_',urldecode($_GET['height']));
  } else if (isset($_POST['height'])) {
    $seventy=str_replace('+','_',urldecode($_POST['height']));
  }
  $three="3";
  $six="6";
  $wurl='http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Bird_Diversity_2013.png/300px-Bird_Diversity_2013.png';
  $suffix="Bird";
  $mapdata='<map name="ImageMap_fbc6cc846e0ab4e8"><area href="/wiki/Red-crested_turaco" shape="rect" coords="0,0,100,70" alt="Red-crested turaco" title="Red-crested turaco" /><area href="/wiki/Steller%27s_sea_eagle" shape="rect" coords="0,70,100,141" alt="Steller' . "'" . 's sea eagle" title="Steller' . "'" . 's sea eagle" /><area href="/wiki/Rock_dove" shape="rect" coords="0,209,100,141" alt="Rock dove" title="Rock dove" /><area href="/wiki/Southern_cassowary" shape="rect" coords="0,279,100,210" alt="Southern cassowary" title="Southern cassowary" /><area href="/wiki/Gentoo_penguin" shape="rect" coords="0,348,100,279" alt="Gentoo penguin" title="Gentoo penguin" /><area href="/wiki/Bar-throated_minla" shape="rect" coords="0,418,100,348" alt="Bar-throated minla" title="Bar-throated minla" /><area href="/wiki/Shoebill" shape="rect" coords="200,0,100,70" alt="Shoebill" title="Shoebill" /><area href="/wiki/Grey_crowned_crane" shape="rect" coords="200,70,100,141" alt="Grey crowned crane" title="Grey crowned crane" /><area href="/wiki/Anna%27s_hummingbird" shape="rect" coords="200,209,100,141" alt="Anna' . "'" . 's hummingbird" title="Anna' . "'" . 's hummingbird" /><area href="/wiki/Rainbow_lorikeet" shape="rect" coords="200,279,100,210" alt="Rainbow lorikeet" title="Rainbow lorikeet" /><area href="/wiki/Grey_heron" shape="rect" coords="200,348,100,279" alt="Grey heron" title="Grey heron" /><area href="/wiki/Eurasian_eagle-owl" shape="rect" coords="200,418,100,348" alt="Eurasian eagle-owl" title="Eurasian eagle-owl" /><area href="/wiki/White-tailed_tropicbird" shape="rect" coords="300,0,200,70" alt="White-tailed tropicbird" title="White-tailed tropicbird" /><area href="/wiki/Indian_peafowl" shape="rect" coords="300,70,200,141" alt="Indian peafowl" title="Indian peafowl" /><area href="/wiki/Atlantic_puffin" shape="rect" coords="300,209,200,141" alt="Atlantic puffin" title="Atlantic puffin" /><area href="/wiki/American_flamingo" shape="rect" coords="300,279,200,210" alt="American flamingo" title="American flamingo" /><area href="/wiki/Blue-footed_booby" shape="rect" coords="300,348,200,279" alt="Blue-footed booby" title="Blue-footed booby" /><area href="/wiki/Keel-billed_toucan" shape="rect" coords="300,418,200,348" alt="Keel-billed toucan" title="Keel-billed toucan" /></map>';
  if (isset($_GET['noun'])) {
    $suffix=str_replace('+','_',urldecode($_GET['noun']));
  } else if (isset($_POST['noun'])) {
    $suffix=str_replace('+','_',urldecode($_POST['noun']));
  }
  $content=file_get_contents('https://en.wikipedia.org/wiki/' . urlencode($suffix));
  $tablebits=explode('<table class="infobox biota"', $content);
  $timgs=[];
  if (sizeof($tablebits) > 1) {
    $timgs=explode('<img ', explode('</table>', $tablebits[1])[0]);
  }
  $mapbits=explode('</map>', $content);
  if (sizeof($mapbits) > 1) {
      $zeroone=-1;
      $zerotwo=-1;
      $notzero=-1;
      $coordbits=explode(' coords="', $mapbits[0]);
      for ($iik=1; $iik<sizeof($coordbits); $iik++) {
        if (substr($coordbits[$iik],0,2) == '0,') {
          if ($zeroone == -1) {
            $zeroone=$iik;
          } else if ($zerotwo == -1) {
            $zerotwo=$iik;
          }
        } else if ($notzero == -1 && $zeroone != -1) {
          $notzero=$iik;
        }
      }
      $imgbits=explode('<img ', $mapbits[1]);
      $mapdata=str_replace("'", "' + \"'\" + '", '<map ' . explode('<map ', $mapbits[0])[1] . '</map>');
      $optcount=(-1 + sizeof(explode('<area', $mapdata)));
      $six=floor($optcount / 3);
      if ($notzero != -1 && $zeroone != -1 && $zerotwo != -1 && ($zerotwo - $zeroone) == 1) {
        $six='' . ($notzero - $zeroone);
        $three='' . floor((-1 + sizeof($coordbits)) / $six);
        $yf="true";
      } else if ($notzero != -1 && $zeroone != -1 && $zerotwo != -1 && ($zerotwo - $zeroone) > 1) {
        $three='' . ($zerotwo - $zeroone);
        $six='' . floor((-1 + sizeof($coordbits)) / $three);
        $yf="false";
      }
      if (sizeof($imgbits) > 1) {
        if (strpos($imgbits[1], ' src="') !== false) {
           $wurl='http://' . explode('//', explode('"', explode(' src="', $imgbits[1])[1])[0])[1];
        }
      }
  } else if (sizeof($timgs) > 1) {
      $mapdata='';
      $wurl='.jpeg';
      for ($jh=1; $jh<sizeof($timgs); $jh++) {
        $wurl='http://' . explode('//', explode('"', explode(' src="', $timgs[$jh])[1])[0])[1];
        //echo $wurl . "<br>";
        $drawi.=" " . " blurbs.push('huh'); " . " " . "  imguris.push('data:image/" . str_replace('jpg','jpeg',strtolower(explode('.', explode('#', explode('?', $wurl)[0])[0])[-1 + sizeof(explode('.', explode('#', explode('?', $wurl)[0])[0]))])) . ';base64,' . base64_encode(file_get_contents($wurl)) . "'); " . " ";
      }
      //echo $drawi;
      $wurl='.jpeg';
  } else {
      $suffix="Bird";
      $mapdata='<map name="ImageMap_fbc6cc846e0ab4e8"><area href="/wiki/Red-crested_turaco" shape="rect" coords="0,0,100,70" alt="Red-crested turaco" title="Red-crested turaco" /><area href="/wiki/Steller%27s_sea_eagle" shape="rect" coords="0,70,100,141" alt="Steller' . "'" . 's sea eagle" title="Steller' . "'" . 's sea eagle" /><area href="/wiki/Rock_dove" shape="rect" coords="0,209,100,141" alt="Rock dove" title="Rock dove" /><area href="/wiki/Southern_cassowary" shape="rect" coords="0,279,100,210" alt="Southern cassowary" title="Southern cassowary" /><area href="/wiki/Gentoo_penguin" shape="rect" coords="0,348,100,279" alt="Gentoo penguin" title="Gentoo penguin" /><area href="/wiki/Bar-throated_minla" shape="rect" coords="0,418,100,348" alt="Bar-throated minla" title="Bar-throated minla" /><area href="/wiki/Shoebill" shape="rect" coords="200,0,100,70" alt="Shoebill" title="Shoebill" /><area href="/wiki/Grey_crowned_crane" shape="rect" coords="200,70,100,141" alt="Grey crowned crane" title="Grey crowned crane" /><area href="/wiki/Anna%27s_hummingbird" shape="rect" coords="200,209,100,141" alt="Anna' . "'" . 's hummingbird" title="Anna' . "'" . 's hummingbird" /><area href="/wiki/Rainbow_lorikeet" shape="rect" coords="200,279,100,210" alt="Rainbow lorikeet" title="Rainbow lorikeet" /><area href="/wiki/Grey_heron" shape="rect" coords="200,348,100,279" alt="Grey heron" title="Grey heron" /><area href="/wiki/Eurasian_eagle-owl" shape="rect" coords="200,418,100,348" alt="Eurasian eagle-owl" title="Eurasian eagle-owl" /><area href="/wiki/White-tailed_tropicbird" shape="rect" coords="300,0,200,70" alt="White-tailed tropicbird" title="White-tailed tropicbird" /><area href="/wiki/Indian_peafowl" shape="rect" coords="300,70,200,141" alt="Indian peafowl" title="Indian peafowl" /><area href="/wiki/Atlantic_puffin" shape="rect" coords="300,209,200,141" alt="Atlantic puffin" title="Atlantic puffin" /><area href="/wiki/American_flamingo" shape="rect" coords="300,279,200,210" alt="American flamingo" title="American flamingo" /><area href="/wiki/Blue-footed_booby" shape="rect" coords="300,348,200,279" alt="Blue-footed booby" title="Blue-footed booby" /><area href="/wiki/Keel-billed_toucan" shape="rect" coords="300,418,200,348" alt="Keel-billed toucan" title="Keel-billed toucan" /></map>';
  $content=file_get_contents('https://en.wikipedia.org/wiki/' . urlencode($suffix));
  $mapbits=explode('</map>', $content);
  if (sizeof($mapbits) > 1) {
      $imgbits=explode('<img ', $mapbits[1]);
      $mapdata=str_replace("'", "' + \"'\" + '", '<map ' . explode('<map ', $mapbits[0])[1] . '</map>');
      $optcount=(-1 + sizeof(explode('<area', $mapdata)));
      $six=floor($optcount / 3);
      if (sizeof($imgbits) > 1) {
        if (strpos($imgbits[1], ' src="') !== false) {
           $wurl='http://' . explode('//', explode('"', explode(' src="', $imgbits[1])[1])[0])[1];
        }
      }
  }
  }
?>  
<html>
<head>
<title>Dropdown Thumbnail Image Choices - RJM Programming - June, 2023</title>
<style>
  option::before { 
    content: '\00200d'; /* '\0026aa'; */
    font-size: <?php echo $seventy; ?>px; 
  }
</style>
<script type=text/javascript>
  var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
  var tw=<?php echo ($onehundred * $three); ?>, lw=<?php echo $onehundred; ?>;
  var th=<?php echo ($seventy * $six); ?>, lh=<?php echo $seventy; ?>;
  var sofar=',';
  var elem=null, context=null;
  //var wikiblurbthanks='<div class="center"><div class="noresize" style="height: 418px; width: 300px; "><map name="ImageMap_fbc6cc846e0ab4e8"><area href="/wiki/Red-crested_turaco" shape="rect" coords="0,0,100,70" alt="Red-crested turaco" title="Red-crested turaco" /><area href="/wiki/Steller%27s_sea_eagle" shape="rect" coords="0,70,100,141" alt="Steller' + "'" + 's sea eagle" title="Steller' + "'" + 's sea eagle" /><area href="/wiki/Rock_dove" shape="rect" coords="0,209,100,141" alt="Rock dove" title="Rock dove" /><area href="/wiki/Southern_cassowary" shape="rect" coords="0,279,100,210" alt="Southern cassowary" title="Southern cassowary" /><area href="/wiki/Gentoo_penguin" shape="rect" coords="0,348,100,279" alt="Gentoo penguin" title="Gentoo penguin" /><area href="/wiki/Bar-throated_minla" shape="rect" coords="0,418,100,348" alt="Bar-throated minla" title="Bar-throated minla" /><area href="/wiki/Shoebill" shape="rect" coords="200,0,100,70" alt="Shoebill" title="Shoebill" /><area href="/wiki/Grey_crowned_crane" shape="rect" coords="200,70,100,141" alt="Grey crowned crane" title="Grey crowned crane" /><area href="/wiki/Anna%27s_hummingbird" shape="rect" coords="200,209,100,141" alt="Anna' + "'" + 's hummingbird" title="Anna' + "'" + 's hummingbird" /><area href="/wiki/Rainbow_lorikeet" shape="rect" coords="200,279,100,210" alt="Rainbow lorikeet" title="Rainbow lorikeet" /><area href="/wiki/Grey_heron" shape="rect" coords="200,348,100,279" alt="Grey heron" title="Grey heron" /><area href="/wiki/Eurasian_eagle-owl" shape="rect" coords="200,418,100,348" alt="Eurasian eagle-owl" title="Eurasian eagle-owl" /><area href="/wiki/White-tailed_tropicbird" shape="rect" coords="300,0,200,70" alt="White-tailed tropicbird" title="White-tailed tropicbird" /><area href="/wiki/Indian_peafowl" shape="rect" coords="300,70,200,141" alt="Indian peafowl" title="Indian peafowl" /><area href="/wiki/Atlantic_puffin" shape="rect" coords="300,209,200,141" alt="Atlantic puffin" title="Atlantic puffin" /><area href="/wiki/American_flamingo" shape="rect" coords="300,279,200,210" alt="American flamingo" title="American flamingo" /><area href="/wiki/Blue-footed_booby" shape="rect" coords="300,348,200,279" alt="Blue-footed booby" title="Blue-footed booby" /><area href="/wiki/Keel-billed_toucan" shape="rect" coords="300,418,200,348" alt="Keel-billed toucan" title="Keel-billed toucan" /></map>';
  var wikiblurbthanks='<?php echo $mapdata; ?>';
  var imguris=[];
  var blurbs=[];
  var randlist=[];
  var answer='', score=0, goes='', rans='';
  var yfirst=<?php echo $yf; ?>;

  function overlay() {
   var iii=0;
   var jii=-1;
   var optsare=document.getElementsByTagName('option');
   console.log(randlist);
   console.log(blurbs);
   for (var ii=0; ii<eval('' + Math.min(imguris.length,optsare.length)); ii++) {
     if (('xx' + optsare[ii].value).slice(-2) != '  ') {
     jii++;
     //alert(optsare[ii].outerHTML);
     iii=Math.floor(Math.random() * blurbs.length);
     while (sofar.indexOf(',' + iii + ',') != -1) {
       iii=Math.floor(Math.random() * blurbs.length);
     }
     sofar+='' + iii + ',';
     console.log('iii=' + iii);
     optsare[ii].value='' + blurbs[iii];
     optsare[ii].innerText='';
     optsare[ii].setAttribute('data-answer', blurbs[iii]);  
     randlist.push(iii);   
     }
   }
   console.log(randlist);
   if (eval('' + optsare.length) > 0) {
     document.getElementById('schoices').style.width='' + '<?php echo $onehundred; ?>' + 'px';
     //document.getElementById('schoices').style.height='' + th + 'px';
     document.getElementById('schoices').size=eval('' + optsare.length);
     if (isSafari || navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { 
       document.getElementById('schoices').style.height='' + th + 'px';
     }
     document.getElementById('schoices').selectedIndex = '-1';
   }
   setTimeout(postoverlay, 2000);
  }

  function postoverlay() {
   var lgbegin='linear-gradient(0deg, #ffffff 10%, rgba(255,255,0,0.6) 20%, rgba(192,192,192,0.6) 31%, rgba(255,215,0,0.6) 42%, rgba(211,211,211,0.6) 53%, rgba(255,165,0,0.6) 63%, rgba(224,255,255,0.6) 74%, rgba(254,254,254,0.6) 85%, #CC7722 100%),linear-gradient(to right,yellow,pink),';
   var delim='', topp=0, hinc=0;;
   var proposeds='<style> #tf { background-image:  ; background-position:   ; background-size:    ; background-repeat:     ; } </style>';
   var rect=document.getElementById('schoices').getBoundingClientRect();
   var optsare=document.getElementsByTagName('option');
   //var rectrtd=document.getElementById('rtd').getBoundingClientRect();
   
   if (eval('' + rect.height) > 100 || 1 == 1) {
   
   document.getElementById('schoices').style.backgroundColor='transparent';
   document.getElementById('tf').style.position='absolute';
   document.getElementById('tf').style.left='' + rect.left + 'px';
   document.getElementById('tf').style.top='' + rect.top + 'px';

   document.getElementById('tf').style.width='' + rect.width + 'px';
   if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { 
   //document.getElementById('tf').style.width='' + tw + 'px';
   document.getElementById('tf').style.height='' + th + 'px';
   } else {
   document.getElementById('tf').style.height='' + rect.height + 'px';
   }

   document.getElementById('schoices').style.position='absolute';
   document.getElementById('schoices').style.left='' + rect.left + 'px';
   document.getElementById('schoices').style.top='' + rect.top + 'px';
   document.getElementById('schoices').style.width='' + rect.width + 'px';
   if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { 
   document.getElementById('schoices').style.height='' + th + 'px';
   document.getElementById('schoices').style.display='none';
   } else {
   document.getElementById('schoices').style.height='' + rect.height + 'px';
   }
   
   //document.getElementById('rtd').style.position='absolute';
   //document.getElementById('rtd').style.left='' + rectrtd.left + 'px';
   //document.getElementById('rtd').style.top='' + rectrtd.top + 'px';
   //document.getElementById('rtd').style.width='' + rectrtd.width + 'px';
   //document.getElementById('rtd').style.height='' + rectrtd.height + 'px';

   // Thanks to https://stackoverflow.com/questions/49660659/css-gradients-inside-gradients
   //document.getElementById('tf').style.background='linear-gradient(0deg, #ffffff 10%, rgba(255,255,0,0.6) 20%, rgba(192,192,192,0.6) 31%, rgba(255,215,0,0.6) 42%, rgba(211,211,211,0.6) 53%, rgba(255,165,0,0.6) 63%, rgba(224,255,255,0.6) 74%, rgba(254,254,254,0.6) 85%, #CC7722 100%), linear-gradient( to right, yellow, pink )'; // #fcfafc #f9f6f8 #f8f1f3
   document.getElementById('tf').style.zIndex='-1';
   topp=rect.top;
   //alert('rect.height=' + rect.height);
   lgbegin='';
   
   for (var ii=0; ii<eval('' + document.getElementById('schoices').size); ii++) {
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { 
     document.getElementById('tf').style.zIndex='88';
     document.getElementById('tf').setAttribute('contenteditable',false);
     hinc=Math.round(eval(rect.height / eval('' + document.getElementById('schoices').size)));
     document.getElementById('tf').innerHTML+='<img style="position:absolute;z-index:89;left:' + rect.left + 'px;top:' + topp + 'px;width:' + rect.width + 'px;height:' + Math.round(eval(rect.height / eval('' + document.getElementById('schoices').size))) + 'px;" src="' + imguris[randlist[ii]] + '" data-answer="' + "" + blurbs[randlist[ii]] + "" + '" onclick=" process(' + "'" + blurbs[randlist[ii]] + "',this)" + '; "></img>';
     if (1 == 11) {
     topp+=hinc;
     } else {
     topp+=eval(rect.height / eval('' + document.getElementById('schoices').size));
     }
    } else {
     hinc=eval('' + optsare[ii].style.height);
     proposeds=proposeds.replace('  ;', delim + lgbegin + "url('" + imguris[randlist[ii]] + "')" + '  ;');
     proposeds=proposeds.replace('   ;', delim + rect.left + 'px ' + topp + 'px'  + '   ;');
     if (1 == 11) {
     proposeds=proposeds.replace('    ;', delim + rect.width + 'px ' + hinc + 'px' + '    ;');
     } else if (1 == 1) {
     proposeds=proposeds.replace('    ;', delim + '<?php echo $onehundred; ?>' + 'px    ;'); // contain
     } else {
     proposeds=proposeds.replace('    ;', delim + rect.width + 'px ' + Math.round(eval(rect.height / eval('' + document.getElementById('schoices').size))) + 'px' + '    ;');
     }
     proposeds=proposeds.replace('     ;', delim + 'no-repeat' + '     ;');
     delim=',';
     if (1 == 11) {
     topp+=hinc;
     } else {
     topp+=eval(rect.height / eval('' + document.getElementById('schoices').size));
     }
    }
   }

   document.getElementById('dstyle').innerHTML=proposeds.replace("</stXyle>", " option::before { content: '' !important; } </style>");

   }
   
  }
  
  function process(tv, tvo) {
     if (answer == ' ' && tv == '') {
     answer='';
     } else {
     if (answer == '') {
      while (answer == '') {
      answer=prompt('What is your <?php echo strtolower($suffix); ?> type guess?', '');
      if (answer == null) { answer=''; }
      }
     }
     goes++;
     if (tvo.outerHTML.indexOf('<img') == 0) {
     rans=('' + tvo.getAttribute('data-answer'));
     } else {
     var val=document.getElementById('schoices');
     var ival=val.selectedIndex;
     rans=('' + val.options[val.selectedIndex].getAttribute('data-answer'));
     document.getElementById('schoices').selectedIndex = '-1';
     }
     if (answer.trim().toLowerCase() == rans.trim().toLowerCase()) {
      score++;
     } else if ((rans.trim() + '~').toLowerCase().indexOf(' ' + answer.trim().toLowerCase() + '~') != -1) {
      score+=0.5;
      setTimeout(explain, 200);
     } else {
      setTimeout(explain, 200);
     }
     document.getElementById('score').innerHTML='Score: ' + score + '/' + goes;
     answer=' ';
     document.getElementById('ians').value='';
     setTimeout(noans, 400);
     }
  }
  
  function noans() {
    answer='';
  }
  
  function explain() {
      if (confirm('Sorry, not the answer.  Do you want to know what that <?php echo strtolower($suffix); ?> is called?')) {
         alert(rans);
      }
  }
  
  function canvasize() {
   document.getElementById('schoices').title='Quiz';
   if (document.getElementById('snoun').outerHTML.indexOf('>' + '<?php echo $suffix; ?>' + '<') == -1) {
     document.getElementById('snoun').innerHTML+='<option value="<?php echo $suffix; ?>  "><?php echo $suffix; ?></option>';
   }
   document.getElementById('snoun').value='<?php echo $suffix; ?>  ';
   elem=document.getElementById('mycanvas');
   context = elem.getContext('2d');
   
   <?php if ($drawi != '') { echo $drawi; } ?>
   
   if (eval('' + imguris.length) == 0) {
   var cs=wikiblurbthanks.split(' coords="');
   var bs=wikiblurbthanks.split(' alt="');
   for (var kk=1; kk<bs.length; kk++) {
     blurbs.push(bs[kk].split('"')[0]);
     if (kk == 1) {
       if (cs[1].indexOf('0,') == 0 && cs[2].indexOf('0,') == 0) {
          yfirst=true;
       }
     }
   }
   console.log(blurbs);
   //alert('blurbs length=' + blurbs.length);
   var cimg=new Image();
   cimg.onload = function(){
   var ourlw=eval(cimg.width / <?php echo $three; ?>);
   var ourlh=eval(cimg.height / <?php echo $six; ?>);
   var elemwidth=elem.width;
   var elemheight=elem.height;
   if (yfirst) {
   for (var ii=0; ii<<?php echo $three; ?>; ii++) {
   for (var jj=0; jj<<?php echo $six; ?>; jj++) {
     context.clearRect(0,0,elem.width,elem.height);
     context.drawImage(cimg,eval(ii * ourlw),eval(jj * ourlh),ourlw,ourlh,0,0,elemwidth,elemheight);
     imguris.push(elem.toDataURL('image/png'));
     console.log('here');
   }
   }
   } else {
   for (var jj=0; jj<<?php echo $six; ?>; jj++) {
   for (var ii=0; ii<<?php echo $three; ?>; ii++) {
     context.clearRect(0,0,elem.width,elem.height);
     context.drawImage(cimg,eval(ii * ourlw),eval(jj * ourlh),ourlw,ourlh,0,0,elemwidth,elemheight);
     imguris.push(elem.toDataURL('image/png'));
     console.log('here');
   }
   }
   }
   overlay();
   };
   var cimgsrc='<?php echo 'data:image/' . str_replace('jpg','jpeg',strtolower(explode('.', explode('#', explode('?', $wurl)[0])[0])[-1 + sizeof(explode('.', explode('#', explode('?', $wurl)[0])[0]))])) . ';base64,' . base64_encode(file_get_contents($wurl)); ?>';
   cimg.src=(cimgsrc == 'data:image/jpeg;base64,' ? elem.toDataURL('image/png') : cimgsrc);
   } else {
   overlay();
   }
  }
  
  function bsit() {
    var noww=<?php echo $onehundred; ?>;
    var nowh=<?php echo $seventy; ?>;
    var newnow='' + noww + ',' + nowh;
    var pnn=prompt('Change width,height as presented, as required', newnow);
    if (pnn != null) {
      if (pnn.trim() != newnow) {
        var sofaru=document.URL.split('#')[0];
        if (sofaru.indexOf('?') == -1) { sofaru+='?x=x'; }
        var vbs=pnn.split(',');
        if (vbs[0].trim() != '') {
          sofaru=sofaru.replace('width=', 'widxth=') + '&width=' + vbs[0].trim();
        }
        if (eval('' + vbs.length) > 1) {
            if (vbs[1].trim() != '') {
             sofaru=sofaru.replace('height=', 'heixght=') + '&height=' + vbs[1].trim();
            }
        }
        location.href=sofaru;
      }
    } 
  
  }

</script>
</head>
<body onload='canvasize();'>
<!--table><tr><td style=width:25%;-->
<select data-size=9 onchange=process(this.value,this); style='display:block;background-color:#fefefe;overflow-y:auto;width:104px;border:2px dotted green;' title='Media and document action items ... please note you can hover swipe right or left, accurately, and with panache, regarding animated options to speed up transitions between option values' id=schoices><option class=nonwhite style=text-align:center; id=mydefopt title='Add Voiceover Audio to Video' value=''></option><option value='Add Voiceover Audio to Video'> Add Voiceover Audio to Video&nbsp;</option><option id=oimagemagick style='text-align:center;' value='Images to PDF'>  Images to PDF</option><option id=opdfimages style='text-align:right;' value='PDF to Images'>  PDF to Images</option><option value='Burn subtitles'>  Burn subtitles</option><option value='Concat demuxer'>  Concat demuxer</option><option value='Rotate a video'>  Rotate a video</option><option id=opandoc style=text-align:center; value='Text to HTML'>  Text to HTML</option><option class='nonwhite' style=text-align:center; id=mydefopttwo title='pandoc' value=''></option></select>
<!--/td><td style=width:75%; id=rtd>
<h1 style=float:right;>&nbsp;&nbsp;Dropdown Thumbnail Image Choices</h1><br>
<h3 style=float:right;>&nbsp;&nbsp;RJM Programming - June, 2023</h3>
</td></tr></table-->
<div id=tf contenteditable=true></div>
<div id=dstyle style=display:none;></div>
<h1 style='position:absolute;left:<?php echo $restl; ?>;top:0px;'>Dropdown Thumbnail<sup title='Change image dimensions' onclick=bsit(); style=text-decoration:underline;cursor:pointer;>+</sup> Image Choices</h1><br>
<h3 style='position:absolute;left:<?php echo $restl; ?>;top:100px;'>RJM Programming - June, 2023</h3>
<h4 style='position:absolute;left:<?php echo $restl; ?>;top:200px;'><select onchange="location.href=document.URL.split('?')[0].split('#')[0] + '?noun=' + encodeURIComponent(this.value.trim());" id=snoun><option value='Bird  '>Bird</option><option value='Mammal  '>Mammal</option><!--option value='Reptile  '>Reptile</option--><option value='Insect  '>Insect</option></select> Quiz ... thanks to <a target=_blank title='Bird' href='https://en.wikipedia.org/wiki/<?php echo $suffix; ?>'>Wikipedia</a></h3>
<p id=score style='position:absolute;left:<?php echo $restl; ?>;top:300px;'>Score: 0/0</p>
<div style='position:absolute;left:<?php echo $restl; ?>;top:400px;'>
<input id=ians onblur='if (this.value.length > 0) { answer=this.value; }' placeholder='Your guess, then click the relevant <?php echo strtolower($suffix); ?> image' value='' style='width:400px;'></input>
</div>
<canvas id=mycanvas width=<?php echo $onehundred; ?> height=<?php echo $seventy; ?> style=display:none;></canvas>
</body>
</html> 