<!doctype html>
<html>
<head>
<title>SVG Polygon Placement - RJM Programming - February, 2019</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type='text/javascript'>

var polygonask=-1;
var polygonxa=[], polygonya=[];
var polygonx=0, polygony=0;
var minx=0, miny=0, maxx=0; maxy=0;
var dcnt=1, dpcnt=0;
var fcol='red', fwords='', origih='';
var idarr=[];
var undoid=-1;
var redoid=-1;
var its='';
var showmenu=true;
var firstgo=true;

function draw(dc) {
var svgpl='', svgpld='';
fcol=document.getElementById('fcol').value;
fwords=document.getElementById('swords').value;
if (dc) {
polygonxa.push(polygonxa[0]);
polygonya.push(polygonya[0]);
polygonask++;
}
for (var i=0; i<polygonxa.length; i++) {
polygonxa[i]-=minx;
polygonya[i]-=miny;
svgpl+=svgpld + polygonxa[i] + ',' + polygonya[i];
svgpld=' ';
}
document.getElementById('dhelper').innerHTML='';
//alert('' + miny + ' ... ' + maxy + ' ... <div style="display:inline-block;position:absolute;left:' + polygonx + 'px;top:' + polygony + 'px;width:' + eval(maxx - minx) + 'px;height:' + eval(maxy - miny) + 'px;"><svg height="100%" width="100%"><polygon points="' + svgpl + '" style="fill:lime;stroke:purple;stroke-width:1" /></svg></div>');
while (document.getElementById('dp' + dpcnt)) {
idarr.push('dp' + dpcnt);
undoid=eval(-1 + idarr.length);
dpcnt++;
}
document.getElementById('dpalette').innerHTML+='<div class=dpolygon id=dp' + dpcnt + ' style="z-index:' + dcnt + ';position:absolute;left:' + polygonx + 'px;top:' + polygony + 'px;width:' + eval(maxx - minx) + 'px;height:' + eval(maxy - miny) + 'px;">' + fwords + '<svg height="100%" width="100%"><polygon points="' + svgpl + '" style="fill:' + fcol + ';stroke:purple;stroke-width:1" /></svg></div>';
if (its != '') { its+='<div class=dpolygon id=dp' + dpcnt + ' style="z-index:' + dcnt + ';position:absolute;left:' + polygonx + 'px;top:' + polygony + 'px;width:' + eval(maxx - minx) + 'px;height:' + eval(maxy - miny) + 'px;">' + fwords + '<svg height="100%" width="100%"><polygon points="' + svgpl + '" style="fill:' + fcol + ';stroke:purple;stroke-width:1" /></svg></div>'; }
//document.body.innerHTML+='<div style="border:1px solid red;z-index:' + dcnt + ';position:absolute;left:' + polygonx + 'px;top:' + polygony + 'px;width:' + eval(maxx - minx) + 'px;height:' + eval(maxy - miny) + 'px;"><svg height="100%" width="100%"><polygon points="' + svgpl + '" style="fill:lime;stroke:purple;stroke-width:1" /></svg></div>';
idarr.push('dp' + dpcnt);
undoid=eval(-1 + idarr.length);
dpcnt++;
if (document.getElementById('myemail')) {
document.getElementById('myemail').innerHTML='📧';
}
document.getElementById('myh3').innerHTML=document.getElementById('myh3').innerHTML.replace(' - ',' <a style=cursor:pointer;text-decoration:underline; onclick="location.href=document.URL.split(' + "'?'" + ')[0].split(' + "'#'" + ')[0];" title=Refresh>-</a> ');
dcnt++;
polygonxa=[];
polygonya=[];
polygonask=-1;
if (document.getElementById('status')) {
document.getElementById('status').innerHTML='First click places, subsequent clicks define polygon and a double click or keyboard work closes off any open polygon';
}
}

