<?php
// imagegridmap.php
// RJM Programming
// DFecember, 2020
// Inspired by https://www.w3schools.com/css/css3_backgrounds.asp#google_ads_iframe_/16833175/MidContent_0

 $xprebimg="";
 $dmg='<input style="border:1px solid red;background-color:lightgreen;" type=submit id=subm value="Map Grid"></input>';
 $mapdata="";
 if (isset($_POST['mapdata'])) {  
   $mapdata=str_replace("+"," ",urldecode($_POST['mapdata']));
   if ($mapdata != "") {
       $dmg='<input title="Optional share via email" onblur="emailit(this);" style="border:1px solid red;background-color:pink;" type=text id=subm placeholder="Email to" value=""></input>';
    }
 }
 $isf="";
 $prebimg="one.jpg";
 $bimg=$prebimg;
 if (isset($_GET['iurl'])) {  
 $transp="0.0";
 } else {
 $transp="0.6";   //"0.8";
 }
 
 $bigdata="src";
 
 $xnum="3";
 $ynum="2";
 if (isset($_POST['xnum'])) {  
  $xnum=str_replace("+"," ",urldecode($_POST['xnum']));
 }
 if (isset($_POST['ynum'])) {  
  $ynum=str_replace("+"," ",urldecode($_POST['ynum']));
 }
 if (isset($_GET['xnum'])) {  
  $xnum=str_replace("+"," ",urldecode($_GET['xnum']));
 }
 if (isset($_GET['ynum'])) {  
  $ynum=str_replace("+"," ",urldecode($_GET['ynum']));
 }

 $udirname=explode("imagegridmap.php", str_replace("::",":","http://" . $_SERVER['SERVER_NAME'] . ":" . str_replace("~","",str_replace(":443~","",str_replace(":80~","",(":" . $_SERVER['SERVER_PORT'] . "~"))))) . "" . $_SERVER['REQUEST_URI'])[0];

 function relative_to_absolute($inth) {
    global $udirname;
    //$low = strtolower($inth);
    $outth = $inth;
    $ideas = array(" href='", ' href="', " Href='", ' Href="', " HREF='", ' HREF="', " href=", " Href=", " HREF=", " src='", ' src="', " Src='", ' Src="', " SRC='", ' SRC="', " src=", " Src=", " SRC=");
    if ($udirname != "") {
     for ($m=0; $m<sizeof($ideas); $m++) {
      $huhs = explode($ideas[$m], $inth);
      if (sizeof($huhs) > 1) {
        for ($ii=(sizeof($huhs) - 1); $ii>=1; $ii--) {
          if (strtolower(str_replace("file", "http", strtolower(substr($huhs[$ii], 0, 4)))) == "http") {
            $outth = $outth;
          } else if (strpos($huhs[$ii], "data:") === false && substr($huhs[$ii], 0, 1) != "/" && substr($huhs[$ii], 0, 1) != "'" && substr($huhs[$ii], 0, 1) != '"') {
            $outth = str_replace($huhs[$ii], $udirname . $huhs[$ii], $outth);
          } else if (strpos($huhs[$ii], "data:") === false && substr($huhs[$ii], 1, 1) != "/" && substr($huhs[$ii], 0, 1) != "'" && substr($huhs[$ii], 0, 1) != '"') {
            $outth = str_replace($huhs[$ii], substr($udirname, 0, (strlen($udirname) - 1)) . $huhs[$ii], $outth);
          }
        }
      }
     }
    }
    return str_replace("< img>","</img>",$outth);
}

 function mappath($ins) {
   global $bigdata;
   if (strpos(strtolower($ins), 'data:') !== false) {
     return $ins;
   } else if (strpos(strtolower($ins), 'http') !== false) {
     $bigdata=' src="data:image/' . str_replace('jpg','jpeg',strtolower(explode('.',$ins)[-1 + sizeof(explode('.',$ins))])) . ';base64,' . base64_encode(file_get_contents(str_replace("https:","http:",$ins))) . '" data-source';
     return $ins;
   } else if (strpos(strtolower($ins), '//') !== false) {
     $bigdata=' src="data:image/' . str_replace('jpg','jpeg',strtolower(explode('.','http:' . $ins)[-1 + sizeof(explode('.','http:' . $ins))])) . ';base64,' . base64_encode(file_get_contents(str_replace("https:","http:",'http:' . $ins))) . '" data-source';
     return 'http:' . $ins;
   } else {
     $bigdata=' src="data:image/' . str_replace('jpg','jpeg',strtolower(explode('.',"http://" . $_SERVER['SERVER_NAME'] . "" . str_replace("~","",str_replace(":443~","",str_replace(":80~","",(":" . $_SERVER['SERVER_PORT'] . "~")))) . "" . str_replace("imagegridmap.php","",explode("#",explode("?",$_SERVER['REQUEST_URI'])[0])[0]) . $ins)[-1 + sizeof(explode('.',"http://" . $_SERVER['SERVER_NAME'] . "" . str_replace("~","",str_replace(":443~","",str_replace(":80~","",(":" . $_SERVER['SERVER_PORT'] . "~")))) . "" . str_replace("imagegridmap.php","",explode("#",explode("?",$_SERVER['REQUEST_URI'])[0])[0]) . $ins))])) . ';base64,' . base64_encode(file_get_contents(str_replace("https:","http:","http://" . $_SERVER['SERVER_NAME'] . "" . str_replace("~","",str_replace(":443~","",str_replace(":80~","",(":" . $_SERVER['SERVER_PORT'] . "~")))) . "" . str_replace("imagegridmap.php","",explode("#",explode("?",$_SERVER['REQUEST_URI'])[0])[0]) . $ins))) . '" data-source';
     return "http://" . $_SERVER['SERVER_NAME'] . "" . str_replace("~","",str_replace(":443~","",str_replace(":80~","",(":" . $_SERVER['SERVER_PORT'] . "~")))) . "" . str_replace("imagegridmap.php","",explode("#",explode("?",$_SERVER['REQUEST_URI'])[0])[0]) . $ins;
   }
 }
 
 if (isset($_GET['transparency'])) {  $transp=str_replace("+"," ",urldecode($_GET['transparency'])); }
 if (isset($_POST['transparency'])) {  $transp=str_replace("+"," ",urldecode($_POST['transparency'])); }

 $opprefix="linear-gradient(rgba(255,255,255," . $transp . "),rgba(255,255,255," . $transp . ")),";
 
 
 if (isset($_FILES['file']) && isset($_POST['dataurip']) && isset($_FILES['file']['tmp_name'])) {  
   $prebimg=str_replace("+"," ",urldecode($_POST['dataurip'])) . base64_encode(file_get_contents($_FILES['file']['tmp_name']));
   $bimg=$prebimg;
   $isf="y";
 } else {
 if (isset($_GET['iurl'])) {  $prebimg=str_replace(" ","+",urldecode($_GET['iurl']));  if (strpos($prebimg, ";base64,") !== false) { $bimg=explode(";base64,", $prebimg)[0] . ";base64," . (explode(";base64,", $prebimg)[1]); $prebimg=$bimg;  } else { $bimg=mappath(str_replace("+"," ",$prebimg)); $prebimg=$bimg; }  }
 if (isset($_POST['iurl'])) {   $prebimg=str_replace(" ","+",urldecode($_POST['iurl']));  if (strpos($prebimg, ";base64,") !== false) { $bimg=explode(";base64,", $prebimg)[0] . ";base64," . (explode(";base64,", $prebimg)[1]); $prebimg=$bimg;  } else { $bimg=mappath(str_replace("+"," ",$prebimg)); $prebimg=$bimg; }     }
 }
 
 echo "<!doctype html>
