<!doctype html>
<html>
<head>
<title>CSS 3D Transformation Matrix Making Of Interactive Changes - RJM Programming - October, 2017</title>
<style>
#sanother:hover, span:hover {
border: 3px solid red; //dashed #3a7999;
//color: #3a7999;
display: block;
//float: left;
background: rgba(0,0,0,0);
padding: 4px 4px 4px 4px;
border-radius: 15px;
box-shadow: inset 0 0 0 2px #3a7999;
}
</style>
<script type='text/javascript'>
var didclick=false, numspan=0, thisver=0, ishtmla=[], isdisplaya=[], wis='', his='', aconto=null, aaconto=null, wasih='', aio=null, taio=null;
var wcolours = ['Red','Darkgreen','Blue','Magenta','Gray','Maroon','Darkgray','Olive','Lime','Darkblue','Aqua','Teal','Navy','Fuchsia','Purple','Darkorange','Brown'];
var iw=0;

function undo(ioff) {
if (ioff < 0) {
document.getElementById('ishtml').innerHTML=ishtmla[Math.max(eval(ioff + thisver),0)];
document.getElementById('isdisplay').innerHTML=isdisplaya[Math.max(eval(ioff + thisver),0)];
thisver=Math.max(eval(ioff + thisver),0);
} else {
document.getElementById('ishtml').innerHTML=ishtmla[Math.min(eval(ioff + thisver),eval(-1 + ishtmla.length))];
document.getElementById('isdisplay').innerHTML=isdisplaya[Math.min(eval(ioff + thisver),eval(-1 + isdisplaya.length))];
thisver=Math.min(eval(ioff + thisver),eval(-1 + ishtmla.length));
}
}

function avar(oneid,twovalue) {
var iwhich=eval(oneid.replace('s','')), prefix='', huhs=[];
var twoval=prompt('Change as required.',twovalue.replace(/</g,'<').replace(/>/g,'>'));
if (twoval != null) {
if (twoval.replace(/</g,'<').replace(/>/g,'>') != twovalue.replace(/</g,'<').replace(/>/g,'>')) {
document.getElementById(oneid).innerHTML=twoval.replace(/</g,'<').replace(/>/g,'>');
if (iwhich > 0 && document.getElementById('ishtml').innerHTML.split(twovalue.replace(/</g,'<').replace(/>/g,'>')).length > 2) {
prefix=document.getElementById('ishtml').innerHTML.split(document.getElementById('s' + eval(-1 + iwhich)).innerHTML)[0];
document.getElementById('ishtml').innerHTML=prefix + document.getElementById('ishtml').innerHTML.replace(prefix,'').replace('/' + twovalue.replace(/</g,'<').replace(/>/g,'>'),'/' + twoval.replace(/</g,'<').replace(/>/g,'>'));

prefix=document.getElementById('isdisplay').innerHTML.split(document.getElementById('s' + eval(-1 + iwhich)).innerHTML)[0];
//alert(prefix);
document.getElementById('isdisplay').innerHTML=prefix + document.getElementById('isdisplay').innerHTML.replace(prefix,'').replace(twovalue.replace(/</g,'<').replace(/>/g,'>'),twoval.replace(/</g,'<').replace(/>/g,'>'));
} else {
document.getElementById('ishtml').innerHTML=document.getElementById('ishtml').innerHTML.replace(twovalue.replace(/</g,'<').replace(/>/g,'>'),twoval.replace(/</g,'<').replace(/>/g,'>'));

//if (document.getElementById('isdisplay').innerHTML.split(twovalue.replace(/</g,'<').replace(/>/g,'>')).length == 1) {
//alert('Did not find ' + twovalue.replace(/</g,'<').replace(/>/g,'>') + ' in ' + document.getElementById('isdisplay').innerHTML);
//}
document.getElementById('isdisplay').innerHTML=document.getElementById('isdisplay').innerHTML.replace('/' + twovalue.replace(/</g,'<').replace(/>/g,'>'),'/' + twoval.replace(/</g,'<').replace(/>/g,'>')).replace(twovalue.replace(/</g,'<').replace(/>/g,'>'),twoval.replace(/</g,'<').replace(/>/g,'>'));
}
ishtmla.push(document.getElementById('ishtml').innerHTML);
isdisplaya.push(document.getElementById('isdisplay').innerHTML);
thisver=eval(-1 + ishtmla.length);
if (taio) {
anotherview();
location.hash='#myh1';
}
}
}
}