function socwc(evt, isdouble) {
if (polygonask == -2) {
polygonask=-1;
} else if (polygonask == -1) {
if (evt.clientX) {
polygonx = evt.clientX; // - elemLeft;
polygony = evt.clientY; // - elemLeft;
} else {
polygonx = evt.pageX; // - elemLeft;
polygony = evt.pageY; // - elemLeft;
}
polygonask=0;
if (document.getElementById('status')) {
document.getElementById('status').innerHTML='Clicks now define polygon and a double click or keyboard work closes off any open polygon';
}
document.getElementById('dhelper').innerHTML+='<div style="position:absolute;left:' + polygonx + 'px;top:' + eval(-5 + polygony) + 'px;color:red;">.</div>';
} else {
//document.title='' + polygonask;
if (evt.clientX) {
polygonxa.push(eval('' + evt.clientX));
polygonya.push(eval('' + evt.clientY)); // - elemLeft;
if (polygonask == 0) {
minx=polygonxa[0];
miny=polygonya[0];
maxx=polygonxa[0];
maxy=polygonya[0];
} else {
if (polygonxa[polygonask] < minx) { minx=polygonxa[polygonask]; }
if (polygonya[polygonask] < miny) { miny=polygonya[polygonask]; }
if (polygonxa[polygonask] > maxx) { maxx=polygonxa[polygonask]; }
if (polygonya[polygonask] > maxy) { maxy=polygonya[polygonask]; }
}
polygonask++;
//if (polygonask >= 8) { isdouble=true; }
if (isdouble) {
polygonxa.push(polygonxa[0]);
polygonya.push(polygonya[0]);
polygonask++;
draw(false);
}
} else {
polygonxa.push(eval('' + evt.pageX));
polygonya.push(eval('' + evt.pageY)); // - elemLeft;
if (polygonask == 0) {
minx=polygonxa[0];
miny=polygonya[0];
maxx=polygonxa[0];
maxy=polygonya[0];
} else {
if (polygonxa[polygonask] < minx) { minx=polygonxa[polygonask]; }
if (polygonya[polygonask] < miny) { miny=polygonya[polygonask]; }
if (polygonxa[polygonask] > maxx) { maxx=polygonxa[polygonask]; }
if (polygonya[polygonask] > maxy) { maxy=polygonya[polygonask]; }
}
polygonask++;
//if (polygonask >= 8) { isdouble=true; }
if (isdouble) {
polygonxa.push(polygonxa[0]);
polygonya.push(polygonya[0]);
polygonask++;
draw(false);
}
}
document.getElementById('dhelper').innerHTML+='<div style="position:absolute;left:' + polygonxa[eval(-1 + polygonxa.length)] + 'px;top:' + eval(-5 + polygonya[eval(-1 + polygonya.length)]) + 'px;color:green;">.</div>';

}
}

function fcolis(tv) {
parent.document.getElementById('fcol').value=tv;
}

function fwordis(tv) {
parent.document.getElementById('swords').value=tv;
}

function doundo() {
if (parent.document.getElementById('iundo').title != document.getElementById('iundo').title) {
parent.document.getElementById('iundo').click();
document.getElementById('iredo').style.display='inline-block';
} else {
if (undoid >= 0) {
redoid=undoid;
document.getElementById(idarr[undoid]).style.display='none';
//document.getElementById('iredo').style.display='inline-block';
undoid--;
if (undoid < 0) {
document.getElementById('iundo').style.display='none';
}
}
}
}

function doredo() {
if (parent.document.getElementById('iundo').title != document.getElementById('iundo').title) {
parent.document.getElementById('iredo').click();
document.getElementById('iundo').style.display='inline-block';
} else {
if (redoid >= 0 && redoid < idarr.length) {
undoid=redoid;
document.getElementById(idarr[redoid]).style.display='block';
//document.getElementById('iundo').style.display='inline-block';
redoid++;
}
}
}

function minusthis() {
if (document.getElementById('dpalette')) {
origih=document.getElementById('dpalette').innerHTML;
var addthis=location.search.split('add=')[1] ? decodeURIComponent(location.search.split('add=')[1].split('&')[0]) : '';
if (addthis != '') {
document.getElementById('myemail').innerHTML='📧';
its=document.getElementById('dpalette').innerHTML+addthis;
if (1 == 7) {
document.getElementById('dpalette').innerHTML+=addthis;
} else {
document.getElementById('dpalette').style.backgroundColor='white';
document.getElementById('dpalette').innerHTML=addthis.replace(/\<div /g,"<div onclick='leaveit();' title='Click within 10 seconds to not include menus, then allow them' ");
document.getElementById('ifmenu').style.visibility='hidden';
setTimeout(putrest, 10000);
}
while (document.getElementById('dp' + dpcnt)) {
document.getElementById('myh3').innerHTML=document.getElementById('myh3').innerHTML.replace(' - ',' <a style=cursor:pointer;text-decoration:underline; onclick="location.href=document.URL.split(' + "'?'" + ')[0].split(' + "'#'" + ')[0];" title=Refresh>-</a> ');
idarr.push('dp' + dpcnt);
undoid=eval(-1 + idarr.length);
dpcnt++;
}
}
}
}

