<!doctype html>
<html>
<head>
<title>Server Hosts Client - RJM Programming - June, 2019 ... </title>


<script type='text/javascript'>

var documenttitle='';
var rawdataurl='';
var x=0, y=0, lastx=0, lasty=0;
var elemLeft=0, elemTop=0;
var fs=[], filn='', file, lasttype='';
var elem=null, context;
var lastiw=0, lastih=0;
var sofar=" ";
var files=[], start, stop, reader=[];
var kij=0, imgo=[], kkij=0, blob=[];
var wo=null, wp1='', wp2='_blank';
var wid='', wis=0, his=0, wx=0, wy=0;
//var ipre='<img src="', isuf='"></img>';
//var opre='<iframe width="100%" height="100%" src="', osuf='"></iframe>';
//var apre='<audio controls type="', amid='" src="', asuf='"></audio>';
//var vpre='<video controls type="', vmid='" src="', vsuf='"></video>';
//var tnsize=64, mfiletype='image/jpeg', mfilename='';
var ipre='<img style="display:inline-block;" id=gb src="', isuf='"></img>';
var apre='  <audio style="display:inline-block;" id=ab controls type="', amid='" src="', asuf='"></audio>';
var vpre='  <video style="display:inline-block;" id=vb controls type="', vmid='" src="', vsuf='"></video>';
var opre='  <iframe style="display:inline-block;" id=ib width="90%" height="90%" src="', osuf='"></iframe>';
var deviceWidth = window.orientation == 0 ? window.screen.height: window.screen.width;
var deviceHeight = window.orientation == 0 ? window.screen.width : window.screen.height;
var tnsize=64, mfiletype='image/jpeg', mfilename='';

var xx=[], yy=[], ixy=0, awis=[], ahis=[], awx=[], awy=[], awid=[], ten=10;
var lasth='', prevh='';

var deviceWidth = window.orientation == 0 ? window.screen.height: window.screen.width;
var deviceHeight = window.orientation == 0 ? window.screen.width : window.screen.height;
var cwidth=deviceWidth;
var cheight=deviceHeight;

var isIE = (navigator.appName == 'Microsoft Internet Explorer' || (navigator.appName == "Netscape" && navigator.appVersion.indexOf('Edge') > -1));
var dsplus="Image";
var dsprefix="<details open><summary>"; // + dsplus
var dsmid="</summary>";
var dssuffix="<hr></details>";

if (isIE) {
dsprefix="<div style=vertical-align:top; id=divsummarytotalsimage style='display:inline-block;vertical-align:top;' onclick=\"document.getElementById('xx').style.display=document.getElementById(tdownright('xx')).style.display.replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~','');\"><span style='display:iNlInE-bLoCk;' id=rightimage>▶</span><span style='display:NoNe;' id=downimage>🔻</span> <DIV id=divshtimage style='display:inline-block;vertical-align:top;'><span id=summarytotalsimage>"; // + dsplus
dsmid="</span>";
dssuffix="</DIV><hr></div>";
}

if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
cwidth=Math.round(eval(1.0 * deviceWidth));
cheight=Math.round(eval(1.0 * deviceHeight));
} else {
cwidth=Math.round(eval(0.78 * deviceWidth));
cheight=Math.round(eval(0.4 * deviceHeight));
}

function postwid() {
var iois=document.getElementById(awid[ixy]);
iois.style.position='absolute';
iois.style.zIndex='5';
iois.style.opacity='0.0';
iois.style.width='' + awis[ixy] + 'px';
iois.style.height='' + ahis[ixy] + 'px';
iois.style.left='' + awx[ixy] + 'px';
iois.style.top='' + awy[ixy] + 'px';
iois.style.display='block';
document.getElementById('dcontent').style.display='block';
ixy++;
//alert(iois.outerHTML);
}

