<!doctype html>
<html>
<head>
<title>Do It Yourself HTML Editor - RJM Programming - January, 2017</title>

<style>

body { overflow:hidden; }
input[type="submit"]:hover { background-color: green; }

</style>

<script type='text/javascript' src='../../../../cookie_get.js'></script>

<script type='text/javascript'>

var cnt=1;
var defh="<!doctype html><html><head><title>My HTML and Javascript and CSS" + String.fromCharCode(10) + "</" + "title>" + String.fromCharCode(10) + "<style>" + String.fromCharCode(10) + "</" + "style>" + String.fromCharCode(10) + "<" + "!-" + "- " + "scr" + "ipt type='text/javascript'> alert('Hello World from RJM Programming Dynamic HTML Editor. To not use cookies put space between no and cookies in nocookies.'); " + String.fromCharCode(10) + "</" + "scrip" + "t -" + "-" + ">" + String.fromCharCode(10) + "</" + "head><bo" + "dy>" + String.fromCharCode(10) + "</" + "body>" + String.fromCharCode(10) + "</" + "html>";
var htmlcontent=(location.search.split('htmlcontent=')[1] ? ourdecodeURIComponent(location.search.split('htmlcontent=')[1].split('&')[0]) : defh);
var wois=null;
var lasttitle='',lastvalue='';
var numskey=0;
var nkeys=0;
var cskeyname="", cskeytitle="";
var skeyname=[];
var skeytitle=[];
var skeyvalue=[];
var laste=-1;

var skeys=(location.search.split('shortcuts=')[1] ? analyzeshortcuts(ourdecodeURIComponent(location.search.split('shortcuts=')[1].split('&')[0])) : '');

function fsckit(ocb,userdone) {
if (ocb.checked) {
if (lasttitle != '' && lastvalue != '') {
//alert(skeyname.length + " Ctrl_" + lasttitle.substring(0,1).toUpperCase() + ' ... vs ... ' + cskeyname);
if ((yourcontains(skeyname, "Ctrl_" + lasttitle.substring(0,1).toUpperCase()) == -1 && userdone != 0) || (yourcontains(skeyname, "Ctrl_" + lasttitle.substring(0,1).toUpperCase()) != -1 && userdone == 0)) {
//alert(lasttitle + ' ... Vs ... ' + cskeyname);
if (userdone != 0) {
skeyname.push('Ctrl_' + lasttitle.substring(0,1).toUpperCase());
skeytitle.push(lasttitle);
skeyvalue.push(lastvalue);
//alert('Ctrl_' + lasttitle.substring(0,1).toUpperCase() + ' (separated) is now the Shortcut Key for ' + lastvalue);
}
numskey++;
document.getElementById('selshortcuts').size=numskey;
document.getElementById('selshortcuts').innerHTML+='<option value="' + lasttitle + '">Ctrl_' + lasttitle.substring(0,1).toUpperCase() + ' (separated) is now the Shortcut Key for ' + lastvalue.replace(/</g,'<').replace(/>/g,'>');
lastvalue='';
} else if ((yourcontains(skeyname, "Alt_" + lasttitle.substring(0,1).toUpperCase()) == -1 && userdone != 0) || (yourcontains(skeyname, "Ctrl_" + lasttitle.substring(0,1).toUpperCase()) != -1 && userdone == 0)) {
//alert(lasttitle + ' ... VS ... ' + cskeyname);
if (userdone != 0) {
skeyname.push('Alt_' + lasttitle.substring(0,1).toUpperCase());
skeytitle.push(lasttitle);
skeyvalue.push(lastvalue);
//alert('Alt_' + lasttitle.substring(0,1).toUpperCase() + ' (separated) is now the Shortcut Key for ' + lastvalue);
}
numskey++;
document.getElementById('selshortcuts').size=numskey;
document.getElementById('selshortcuts').innerHTML+='<option value="' + lasttitle + '">Alt_' + lasttitle.substring(0,1).toUpperCase() + ' (separated) is now the Shortcut Key for ' + lastvalue.replace(/</g,'<').replace(/>/g,'>');
lastvalue='';
} else {
if (userdone != 0) alert('Sorry, no shortcut keys left for this.');
}
if (lastvalue == '') {
if (document.getElementById('shortcuts').value == '') {
document.getElementById('shortcuts').value += lasttitle;
lasttitle='';
} else {
document.getElementById('shortcuts').value += ';' + lasttitle;
lasttitle='';
}
}
}
ocb.checked=false;
}
}