<html>
<head>
<title>Full Sized Fixed Background Image - RJM Programming - October, 2019 ... thanks to https://www.w3schools.com/css/css3_backgrounds.asp#google_ads_iframe_/16833175/MidContent_0</title>
<style>

#mydiv {
  border: 1px dotted red;
}

td {
  vertical-align: top;
  border: 1px dotted red;
}

td:hover {
  border: 1px solid blue;
}

input[type=text] {
  background-color: transparent;
}

div + div {
  margin:0 0 0 0;
  padding:0 0 0 0;    
  box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box;
}

</style>
<scri" . "pt type='text/javascript'>
  
  var arectsleft=-1, arectstop=-1; 
  var rectd=null;
  var documentbody=null;
  var rectdleft=0, rectdtop=0;
  var wo=null, imwo=null;
  var is_small=false;
  var zhr=null;
  var zform=null;
  var zoomx=1.0;
  var zoomy=1.0;
  var sw=('' + screen.width).replace('px','');
  var sh=('' + screen.height).replace('px','');
  var isf='" . $isf . "'; 
  var mtype='';
  var zhr=null;
  var aform=null;
  var x_num=" . $xnum . ", y_num=" . $ynum . ";
  var prev_x_num=0, prev_y_num=0;
  var bigw=0, bigh=0;

  function areatodiv(scalar) {
  var areas=document.getElementsByTagName('area'), coordsare=[], arects, stylebit='', onbit='', abefore='', aafter='';
  var leftp=0.0, widthp=eval(100.0 / x_num);
  var topp=0.0, heightp=eval(100.0 / y_num);
  document.getElementById('ddarea').innerHTML='';
  imgs=document.getElementsByTagName('img');
    if (eval('' + zoomx) == 1) {
    bigw=eval('' + ('' + imgs[0].width).replace('px',''));
    bigh=eval('' + ('' + imgs[0].height).replace('px',''));
    zoomx=eval('' + sw) / eval('' + bigw);
    zoomy=eval('' + sh) / eval('' + bigh);
    }
  arects=document.getElementById('mydiv').getBoundingClientRect();
  if (eval('' + arectstop) < 0) {
    arectsleft=arects.left;
    arectstop=arects.top;
  }
  for (var i=0; i<areas.length; i++) {
   if (('' + areas[i].coords).indexOf(',') != -1) {
    coordsare=areas[i].coords.split(',');
    onbit='';
    abefore='';
    aafter='';
    if (('' + areas[i].href) != '') {
    aafter='</a>';
    abefore='<a target=_blank href=\"' + areas[i].href + '\">';
    }
    if (('' + areas[i].outerHTML).indexOf(' on') != -1) {
    onbit=' on' + ('' + areas[i].outerHTML).split(' on')[1].split('>')[0];
    }
    if (('' + areas[i].outerHTML).replace(' style=\"\"','').replace(\" style=''\",'').indexOf(' style=') != -1) {
    stylebit='';
    if (('' + areas[i].outerHTML).indexOf(' style=\"') != -1) {
    stylebit=('' + areas[i].outerHTML).split(' style=\"')[1].split('\"')[0] + ';';
    } else if (('' + areas[i].outerHTML).indexOf(' style=\"') != -1) {
    stylebit=('' + areas[i].outerHTML).split(\" style='\")[1].split(\"'\")[0] + ';';
    }
    documentbody=document.getElementById('mydiv');
    document.getElementById('ddarea').innerHTML+=abefore + \"<div data-onclick=\\\" document.getElementById('\" + areas[i].id + \"').click(); \\\" STYLE='\" + stylebit + \"overflow:hidden;display:block;z-index:3;position:absolute;left:\" + eval(eval('' + arectsleft) + eval(eval('' + scalar) * eval('' + coordsare[0]))) + \"px;top:\" + eval(eval('' + arectstop) + eval(eval('' + scalar) * eval('' + coordsare[1]))) + \"px;width:\" + eval(eval('' + scalar) * eval(eval('' + coordsare[2]) - eval('' + coordsare[0]))) + \"px;height:\" + eval(eval('' + scalar) * eval(eval('' + coordsare[3]) - eval('' + coordsare[1]))) + \"px;background-color:transparent !important;' data-s-style='\" + stylebit + \"overflow:hidden;display:block;z-index:3;position:absolute;left:\" + leftp + \"vw;top:\" + topp + \"vh;width:\" + widthp + \"vw;height:\" + heightp + \"vh;background-color:transparent !important;'\" + onbit + \"></div>\" + aafter;
    //    document.getElementById('ddarea').innerHTML+=abefore + \"<div data-onclick=\\\" document.getElementById('\" + areas[i].id + \"').click(); \\\" style='\" + stylebit + \"overflow:hidden;display:block;z-index:3;position:absolute;left:\" + eval(eval('' + arectsleft) + eval(eval('' + scalar) * eval('' + coordsare[0]))) + \"px;top:\" + eval(eval('' + arectstop) + eval(eval('' + scalar) * eval('' + coordsare[1]))) + \"px;width:\" + eval(bigw / x_num) + \"px;height:\" + eval(bigh / y_num) + \"px;background-color:transparent !important;'\" + onbit + \"></div>\" + aafter;
    }
   }
   leftp+=widthp;
   if (eval(eval(1 + i) % x_num) == 0) { topp+=eval(100.0 / y_num); leftp=0.0;  }
  }
  }
  
  function mapdatachange(iarea) {
     var jn='';
     jn=iarea.id.replace('ionmouseover','').replace('ionmouseout','').replace('ionclick','').replace('ialt','').replace('istyle','').replace('ititle','').replace('ihref','');
     if (iarea.value.trim() != '') {
    if (iarea.id.indexOf('ion') == 0) {
       document.getElementById('mapdata').value=document.getElementById('mapdata').value.replace(\" id='area\" + jn + \"' \", \" id='area\" + jn + \"' \" + iarea.id.substring(1).replace(jn,'') + '=\"' + iarea.value + '\" '); 
       //alert(document.getElementById('mapdata').value);
       iarea.setAttribute('readonly', true);
    } else if (iarea.id.indexOf('ialt') == 0) {
       if (iarea.value != ('Alt ' + jn)) {
       //alert('*' + iarea.value + '* vs *Alt value ' + jn + '*');
       document.getElementById('mapdata').value=document.getElementById('mapdata').value.replace('alt=\"Alt ' + jn + '\" ', \"data-alt='Alt value \" + jn + \"' alt\" + '=\"' + iarea.value + '\" '); 
       document.getElementById('mapdata').value=document.getElementById('mapdata').value.replace(\"alt='Alt \" + jn + \"' \", \"data-alt='Alt value \" + jn + \"' alt\" + '=\"' + iarea.value + '\" '); 
       iarea.setAttribute('readonly', true);
       //alert(\"alt='Alt value \" + jn + \"' ... \" + document.getElementById('mapdata').value);
       } //else {
       //alert('!' + iarea.value + '!');
       //}
    } else if (iarea.id.indexOf('ititle') == 0) {
       if (iarea.value != ('Title ' + jn)) {
       document.getElementById('mapdata').value=document.getElementById('mapdata').value.replace('title=\"Title ' + jn + '\" ', \"data-title='Title value \" + jn + \"' title\" + '=\"' + iarea.value + '\" '); 
       document.getElementById('mapdata').value=document.getElementById('mapdata').value.replace(\"title='Title \" + jn + \"' \", \"data-title='Title value \" + jn + \"' title\" + '=\"' + iarea.value + '\" '); 
       iarea.setAttribute('readonly', true);
       //alert(document.getElementById('mapdata').value);
       }
    } else if (iarea.id.indexOf('ihref') == 0) {
       document.getElementById('mapdata').value=document.getElementById('mapdata').value.replace('title=\"Title ' + jn + '\" nohref', \"title='Title value \" + jn + \"' href\" + '=\"' + iarea.value + '\" '); 
       document.getElementById('mapdata').value=document.getElementById('mapdata').value.replace(\"title='Title \" + jn + \"' nohref\", \"title='Title value \" + jn + \"' href\" + '=\"' + iarea.value + '\" '); 
       iarea.setAttribute('readonly', true);
    } else if (iarea.id.indexOf('istyle') == 0) {
       document.getElementById('mapdata').value=document.getElementById('mapdata').value.replace('id=\"area' + jn + '\" style', \"id='area\" + jn + \"' style\" + '=\"' + iarea.value + '\" data-style'); 
       document.getElementById('mapdata').value=document.getElementById('mapdata').value.replace(\"id='area\" + jn + \"' style\", \"id='area\" + jn + \"' style\" + '=\"' + iarea.value + '\" data-style'); 
       iarea.setAttribute('readonly', true);
       //document.getElementById('myform').target='ifoverlay';
       //alert('there');
    }
     }
  }

  function showStuff(evt) {
  if (zhr.readyState == 4) {
    if (zhr.status == 200) {
     if (zhr.responseText.trim() == '') { 
       var es=prompt('Email sent.  If you want to see the HTML involved with the Email body content, answer Y.', ''); 
       if (es == null) { es=''; }
       if ((es + ' ').toLowerCase().substring(0,1) == 'y') { 
        wo=window.open('','_blank','left=50,top=50,width=400,height=400');
  if (1 == 1 && ('' + document.getElementById('ddarea').innerHTML) != '') {
        wo.document.write(('<html><body>' + '&lt;img' + document.getElementById('myform').innerHTML.replace(/\ STYLE\=/g,' data-z-style=').replace(/\ data\-s\-style\=/g,' style=').replace('</span>','</a>').replace('<span ','<a target=_blank href=\"' + document.URL.split('#')[0].split('?')[0] + '\" ').split('<img')[1].replace(/\</g,'&lt;').replace(/\>/g,'&gt;') + '</body></html>').replace(/\&lt\;area/g, '<br>&lt;area').replace(/\&lt\;img/g, '<br>&lt;img').replace(/\&lt\;map/g, '<br>&lt;map'));
  } else {
        wo.document.write(('<html><body>' + document.getElementById('myform').innerHTML.replace('</span>','</a>').replace('<span ','<a target=_blank href=\"' + document.URL.split('#')[0].split('?')[0] + '\" ').replace(/\</g,'&lt;').replace(/\>/g,'&gt;') + '</body></html>').replace(/\&lt\;area/g, '<br>&lt;area').replace(/\&lt\;img/g, '<br>&lt;img').replace(/\&lt\;map/g, '<br>&lt;map'));
  }
       }
     } else { 
       alert(zhr.responseText.split('</')[0].split('>')[eval(-1 + zhr.responseText.split('</')[0].split('>').length)]); 
     }
    }
  }
  }
  
  function imwoit() {
    if (document.getElementById('iurl').value != '') {
        imwo=window.open('','_blank','left=50,top=50,width=400,height=400');
        imwo.document.write('<html><body style=background:URL(' + document.getElementById('iurl').value + ');background-repeat:no-repeat;>' + '</body></html>');
    }
  }
  
  function emailit(eadd) {
    if (eadd.value.indexOf('@') != -1) {
  zhr = new XMLHttpRequest();
  zform=new FormData();
  zform.append('inline', '');
  zform.append('to', eadd.value);
  zform.append('subj', 'My Image Grid Map ... at [date] ...');
  if (1 == 1 && ('' + document.getElementById('ddarea').innerHTML) != '') {
  //alert('here');
  //zform.append('tdhuhta', encodeURIComponent('<html><body>' + parent.document.getElementById('myform').innerHTML.replace('</span>','</a>').replace('<span ','<a target=_blank href=\"' + document.URL.split('#')[0].split('?')[0] + '\" ') + '</body></html>'));

  zform.append('tdhuhta', encodeURIComponent('<html><body>' + '<img' + document.getElementById('myform').innerHTML.replace(/\ STYLE\=/g,' data-z-style=').replace(/\ data\-s\-style\=/g,' style=').replace('</span>','</a>').replace('<span ','<a target=_blank href=\"' + document.URL.split('#')[0].split('?')[0] + '\" ').split('<img')[1] + '</body></html>'));

  } else {
  //if (document.getElementById('myform').innerHTML.indexOf('' + eval(bigw / x_num) + 'px') != -1) { alert('width becomes ' + '' + eval(100 / x_num) + '% ' + document.getElementById('myform').innerHTML.split('' + eval(bigw / x_num) + 'px').length); }
  //if (document.getElementById('myform').innerHTML.indexOf('' + eval(bigh / y_num) + 'px') != -1) { alert('height becomes ' + '' + eval(100 / y_num) + '% ' + document.getElementById('myform').innerHTML.split('' + eval(bigh / y_num) + 'px').length); }
  //zform.append('tdhuhta', encodeURIComponent('<html><body>' + document.getElementById('myform').innerHTML.replace('' + eval(bigw / x_num) + 'px','' + eval(100 / x_num) + '%').replace('' + eval(bigh / y_num) + 'px','' + eval(100 / y_num) + '%').replace('' + eval(bigw / x_num) + 'px','' + eval(100 / x_num) + '%').replace('' + eval(bigh / y_num) + 'px','' + eval(100 / y_num) + '%').replace('</span>','</a>').replace('<span ','<a target=_blank href=\"' + document.URL.split('#')[0].split('?')[0] + '\" ') + '</body></html>'));
  zform.append('tdhuhta', encodeURIComponent('<html><body>' + document.getElementById('myform').innerHTML.replace('</span>','</a>').replace('<span ','<a target=_blank href=\"' + document.URL.split('#')[0].split('?')[0] + '\" ') + '</body></html>'));
  }
  zhr.open('post', '//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php', true);
  //zhr.setRequestHeader('Access-Control-Allow-Origin', '*');
  //zhr.setRequestHeader('Access-Control-Allow-Methods', 'POST');
  zhr.onreadystatechange = showStuff;
  zhr.send(zform);
    }
  }
  
  function askstuff(ival, thisleft, thistop, thisright, thisbottom) {
    instuff=\"<input type=text onblur=mapdatachange(this); title='Href \" + ival + \"' value='' placeholder='Href value \" + ival + \"' id=ihref\" + ival + \"></input><br>\";
    instuff+=\"<input type=text onblur=mapdatachange(this); title='Alt \" + ival + \"' value='Alt \" + ival + \"' placeholder='Alt value \" + ival + \"' id=ialt\" + ival + \"></input><br>\";
    instuff+=\"<input type=text onblur=mapdatachange(this); title='Title \" + ival + \"' value='Title \" + ival + \"' placeholder='Title value \" + ival + \"' id=ititle\" + ival + \"></input><br>\";
    instuff+=\"<input type=text onblur=mapdatachange(this); title='Onclick \" + ival + \"' value='' placeholder='Onclick value \" + ival + \"' id=ionclick\" + ival + \"></input><br>\";
    instuff+=\"<input type=text onblur=mapdatachange(this); title='Onmouseover \" + ival + \"' value='' placeholder='Onmouseover value \" + ival + \"' id=ionmouseover\" + ival + \"></input><br>\";
    instuff+=\"<input type=text onblur=mapdatachange(this); title='Onmouseout \" + ival + \"' value='' placeholder='Onmouseout value \" + ival + \"' id=ionmouseout\" + ival + \"></input><br>\";
    instuff+=\"<input type=text onblur=mapdatachange(this); title='Style \" + ival + \"' value='' placeholder='Style value \" + ival + \" (eg. outline:3px solid purple;)' id=istyle\" + ival + \"></input><br>\";
    document.getElementById('mapdata').value=document.getElementById('mapdata').value.replace(\"<AREA \", \"<area shape=rect coords='\" + thisleft + \",\" + thistop + \",\" + thisright + \",\" + thisbottom + \"' alt='Alt \" + ival + \"' title='Title \" + ival + \"' nohref target=_blank id='area\" + ival + \"' style='' /><AREA \");
    return instuff;
  }
  
  function gridize() {
    var thiscell=0, thisleft=0, thistop=0, thisright=0, thisbottom=0, thisc=0, ii=0;
    var tinnards='';
    //alert('gridize');
    document.getElementById('mapdata').value=\"<map id=su65345 name=su65345><AREA shape=default nohref alt='' /></map>\";
    for (var iy=0; iy<y_num; iy++) {
    thisright=bigw;
    thisright=Math.floor(eval('' + thisleft) + eval(bigw / x_num));
    thisbottom=Math.floor(eval('' + thistop) + eval(bigh / y_num));
    tinnards+='<tr></TR>';
    thiscell+=x_num;
    thisc=thiscell;
    for (var ix=0; ix<x_num; ix++) {
    ii++;
    tinnards=tinnards.replace('</TR>', '<td>' + askstuff(ii, thisleft, thistop, thisright, thisbottom) + '</td></TR>');
    thiscell++;
    thisleft+=Math.floor(eval(bigw / x_num));
    thisright+=Math.floor(eval(bigw / x_num));
    }
    thisc++;
    thiscell=thisc;
    thistop=thisbottom;
    thisleft=0;
    tinnards=tinnards.replace(/TR/g,'tr');
    }
    //alert(tinnards);
    document.getElementById('oneandonlytbody').innerHTML=tinnards;
  }
  
  function scalethis(obut) {
    if (obut.value.indexOf('Fit ') == 0) {
    if (is_small) { // documentbody === document.getElementById('imgmydiv')) {
    document.getElementById('oneandonly').style.backgroundSize='contain';
    } else {
    documentbody.style.transform='scale(' + Math.max(zoomx,zoomy) + ')';
    //documentbody.style.transformOrigin='0 0';
    documentbody.style.transformOrigin='' + rectdleft + ' ' + rectdtop;
    }
    obut.value='Actual Size';
    //alert('to actual');
    //if (document.getElementById('ddarea').innerHTML != '') {
    //alert(Math.max(zoomx,zoomy));
    //document.getElementById('ddarea').style.transform='scale(' + Math.max(zoomx,zoomy) + ')';
    //}
    areatodiv(Math.max(zoomx,zoomy));
    } else if (obut.value.indexOf('Actual ') == 0) {
    if (is_small) { // documentbody === document.getElementById('imgmydiv')) {
    //alert('go to auto');
    document.getElementById('oneandonly').style.backgroundSize='auto';
    } else {
    //alert('?');
    documentbody.style.transform='scale(1.0)';
    //documentbody.style.transformOrigin='0 0';
    documentbody.style.transformOrigin='' + rectdleft + ' ' + rectdtop;
    }
    obut.value='Fit to Screen';
    //if (document.getElementById('ddarea').innerHTML != '') {
    //document.getElementById('ddarea').style.transform='scale(1.0)';
    //}
    areatodiv(1.0);
    //alert('from actual');
    //location.href='#myh1';
    }
  }
 
  function tableize(inw, inh, indu) {
    var tcover='cover';
    var tcss='';
    var tw='width:100%;';
    var th='height:100%;';
    if (!documentbody) {  documentbody=document.body; }
    bigw=eval('' + inw);
    bigh=eval('' + inh);
    document.getElementById('ifoverlay').style.width='' + bigw + 'px';
    document.getElementById('ifoverlay').style.height='' + bigh + 'px';
    zoomx=eval('' + sw) / eval('' + bigw);
    zoomy=eval('' + sh) / eval('' + bigh);
    rectd=document.getElementById('imgmydiv').getBoundingClientRect();
    document.getElementById('mydiv').style.width=inw + 'px';
    document.getElementById('mydiv').style.height=inh + 'px';
    if (Math.max(zoomx,zoomy) >= 10) {
       documentbody=document.getElementById('imgmydiv');
       is_small=true;
      //documentbody=document.getElementById('mydiv');
    if (document.body.innerHTML.indexOf('<area ') == -1) {
    //alert('zoomx=' + zoomx + 'zoomy' + zoomy);
    //document.getElementById('mydiv').style.transform='scale(' + Math.max(zoomx,zoomy) + ')';
    //document.getElementById('mydiv').style.transformOrigin='' + rectdleft + ' ' + rectdtop;
    //tcss='transform:scale(' + Math.max(zoomx,zoomy) + ');transform-origin:' + rectdleft + ' ' + rectdtop + ';';
    //tw='' + sw + 'px;';
    //th='' + sh + 'px;';
    document.getElementById('mydiv').style.width='' + sw + 'px';
    document.getElementById('mydiv').style.height='' + sh + 'px';
    tcover='contain;background-position:center center;';
    }
    }
    if (document.body.innerHTML.indexOf('<area ') == -1) {
    //alert('zoomx=' + zoomx + 'zoomy' + zoomy);
    documentbody.style.transform='scale(' + Math.max(zoomx,zoomy) + ')';
    documentbody.style.transformOrigin='' + rectdleft + ' ' + rectdtop;
    document.getElementById('scaleit').value='Actual Size';
    //var tableih='<table id=oneandonly style=\"display:block;width:' + inw + 'px;' + 'height:' + inh + 'px;background:" . $opprefix . "URL(' + indu + ');background-repeat:no-repeat;background-size:cover;\"><tbody id=oneandonlytbody  style=\"width:' + inw + 'px;' + 'height:' + inh + 'px;\"></tbody></table>';
    var tableih='<table id=oneandonly style=\"' + tw + th + 'background:" . $opprefix . "URL(' + indu + ');background-repeat:no-repeat;background-size:' + tcover + ';' + tcss + '\"><tbody id=oneandonlytbody  style=\"width:100%;' + 'height:100%;\"></tbody></table>';
    document.getElementById('mydiv').innerHTML=tableih;
    gridize();
    //} else {
    //alert('here');
    }
   }
  
  function athen() {
    document.getElementById('subm').click();
  }
  
  function readBlob(opt_startByte, opt_stopByte) {

    var files = document.getElementById('files').files;
    if (!files.length) {
      alert('Please select a file!');
      return;
    }

    file = files[0];
    var filen = file.name;
    mtype = file.type;
    document.getElementById('dataurip').innerHTML=\"<input type=hidden name=dataurip value='data:\" + mtype + \";base64,'></input>\";  
    var start = parseInt(opt_startByte) || 0;
    var stop = parseInt(opt_stopByte) || file.size - 1;

    var reader = new FileReader();

    // If we use onloadend, we need to check the readyState.
    reader.onloadend = function(evt) {
      if (evt.target.readyState == FileReader.DONE) { // DONE == 2
        document.getElementById('mapdata').value='';
        document.getElementById('iurl').value='data:' + mtype + ';base64,' + btoa(evt.target.result.split(';base64,')[1]);
        //document.body.style.background=\"URL('\" + 'data:' + mtype + ';base64,' + evt.target.result.split(';base64,')[1] + \"')\";
        is_small=false;
        document.getElementById('mydiv').innerHTML=\"<img usemap='#su65345' onload=tableize(this.width,this.height,this.src); src='\" + 'data:' + mtype + ';base64,' + evt.target.result.split(';base64,')[1] + \"'></img>\";
  //alert('there');
        document.getElementById('subm').click();
      } 
    };

    var blob = file.slice(start, stop + 1);
    reader.readAsDataURL(blob);
  }
  

function myownfraction(event) {
    var x=0, y=0;
    if (event.clientX || event.clientY) {
       x = event.clientX;
       y = event.clientY;
    } else {
       x = event.pageX;
       y = event.pageY;
    }
    document.getElementById('myform').style.opacity='1.0';
    var rect = event.target.getBoundingClientRect(), varn=0, vard=0, iv=0;
    if (eval('' + x) >= eval('' + rect.left) && eval('' + x) <= eval('' + eval('' + Math.round(rect.left)) + eval('' +  Math.round(rect.width)))) {
    varn = eval('' + eval('' + x) - eval('' +  Math.round(rect.left)));
    vard = eval('' +  Math.round(rect.width));
    event.target.value='' + eval(eval('' + event.target.min) + (eval('' + varn) / eval('' + vard) * (eval('' + event.target.max) - eval('' + event.target.min))));
    document.getElementById('transparency').value='' + eval(eval('' + event.target.min) + (eval('' + varn) / eval('' + vard) * (eval('' + event.target.max) - eval('' + event.target.min))));
    if (isf.length > 0) {
    document.getElementById('ddstyle').innerHTML+='<style> html { background:  linear-gradient(rgba(255,255,255,' + document.getElementById('transparency').value + '),rgba(255,255,255,' + document.getElementById('transparency').value + ')),URL(' + document.getElementById('dstyle').innerHTML.split(',URL(')[1] + '; } </style>';
    } else {
    document.getElementById('subm').click();
    }
    }
}

function andthen() {
    document.getElementById('myform').style.opacity='1.0';
    document.getElementById('myform').style.display='block';
}

function fadebackin() {
    var curop=eval('' + document.getElementById('myform').style.opacity);
    if (curop < 1.0) { 
    curop+=0.01;
    document.getElementById('myform').style.opacity='' + curop;
    if (curop < 1.0) { setTimeout(fadebackin, 1000); }
    }
}

function onl() {
  
  document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
    if (evt.target.tagName.toLowerCase() == 'button') {
      var startByte = evt.target.getAttribute('data-startbyte');
      var endByte = evt.target.getAttribute('data-endbyte');
      readBlob(startByte, endByte);
    }
  }, false);

}

function gridchange() {
  x_num=eval('' + document.getElementById('xnum').value);
  y_num=eval('' + document.getElementById('ynum').value);
  if (x_num == prev_x_num && y_num == prev_y_num) {
  //alert(123);
    x_num=x_num;
  } else if (document.getElementById('mapdata').value != '') {
  //alert(11);
    gridize();
  //alert(111);
  //} else {
  //alert(document.body.innerHTML.split('<area ')[1].substring(0,45));
  }
}
</scr" . "ipt>
</head>" . 
relative_to_absolute("<body onload=\" areatodiv(1.0); if (!documentbody) {  documentbody=document.body; } setTimeout(onl,5000);\">

<form onsubmit=\"if (this.target == 'ifoverlay') { document.getElementById('ifoverlay').style.width='' + sw + 'px'; document.getElementById('ifoverlay').style.height='' + sh + 'px'; document.getElementById('ifoverlay').style.display='block'; document.getElementById('ifoverlay').style.zIndex='9'; } return true;\" target=_self id=myform method=POST action='./imagegridmap.php' enctype='multipart/form-data'>
<h1 id=myh1><span title=\"Home\" ontouchdown=\"location.href=document.URL.split('#')[0].split('?')[0];\" onmousedown=\"location.href=document.URL.split('#')[0].split('?')[0];\" style=\"cursor:pointer;text-decoration:none;\">Map</span> <span onblur=\"document.getElementById('xnum').value=this.innerHTML.split('&')[0].trim(); gridchange();\" id=numx contenteditable=true>" . $xnum . " </span>x&nbsp;<span onblur=\"document.getElementById('ynum').value=this.innerHTML.split('&')[0].trim(); gridchange();\" id=numy contenteditable=true>" . $ynum . " </span> Grid of Area Elements for Image</h1>
<h3>RJM Programming - December, 2020</h3>
<h4 style='display:none;'>Thanks to <a target=_blank title='https://www.w3schools.com/css/css3_backgrounds.asp#google_ads_iframe_/16833175/MidContent_0' href='https://www.w3schools.com/css/css3_backgrounds.asp#google_ads_iframe_/16833175/MidContent_0'>W3Schools</a></h4>
<a title='Show Image' style=cursor:pointer;text-decoration:none; onclick=imwoit();>Image</a> URL: <input style='width:45%;' onblur=\"location.href=document.URL.split('#')[0].split('?')[0] + '?iurl=' + encodeURIComponent(this.value) + '&xnum=' + encodeURIComponent(document.getElementById('xnum').value) + '&ynum=' + encodeURIComponent(document.getElementById('ynum').value);\" type=text id=iurl name=iurl value='" . $prebimg . "' placeholder='Enter image URL'></input>&nbsp;&nbsp;<input style='border:1px solid blue;' onchange=\" document.getElementById('button').click();  \" type='file' name='file' id='files' accept='image/*,video/*,audio/*' capture></input>  
<span id='myspan' style='display:none;' class='readBytesButtons'>
  <button style='display:none;' data-startbyte='0' data-endbyte='4'>1-5</button>
  <button style='display:none;' data-startbyte='5' data-endbyte='14'>6-15</button>
  <button style='display:none;' data-startbyte='6' data-endbyte='7'>7-8</button>
  <button style=display:none; id=button value=Process data-endbyte=0 data-startbyte=0>Process</button>
</span>
<input type=hidden name=xnum id=xnum value=" . $xnum . "></input><input type=hidden name=ynum id=ynum value=" . $ynum . "></input><input type=hidden name='mapdata' id='mapdata' value=''></input>
<div style='display:none;' id='byte_range'></div>
<div style='display:none;' id='byte_content'></div><br>
<div id=dmg style='display:inline-block;'>" . $dmg . "</div>&nbsp;&nbsp;<input onclick='scalethis(this);' style='border:1px solid red;background-color:yellow;' type=button id=scaleit value='Fit to Screen'></input><br><br>
<div id=mydiv><img id=imgmydiv usemap='#su65345' onload=\"tableize(this.width,this.height,this.src);\" " . $bigdata . "=\"" . $prebimg . "\"></img>" . $mapdata . "</div>
<div id=dataurip></div>
<span style='display:none;'>Transparency: </span><meter style='width:40%;display:none;' onclick='myownfraction(event);' value='" . $transp . "' min='0.0' max='1.0'></meter><br>
<input type=hidden name=transparency id=transparency value='" . $transp . "'></input>
&nbsp;<!--input style='border:1px solid yellow;' onclick=\"document.getElementById('myform').style.display='none'; setTimeout(andthen,30000);\" type=button id=hidem value=Hide></input>&nbsp;<input style='border:1px solid green;' onclick=\"document.getElementById('myform').style.opacity='0.0'; setTimeout(fadebackin,300);\" type=button id=hidem value=Fade></input-->
<div id=ddarea style='margin:0 0 0 0;padding:0 0 0 0;    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;'></div>
</form>
<input type=text style='position:absolute;top:-200px;left:-200px;' value=''></input>
<div style=display:none; id=dstyle>" . $opprefix . "URL('" . $prebimg . "') no-repeat center fixed</div>
<div id=ddstyle></div>
<iframe id=ifoverlay name=ifoverlay style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:none;z-index:-3;'></iframe>
</body>
</html>");

?>