function loadi(iois) { //, ioindex) {
//if (imgo.length > ioindex) {
if (iois.alt != 'Image' || sofar.indexOf(" " + iois.id + " ") == -1) {
if (documenttitle.indexOf(' ' + iois.id) != -1) {
sofar+=iois.id + " ";
lastiw=eval(('' + iois.width).replace('px',''));
lastih=eval(('' + iois.height).replace('px',''));
his=tnsize;
wis=Math.round(eval(tnsize * lastiw / lastih));
//alert('' + lastiw + ',' + lastih + ',' + x + ',' + y + ',' + wis + ',' + his);
iois.placeholder='' + x + ',' + y + ',' + eval(x + elemLeft) + ',' + eval(y + elemTop);
//document.title+=' ' + iois.placeholder;
context.drawImage(iois, 0, 0, lastiw, lastih, x, y, wis, his);
wid=iois.id;
wx=x;
wy=y;
awid.push(wid);
awis.push(wis);
ahis.push(wis);
awx.push(eval(wx + elemLeft));
awy.push(eval(wy + elemTop));
setTimeout(postwid,ten);
ten+=500;
x+=wis;
if (x > elem.width) {
x=0;
y+=his;
}
}
//document.title+=' image,' + x + ',' + y + ' ';
//if (imgo.length > ioindex) { alert(imgo.length); ioindex++; loadi(imgo[ioindex],ioindex); }
}
//}
}

function urldef(utxt) {
if (utxt != '') {
xx=[];
yy=[];
ten=500;
ixy=0;
awis=[];
ahis=[];
awx=[];
awy=[];
awid=[];

fs.push(utxt.replace(/\\/g,'/').split('/')[eval(-1 + utxt.replace(/\\/g,'/').split('/').length)]);
document.getElementById('spana').innerHTML="<a title='Click here for name of last media chosen' href=# style=text-decoration:none;cursor:pointer; onclick='alert(" + '"' + fs[eval(-1 + fs.length)] + '"' + ");'>-</a>";
if (1 == 1) {
//alert('<input placeholder="' + x + ',' + y + ',' + eval(x + elemLeft) + ',' + eval(y + elemTop) + '" class="content" title="' + lasttype + '" type=hidden id="' + fs[eval(-1 + fs.length)] + '" value="' + evt.target.result + '"></input>');
if (mfiletype.indexOf('image/') == 0) {
document.getElementById('dcontent').innerHTML+='<img onclick="wo=window.open(wp1,wp2); wo.document.write(ipre + this.src + isuf); wo.document.title = this.id;" onload=" loadi(this); " style="display:none;" placeholder="' + x + ',' + y + ',' + eval(x + elemLeft) + ',' + eval(y + elemTop) + '" class="content" title="' + mfiletype + '" id="' + fs[eval(-1 + fs.length)] + '" src="' + utxt + '"></img>';
} else if (mfiletype.indexOf('audio/') == 0) {
document.getElementById('dcontent').innerHTML+='<img onclick="wo=window.open(wp1,wp2); wo.document.write(apre + mfiletype + amid + this.title + asuf); wo.document.title = this.id;" onload=" loadi(this); " style="display:none;" placeholder="' + x + ',' + y + ',' + eval(x + elemLeft) + ',' + eval(y + elemTop) + '" class="content" id="' + fs[eval(-1 + fs.length)] + '" alt="Audio" src="//cdn0.iconfinder.com/data/icons/tab-bar-ios-and-wp8-icons/60/Sound_level_1.png" title="' + utxt + '"></img>';
} else if (mfiletype.indexOf('video/') == 0) {
document.getElementById('dcontent').innerHTML+='<img onclick="wo=window.open(wp1,wp2); wo.document.write(vpre + mfiletype + vmid + this.title + vsuf); wo.document.title = this.id;" onload=" loadi(this); " style="display:none;" placeholder="' + x + ',' + y + ',' + eval(x + elemLeft) + ',' + eval(y + elemTop) + '" class="content" id="' + fs[eval(-1 + fs.length)] + '" alt="Video" src="//cdn4.iconfinder.com/data/icons/free-retina-icon-set/60/Go.png" title="' + utxt + '"></img>';
} else {
document.getElementById('dcontent').innerHTML+='<input placeholder="' + x + ',' + y + ',' + eval(x + elemLeft) + ',' + eval(y + elemTop) + '" class="content" title="' + mfile.type + '" type=hidden id="' + mfile.name + '" value="' + evt.target.result + '"></input>';
}
} else {
document.getElementById('icontenti').value = evt.target.result;
}
}
}