function checksck(biginid) {
var inid=biginid.split(' title="')[1].split('"')[0];
//alert(skeys + ' ... vs ... ' + inid);
//document.title = ' ' + inid + ' ... vs ... ' + cskeytitle;
if ((';' + skeys + ';').indexOf(';' + inid + ';') != -1) {
var ij=yourcontains(skeytitle, inid);
var vinid=biginid.split(' value="')[1].split('"')[0];
skeyvalue[ij] = vinid;
//alert(skeyvalue[0]);
lastvalue=vinid;
lasttitle=inid;
document.getElementById('sckit').checked=true;
fsckit(document.getElementById('sckit'),0);
return biginid.replace('</option>', ' (' + skeyname[ij] + ')</option>');
}
return biginid;
}

function checkshortcut(e) { // thanks to http://stackoverflow.com/questions/2511388/how-can-i-add-a-javascript-keyborad-shortcut-to-an-existing-javascript-function
var e = e || window.event;
if (skeyname.length > 0) {
var found=-1;
for (var kis=65; kis<(65 + 26); kis++) {
if ((e.ctrlKey && e.which == kis) || (laste == 17 && e.which == kis)) {
found=yourcontains(skeyname, "Ctrl_" + String.fromCharCode(kis).toUpperCase());
//document.title=cskeyname + ' ... ' + found + String.fromCharCode(kis).toUpperCase();
} else if ((e.altKey && e.which == kis) || (laste == 18 && e.which == kis)) {
found=yourcontains(skeyname, "Alt_" + String.fromCharCode(kis).toUpperCase());
//document.title=cskeyname + ' .. ' + found + String.fromCharCode(kis).toUpperCase();
}
}
if (found >= 0) {
placeatcursor(skeyvalue[found],null,1);
return false;
}
}
laste=e.which;
if (laste == 17 || laste == 18) return false;
return false;
}

function analyzeshortcuts(inkeys) {
var donesofar=';', nnkeys=0, ourdelim='';
var extendern, withinsk, skbits=inkeys.split(';');
for (var isk=0; isk<skbits.length; isk++) {
withinsk=skbits[isk].split('|');
extendern=eval(withinsk[0].split('_')[1]);
if (donesofar.indexOf(';Ctrl_' + withinsk[0].split('_')[0].toUpperCase()) == -1) {
// alert(nnkeys + ' Ctrl_' + withinsk[0].toUpperCase().split('_')[0]);
cskeyname=cskeyname + ourdelim + 'Ctrl_' + withinsk[0].toUpperCase().split('_')[0].substring(0,1);
cskeytitle=cskeytitle + ourdelim + withinsk[0];
ourdelim='|';
donesofar+='Ctrl_' + withinsk[0].toUpperCase().split('_')[0].substring(0,1) + ';';
} else if (donesofar.indexOf(';Alt_' + withinsk[0].toUpperCase().split('_')[0]) == -1) {
cskeyname=cskeyname + ourdelim + 'Alt_' + withinsk[0].toUpperCase().split('_')[0].substring(0,1);
cskeytitle=cskeytitle + ourdelim + withinsk[0];
ourdelim='|';
donesofar+='Alt_' + withinsk[0].toUpperCase().split('_')[0].substring(0,1) + ';';
}
}
skeyname=cskeyname.split('|');
skeytitle=cskeytitle.split('|');
skeyvalue=cskeytitle.split('|');
return inkeys;
}

function ourdecodeURIComponent(inf) {
return decodeURIComponent(inf.replace(/\+/g,'%20'));
}

function yourcontains(ourarr,ourwhat) {
var retval=-1;
for (var i=0; i<ourarr.length; i++) {
if (ourarr[i] == ourwhat) return i;
}
return retval;
}