function leaveit() {
showmenu=!showmenu;
if (!showmenu && firstgo) { polygonask=-2; }
firstgo=false;
}

function putrest() {
if (showmenu) {
document.getElementById('dpalette').style.backgroundColor='yellow';
document.getElementById('dpalette').innerHTML=its;
document.getElementById('ifmenu').style.visibility='visible';
} else {
setTimeout(putrest, 1000);
}
}

function emailit() {
var rest='';
if (origih == '') {
if (document.getElementById('dpalette').innerHTML.indexOf('<div') > 0) {
rest=document.getElementById('dpalette').innerHTML.replace(document.getElementById('dpalette').innerHTML.split('<div')[0],'');
document.getElementById('aemail').href+=encodeURIComponent(document.URL.split('#')[0].split('?')[0] + '?add=' + encodeURIComponent(rest));
} else {
document.getElementById('aemail').href+=encodeURIComponent(document.URL.split('#')[0].split('?')[0] + '?add=' + encodeURIComponent(document.getElementById('dpalette').innerHTML));
}
} else {
if (document.getElementById('dpalette').innerHTML.replace(origih,'').indexOf('<div') > 0) {
rest=document.getElementById('dpalette').innerHTML.replace(origih,'').replace(document.getElementById('dpalette').innerHTML.replace(origih,'').split('<div')[0],'');
document.getElementById('aemail').href+=encodeURIComponent(document.URL.split('#')[0].split('?')[0] + '?add=' + encodeURIComponent(rest));
} else {
document.getElementById('aemail').href+=encodeURIComponent(document.URL.split('#')[0].split('?')[0] + '?add=' + encodeURIComponent(document.getElementById('dpalette').innerHTML.replace(origih,'')));
}
}
document.getElementById('aemail').click();
document.getElementById('aemail').href=document.getElementById('aemail').href.split('body=')[0] + 'body=';
}

</script>
</head>
<body onload='setTimeout(minusthis,300);'>
<script type='text/javascript'>
var menustuff=location.search.split('menu=')[1] ? decodeURIComponent(location.search.split('menu=')[1].split('&')[0]) : '';
if (menustuff != '') {
document.write("<div style='width:140px;background-color:transparent;'>Fill Colour: <input onblur='fcolis(this.value);' onchange='fcolis(this.value);' type=color value='#ff0000'></input><br><br>Optional Wording: <input title=undo onblur='fwordis(this.value);' onchange='fwordis(this.value);' type=text value=''></input><br><br><input style=display:inline-block;background-color:lightblue; id=iundo type=button onclick=doundo(); value=Undo></input>  <input title=redo style=display:none;background-color:lightblue; id=iredo type=button onclick=doredo(); value=Redo></input></div>");
} else {
document.write("<div id=dpalette onkeyup=draw(true); style='display:inline-block;width:100%;height:100vh;background-color:yellow;' onclick='socwc(event, false);' ondoubleclick='socwc(event, true);' contenteditable=true><a onclick=emailit(); title='Email These Polygons' style=display:inline-block;cursor:pointer;font-size:36px; id=myemail></a> <h1 style=display:inline-block;>SVG Polygon Placement</h1><h3 id=myh3>RJM Programming - February, 2019</h3><h4 id=status>First click places, subsequent clicks define polygon and a double click or keyboard work closes off any open polygon</h4></div><div id=dhelper></div><iframe frameborder=0 id=ifmenu style='position:absolute;top:170px;left:5px;' src='svg_position.html?menu=y'></iframe><input type=hidden id=fcol value='#ff0000'></input><input type=hidden id=swords value=''></input><input title=Undo style=display:none;background-color:lightblue; id=iundo type=button onclick=doundo(); value=Undo></input>  <input title=Redo style=display:none;background-color:lightblue; id=iredo type=button onclick=doredo(); value=Redo></input><a id=aemail href='mailto:?subject=Polygons&body=' style='display:none;'>Email</a>");
}
</script>
</body>
</html>