<!doctype html>
<html>
<head>
<title>Legend (of Map, perhaps) - RJM Programming - September, 2016 - Thanks to http://www.html5rocks.com/en/tutorials/file/dndfiles/</title>
<meta charset="utf-8"/>
<style>
#byte_content {
margin: 5px 0;
max-height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
#byte_range { margin-top: 5px; }

</style>

<script type='text/javascript'>
var rawurl=location.search.split('url=')[1] ? decodeURIComponent(location.search.split('url=')[1]).split('&')[0] : '';
var rawhtml=location.search.split('tarea=')[1] ? decodeURIComponent(location.search.split('tarea=')[1].split('&')[0]) : '';
var showlabel=location.search.split('showlabel=')[1] ? decodeURIComponent(location.search.split('showlabel=')[1]).split('&')[0] : 'off';
var widths=[], heights=[];
var tox=[], toy=[];
var href=[], onclick=[], names=[];
var filen = '', firstgo=true;
var mapimg='';
var xrawurl='';
var ifh='600px';
var yehbut='';

function placeit(whattoleft) {
document.getElementById('placemap').innerHTML="<iframe id=ifplacemap src='" + whattoleft.href + "' style='overflow:scroll;height:" + ifh + ";width:600px;' width=600 height=" + ifh + "></iframe>";
}