function loadgame() {
var prefix="", wdth="250px;", suffix="";
document.getElementById('myform').action=document.URL.split('?')[0].split('#')[0];

if (defh != htmlcontent) {
//wois=window.open('','_blank','top=50,left=50,width=400,height=400');
//wois.document.write(htmlcontent);
var x = document.getElementById("ihtmlcontent");
var y = (x.contentWindow || x.contentDocument);
if (y.document)y = y.document;
y.head.innerHTML = htmlcontent.replace(/<HEAD>/g,'<head>').replace(/<\/HEAD>/g,'<\/head>').replace("/head","head").split("<head>")[1];
if (htmlcontent.toLowerCase().indexOf("<body>") == -1 && htmlcontent.toLowerCase().indexOf("<body ") != -1) {
var bbitsare=" " + htmlcontent.replace(/<BODY>/g,'<body>').replace(/<\/BODY>/g,'<\/body>').replace("/body","body").split("<body ")[1].split(">")[0] + ">";
y.body.innerHTML = '<div' + bbitsare + htmlcontent.replace(/<BODY>/g,'<body>').replace(/<\/BODY>/g,'<\/body>').replace("/body","body").replace('<body' + bbitsare,'<body>').split("<body>")[1] + '</div>';
} else {
y.body.innerHTML = htmlcontent.replace(/<BODY>/g,'<body>').replace(/<\/BODY>/g,'<\/body>').replace("/body","body").split("<body>")[1];
}
//x.contentWindow.location.reload(true);
}

document.getElementById('htmlcontent').value=htmlcontent;
document.getElementById('htmlcontent').innerHTML=htmlcontent;
//document.getElementById('dhtmlcontent').innerHTML=htmlcontent;

var selis="";
var pretypes=["br", "hr", "b", "i", "meta", "script", "link", "title", "style", "p", "a", "h1", "h2", "h3", "h4", "span", "div", "table", "tbody", "tr", "th", "td", "input", "form"];
var types=["p", "a", "img", "h1", "h2", "h3", "h4", "span", "div", "table", "tbody", "tr", "th", "td", "input", "form", "select", "option", "ul", "ol", "li", "video", "audio", "iframe"];
var extenders=["", " id=p1", " class=cp", " title=''", " style=''", " type=''", " href=''", " src=''", " value=''", " action=''", " method='GET'"];
var templatehelp="<p></p>", nexttemplatehelp;

prefix=checksck('<option title="_0" value="">Optionally select HTML element below ...' + suffix + '</option>');
prefix+=checksck('<option title="title_0" value="<title></title>"><title></title> (have cursor in header)' + suffix + '</option>');
prefix+=checksck('<option title="meta_0" value="<meta />"><meta /> (have cursor in header)' + suffix + '</option>');
prefix+=checksck('<option title="link_0" value="<link type=text/css href=></link>"><link type=text/css href=></link> (have cursor in header)' + suffix + '</option>');
prefix+=checksck('<option title="script_0" value="<scr' + 'ipt type=text/javascript src=></scr' + 'ipt>"><script type=text/javascript src=></script> (have cursor in header)' + suffix + '</option>');
prefix+=checksck('<option title="br_0" value="<br>"><br> (from here on have cursor with body)' + suffix + '</option>');
prefix+=checksck('<option title="hr_0" value="<hr>"><hr>' + suffix + '</option>');
prefix+=checksck('<option title="b_0" value="<b></b>"><b></b>' + suffix + '</option>');
prefix+=checksck('<option title="i_0" value="<i></i>"><i></i>' + suffix + '</option>');
for (var jj=0; jj<extenders.length; jj++) {
selis='<SELECT id="seln' + jj + '" style="background-color:pink;width:' + wdth + '" onchange="placeatcursor(this.value,this,0);">' + prefix + '</SELECT>';
wdth='60px;';
if (jj<eval(-1 + extenders.length)) {
prefix=checksck('<option title="_' + jj + '" value="">+ ' + extenders[eval(1 + jj)] + suffix + '</option>');
}
nexttemplatehelp=templatehelp;
for (var kk=0; kk<types.length; kk++) {
selis=selis.replace('</SELECT>',checksck('<option title="' + nexttemplatehelp.substring(1).replace('>',' ').split(' ')[0] + '_' + jj + '" value="' + nexttemplatehelp + '">' + nexttemplatehelp.replace(/</g,'<').replace(/>/g,'>') + suffix + '</option>') + '</SELECT>');
if (kk<eval(-1 + types.length)) nexttemplatehelp=nexttemplatehelp.replace(types[kk],types[kk + 1]).replace('/' + types[kk], '/' + types[kk + 1]);
}
//alert(selis);
if (selis.indexOf("<") != -1) document.getElementById('myspan').innerHTML+=selis;
if (jj<eval(-1 + extenders.length)) templatehelp=templatehelp.replace('></', extenders[eval(1 + jj)] + '></');
}
document.getElementById('sckit').readonly=true;
}

function placeatcursor(what,owhat,issck) {
var one=0, kpos, lwhat;
if (owhat != null) document.getElementById('sckit').readonly=false;
if (issck == 0) {
lasttitle=owhat.options[owhat.selectedIndex].title;
lastvalue=what;
}
if (what != '') {
var pb=what.substring(1).replace('>',' ').split(' ');
if (pb.length > 1) {
if (pb.length > 2) {
if (pb[2] == "class=cp" && pb[0] != "p") {
what=what.replace('class=cp', 'class=c' + pb[0]);
}
}
if (pb[1].replace('id=','') == (pb[0] + '1')) {
what=what.replace('=' + pb[0] + '1', '=' + pb[0] + '' + eval(cnt));
cnt++;
} else if (pb[1].replace('id=','') == ('p1')) {
what=what.replace('=p1', '=' + pb[0] + '' + eval(cnt));
cnt++;
}
}
lwhat=what.length;
if (what.indexOf('</') != -1) {
lwhat=what.indexOf('</');
}
kpos=wherearewe(document.getElementById('htmlcontent'));
if (owhat == null) {
kpos--;
one=1;
}
document.getElementById('htmlcontent').value = document.getElementById('htmlcontent').value.replace(document.getElementById('htmlcontent').value.substring(0,eval(one + kpos)),document.getElementById('htmlcontent').value.substring(0,kpos) + what);
setwherearewe(document.getElementById('htmlcontent'), eval(lwhat + kpos));
}
}