function tdownright(inid) {
if (inid.substring(0,1) == 'g') {
document.getElementById('rightimage').style.display=document.getElementById('rightimage').style.display.toLowerCase().replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~',''); //'inline-block';
document.getElementById('downimage').style.display=document.getElementById('downimage').style.display.toLowerCase().replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~','');
} else if (inid.substring(0,1) == 'a') {
document.getElementById('rightaudio').style.display=document.getElementById('rightaudio').style.display.toLowerCase().replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~','');
document.getElementById('downaudio').style.display=document.getElementById('downaudio').style.display.toLowerCase().replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~','');
} else if (inid.substring(0,1) == 'v') {
document.getElementById('rightvideo').style.display=document.getElementById('rightvideo').style.display.toLowerCase().replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~','');
document.getElementById('downvideo').style.display=document.getElementById('downvideo').style.display.toLowerCase().replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~','');
} else if (inid.substring(0,1) == 'i') {
document.getElementById('rightother').style.display=document.getElementById('rightother').style.display.toLowerCase().replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~','');
document.getElementById('downother').style.display=document.getElementById('downother').style.display.toLowerCase().replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~','');
}
return inid;
}

function downright(inid) {
if (inid.substring(0,1) == 'g') {
document.getElementById('rightimage').style.display='inline-block';
document.getElementById('downimage').style.display='none';
} else if (inid.substring(0,1) == 'a') {
document.getElementById('rightaudio').style.display='inline-block';
document.getElementById('downaudio').style.display='none';
} else if (inid.substring(0,1) == 'v') {
document.getElementById('rightvideo').style.display='inline-block';
document.getElementById('downvideo').style.display='none';
} else if (inid.substring(0,1) == 'i') {
document.getElementById('rightother').style.display='inline-block';
document.getElementById('downother').style.display='none';
}
return inid;
}