function checkins() {
var sparer='', i, j, k, bits, maphtml='', tablehtml='', postbits, hrefbits, onclickbits, minw, maxw, minh, maxh,mybits='',delim='';
if (rawhtml != '' && mapimg == '') {
//alert(rawhtml);
bits=rawhtml.replace('<IMG','<img').split('<img ');
if (bits.length > 1) {
//alert(bits[1]);
postbits=bits[1].replace(' SRC=',' src=').split('src=');
if (postbits.length > 1) {
//alert(postbits[1]);
mapimg=postbits[1].replace('>',' ').split(' ')[0].replace('"','').replace('"','').replace("'","").replace("'","");
//alert('mApimg=' + mapimg + ' xrawurl=' + xrawurl);
if (mapimg != '' && mapimg.indexOf('/') == -1 && xrawurl.indexOf('/') != -1) {
//alert(xrawurl);
var qbits=xrawurl.split('/');
if (qbits[eval(-1 + qbits.length)].indexOf('.') != -1) {
mapimg=xrawurl.replace('/' + qbits[eval(-1 + qbits.length)], '/' + mapimg);
//alert('mapimg=' + mapimg);
} else if (qbits[eval(-1 + qbits.length)] == '') {
mapimg=xrawurl + mapimg;
//alert('mapImg=' + mapimg);
} else {
mapimg=xrawurl + '/' + mapimg;
//alert('mapiMg=' + mapimg);
}
}
var ioh = new Image();
ioh.src = mapimg;
ifh = eval(("" + ioh.width).replace('px',''));
if (eval("0" + ifh) == 0) ifh=600;
ifh += 200;
}
}
}
if (firstgo && rawhtml != '') {
document.getElementById('tarea').value = rawhtml;
}
if (document.getElementById('showlabel').checked && showlabel != 'on') {
if (firstgo) {
document.getElementById('showlabel').checked = false;
} else {
showlabel = 'on';
}
} else if (!document.getElementById('showlabel').checked && showlabel == 'on') {
if (firstgo) {
document.getElementById('showlabel').checked = true;
} else {
showlabel = 'off';
}
}
firstgo = false;
if (rawurl) {
if (rawurl != '') {
sparer=rawurl;
xrawurl=rawurl;
rawurl='';
filen = "<a id=aplace target=_blank onclick=placeit(this); title=MapHTML href='" + sparer + "'>" + sparer + "</a>";
document.getElementById('url').value = sparer;
document.getElementById('myif').src = sparer;
if (mapimg != '' && mapimg.indexOf('/') == -1 && sparer.indexOf('/') != -1) {
//alert(sparer);
var xbits=sparer.split('/');
if (xbits[eval(-1 + xbits.length)].indexOf('.') != -1) {
mapimg=sparer.replace('/' + xbits[eval(-1 + xbits.length)], '/' + mapimg);
//alert('mapimg=' + mapimg);
} else if (xbits[eval(-1 + xbits.length)] == '') {
mapimg=sparer + mapimg;
//alert('mapImg=' + mapimg);
} else {
mapimg=sparer + '/' + mapimg;
//alert('mapiMg=' + mapimg);
}
}
if (mapimg != '') {
var ioh = new Image();
ioh.src = mapimg;
ifh = eval(("" + ioh.width).replace('px',''));
if (eval("0" + ifh) == 0) ifh=600;
ifh += 200;
}
return;
}
}
if (rawhtml) {
if (rawhtml != '') {
// if ((location.search.split('url=')[1] ? decodeURIComponent(location.search.split('url=')[1]).split('&')[0] : '') != '') document.getElementById('tarea').value = rawhtml; //tablehtml;
names=[];
widths=[];
heights=[];
tox=[];
toy=[];
href=[];
onclick=[];
bits=rawhtml.split('')[0]);
} else {
names.push('<span id=span' + j + ' style=display:none;>' + bits[j].replace(postbits[0] + ' ','').split(' -->')[0] + '</span>');
}
}
}
}
bits=rawhtml.replace('</scr' + 'ipt','<scr' + 'ipt').split('<scr' + 'ipt');
if (bits.length > 1) {
document.getElementById('forscripts').innerHTML = '<scr' + 'ipt' + bits[1] + '</scr' + 'ipt>';
}
rawhtml=rawhtml.replace(/onClick=/g, "onclick=");
if (rawhtml.indexOf('coords="') != -1) {
bits=rawhtml.split('coords="');
//if ((location.search.split('url=')[1] ? decodeURIComponent(location.search.split('url=')[1]).split('&')[0] : '') != '') alert(bits.length);
for (j=1; j<bits.length; j++) {
postbits=bits[j].split('"')[0].split(',');
hrefbits=bits[j].split('href="');
onclickbits=bits[j].split('onclick="');
for (k=0; k<postbits.length; k+=2) {
if (k == 0) {
minw=eval(postbits[k]);
maxw=eval(postbits[k]);
minh=eval(postbits[eval(1 + k)]);
maxh=eval(postbits[eval(1 + k)]);
//names[eval(-1 + j)]=names[eval(-1 + j)] + ' ' + bits[j].split(' ')[0];
} else {
if (eval(postbits[k]) < eval(minw)) minw=eval(postbits[k]);
if (eval(postbits[k]) > eval(maxw)) maxw=eval(postbits[k]);
if (eval(postbits[eval(1 + k)]) < eval(minh)) minh=eval(postbits[eval(1 + k)]);
if (eval(postbits[eval(1 + k)]) > eval(maxh)) maxh=eval(postbits[eval(1 + k)]);
}
}
widths.push(eval(maxw - minw));
heights.push(eval(maxh - minh));
tox.push(eval(minw) - 5);
toy.push(eval(minh) - 5);
//tox.push(Math.round(eval(minw)));
//if (eval(j) != 1) {
//toy.push(Math.round(eval(minh) + eval(heights[eval(-2 + j)] * 0 / 2)));
//} else {
//alert(minh); // + ' ' + heights[eval(-1 + j)] + ' ' + Math.round(eval(minh) - eval(heights[eval(-1 + j)])));
//toy.push(Math.round(eval(minh) - eval(heights[eval(-1 + j)] * 0)));
//alert(toy[eval(-1 + j)]);
//}
if (names.length < heights.length) names.push("");
//names[eval(-1 + j)]=names[eval(-1 + j)] + ' ' + tox[eval(-1 + j)] + ' ' + toy[eval(-1 + j)] + 'background:url(' + "'" + mapimg + "'" + '); background-position: -' + tox[eval(-1 + j)] + 'px -' + toy[eval(-1 + j)] + 'px; background-clip: inherit; ';
//alert(names[eval(-1 + j)]);
if (hrefbits.length > 1) href.push(' href="' + hrefbits[1].split('"')[0] + '" ');
if (onclickbits.length > 1) onclick.push(' onclick="' + onclickbits[1].split('"')[0] + '" ');
mybits='';
delim='';
for (k=0; k<postbits.length; k+=2) {
mybits+=delim + eval(postbits[k] - minw) + ',' + eval(postbits[eval(1 + k)] - minh);
delim=',';
}
rawhtml=rawhtml.replace(bits[j].split('"')[0], mybits);
}
} else {
bits=rawhtml.split("coords='");
// if ((location.search.split('url=')[1] ? decodeURIComponent(location.search.split('url=')[1]).split('&')[0] : '') != '') alert('+' + bits.length);
for (j=1; j<bits.length; j++) {
postbits=bits[j].split("'")[0].split(',');
hrefbits=bits[j].split("href='");
onclickbits=bits[j].split("onclick='");
for (k=0; k<postbits.length; k+=2) {
if (k == 0) {
minw=eval(postbits[k]);
maxw=eval(postbits[k]);
minh=eval(postbits[eval(1 + k)]);
maxh=eval(postbits[eval(1 + k)]);
} else {
if (eval(postbits[k]) < eval(minw)) minw=eval(postbits[k]);
if (eval(postbits[k]) > eval(maxw)) maxw=eval(postbits[k]);
if (eval(postbits[eval(1 + k)]) < eval(minh)) minh=eval(postbits[eval(1 + k)]);
if (eval(postbits[eval(1 + k)]) > eval(maxh)) maxh=eval(postbits[eval(1 + k)]);
}
}
widths.push(eval(maxw - minw));
heights.push(eval(maxh - minh));
tox.push(eval(minw) - 5);
toy.push(eval(minh) - 5);
if (names.length < heights.length) names.push("");
if (hrefbits.length > 1) href.push(" href='" + hrefbits[1].split("'")[0] + "' ");
if (onclickbits.length > 1) onclick.push(" onclick='" + onclickbits[1].split("'")[0] + "' ");
mybits='';
delim='';
for (k=0; k<postbits.length; k+=2) {
mybits+=delim + eval(postbits[k] - minw) + ',' + eval(postbits[eval(1 + k)] - minh);
delim=',';
}
rawhtml=rawhtml.replace(bits[j].split('"')[0], mybits);
}
}
bits=rawhtml.replace('</MAP>','<map ').replace('<MAP ','<map ').replace('</map>','<map ').replace(/AREA /g,'area ').split('<map ');
if (bits.length >= 3) {
if (bits[1].indexOf('">') != -1) bits[1]=bits[1].replace('">', '" >');
tablehtml=('<table border=3 cellspacing=5 cellpadding=5 ' + bits[1].replace(/">/g,'"></polygon></svg></td></tr>').replace(/ \/>/g,'</polygon></svg></td></tr').replace(/\/area/g,'/polygon>/svg>/td></tr').replace(/area /g,'tr><td id=td1 ').replace(/coords=/g,'><svg xmlns="http://www.w3.org/2000/svg" height="height1" width="width1" ><polygon style="fill:transparent;stroke:purple;stroke-width:5;fill-rule:nonzero;opacity:0.4;" points=') + '</table>').replace('<tr','<tr><th id=myth style=text-align:left;>Legend' + (' for ' + filen + '</').replace(' for </','</') + 'th></tr><tr');
//alert(tablehtml + ' w.l=' + widths.length + ' n.l=' + names.length + ' tox.l=' + tox.length + ' toy.l=' + toy.length + ' tox.0=' + tox[0] + ' toy.0=' + toy[0]);
for (i=0; i<widths.length; i++) {
if (mapimg != '') tablehtml=tablehtml.replace('=td1 ', '=td1 style="background:url(' + "'" + mapimg + "'" + '); background-position: -' + tox[i] + 'px -' + toy[i] + 'px; " ');
tablehtml=tablehtml.replace('=td1 ', '=TD' + eval(1 + i) + ' ');
if (onclick.length > 0 && href.length > 0) {
//alert('<a target=_blank ' + onclick[i] + href[i] + '><svg');
tablehtml=tablehtml.replace('<svg', '<a target=_blank ' + onclick[i] + href[i] + '><SVG').replace('</svg>', '</SVG>' + names[i] + '</a>');
} else if (onclick.length > 0) {
//alert('<a target=_blank ' + onclick[i] + '><svg');
tablehtml=tablehtml.replace('<svg', '<a target=_blank ' + onclick[i] + '><SVG').replace('</svg>', '</SVG>' + names[i] + '</a>');
} else if (href.length > 0) {
//alert('<a target=_blank ' + href[i] + '><svg');
tablehtml=tablehtml.replace('<svg', '<a target=_blank ' + href[i] + '><SVG').replace('</svg>', '</SVG>' + names[i] + '</a>');
}
tablehtml=tablehtml.replace('height1', heights[i]).replace('width1', widths[i]);
// if (i == 0 || i == 1) alert(tablehtml + ' w.l=' + widths.length + ' n.l=' + names.length + ' tox.l=' + tox.length + ' toy.l=' + toy.length + ' tox.0=' + tox[0] + ' toy.0=' + toy[0]);
}
maphtml='<map ' + bits[1] + '</map>';
//if ((location.search.split('url=')[1] ? decodeURIComponent(location.search.split('url=')[1]).split('&')[0] : '') != '') document.getElementById('tarea').value = tablehtml;
document.getElementById('table_content').innerHTML = document.getElementById('forscripts').innerHTML + tablehtml.replace(/ shape="poly" /g,' ').replace(/ shape="rect" /g,' ').replace(/ shape="circle" /g,' ');
if (mapimg != '' && document.getElementById('aplace')) {
placeit(document.getElementById('aplace'));
}
}
}
}
}

