<!doctype html>
<html>
<head>
<title>Legend (of Map, perhaps) - RJM Programming - September, 2016 - Thanks to http://www.html5rocks.com/en/tutorials/file/dndfiles/</title>

<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 href=[], onclick=[], names=[];
var filen = '', firstgo=true;

function checkins() {
var sparer='', i, j, k, bits, maphtml='', tablehtml='', postbits, hrefbits, onclickbits, minw, maxw, minh, maxh,mybits='',delim='';
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;
rawurl='';
filen = "<a target=_blank title=MapHTML href='" + sparer + "'>" + sparer + "</a>";
document.getElementById('url').value = sparer;
document.getElementById('myif').src = sparer;
return;
}
}
if (rawhtml) {
if (rawhtml != '') {
names=[];
widths=[];
heights=[];
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)]);
} 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));
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);
}
} 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));
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 ').replace(/coords=/g,'><svg xmlns="http://www.w3.org/2000/svg" height="height1" width="width1" ><polygon style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" points=') + '</table>').replace('<tr','<tr><th id=myth style=text-align:left;>Legend' + (' for ' + filen + '</').replace(' for </','</') + 'th></tr><tr');
for (i=0; i<widths.length; 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]);
}
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;
}
}
}
}

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

</script>

</head>
<body onload="checkins();">

<table><tr><td style='vertical-align:top;'><div id='lhs' style=background-color:yellow;>
<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.html' method='GET'>
HTML Url: <input type='text' id='url' name='url' value='' style='width:80%;'></input><br><br>
HTML Itself: <textarea rows=20 cols=80 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>