function readBlob(opt_startByte, opt_stopByte) {
files = document.getElementById('files').files;
xx=[];
yy=[];
ten=500;
ixy=0;
awis=[];
ahis=[];
awx=[];
awy=[];
awid=[];
reader=[];
blob=[];
//imgo=[];
var ij=0;
kij=0;
kkij=0;
lastiw=0;
lastih=0;
documenttitle='';
if (!files.length) {
alert('Please select a file!');
return;
}
for (ij=0; ij<files.length; ij++) {
file = files[ij];
filen = file.name;
lasttype = file.type;
fs.push(file.name.replace(/\\/g,'/').split('/')[eval(-1 + file.name.replace(/\\/g,'/').split('/').length)]);
document.getElementById('spana').innerHTML="<a title='Click here for name of last media chosen' href=# style=text-decoration:none;cursor:pointer; onclick='alert(" + '"' + fs[eval(-1 + fs.length)] + '"' + ");'>-</a>";
start = parseInt(opt_startByte) || 0;
stop = parseInt(opt_stopByte) || file.size - 1;

reader.push(new FileReader());

// If we use onloadend, we need to check the readyState.
// Thanks to https://stackoverflow.com/questions/12546775/get-filename-after-filereader-asynchronously-loaded-a-file
reader[ij].onloadend = (function(mfile) {
return function(evt) {
var dp='', ds=dssuffix;
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
documenttitle+=' ' + mfile.name;
if (lasth != evt.target.result) {
lasth = evt.target.result;
if (1 == 1) {
//alert('<input placeholder="' + x + ',' + y + ',' + eval(x + elemLeft) + ',' + eval(y + elemTop) + '" class="content" title="' + lasttype + '" type=hidden id="' + fs[eval(-1 + fs.length)] + '" value="' + evt.target.result + '"></input>');
if (mfile.type.indexOf('image/') == 0) {
document.getElementById('dcontent').innerHTML+='<img onclick="wo=window.open(wp1,wp2); wo.document.write(ipre + this.src + isuf); wo.document.title = this.id;" onload=" loadi(this); " style="display:none;" placeholder="' + x + ',' + y + ',' + eval(x + elemLeft) + ',' + eval(y + elemTop) + '" class="content" title="' + mfile.name.replace(/\\/g,'/').split('/')[eval(-1 + mfile.name.replace(/\\/g,'/').split('/').length)] + '" id="' + mfile.name.replace(/\\/g,'/').split('/')[eval(-1 + mfile.name.replace(/\\/g,'/').split('/').length)] + '" alt="Image" src="' + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + '"></img>';
} else if (mfile.type.indexOf('audio/') == 0) {
document.getElementById('dcontent').innerHTML+='<img onclick="audioshow(this);" onload=" loadi(this); " style="display:none;" placeholder="' + x + ',' + y + ',' + eval(x + elemLeft) + ',' + eval(y + elemTop) + '" class="content" id="' + mfile.name.replace(/\\/g,'/').split('/')[eval(-1 + mfile.name.replace(/\\/g,'/').split('/').length)] + '" title="' + mfile.name.replace(/\\/g,'/').split('/')[eval(-1 + mfile.name.replace(/\\/g,'/').split('/').length)] + '" alt="Audio" src="//cdn0.iconfinder.com/data/icons/tab-bar-ios-and-wp8-icons/60/Sound_level_1.png" title=""></img>' + apre + mfile.type + amid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + asuf.replace('><', ' style=display:none; id=a' + mfile.name + '><');
} else if (mfile.type.indexOf('video/') == 0) {
document.getElementById('dcontent').innerHTML+='<img onclick="videoshow(this);" onload=" loadi(this); " style="display:none;" placeholder="' + x + ',' + y + ',' + eval(x + elemLeft) + ',' + eval(y + elemTop) + '" class="content" id="' + mfile.name.replace(/\\/g,'/').split('/')[eval(-1 + mfile.name.replace(/\\/g,'/').split('/').length)] + '" title="' + mfile.name.replace(/\\/g,'/').split('/')[eval(-1 + mfile.name.replace(/\\/g,'/').split('/').length)] + '" alt="Video" src="//cdn4.iconfinder.com/data/icons/free-retina-icon-set/60/Go.png" title=""></img>' + vpre + mfile.type + vmid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + vsuf.replace('><', ' style=display:none; id=v' + mfile.name + '><');
} else {
document.getElementById('dcontent').innerHTML+='<img onclick="othershow(this);" onload=" loadi(this); " style="display:none;" placeholder="' + x + ',' + y + ',' + eval(x + elemLeft) + ',' + eval(y + elemTop) + '" class="content" id="' + mfile.name.replace(/\\/g,'/').split('/')[eval(-1 + mfile.name.replace(/\\/g,'/').split('/').length)] + '" title="' + mfile.name.replace(/\\/g,'/').split('/')[eval(-1 + mfile.name.replace(/\\/g,'/').split('/').length)] + '" alt="Other" src="//cdn0.iconfinder.com/data/icons/tab-bar-ios-and-wp8-icons/60/Align_left.png" title=""></img>' + opre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + osuf.replace('><', ' style=display:none; id=o' + mfile.name + '><');
}
} else {
document.getElementById('icontenti').value = evt.target.result;
}



if (mfile.type.indexOf('image/') == 0) {
if (document.getElementById('ibchkbox').checked) {
if (document.getElementById('gb')) {
document.getElementById('gb').src=evt.target.result.replace('data:;', 'data:' + mfile.type + ';');
document.getElementById('gb').style.display='inline-block';
if (document.getElementById('downimage')) {
document.getElementById('downimage').style.display='inline-block';
document.getElementById('rightimage').style.display='none';
} else {
document.getElementById('dtli').open=true;
}
} else if (document.getElementById('icontent').innerHTML == '') {
// var dsprefix="<details open><summary>"; // + dsplus
// var dsmid="</summary>";
// var dssuffix="</details>";
if (dsprefix.indexOf('image') != -1) {
dp='<hr>' + dsprefix.replace(/xx/g,'vb').replace(/image/g,'video') + 'Video' + dsmid + dssuffix;
dp+=dsprefix.replace(/xx/g,'ab').replace(/image/g,'audio') + 'Audio' + dsmid + dssuffix;
dp+=dsprefix.replace(/xx/g,'ib').replace(/image/g,'other') + 'Other' + dsmid + dssuffix;
dp+=dsprefix.replace('iNlInE-bLoCk','none').replace('NoNe','inline-block').replace(/xx/g,'gb') + 'Image' + dsmid;
} else {
dp=dsprefix.replace('><',' id=dtlv><') + 'Video  ' + dsmid + dssuffix;
dp+=dsprefix.replace('><',' id=dtla><') + 'Audio  ' + dsmid + dssuffix;
dp+=dsprefix.replace('><',' id=dtlo><') + 'Other  ' + dsmid + dssuffix;
dp+=dsprefix.replace('><',' id=dtli><') + 'Image  ' + dsmid;
}
document.getElementById('icontent').innerHTML+=dp + ipre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + isuf + ds;

} else if (document.getElementById('dtli') || document.getElementById('divshtimage')) {
if (dsprefix.indexOf('image') != -1) {
if (document.getElementById('ab')) { document.getElementById(downright('ab')).style.display='none'; }
if (document.getElementById('vb')) { document.getElementById(downright('vb')).style.display='none'; }
if (document.getElementById('ib')) { document.getElementById(downright('ib')).style.display='none'; }
document.getElementById('divshtimage').innerHTML+=ipre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + isuf;
tdownright('gb');
} else {
document.getElementById('dtla').open=false;
document.getElementById('dtlv').open=false;
document.getElementById('dtlo').open=false;
document.getElementById('dtli').open=true;
document.getElementById('dtli').innerHTML+=ipre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + isuf;
}
} else {
document.getElementById('icontent').innerHTML+=ipre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + isuf;
}
} else {
wo=window.open(wp1,wp2);
wo.document.write(ipre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + isuf);
wo.document.title = mfile.name.replace(/\\/g,'/').split('/')[eval(-1 + mfile.name.replace(/\\/g,'/').split('/').length)];
}
} else if (mfile.type.indexOf('audio/') == 0) {
if (document.getElementById('ibchkbox').checked) {
if (document.getElementById('ab')) {
document.getElementById('ab').src=evt.target.result.replace('data:;', 'data:' + mfile.type + ';');
document.getElementById('ab').style.display='inline-block';
if (document.getElementById('downaudio')) {
document.getElementById('downaudio').style.display='inline-block';
document.getElementById('rightaudio').style.display='none';
} else {
document.getElementById('dtla').open=true;
}
} else if (document.getElementById('icontent').innerHTML == '') {
// var dsprefix="<details open><summary>"; // + dsplus
// var dsmid="</summary>";
// var dssuffix="</details>";
if (dsprefix.indexOf('image') != -1) {
dp='<hr>' + dsprefix.replace(/xx/g,'vb').replace(/image/g,'video') + 'Video' + dsmid + dssuffix;
dp+=dsprefix.replace(/xx/g,'gb') + 'Image' + dsmid + dssuffix;
dp+=dsprefix.replace(/xx/g,'ib').replace(/image/g,'other') + 'Other' + dsmid + dssuffix;
dp+=dsprefix.replace('iNlInE-bLoCk','none').replace('NoNe','inline-block').replace(/xx/g,'ab').replace(/image/g,'audio') + 'Audio' + dsmid;
} else {
dp=dsprefix.replace('><',' id=dtlv><') + 'Video  ' + dsmid + dssuffix;
dp+=dsprefix.replace('><',' id=dtli><') + 'Image  ' + dsmid + dssuffix;
dp+=dsprefix.replace('><',' id=dtlo><') + 'Other  ' + dsmid + dssuffix;
dp+=dsprefix.replace('><',' id=dtla><') + 'Audio  ' + dsmid;
}
document.getElementById('icontent').innerHTML+=dp + apre + mfile.type + amid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + asuf.replace('><', ' id=v' + mfile.name + '><') + ds;

} else if (document.getElementById('dtla') || document.getElementById('divshtaudio')) {
if (dsprefix.indexOf('image') != -1) {
if (document.getElementById('gb')) { document.getElementById(downright('gb')).style.display='none'; }
if (document.getElementById('vb')) { document.getElementById(downright('vb')).style.display='none'; }
if (document.getElementById('ib')) { document.getElementById(downright('ib')).style.display='none'; }
document.getElementById('divshtaudio').innerHTML+=apre + mfile.type + amid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + asuf.replace('><', ' id=v' + mfile.name + '><');
tdownright('ab');
} else {
document.getElementById('dtli').open=false;
document.getElementById('dtlv').open=false;
document.getElementById('dtlo').open=false;
document.getElementById('dtla').open=true;
document.getElementById('dtla').innerHTML+=apre + mfile.type + amid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + asuf.replace('><', ' id=v' + mfile.name + '><');
}
} else {
document.getElementById('icontent').innerHTML+=apre + mfile.type + amid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + asuf.replace('><', ' id=v' + mfile.name + '><');
}
} else {
wo=window.open(wp1,wp2);
wo.document.write(apre + mfile.type + amid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + asuf.replace('><', ' id=a' + mfile.name + '><'));
wo.document.title = mfile.name.replace(/\\/g,'/').split('/')[eval(-1 + mfile.name.replace(/\\/g,'/').split('/').length)];
}
} else if (mfile.type.indexOf('video/') == 0) {
if (document.getElementById('ibchkbox').checked) {
if (document.getElementById('vb')) {
document.getElementById('vb').src=evt.target.result.replace('data:;', 'data:' + mfile.type + ';');
document.getElementById('vb').style.display='inline-block';
if (document.getElementById('downvideo')) {
document.getElementById('downvideo').style.display='inline-block';
document.getElementById('rightvideo').style.display='none';
} else {
document.getElementById('dtlv').open=true;
}
} else if (document.getElementById('icontent').innerHTML == '') {
// var dsprefix="<details open><summary>"; // + dsplus
// var dsmid="</summary>";
// var dssuffix="</details>";
if (dsprefix.indexOf('image') != -1) {
dp='<hr>' + dsprefix.replace(/xx/g,'ab').replace(/image/g,'audio') + 'Audio' + dsmid + dssuffix;
dp+=dsprefix.replace(/xx/g,'gb') + 'Image' + dsmid + dssuffix;
dp+=dsprefix.replace(/xx/g,'ib').replace(/image/g,'other') + 'Other' + dsmid + dssuffix;
dp+=dsprefix.replace('iNlInE-bLoCk','none').replace('NoNe','inline-block').replace(/xx/g,'vb').replace(/image/g,'video') + 'Video' + dsmid;
} else {
dp=dsprefix.replace('><',' id=dtli><') + 'Image  ' + dsmid + dssuffix;
dp+=dsprefix.replace('><',' id=dtla><') + 'Audio  ' + dsmid + dssuffix;
dp+=dsprefix.replace('><',' id=dtlo><') + 'Other  ' + dsmid + dssuffix;
dp+=dsprefix.replace('><',' id=dtlv><') + 'Video  ' + dsmid;
}
document.getElementById('icontent').innerHTML+=dp + vpre + mfile.type + vmid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + vsuf.replace('><', ' id=v' + mfile.name + '><') + ds;
} else if (document.getElementById('dtlv') || document.getElementById('divshtvideo')) {
if (dsprefix.indexOf('image') != -1) {
if (document.getElementById('gb')) { document.getElementById(downright('gb')).style.display='none'; }
if (document.getElementById('ab')) { document.getElementById(downright('ab')).style.display='none'; }
if (document.getElementById('ib')) { document.getElementById(downright('ib')).style.display='none'; }
document.getElementById('divshtvideo').innerHTML+=vpre + mfile.type + vmid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + vsuf.replace('><', ' id=v' + mfile.name + '><');
tdownright('vb');
} else {
document.getElementById('dtla').open=false;
document.getElementById('dtli').open=false;
document.getElementById('dtlo').open=false;
document.getElementById('dtlv').open=true;
document.getElementById('dtlv').innerHTML+=vpre + mfile.type + vmid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + vsuf.replace('><', ' id=v' + mfile.name + '><');
}
} else {
document.getElementById('icontent').innerHTML+=vpre + mfile.type + vmid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + vsuf.replace('><', ' id=v' + mfile.name + '><');
}
} else {
wo=window.open(wp1,wp2);
wo.document.write(vpre + mfile.type + vmid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + vsuf.replace('><', ' id=v' + mfile.name + '><'));
wo.document.title = mfile.name.replace(/\\/g,'/').split('/')[eval(-1 + mfile.name.replace(/\\/g,'/').split('/').length)];
}
} else {
if (document.getElementById('ibchkbox').checked) {
if (document.getElementById('ib')) {
document.getElementById('ib').src=evt.target.result.replace('data:;', 'data:' + mfile.type + ';');
document.getElementById('ib').style.display='inline-block';
if (document.getElementById('downother')) {
document.getElementById('downother').style.display='inline-block';
document.getElementById('rightother').style.display='none';
} else {
document.getElementById('dtlo').open=true;
}
} else if (document.getElementById('icontent').innerHTML == '') {
// var dsprefix="<details open><summary>"; // + dsplus
// var dsmid="</summary>";
// var dssuffix="</details>";
if (dsprefix.indexOf('image') != -1) {
dp='<hr>' + dsprefix.replace(/xx/g,'ab').replace(/image/g,'audio') + 'Audio' + dsmid + dssuffix;
dp+=dsprefix.replace(/xx/g,'gb') + 'Image' + dsmid + dssuffix;
dp+=dsprefix.replace(/xx/g,'vb').replace(/image/g,'video') + 'Video' + dsmid + dssuffix;
dp+=dsprefix.replace('iNlInE-bLoCk','none').replace('NoNe','inline-block').replace(/xx/g,'ib').replace(/image/g,'other') + 'Other' + dsmid;
} else {
dp=dsprefix.replace('><',' id=dtlv><') + 'Video  ' + dsmid + dssuffix;
dp+=dsprefix.replace('><',' id=dtla><') + 'Audio  ' + dsmid + dssuffix;
dp+=dsprefix.replace('><',' id=dtli><') + 'Image  ' + dsmid + dssuffix;
dp+=dsprefix.replace('><',' id=dtlo><') + 'Other  ' + dsmid;
}
document.getElementById('icontent').innerHTML+=dp + opre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + osuf + ds;

} else if (document.getElementById('dtlo') || document.getElementById('divshtother')) {
if (dsprefix.indexOf('image') != -1) {
if (document.getElementById('gb')) { document.getElementById(downright('gb')).style.display='none'; }
if (document.getElementById('ab')) { document.getElementById(downright('ab')).style.display='none'; }
if (document.getElementById('vb')) { document.getElementById(downright('vb')).style.display='none'; }
document.getElementById('divshtother').innerHTML+=opre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + osuf;
tdownright('ib');
} else {
document.getElementById('dtla').open=false;
document.getElementById('dtlv').open=false;
document.getElementById('dtli').open=false;
document.getElementById('dtlo').open=true;
document.getElementById('dtlo').innerHTML+=opre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + osuf;
}
} else {
document.getElementById('icontent').innerHTML+=opre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + osuf;
}
} else {
wo=window.open(wp1,wp2);
wo.document.write(opre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + osuf);
wo.document.title = mfile.name.replace(/\\/g,'/').split('/')[eval(-1 + mfile.name.replace(/\\/g,'/').split('/').length)];
}
}
}
} };
})(files[ij]);

blob.push(file.slice(start, stop + 1));
reader[ij].readAsDataURL(blob[ij]);
kij++;
} }