function makeitclickable() {
var outr='', rest='';
var inr=document.getElementById('ishtml').innerHTML;
var bits=inr.split('</');
for (var ibits=0; ibits<eval(-1 + bits.length); ibits++) {
if (eval(1 + ibits) != bits.length) {
rest=bits[eval(1 + ibits)].split('>')[0] + '>';
}
//if (taio) alert((bits[ibits] + '</').replace(bits[ibits].split('>')[-1 + bits[ibits].split('>').length],'<span style="cursor:pointer;background-color:#f9f9f9;" id=s' + numspan + ' onclick=avar(this.id,this.innerHTML);>' + bits[ibits].split('>')[-1 + bits[ibits].split('>').length] + '</span>'));

outr+=(bits[ibits] + '</').replace(bits[ibits].split('>')[-1 + bits[ibits].split('>').length],'<span style="cursor:pointer;background-color:#f9f9f9;" id=s' + numspan + ' onclick=avar(this.id,this.innerHTML);>' + bits[ibits].split('>')[-1 + bits[ibits].split('>').length] + '</span>');
numspan++;
}
document.getElementById('ishtml').innerHTML=(outr + rest).replace(/>b>/g,'>').replace(/>b>/g,'>').replace(/>font>/g,'>').replace(/>font>/g,'>');
ishtmla.push(document.getElementById('ishtml').innerHTML);
isdisplaya.push(document.getElementById('isdisplay').innerHTML);
}

function anotherview() {
var hprefix='<html><body>', hsuffix='</body></html>';
var ih=document.getElementById('isdisplay').innerHTML;
aconto=null;
aio=null;
wis='' + Math.floor(eval(eval(window.getComputedStyle(document.getElementById('isdisplay'), null).getPropertyValue("width").replace('px','')) - 0)) + 'px';
his='' + Math.floor(eval(eval(window.getComputedStyle(document.getElementById('isdisplay'), null).getPropertyValue("height").replace('px','')) - 0)) + 'px';
document.getElementById('anotherapproach').style.display='block';
if (ih.toLowerCase().indexOf('<html') != -1 && ih.toLowerCase().indexOf('<body') != -1) {
hprefix='';
} else if (ih.toLowerCase().indexOf('<body') != -1) {
hprefix=ih.substring(0,ih.toLowerCase().indexOf('<body'));
ih=ih.substring(ih.toLowerCase().indexOf('<body'));
}
if (ih.toLowerCase().indexOf('</html>') != -1 && ih.toLowerCase().indexOf('</body>') != -1) {
hsuffix='';
} else if (ih.toLowerCase().indexOf('</body>') != -1) {
hsuffix='</html>';
}
if (document.URL.indexOf('localhost:8888') == -1) {
document.getElementById('anotherapproach').src="//www.rjmprogramming.com.au/HTMLCSS/do_away_with_the_boring_bits.html?htmlcontent=" + encodeURIComponent(hprefix + ih + hsuffix) + "&urlprefix=";
} else {
document.getElementById('anotherapproach').src="http://localhost:8888/do_away_with_the_boring_bits.html?htmlcontent=" + encodeURIComponent(hprefix + ih + hsuffix) + "&urlprefix=";
}
location.hash='#anotherapproach';
}

function prechecki() {
checki(document.getElementById('anotherapproach'));
}

function stripoffbody(ins) {
var outs=ins;
outs=ins.split('</body>')[0];
if (outs.indexOf('<body') != -1) {
outs=outs.split('<body')[1].replace(outs.split('<body')[1].split('>')[0] + '>','');
}
return outs;
}

function checki(iois) {
if (aconto != null && aio != null) {
aaconto = (aio.contentWindow || aio.contentDocument);
//alert(11);
if (aaconto != null) {
//alert(111);
if (aaconto.document) { aaconto = aaconto.document; }
//alert(1111);
if (aaconto.body != null) {
//alert(11111);
if (wasih == '') {
wasih=taio.value; //aaconto.body.innerHTML;
setTimeout(lookforchanges,5000);
//alert(111111 + ' vs ' + wasih.length);
}
}
}
} else if (iois != null) {
aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
if (aconto.getElementById('manage') && aconto.getElementById('ihtmlcontent')) {
if (wis != '') aconto.getElementById('ihtmlcontent').style.width=wis;
if (his != '') aconto.getElementById('ihtmlcontent').style.height=his;
//alert(1);
if (taio == null) setTimeout(prechecki,3000);
taio=aconto.getElementById('htmlcontent');
aio=aconto.getElementById('ihtmlcontent');
aconto.getElementById('manage').onmousedown=function(){ top.document.getElementById('info').value='y'; };
} else {
aconto=null;
}
}
}
}
}

function doresize() {
//alert(12);
//if (wis != '' && aio) alert(wis);
if (wis != '' && aio) aio.style.width=wis;
//alert(14);
if (his != '' && aio) aio.style.height=his;
//alert(15);
//if (wis != '') alert(his);
if (wis != '') aconto.getElementById('ihtmlcontent').style.width=wis;
//alert(17);
if (his != '') aconto.getElementById('ihtmlcontent').style.height=his;
//alert(18);
anotherview();
}