function wherearewe(ota) { // thanks to http://stackoverflow.com/questions/2897155/get-cursor-position-in-characters-within-a-text-input-field
// Initialize
var ipos = 0;

if (document.selection) { // IE Support

// Set focus on the element
ota.focus();

// To get cursor position, get empty selection range
var oselis = document.selection.createRange();

// Move selection start to 0 position
oselis.moveStart('character', -ota.value.length);

// The caret position is selection length
ipos = oselis.text.length;
} else if (ota.selectionStart || ota.selectionStart == '0') { // Firefox support
ipos = ota.selectionStart;
}

// Return results
//alert(ipos);
return ipos;
}

function setwherearewe(ota, wota) { // thanks to http://stackoverflow.com/questions/2897155/get-cursor-position-in-characters-within-a-text-input-field

if (ota.setSelectionRange) {
ota.setSelectionRange(wota, wota);
} else if (ota.createTextRange) {
var range = ota.createTextRange();
range.collapse(true);
range.moveEnd('character', wota);
range.moveStart('character', wota);
range.select();
}

// Return cursor position
ota.focus();
//document.title=ota.value.length + ' vs ' + wota;
return wota;
}

function validateit(oform) {
if (document.getElementById('htmlcontent').value.indexOf('<?') != -1) {
if (encodeURIComponent(document.getElementById('htmlcontent').value).length > 900) {
oform.target='_blank';
oform.method='POST';
} else {
oform.target='_blank';
oform.method='GET';
}
oform.action=oform.action.replace('.html','.php').replace('.htm','.php');
document.getElementById('dhtmlcontent').style.backgroundColor='lightblue';
document.getElementById('dhtmlcontent').innerHTML="<p>Think, if you haven't already done so, you need to install a <a target=_blank title=MAMP href=http://mamp.info>MAMP</a> local web server.</p><br><br><p>Then download this file and copy to the MAMP htdocs folder and call it <i>doityourself.php</i> (if that's okay?) and access it via this ...<br><br><a target=_top title=doityourself.php href=http://localhost:8888/doityourself.php>live run</a><br><br> link.</p>";
} else if (document.getElementById('htmlcontent').value.toLowerCase().indexOf('no cookies') != -1 || encodeURIComponent(document.getElementById('htmlcontent').value).length > 900) {
if (document.getElementById('htmlcontent').value.toLowerCase().indexOf('no cookies') == -1) {
if (document.getElementById('htmlcontent').value.toLowerCase().indexOf('nocookies') != -1) {
document.getElementById('htmlcontent').value = document.getElementById('htmlcontent').value.replace('nocookies','no cookies');
}
}
oform.target='_self';
oform.method='POST';
oform.action=oform.action.replace('.html','.php').replace('.htm','.php');
}
return true;
}

document.addEventListener('keyup', checkshortcut, false);
</script>

</head>
<body onload=" loadgame(); " style='background-color:yellow;'>
<div id=dcookies_okay><input type=hidden id=cookies_okay value=''></input></div>
<table style='width:100%;background-color:orange;' border=8><tbody><tr><td><h1>Try Your Own HTML</h1>
<h3>RJM Programming - January, 2017</h3>
<span id='myspan' style='background-color:pink;'>Shortcut? <input type=checkbox id='sckit' onchange='fsckit(this,1);'></input></span>
<table style='height:500px;'><tbody><tr><td style='vertical-align:top;'>
<div style='height:60px;overflow:auto;-webkit-overflow-scrolling:touch;'><iframe src='./legend_via_map.htm' style='width:100%;height:60px;' scrolling='no' frameborder=0></iframe></div>
<form id='myform' action='./do_away_with_the_boring_bits.html' method='GET' onsubmit='return validateit(this);'>
HTML: <textarea cols=100 rows=17 type=text name=htmlcontent id=htmlcontent value=""></textarea><br>
<table><tbody><tr><td>
<input type=submit id=manage value='Try your HTML and Javascript and CSS Above'></input></td><td> <select id='selshortcuts'></select></td></tr></tbody></table>
<span id='spanshortcuts' style='display:none;'>Shortcuts: <input type=text name=shortcuts id=shortcuts value=></input></span>
</form>
</td><td style='height:100%;'>
<div id=dhtmlcontent style='height:100%;'><iframe src='about:blank' name='ihtmlcontent' id='ihtmlcontent' style='height:650px; background-color:lightblue;'></iframe></div>
</td></tr></tbody></table>
</body>
</html>