function othershow(ooi) {
document.getElementById('o' + ooi.id).style.display='block';
location.href='#o' + ooi.id;
}

function audioshow(aoi) {
document.getElementById('a' + aoi.id).style.display='block';
location.href='#a' + aoi.id;
}

function videoshow(voi) {
document.getElementById('v' + voi.id).style.display='block';
location.href='#v' + voi.id;
}

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);

elem = document.getElementById('mycanvas');
context = elem.getContext('2d');
if (elemLeft == 0 && elemTop == 0) {
var rect=elem.getBoundingClientRect();
elemLeft = Math.round(rect.left);
elemTop = Math.round(rect.top);
}

document.getElementById('serverurl').focus();

}


function recxy(event) {
var isok=true;
if (elemLeft == 0 && elemTop == 0) {
var rect=event.target.getBoundingClientRect()
elemLeft = Math.round(rect.left);
elemTop = Math.round(rect.top);
}
if (event.touches) { // thanks to https://stackoverflow.com/questions/24567441/how-do-i-detect-two-fingers-at-touchstart-in-javascript
if (event.touches.length > 1) {
if (event.touches.length >= 1) {
isok=false;
var touches = event.changedTouches;
var first = touches[0];
x = first.clientX;
y = first.clientY;
} else if (event.layerX) {
isok=false;
x = event.layerX;
y = event.layerY;
} else if (event.clientX) {
isok=false;
x = event.clientX;
y = event.clientY;
} else if (event.pageX) {
isok=false;
x = event.pageX;
y = event.pageY;
}
} else if (event.layerX) {
isok=false;
x = event.layerX;
y = event.layerY;
} else if (event.clientX) {
isok=false;
x = event.clientX;
y = event.clientY;
} else if (event.pageX) {
isok=false;
x = event.pageX;
y = event.pageY;
}
lastx=x;
lasty=y;
x-=elemLeft;
y-=elemTop;
}
if (isok) {
if (x == 0 && y == 0 && lastx == 0 && lasty == 0) {

if (event.clientX || event.clientY) {
x = event.clientX; // - elemLeft;
y = event.clientY; // - elemTop;
} else {
x = event.pageX; // - elemLeft;
y = event.pageY; // - elemTop;
}
lastx=x;
lasty=y;
x-=elemLeft;
y-=elemTop;
//setTimeout(xthen, 2000);
//setTimeout(andthen, 1000);
} else {

if (event.clientX || event.clientY) {
if (x != event.clientX || y != event.clientY) {
lastx=x;
lasty=y;
//setTimeout(xthen, 2000);
//setTimeout(andthen, 1000);
}
} else {
if (x != event.pageX || y != event.pageY) {
lastx=x;
lasty=y;
x-=elemLeft;
y-=elemTop;
//setTimeout(xthen, 2000);
//setTimeout(andthen, 1000);
}
}

if (event.clientX || event.clientY) {
x = event.clientX; // - elemLeft;
y = event.clientY; // - elemTop;
lastx=x;
lasty=y;
x-=elemLeft;
y-=elemTop;
} else {
x = event.pageX; // - elemLeft;
y = event.pageY; // - elemTop;
lastx=x;
lasty=y;
x-=elemLeft;
y-=elemTop;
}
}
//alert('x=' + x + ' and y=' + y);
}
//alert('' + x + ',' + y);
}