function takeout(cwhat) {
var outwhats=cwhat.split('>');
var outwhat=outwhats[0];
if (cwhat.indexOf('>') != -1) {
for (var ii=1; ii<outwhats.length; ii++) {
if (outwhats[ii].indexOf(' ') != -1) {
//alert('[endb][startb]' + outwhats[ii].split('<')[0].replace(/\ /g,'[space]') + '[endb][startb]<');
outwhat=cwhat.replace('>' + outwhats[ii].split('<')[0] + '<', '>[endb][startb]' + outwhats[ii].split('<')[0].replace(/\ /g,'[space]') + '[endb][startb]<');
cwhat=outwhat;
}
}
}
//alert(outwhat);
return outwhat;
}

function lastf(cwhat) {
var outwhat=cwhat;
while (outwhat.indexOf('<B>') != -1) {
outwhat=outwhat.replace('<B>','<font color=' + wcolours[iw] + '>');
outwhat=outwhat.replace('</B>','</font>');
iw=eval((1 + iw) % wcolours.length);
}
return outwhat;
}

function putback(cwhat) {
//alert(cwhat.replace(/\[space\]/g,' ').replace(/\[endb\]/g,'</b>').replace(/\[startb\]/g,'<b>'));
return lastf(cwhat.replace(/\[space\]/g,' ').replace(/\[startb\]/g,'<B>').replace(/\[endb\]/g,'</B>').replace(/\[startb\]/g,'<B>').replace(/>B>/g,'>').replace(/>b>/g,'>').replace(/>b>/g,'>').replace(/>B>/g,'>'));
}

