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

 $mapdata="";
 if (isset($_POST['mapdata'])) {  
   $mapdata=str_replace("+"," ",urldecode($_POST['mapdata']));
   //echo $mapdata;
   //exit;
 }
 $isf="";
 $prebimg="one.jpg";
 $bimg=$prebimg;
 if (isset($_GET['iurl'])) {  
 $transp="0.0";
 } else {
 $transp="0.8";
 }
 
 function mappath($ins) {
   if (strpos(strtolower($ins), 'data:') !== false) {
     return $ins;
   } else if (strpos(strtolower($ins), 'http') !== false) {
     return $ins;
   } else if (strpos(strtolower($ins), '//') !== false) {
     return 'http:' . $ins;
   } else {
     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=urldecode($_GET['iurl']);  if (strpos($prebimg, ";base64,") !== false) { $bimg=explode(";base64,", $prebimg)[0] . ";base64," . base64_decode(explode(";base64,", $prebimg)[1]); $prebimg=$bimg;  } else { $bimg=mappath(str_replace("+"," ",$prebimg)); $prebimg=$bimg; }  }
 if (isset($_POST['iurl'])) {  $prebimg=urldecode($_POST['iurl']);  if (strpos($prebimg, ";base64,") !== false) { $bimg=explode(";base64,", $prebimg)[0] . ";base64," . base64_decode(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;
}

</style>
<scri" . "pt type='text/javascript'>
  
  var isf='" . $isf . "'; 
  var mtype='';
  var zhr=null;
  var aform=null;
  var x_num=3, y_num=2;
  var prev_x_num=0, prev_y_num=0;
  var bigw=0, bigh=0;
  
  function mapdatachange(iarea) {
    if (iarea.id.indexOf('ion') == 0) {
     if (iarea.value.trim() != '') {
       var jn=iarea.id.replace('ionmouseover','').replace('ionmouseout','').replace('ionclick','');
       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);
     }
    }
  }
  
  function askstuff(ival, thisleft, thistop, thisright, thisbottom) {
    instuff=\"<input onblur=mapdatachange(this); title='Alt \" + ival + \"' value='Alt \" + ival + \"' placeholder='Alt value \" + ival + \"' id=ialt\" + ival + \"></input><br>\";
    instuff+=\"<input onblur=mapdatachange(this); title='Title \" + ival + \"' value='Title \" + ival + \"' placeholder='Title value \" + ival + \"' id=ititle\" + ival + \"></input><br>\";
    instuff+=\"<input onblur=mapdatachange(this); title='Onclick \" + ival + \"' value='' placeholder='Onclick value \" + ival + \"' id=ionclick\" + ival + \"></input><br>\";
    instuff+=\"<input onblur=mapdatachange(this); title='Href \" + ival + \"' value='' placeholder='Href value \" + ival + \"' id=ihref\" + ival + \"></input><br>\";
    instuff+=\"<input onblur=mapdatachange(this); title='Onmouseover \" + ival + \"' value='' placeholder='Onmouseover value \" + ival + \"' id=ionmouseover\" + ival + \"></input><br>\";
    instuff+=\"<input onblur=mapdatachange(this); title='Onmouseout \" + ival + \"' value='' placeholder='Onmouseout value \" + ival + \"' id=ionmouseout\" + 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 + \"' /><AREA \");
    return instuff;
  }
  
  function gridize() {
    var thiscell=0, thisleft=0, thistop=0, thisright=0, thisbottom=0, thisc=0, ii=0;
    var tinnards='';
    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 tableize(inw, inh, indu) {
    bigw=eval('' + inw);
    bigh=eval('' + inh);
    document.getElementById('mydiv').style.width=inw + 'px';
    document.getElementById('mydiv').style.height=inh + 'px';
    if (document.body.innerHTML.indexOf('<area ') == -1) {
    //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=\"width:100%;' + 'height:100%;background:" . $opprefix . "URL(' + indu + ');background-repeat:no-repeat;background-size:cover;\"><tbody id=oneandonlytbody  style=\"width:100%;' + 'height:100%;\"></tbody></table>';
    document.getElementById('mydiv').innerHTML=tableih;
    gridize();
    }
   }
  
  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('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] + \"')\";
        document.getElementById('mydiv').innerHTML=\"<img usemap='#su65345' onload=tableize(this.width,this.height,'\" + 'data:' + mtype + ';base64,' + evt.target.result.split(';base64,')[1] + \"'); src='\" + 'data:' + mtype + ';base64,' + evt.target.result.split(';base64,')[1] + \"'></img>\";
        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) {
    x_num=x_num;
  } else if (document.body.innerHTML.indexOf('<area ') == -1) {
    gridize();
  }
}
</scr" . "ipt>
</head>
<body onload='setTimeout(onl,5000);'>

<form target=_self id=myform method=POST action=./imagegridmap.php enctype='multipart/form-data'>
<h1>Map <span onblur=\"document.getElementById('xnum').value=this.innerHTML; gridchange();\" id=numx contenteditable=true>3</span>x<span onblur=\"document.getElementById('ynum').value=this.innerHTML; gridchange();\" id=numy contenteditable=true>2</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>
Image URL: <input type=text id=iurl name=iurl value='" . $prebimg . "' placeholder='Enter image URL'></input><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=3></input><input type=hidden name=ynum id=ynum value=2></input><input type=hidden name=mapdata id=mapdata valuee=''></input>
<div style='display:none;' id='byte_range'></div>
<div style='display:none;' id='byte_content'></div><br>
<input style='border:1px solid red;' type=submit id=subm value='Map Grid'></input><br>
<div id=mydiv><img usemap='#su65345' onload=\"tableize(this.width,this.height,'" . $prebimg . "');\" src='" . $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-->
</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>
</body>
</html>";

?>