function resized(inh) {
document.getElementById('dthumbnail').style.height='' + inh + 'px';
document.getElementById('dthumbnail').style.width='' + inh + 'px';
tnsize=eval('' + inh);
var rect=elem.getBoundingClientRect();
elemLeft = Math.round(rect.left);
elemTop = Math.round(rect.top);
}


</script>

</head>
<body style="background-color:#f0f0f0;" onload="onl();">
<br>
<table><tr><th>
<h1>Server Hosts Client</h1>
<h3>RJM Programming <span id=spana>-</span> June, 2019</h3>
</th><th>   <div title='Thumbnail height, width can vary' id='dthumbnail' style='height:64px;width:64px;border:2px solid red;background-color:yellow;'></div>   </td><td>   <input onchange=resized(this.value); onblur=resized(this.value); type=number title='Thumbnail height in pixels' placeholder='Thumbnail height in pixels' type=number min=0 step=1 value=64></input>   </th></tr></table>
<table style='width:100%;'>
<tr><th>Server Canvas ... <input id=serverurl style='width:40%;' type=text placeholder='Media URL can go here' value='' onblur='urldef(this.value);'></input><br></th></tr>
<tr><td>
<script type='text/javascript'>
document.write('<canvas width=' + cwidth + ' height=' + cheight + ' ontouchstart=" recxy(event); " onclick=" recxy(event); " id=mycanvas style="display:block;z-index:-2;border:1px solid red;background-color:white;"></canvas><br>');
</script>
</td></tr>
<tr><th>Client Browsing ...</th></tr>
<tr><td>
<input onclick="this.value=null;" onchange="document.getElementById('ibut').click();" style='width:40%;background-color:orange;' type="file" id="files" name="file" accept="image/*,video/*,audio/*,text/*,application/*" multiple />     Iframe Below <input type=checkbox id=ibchkbox></input> Rather Than New Window
<span 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 id=ibut style='background-color:pink;display:none;'>Send to Server Top Half</button>
</span>
<div style='display:none;' id="byte_range"></div>
<div style='display:none;' id="byte_content"></div>
</td></tr>
</table>
<div id=dcontent style='display:none;'>
<input type=hidden id=icontenti value=""></input>
</div>
<div id=icontent></div>

</body>
</html>