function lookforchanges() {
if (document.getElementById('info').value == 'y') {
didclick=true;
document.getElementById('info').value = '';
}
if (didclick) {
didclick=false;
setTimeout(doresize,2000);
if (aaconto || taio) {
//alert(1);
var aac=null; //aaconto.body;
var taacv=taio.value;
if (!aac && 1 == 2) {
aio=aconto.getElementById('ihtmlcontent');
aaconto = (aio.contentWindow || aio.contentDocument);
//alert(11);
if (aaconto != null) {
//alert(111);
if (aaconto.document) { aaconto = aaconto.document; }
//alert(1111);
if (aaconto.body != null) {
//alert(11111);
//wasih=aaconto.body.innerHTML;
aac=aaconto.body;
taacv=aac.innerHTML;
//alert(211111 + ' vs ' + aac.innerHTML);
//setTimeout(lookforchanges,5000);
}
}
}
if (aac) {
//alert(11);
if (wasih != aac.innerHTML) {
//alert(10);
wasih=aac.innerHTML;
if (wis != '') aconto.getElementById('ihtmlcontent').style.width=wis;
if (his != '') aconto.getElementById('ihtmlcontent').style.height=his;
document.getElementById('isdisplay').innerHTML=stripoffbody(wasih); //('<b>' + wasih.replace(/</g,'<').replace(/>/g,'>').replace(/ /g,"</b> <b>") + '</b>');
document.getElementById('ishtml').innerHTML=putback('<B>' + takeout(wasih).replace(/</g,'<').replace(/>/g,'>').replace(/\ /g,"</B> <B>") + '</B>');
makeitclickable();
if (wis != '') aio.style.width=wis;
if (his != '') aio.style.height=his;
//alert(wasih.length + ' vs ' + aac.innerHTML.length);
}
} else {
if (taacv != wasih) {
//alert(111);
wasih=taacv;
if (wis != '') aconto.getElementById('ihtmlcontent').style.width=wis;
if (his != '') aconto.getElementById('ihtmlcontent').style.height=his;
document.getElementById('isdisplay').innerHTML=stripoffbody(wasih); //('<b>' + wasih.replace(/</g,'<').replace(/>/g,'>').replace(/ /g,"</b> <b>") + '</b>');
document.getElementById('ishtml').innerHTML=putback('<B>' + takeout(wasih).replace(/</g,'<').replace(/>/g,'>').replace(/\ /g,"</B> <B>") + '</B>');
makeitclickable();
if (wis != '') aio.style.width=wis;
if (his != '') aio.style.height=his;
//alert(wasih.length + ' vs ' + taacv.length);
} else {
//alert(98);
}
}
}
if (wis != '' && aio) aio.style.width=wis;
if (his != '' && aio) aio.style.height=his;
}
setTimeout(lookforchanges,5000);
}
</script>
</head>
<body onload='makeitclickable();'>
<h1 id=myh1>CSS 3D Transformation Matrix Making Of Interactive Changes</h1>
<h3>RJM Programming - October, 2017</h3>
<table cellpadding=50 cellspacing=5 border=5>
<thead style='background-color:yellow;'><tr><th>Display</th><th>HTML and Inline Javascript and CSS<br>Click below to change<br>Click to <a onclick=undo(-1); style=cursor:pointer;text-decoration:underline;>Undo</a> or <a onclick=undo(1); style=cursor:pointer;text-decoration:underline;>Redo</a><br><br><a id=sanother onclick=anotherview(); style=cursor:pointer;text-decoration:underline;>Show Another HTML Editor View</a></th></tr></thead>
<tbody><tr><td style='border: 5px solid purple;vertical-align:top;' id='isdisplay'>
<blockquote onclick="window.open('//www.rjmprogramming.com.au/PHP/nala.php','_blank');" style='cursor:pointer;background-color:transparent;'><div style="vertical-align:top;color:red;width:100%;text-align:right; background: -webkit-linear-gradient(#BBB, white) bottom repeat; background: linear-gradient(#BBB, white) bottom repeat; "><b><i>"Nala! Put down that<br> matrix3d(0.7751,1.854,0,0,<br> 0,1.3861,0,0, 0,0,1,0,<br> -0.0004308,0.003552,0,1)<br> 'deformed' soft toy, we think<br> you'll find belongs to Luna ... <br>Naaaalllllaaaa!"</i></b><div style="margin-top:-165px;margin-right:290px;text-align:right;height:195px;color:transparent;background:URL('http://www.rjmprogramming.com.au/Mac/PhotoBooth_flickr-3of.jpg');background-position:-140px -400px;background-repeat:no-repeat; -webkit-filter: brightness(220%);filter: brightness(220%);"><i>Nala! Put down that matrix3d(0.775105,1.85444,0,0, 0,1.386120,0,0, 0,0,1,0,<br> -0.000430821,0.00355248,0,1)<br> "deformed" soft toy, that<br> we think you'll find belongs to Luna ... Naaaalllllaaaa!</i>
</div></div><div style="margin-top:30px;"> ... and don't think that's going to cut the mustard at the next World Symposium of Transformation Matr<strike>esses</strike>ices 2017 ... "The Future Is Ahead of One<font size="1">sies</font>".</div></blockquote><br><br>
</td><td style='border: 5px solid purple;vertical-align:top;' id='ishtml'>
<<i>blockquote</i> <b>onclick="window.open('//www.rjmprogramming.com.au/PHP/nala.php','_blank');"</b> style='<font color=green>cursor:pointer;</font><font color=brown>background-color:transparent;</font>'><div style="<font color=magenta>vertical-align:top;</font><font color=black>color:red;</font><font color=magenta>width:100%;text-align:right;</font> <font color=brown>background: -webkit-linear-gradient(#BBB, white) bottom repeat; background: linear-gradient(#BBB, white) bottom repeat;</font> <font color=orange>"><b><i>"Nala! Put down that<br> matrix3d(0.7751,1.854,0,0,<br> 0,1.3861,0,0, 0,0,1,0,<br> -0.0004308,0.003552,0,1)<br> 'deformed' soft toy, we think<br> you'll find belongs to Luna ... <br>Naaaalllllaaaa!"</i></b></font><div style="<font color=purple>margin-top:-165px;margin-right:290px;</font><font color=black>text-align:right;</font><font color=purple>height:195px;</font><font color=brown>color:transparent;</font><font color=red>background:URL('http://www.rjmprogramming.com.au/Mac/PhotoBooth_flickr-3of.jpg');</font><font color=purple>background-position:-140px -400px;</font><font color=blue>background-repeat:no-repeat; -webkit-filter: brightness(220%);filter: brightness(220%);</font><font color=orange>"><i>Nala! Put down that matrix3d(0.775105,1.85444,0,0, 0,1.386120,0,0, 0,0,1,0,<br> -0.000430821,0.00355248,0,1)<br> "deformed" soft toy, that<br> we think you'll find belongs to Luna ... Naaaalllllaaaa!</i></font>
</div></div><div style="<font color=purple>margin-top:30px;</font>"><font color=orange> ... and don't think that's going to cut the mustard at the next World Symposium of Transformation Matr<strike>esses</strike>ices 2017 ... "The Future Is Ahead of One<font size="1">sies</font>".</font></div></blockquote><font color=cyan><br><br></font>
<br>
<font color=cyan><p> </p></font>
</td><tr>
</tbody></table>
<iframe id='anotherapproach' onload='checki(this);' src='' title='Another HTML Editor idea' style='display:none;width:100%;height:600px;'></iframe>

<input type=hidden id=info value=''></input>
</body>
</html>