function readBlob(opt_startByte, opt_stopByte) {

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

file = files[0];
filen = file.name;
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('byte_content').textContent = evt.target.result;
document.getElementById('byte_range').textContent =
['Read bytes: ', start + 1, ' - ', stop + 1,
' of ', file.size, ' byte file'].join('');
rawhtml = evt.target.result;
checkins();
}
};

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

function check_if(iois) {
if (iois != null) {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
rawhtml=aconto.body.innerHTML;
checkins();
//aconto.scrollTo(200, 200);
//document.getElementById('mytable').style.top='200px;'
//document.getElementById('mytable').style.left='200px;'
}
}
}
}

</script>

</head>
<body onload="checkins(); " style="width:100%;overflow:scroll;">

<table id='mytable' style='width:100%;position:absolute;top:0;left:0;'><tr><td id='tdplacemap' style='vertical-align:top;width:600px;overflow:scroll;'><div id='placemap' style='overflow:scroll;width:600px;'></div><div id='lhs' style=background-color:yellow;width:600px;>
<h1>Legend of HTML Map Element</h1>
<h2>RJM Programming - September, 2016</h2>
<h3>Thanks to <a target=_blank title='HTML5 Rocks' href='http://www.html5rocks.com/en/tutorials/file/dndfiles/'>http://www.html5rocks.com/en/tutorials/file/dndfiles/</a></h3>

HTML File: <input style='background-color:orange;' type="file" id="files" name="file" />
<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 style='background-color:pink;'>Process File Legend for HTML Map Data</button>
</span>
<div style='display:none;' id="byte_range"></div>
<div style='display:none;' id="byte_content"></div>

<br>
<form action='./legend_via_map.htm' method='GET'>
HTML Url: <input type='text' id='url' name='url' value='' style='width:80%;'></input><br><br>
HTML Itself: <textarea rows=20 cols=76 name='tarea' id='tarea' value=''></textarea><br><br><br>
<input type='submit' name="submit" id="submit" value="Create Legend for HTML Map Data" style="display:inline;background-color:pink;"></input> Showing Labels <input type='checkbox' id='showlabel' name='showlabel' checked></input>
</form>
</div></td><td>
<div id="table_content"></div>
</td></tr></table>

<script type='text/javascript'>

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

</script>

<div id='forscripts'>
</div>
<iframe id='myif' onload='check_if(this);' src='' style='display:none;'></iframe>
</body>
</html>