<html>
<head>
<title>Dappled Light - RJM Programming - April, 2025 ... thanks to https://stackoverflow.com/questions/20039765/how-to-apply-a-css-filter-to-a-background-image</title>
<style>
.background-image {
background: url('//www.rjmprogramming.com.au/dappled_light.jpg');
background-repeat: no-repeat;
background-size: contain;
}

#ifade {
-webkit-animation: fade0 11s ease-in-out infinite alternate;
-moz-animation: fade0 11s ease-in-out infinite alternate;
animation: fade0 11s ease-in-out infinite alternate;
}


#aalocal {
-webkit-animation: border0 11s ease-in-out infinite alternate;
-moz-animation: border0 11s ease-in-out infinite alternate;
animation: border0 11s ease-in-out infinite alternate;
}

@keyframes border0 {
from {
border: 2px dotted red;
}

to {
border: 2px dashed blue;
}
}


</style>
<script type=text/javascript>

var disturb=true, lastchoice='', firstchoice='';
var absare=[], iabs=0, kabs=0, jabs=0, acount=0, arwo=null, origpl='', iorigpos=0, two=2;
var firsturl='//www.rjmprogramming.com.au/dappled_light.jpg', lastmultpos='', firstmultpos='top left', lasturl='', numb=2, actnumb=1;
var prebrest=' ' + eval(-15 + eval(screen.width / numb)) + 'px ' + eval(-15 + eval(screen.height / numb)) + 'px ';
var brest=' ' + firstmultpos + ' no-repeat';
var blist='', bposlist='', bcomblist='', lastduidea='', harnesscache='';

var seeingisbelieving='block';
var fromorig="Double click to toggle seeing the user interaction menu (as the default at start) or not.";
var toorig="Double click to toggle seeing the user interaction menu (as the default at start) or not.";

var zhr=null, zform=null;
var dumappings=[], dutmpfiles=[];
var duin='', numds=0;
var cit=location.search.split('cacheit=')[1] ? decodeURIComponent(location.search.split('cacheit=')[1]).split('&')[0].toLowerCase() : ' ';
var mykeyframes=" #ifade { -webkit-animation: fade0 11s ease-in-out infinite alternate; -moz-animation: fade0 11s ease-in-out infinite alternate; animation: fade0 11s ease-in-out infinite alternate; } @keyframes fade0 { " + String.fromCharCode(10) + " from { " + String.fromCharCode(10) + " background: url() contain no-repeat; " + String.fromCharCode(10) + " } " + String.fromCharCode(10) + " " + String.fromCharCode(10) + " to { " + String.fromCharCode(10) + " background: URL() contain no-repeat; " + String.fromCharCode(10) + " } " + String.fromCharCode(10) + " } " + String.fromCharCode(10) + " ";
var oneiurl='//www.rjmprogramming.com.au/dappled_light.jpg', twoiurl='', animateit=false, ifadeno=1;

function no_use_opacity(inidaa) {
var ourida=inidaa, ouroh='';;
if (oneiurl != '' && twoiurl != '') {
//alert(1);
var divrect=document.getElementsByTagName('div')[0].getBoundingClientRect();
ouroh=document.getElementsByTagName('div')[0].outerHTML;
//alert(document.getElementsByTagName('div')[0].outerHTML);
if (ouroh.indexOf('url(') == -1) {
ouroh=ouroh.replace(" style=\"", " style=\"background: url('//www.rjmprogramming.com.au/dappled_light.jpg') contain no-repeat; ");
}
if (ouroh.indexOf('url(') != -1) {
//alert(111);
var utr=ouroh.split('url(')[1].split(')')[0];
document.getElementById('dsubstance').innerHTML=ouroh.replace(utr, "'" + twoiurl + "'").replace(' style="', ' style="z-index:1;position:absolute;top:' + divrect.top + 'px;left:' + divrect.left + 'px;').replace(' id=', ' data-id=').replace('>', ' id=dfade' + ifadeno + '>');
document.getElementsByTagName('div')[0].id='dfade0';
document.getElementsByTagName('div')[0].style.zIndex='1';
document.getElementById('dsubstance').style.zIndex='1';
ourida='<style> #dfade0 { -webkit-animation: fade0 11s ease-in-out infinite alternate; -moz-animation: fade0 11s ease-in-out infinite alternate; animation: fade0 11s ease-in-out infinite alternate; } ';
ourida+=' @keyframes fade0 { from { opacity: 0; } to { opacity:1; } } ';
ourida+=' #dfade' + ifadeno + ' { -webkit-animation: fade' + ifadeno + ' 11s ease-in-out infinite alternate; -moz-animation: fade' + ifadeno + ' 11s ease-in-out infinite alternate; animation: fade' + ifadeno + ' 11s ease-in-out infinite alternate; } ';
ourida+=' @keyframes fade' + ifadeno + ' { from { opacity: 1; } to { opacity:0; } } </style>';
} else {
ourida='';
}
}
return ourida;
}

function nodu(inida) {
var outida=inida;
for (var ia=0; ia<dumappings.length; ia++) {
//alert('trying found code regarding ' + dumappings[ia].substring(0,100) + ' related to ' + dutmpfiles[ia]);
while (outida.indexOf(dumappings[ia]) != -1) {
outida=outida.replace(dumappings[ia], dutmpfiles[ia]);
//alert('found ');
}
}
return outida;
}

function showStuff() {
if (zhr != null) {
if (zhr.readyState == 4) {
if (zhr.status == 200) {
if (zhr.responseText.indexOf('</p>') != -1) {
dutmpfiles.push(zhr.responseText.split('</p>')[0].split('>')[eval(-1 + zhr.responseText.split('</p>')[0].split('>').length)]);
//alert(dutmpfiles[eval(-1 + dutmpfiles.length)]);
if (zhr.responseText.split('</p>')[0].split('>')[eval(-1 + zhr.responseText.split('</p>')[0].split('>').length)].indexOf('rjmprogramming.com.au/bigmedia_') != -1) {
harnesscache='cacheit=n&';
}
//alert(zhr.responseText.split('</p>')[0].split('>')[eval(-1 + zhr.responseText.split('</p>')[0].split('>').length)]);
}
zhr=null;
}
}
}
}

function showStuffin() {
if (zhr != null) {
if (zhr.readyState == 4) {
if (zhr.status == 200) {
//alert('here ' + zhr.responseText.substring(0,100));
if (zhr.responseText.indexOf('</p>') != -1) {
dumappings.push(zhr.responseText.split('</p>')[0].split('>')[eval(-1 + zhr.responseText.split('</p>')[0].split('>').length)]);
if (numds == 2) {
duin=duin.replace(encodeURIComponent(encodeURIComponent(dutmpfiles[eval(-1 + dutmpfiles.length)])), encodeURIComponent(encodeURIComponent(dumappings[eval(-1 + dumappings.length)])));
} else {
while (duin.indexOf(encodeURIComponent(dutmpfiles[eval(-1 + dutmpfiles.length)])) != -1) {
duin=duin.replace(encodeURIComponent(dutmpfiles[eval(-1 + dutmpfiles.length)]), encodeURIComponent(dumappings[eval(-1 + dumappings.length)]));
}
while (duin.indexOf((dutmpfiles[eval(-1 + dutmpfiles.length)])) != -1) {
duin=duin.replace((dutmpfiles[eval(-1 + dutmpfiles.length)]), (dumappings[eval(-1 + dumappings.length)]));
}
}
//} else if (zhr.responseText.indexOf('<p ') != -1) {
//alert('where ' + zhr.responseText.substring(0,100));
}
zhr=null;
}
}
}
}

function ajaxit(indu) {
var urlis='/HTMLCSS/legend_via_map.php';
zhr = new XMLHttpRequest();
zform=new FormData();
zform.append('urlbig', indu);
dumappings.push(indu);
zform.append('subject', '');
zform.append('to', '');
zform.append('cc', '');
zform.append('bcc', '');
zform.append('url', '');
if (indu.indexOf('data:') == 0) {
zform.append('softlink', indu.split('/')[1].split(';')[0].split(',')[0]);
}
zhr.open('post', urlis, true);
zhr.onreadystatechange = showStuff;
zhr.send(zform);
}

function ajaxitin(indutxt) {
var urlis='/HTMLCSS/legend_via_map.php';
if (indutxt != '') {
//alert(urlis + '?getthisback=' + encodeURIComponent(indutxt) + ' ' + indutxt);
dutmpfiles.push(indutxt);
document.getElementById('myif').src=urlis + '?getthisback=' + encodeURIComponent(indutxt);
return '';
}
zhr = new XMLHttpRequest();
zform=new FormData();
if (indutxt == '') {
zform.append('cleanup', indutxt);
zhr.open('get', urlis, true);
zhr.send(zform);
} else {
zform.append('getthisback', indutxt);
var xz=prompt('www.rjmprogramming.com.au/HTMLCSS/legend_via_map.php?getthisback=' + encodeURIComponent(indutxt), 'www.rjmprogramming.com.au/HTMLCSS/legend_via_map.php?getthisback=' + encodeURIComponent(indutxt));
dutmpfiles.push(indutxt);
zhr.open('get', urlis, true);
zhr.onreadystatechange = showStuffin;
zhr.send(zform);
}
}

function updatedevery(insv) {
unpopsecs=eval(1000 * Math.abs(eval(insv)));
}

function dosize(dc) {
var suffdc='';
numb=2;
while (actnumb > eval(numb * numb)) {
numb++;
}
for (var ij=0; ij<actnumb; ij++) {
if (suffdc == '') {
suffdc=' !important; } .background-image { background-size: ' + ' ' + eval(-15 + eval(screen.width / numb)) + 'px ' + eval(-15 + eval(screen.height / numb)) + 'px';
} else {
suffdc+=',' + ' ' + eval(-15 + eval(screen.width / numb)) + 'px ' + eval(-15 + eval(screen.height / numb)) + 'px';
}
}
return dc.replace(/url\(/g, 'linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)),url(') + suffdc;
}

function restatebackground() {
if (lasturl != '' && lastmultpos != '') {
//alert('lasturl=' + lasturl);
actnumb++;
blist+=',url("' + lasturl + '")';
bposlist+=',' + lastmultpos + '';
bcomblist+=',url("' + lasturl + '") ' + lastmultpos + ' no-repeat';
document.getElementsByTagName('div')[0].style.background=bcomblist;
lasturl='';
lastmultpos='';
return '<style> .background-image { background: ' + dosize(bcomblist) + ' !important; } </style>';
}
return '';
}

function wellthatisinteresting(inval) {
if (inval == ' ') {
if (document.getElementById('optzero').innerHTML != '') {
alert('We are redirecting you to new webpage that is good to Bookmark (after a few seconds) for future reference, else image data URIs will be forgotten after a couple of days.');
location.href=document.URL.replace('cacheit=', 'cacheit=Y');
}
return '';
}
switch (inval) {
case 'top left':
case 'top center':
case 'top right':
case 'center left':
case 'center center':
case 'center right':
case 'bottom left':
case 'bottom center':
case 'bottom right':
firstmultpos=inval.toLowerCase();
firstchoice=inval;
lastchoice=inval;
blist='url("' + firsturl + '")';
prebrest=' ' + eval(-15 + eval(screen.width / numb)) + 'px ' + eval(-15 + eval(screen.height / numb)) + 'px ';
bcomblist='url("' + firsturl + '") ' + firstmultpos + ' no-repeat';
brest=' ' + firstmultpos + ' no-repeat';
//alert(brest);
bposlist=firstmultpos;
setTimeout(capitalize, 2000);
break;

case 'top left'.toUpperCase():
case 'top center'.toUpperCase():
case 'top right'.toUpperCase():
case 'center left'.toUpperCase():
case 'center center'.toUpperCase():
case 'center right'.toUpperCase():
case 'bottom left'.toUpperCase():
case 'bottom center'.toUpperCase():
case 'bottom right'.toUpperCase():
lastmultpos=inval.toLowerCase();
//alert(lastmultpos);
setTimeout(function(){ document.getElementById('dstyles').innerHTML+=restatebackground(); }, 2000);
break;

default:
break;
}

return inval;
}

function capitalize() {
var jsts=['top left','top center','top right','center left','center center','center right','bottom left','bottom center','bottom right'];
var suffbit='';

if (lastchoice != '') {
var thatih=document.getElementById('mysel').innerHTML;
if (thatih.indexOf('"' + lastchoice + '"') != -1) {
for (var ij=0; ij<jsts.length; ij++) {
if (thatih.indexOf('"' + jsts[ij] + '"') != -1) {
suffbit=thatih.split(jsts[ij] + '"')[1].split('</option>')[0];
thatih=thatih.replace(jsts[ij] + '"' + suffbit, jsts[ij].toUpperCase() + '"' + suffbit.split(';')[0] + '; /* next usage will await a new background image below */');
}
}
}
document.getElementById('mysel').innerHTML=thatih;
}

}

function assess(isbut,sin) {
var dsbit='', potbut=false, pbut=false;
for (var i=0; i<sin.options.length; i++) {
if (sin.options[i].selected) {
if (wellthatisinteresting(sin.options[i].value) != '') {
if (sin.options[i].value == ' ') {
dsbit=dsbit;
} else if (sin.options[i].value != '' && sin.options[i].value == sin.options[i].value.toUpperCase()) {
return '';
}
//alert('hopefully not');
potbut=false;
pbut=false;
if (dsbit == '') { dsbit='<style> .background-image { } </style>'; }
if (isbut && sin.options[i].innerText.indexOf('filter:') != -1 && dsbit.indexOf('filter:') != -1) {
dsbit=dsbit.replace('filter:', 'filter: ' + sin.options[i].innerText.split('filter:')[1].split(';')[0] + ' ');
} else if (isbut && sin.options[i].innerText.indexOf('transform:') != -1 && dsbit.indexOf('transform:') != -1) {
dsbit=dsbit.replace('transform:', 'transform: ' + sin.options[i].innerText.split('transform:')[1].split(';')[0] + ' ');
} else {
dsbit=dsbit.replace('}', ' ' + sin.options[i].innerText.replace(';', ' !important;') + ' ' + ' }');
}
} else if (isbut) {
potbut=true;
} else {
pbut=true;
}
}
}
if (pbut) {
document.getElementById('mybut').innerHTML='Start Again ...';
}
if (dsbit != '') {
if (4 == 4) {
fixtitle(dsbit);
} else {
if (document.getElementById('mc').title == '') { document.getElementById('mc').title='<style></style>'; }
document.getElementById('mc').title=document.getElementById('mc').title.replace('</style>', dsbit.replace('<style>','').replace('</style>','').replace(/\;/g, '; ' + String.fromCharCode(10)) + ' </style>');
}
document.getElementById('dstyles').innerHTML+=dsbit;
} else if (potbut) {
location.href=document.URL;
}
}

function fixtitle(dsbit) {
if (document.getElementById('mc').title == '') { document.getElementById('mc').title='<style></style>'; }
//alert(dsbit);
document.getElementById('mc').title=document.getElementById('mc').title.replace('</style>', dsbit.replace(/\<style\>/g,'').replace(/\<\/style\>/g,'').replace(/\;/g, '; ' + String.fromCharCode(10)) + ' </style>');
}

function toggleit() {
if (document.getElementById('mc').outerHTML.split('>')[0].indexOf('none;') != -1) {
if (!disturb) {
two=2;
setTimeout(toggleit, 5000);
} else {
two=2;
document.getElementById('mc').style.display=seeingisbelieving; //'block';
setTimeout(toggleit, 15000);
}
} else if (!disturb) {
two=2;
setTimeout(toggleit, 5000);
} else {
two=0;
document.getElementById('mybut').innerHTML='Display';
document.getElementById('optone').innerHTML='Dappled Light - start again ... can pick combinations of CSS effects below';
document.getElementById('mc').style.display='none';
setTimeout(toggleit, 5000);
if (eval('' + document.getElementById('mynum').placeholder.length) < eval('' + document.getElementById('mynum').title.length)) {
document.getElementById('mynum').placeholder+=' ... ' + document.getElementById('mynum').title + ' ';
origpl=document.getElementById('mynum').placeholder;
setInterval(eatatjoes, 150);
}
}
}

function eatatjoes() {
var atst='';
iorigpos+=two;
if (iorigpos >= eval('' + document.getElementById('mynum').placeholder.length)) {
iorigpos=0;
document.getElementById('mynum').placeholder=origpl.replace(fromorig, toorig);
} else {
atst=origpl.replace(fromorig, toorig).substring(0,iorigpos);
document.getElementById('mynum').placeholder=origpl.replace(fromorig, toorig).substring(iorigpos) + atst;
}
}

function maybechange(opto) {
disturb=false;
var thenum=document.getElementById('mynum').value.trim().replace(/\ /g,','), anums=[], wasih=opto.innerHTML, newih='', ij=0, ii=0, fnd=false, fromstr='', tostr='';
if (thenum.replace(/\./g,'').replace(/\,/g,'').replace(/\-/g,'').trim() != '') {
if (thenum.replace(/\./g,'').replace(/\,/g,'').replace(/\-/g,'').replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
anums=('' + thenum).trim().replace(/\ /g,',').split(',');
for (ij=0; ij<anums.length; ij++) {
fnd=false;
ii=Math.abs(ii);
fromstr='';
//alert('ii=' + ii + ' anums.length=' + anums.length);
while (ii < eval('' + wasih.length) && ii >= 0) {
if (!fnd && wasih.substring(ii).substring(0,1) >= '0' && wasih.substring(ii).substring(0,1) <= '9') {
fnd=true;
fromstr=wasih.substring(ii).substring(0,1);
ii++;
while (wasih.substring(ii).substring(0,1) == '.' || (wasih.substring(ii).substring(0,1) >= '0' && wasih.substring(ii).substring(0,1) <= '9')) {
fromstr+=wasih.substring(ii).substring(0,1);
ii++;
}
if (newih == '') { newih=wasih; }
//if (ij > 0) {
//alert('Ii=' + ii + ' anums.length=' + anums.length + ' ij=' + ij + ' newih=' + newih + ' fromstr=' + fromstr + ' and the rest is ' + wasih.substring(ii));
//}
newih=newih.replace(fromstr + wasih.substring(ii), '' + anums[ij] + wasih.substring(ii));
ii=eval(0 - ii);
} else {
ii++;
}
}
}
}
}
if (newih != '') {
if (confirm('Change ' + wasih + ' to ' + newih)) {
opto.innerHTML=newih;
document.getElementById('mynum').value='';
}
}
disturb=true;
}

function maybesend(evt) {
var ao=null, dih='', doh='', uih='';
if (evt.target.value.toLowerCase() == 'm') {
titlenuance('block');
evt.target.value='';
} else if (evt.target.value.toLowerCase() == 'w') {
titlenuance('none');
evt.target.value='';
}
if (evt.target.value.indexOf('@') != -1) {
dih=document.body.innerHTML;
if (document.getElementById('dfade0')) {
doh=document.getElementById('dfade0').outerHTML;
if (doh.indexOf('background-image: url("') != -1) {
uih=doh.split('background-image: url("')[1].split('"');
if (eval('' + dih.split(uih).length) > 2) {
if (document.getElementById('dsubstance').innerHTML != '') {
dih=dih.replace(document.getElementById('dsubstance').innerHTML, '');
} else {
dih=dih.replace('background-image: url("' + uih + '");', 'background-image: url("//www.rjmprogramming.com.au/dappled_light.jpg");');
}
}
}
}
ao=document.createElement('a')
ao.target='_top';
ao.href='mailto:' + evt.target.value.trim() + '?subject=My%20Dappled%20Light%20Scene&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?' + harnesscache + 'rand=' + Math.floor(Math.random() * 19897865) + '#' + encodeURIComponent(nodu(dih)));
ao.click();
} else if (evt.target.value.trim() != '' && evt.target.value.trim().replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
dih=document.body.innerHTML;
if (document.getElementById('dfade0')) {
doh=document.getElementById('dfade0').outerHTML;
if (doh.indexOf('background-image: url("') != -1) {
uih=doh.split('background-image: url("')[1].split('"');
if (eval('' + dih.split(uih).length) > 2) {
if (document.getElementById('dsubstance').innerHTML != '') {
dih=dih.replace(document.getElementById('dsubstance').innerHTML, '');
} else {
dih=dih.replace('background-image: url("' + uih + '");', 'background-image: url("//www.rjmprogramming.com.au/dappled_light.jpg");');
}
}
}
}
ao=document.createElement('a')
ao.target='_top';
ao.href='sms:' + evt.target.value.trim() + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?' + harnesscache + 'rand=' + Math.floor(Math.random() * 19897865) + '#' + encodeURIComponent(nodu(dih)));
ao.click();
}
evt.target.value='';
}

function butjustlook(mwc) {
var mprefix='';
if (mwc.value.toLowerCase() == 'm') {
titlenuance('block');
mwc.value='';
return true;
} else if (mwc.value.toLowerCase() == 'w') {
titlenuance('none');
mwc.value='';
return true;
}
if (mwc.value == mwc.value.trim()) {
animateit=false;
} else {
animateit=true;
mwc.value=mwc.value.trim();
}
if (mwc.value.indexOf(':') == -1 && mwc.value.indexOf('/') == -1 && (' ' + mwc.value).slice(-5).indexOf('.') != -1) {
mprefix='/';
}
if (mwc.value.indexOf(':') != -1 || (mprefix + mwc.value).indexOf('/') != -1) { // && mwc.value.indexOf(';') != -1) {
if ((mprefix + mwc.value).indexOf('data:') == 0) {
if (animateit) {
twoiurl=(mprefix + mwc.value);
//document.getElementsByTagName('div')[0].id='ifade';
document.getElementById('dstyles').innerHTML+=no_use_opacity('<style> ' + mykeyframes.replace(/fade0/g,'fade' + ifadeno).replace('url()', 'url("' + oneiurl + '")').replace('URL()', 'URL("' + twoiurl + '")') + ' </style>');
ifadeno++;
oneiurl=twoiurl;
animateit=false;
}
ajaxit((mprefix + mwc.value));
if (document.getElementById('mysel').innerHTML.indexOf('"top left"') != -1) {
firsturl=(mprefix + mwc.value);
document.getElementsByTagName('div')[0].style.background='url("' + (mprefix + mwc.value) + '")' + brest;
if (animateit) {
twoiurl=(mprefix + mwc.value);
//document.getElementsByTagName('div')[0].id='ifade';
document.getElementById('dstyles').innerHTML+=no_use_opacity('<style> ' + mykeyframes.replace(/fade0/g,'fade' + ifadeno).replace('url()', 'url("' + oneiurl + '")').replace('URL()', 'URL("' + twoiurl + '")') + ' </style>');
ifadeno++;
oneiurl=twoiurl;
animateit=false;
}
} else {
lasturl=(mprefix + mwc.value);
setTimeout(function(){ document.getElementById('dstyles').innerHTML+=restatebackground(); }, 2000);
}
} else if ((mprefix + mwc.value).toLowerCase().indexOf('http') == 0) {
if (document.getElementById('mysel').innerHTML.indexOf('"top left"') != -1) {
firsturl=(mprefix + mwc.value);
document.getElementsByTagName('div')[0].style.background='url("//' + (mprefix + mwc.value).split('//')[1] + '")' + brest;
if (animateit) {
twoiurl=(mprefix + mwc.value);
//document.getElementsByTagName('div')[0].id='ifade';
document.getElementById('dstyles').innerHTML+=no_use_opacity('<style> ' + mykeyframes.replace(/fade0/g,'fade' + ifadeno).replace('url()', 'url("' + oneiurl + '")').replace('URL()', 'URL("' + twoiurl + '")') + ' </style>');
ifadeno++;
oneiurl=twoiurl;
animateit=false;
}
} else {
lasturl=(mprefix + mwc.value);
setTimeout(function(){ document.getElementById('dstyles').innerHTML+=restatebackground(); }, 2000);
}
} else if ((mprefix + mwc.value).toLowerCase().indexOf('//') == 0) {
if (document.getElementById('mysel').innerHTML.indexOf('"top left"') != -1) {
firsturl=(mprefix + mwc.value);
document.getElementsByTagName('div')[0].style.background='url("//' + (mprefix + mwc.value).split('//')[1] + '")' + brest;
if (animateit) {
twoiurl=(mprefix + mwc.value);
//document.getElementsByTagName('div')[0].id='ifade';
document.getElementById('dstyles').innerHTML+=no_use_opacity('<style> ' + mykeyframes.replace(/fade0/g,'fade' + ifadeno).replace('url()', 'url("' + oneiurl + '")').replace('URL()', 'URL("' + twoiurl + '")') + ' </style>');
ifadeno++;
oneiurl=twoiurl;
animateit=false;
}
} else {
lasturl=(mprefix + mwc.value);
setTimeout(function(){ document.getElementById('dstyles').innerHTML+=restatebackground(); }, 2000);
}
} else if ((mprefix + mwc.value).toLowerCase().indexOf('/') == 0) {
if (document.getElementById('mysel').innerHTML.indexOf('"top left"') != -1) {
firsturl=(mprefix + mwc.value);
document.getElementsByTagName('div')[0].style.background='url("//' + document.URL.split('//')[1].split('/')[0] + (mprefix + mwc.value) + '")' + brest;
if (animateit) {
twoiurl=(mprefix + mwc.value);
//document.getElementsByTagName('div')[0].id='ifade';
document.getElementById('dstyles').innerHTML+=no_use_opacity('<style> ' + mykeyframes.replace(/fade0/g,'fade' + ifadeno).replace('url()', 'url("' + oneiurl + '")').replace('URL()', 'URL("' + twoiurl + '")') + ' </style>');
ifadeno++;
oneiurl=twoiurl;
animateit=false;
}
} else {
lasturl=(mprefix + mwc.value);
setTimeout(function(){ document.getElementById('dstyles').innerHTML+=restatebackground(); }, 2000);
}
} else if ((mprefix + mwc.value).toLowerCase().indexOf('./') == 0) {
if (document.getElementById('mysel').innerHTML.indexOf('"top left"') != -1) {
firsturl=(mprefix + mwc.value);
document.getElementsByTagName('div')[0].style.background='url("//' + document.URL.split('//')[1].split('/')[0] + (mprefix + mwc.value).substring(1) + '")' + brest;
if (animateit) {
twoiurl=(mprefix + mwc.value);
//document.getElementsByTagName('div')[0].id='ifade';
document.getElementById('dstyles').innerHTML+=no_use_opacity('<style> ' + mykeyframes.replace(/fade0/g,'fade' + ifadeno).replace('url()', 'url("' + oneiurl + '")').replace('URL()', 'URL("' + twoiurl + '")') + ' </style>');
ifadeno++;
oneiurl=twoiurl;
animateit=false;
}
} else {
lasturl=(mprefix + mwc.value);
setTimeout(function(){ document.getElementById('dstyles').innerHTML+=restatebackground(); }, 2000);
}
} else if ((mprefix + mwc.value).toLowerCase().indexOf('../') == 0) {
if (document.getElementById('mysel').innerHTML.indexOf('"top left"') != -1) {
firsturl=(mprefix + mwc.value);
document.getElementsByTagName('div')[0].style.background='url("//' + document.URL.split('//')[1].split('/')[0] + (mprefix + mwc.value).substring(2) + '")' + brest;
if (animateit) {
twoiurl=(mprefix + mwc.value);
//document.getElementsByTagName('div')[0].id='ifade';
document.getElementById('dstyles').innerHTML+=no_use_opacity('<style> ' + mykeyframes.replace(/fade0/g,'fade' + ifadeno).replace('url()', 'url("' + oneiurl + '")').replace('URL()', 'URL("' + twoiurl + '")') + ' </style>');
ifadeno++;
oneiurl=twoiurl;
animateit=false;
}
} else {
lasturl=(mprefix + mwc.value);
setTimeout(function(){ document.getElementById('dstyles').innerHTML+=restatebackground(); }, 2000);
}
} else {
//alert('Huh');
document.getElementById('mysel').size='' + eval(1 + eval('' + document.getElementById('mysel').size));
document.getElementById('mysel').innerHTML+="<option value='" + mwc.value.split(':')[1].trim().split('(')[0].split(';')[0].trim() + "' id='opt" + mwc.value.split(':')[1].trim().split('(')[0].split(';')[0].trim() + "' ontouchend=maybechange(this); oncontextmenu=maybechange(this);>" + (mprefix + mwc.value).split(';')[0] + ';</option>';
}
mwc.value='';
}
return true;
}

function arlook() {
if (arwo) {
absare=arwo.document.getElementsByTagName('img');
for (iabs=0; iabs<absare.length; iabs++) {
if (('' + absare[iabs].id).indexOf('gb') == 0) {
if (document.getElementById('myaudios').innerHTML.indexOf(absare[iabs].src) == -1) { // && absare[iabs].outerHTML.indexOf(' data-done') == -1) {
document.getElementById('myaudios').innerHTML+=absare[iabs].outerHTML.replace('gb','gb' + acount).replace("<img ","<img style=display:none; data-duration=0 onloadedmetadata=\"this.setAttribute('data-duration','' + this.duration);\" ") + '<br>';
if (document.getElementById('mysel').innerHTML.indexOf('"top left"') != -1) {
firsturl=absare[iabs].src;
if (animateit) {
twoiurl=absare[iabs].src;
//document.getElementsByTagName('div')[0].id='ifade';
document.getElementById('dstyles').innerHTML+=no_use_opacity('<style> ' + mykeyframes.replace(/fade0/g,'fade' + ifadeno).replace('url()', 'url("' + oneiurl + '")').replace('URL()', 'URL("' + twoiurl + '")') + ' </style>');
ifadeno++;
oneiurl=twoiurl;
animateit=false;
}
ajaxit(absare[iabs].src);
document.getElementsByTagName('div')[0].style.backgroundImage='url(' + absare[iabs].src + ')';
} else {
lasturl=absare[iabs].src;
ajaxit(absare[iabs].src);
setTimeout(function(){ document.getElementById('dstyles').innerHTML+=restatebackground(); }, 2000);
}
acount++;
document.getElementById('alocal').innerHTML='📁';
}
}
}
}
}

function checkthis(iois) {
if (iois.src.indexOf('About_Us.htm') == -1) {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }

if (aconto.body.innerHTML.toLowerCase().indexOf('not found is') != -1) {
aconto=aconto;
} else if (aconto.body.innerHTML.indexOf('</p>') != -1) {
dumappings.push(aconto.body.innerHTML.split('</p>')[0].split('>')[eval(-1 + aconto.body.innerHTML.split('</p>')[0].split('>').length)]);
if (numds == 2) {
duin=duin.replace(encodeURIComponent(encodeURIComponent(dutmpfiles[eval(-1 + dutmpfiles.length)])), encodeURIComponent(encodeURIComponent(dumappings[eval(-1 + dumappings.length)])));
} else {
while (duin.indexOf(encodeURIComponent(dutmpfiles[eval(-1 + dutmpfiles.length)])) != -1) {
duin=duin.replace(encodeURIComponent(dutmpfiles[eval(-1 + dutmpfiles.length)]), encodeURIComponent(dumappings[eval(-1 + dumappings.length)]));
}
while (duin.indexOf((dutmpfiles[eval(-1 + dutmpfiles.length)])) != -1) {
duin=duin.replace((dutmpfiles[eval(-1 + dutmpfiles.length)]), (dumappings[eval(-1 + dumappings.length)]));
}
}
}

}
}
}

function onCreated(node) {
console.log(node);
}

function cityn() {
if (3 == 6) {
if (typeof browser === "undefined") {
var browser = chrome;
}

let createBookmark = browser.bookmarks.create({
title: document.title,
url: document.URL,
});
//alert(145);

createBookmark.then(onCreated);
}
}

function haveago() {
//alert(cit + ' ' + decodeURIComponent(duin).indexOf('rjmprogramming.com.au/bigmedia_'));
if ((cit + ' ').substring(0,1) != 'y' && decodeURIComponent(duin).indexOf('rjmprogramming.com.au/bigmedia_') != -1) {
document.getElementById('mysel').size='' + eval(1 + eval('' + document.getElementById('mysel').size));
if (document.getElementById('optzero')) {
//alert(4);
if (document.getElementById('optzero').innerText == '') {
setTimeout(function(){ document.getElementById('mysel').innerHTML=document.getElementById('mysel').innerHTML.replace('></option>','>Cache Data URIs (then Bookmark for later viewing)</option>'); }, 2000); //document.getElementById('optzero').innerHTML='Cache Data URIs (then Bookmark)'; alert(44);
} else if (document.getElementById('mysel').innerHTML.indexOf(' value=" "') == -1) {
//alert('Preyes');
document.getElementById('mysel').innerHTML+="<option value=\" '\" id='optzero'>Cache Data URIs (then Bookmark)</option>";
}
//document.getElementById('optzero').setAttribute('hidden', false); //document.getElementById('optzero').style.display='block';
//alert('Yes');
} else {
document.getElementById('mysel').innerHTML+="<option value=\" \" id='optzero'>Cache Data URIs (then Bookmark)</option>";
//alert('yes');
}
//alert('cit=' + cit + ' and duin length=' + duin.length + ' ' + '' + eval(1 + eval('' + document.getElementById('mysel').size)));
}
if ((cit + ' ').substring(0,1) == 'y' && decodeURIComponent(duin).indexOf('rjmprogramming.com.au/bigmedia_') != -1) {
numds=1;
if (lastduidea != '//www.rjmprogramming.com.au/bigmedia_' + decodeURIComponent(duin).split('rjmprogramming.com.au/bigmedia_')[1].split('"')[0].split('"')[0].split("'")[0].split(")")[0]) {
lastduidea != '//www.rjmprogramming.com.au/bigmedia_' + decodeURIComponent(duin).split('rjmprogramming.com.au/bigmedia_')[1].split('"')[0].split('"')[0].split("'")[0].split(")")[0];
ajaxitin('//www.rjmprogramming.com.au/bigmedia_' + decodeURIComponent(duin).split('rjmprogramming.com.au/bigmedia_')[1].split('"')[0].split('"')[0].split("'")[0].split(")")[0]);
}
setTimeout(haveago, 4000);
} else if (decodeURIComponent(duin).indexOf('/tmp/') != -1) {
numds=1;
if (lastduidea != '/tmp/' + decodeURIComponent(duin).split('/tmp/')[1].split('.txt')[0] + '.txt') {
lastduidea != '/tmp/' + decodeURIComponent(duin).split('/tmp/')[1].split('.txt')[0] + '.txt';
//alert('/tmp/' + decodeURIComponent(duin).split('/tmp/')[1].split('.txt')[0] + '.txt');
ajaxitin('/tmp/' + decodeURIComponent(duin).split('/tmp/')[1].split('.txt')[0] + '.txt');
}
setTimeout(haveago, 4000);
//} else if (decodeURIComponent(decodeURIComponent(duin)).indexOf('/tmp/') != -1) {
// numds=2;
// ajaxitin('/tmp/' + decodeURIComponent(decodeURIComponent(duin)).split('/tmp/')[1].split('.txt')[0] + '.txt');
// setTimeout(haveago, 4000);
} else {
if (numds > 0) {
ajaxitin('');
}
document.body.innerHTML=decodeURIComponent(duin);
document.getElementById('mynum').placeholder='But my CSS number is ...';
fixtitle(document.getElementById('dstyles').innerHTML);
}
}

if (document.URL.indexOf('#') != -1) {
duin=document.URL.split('#')[1];
setTimeout(function(){
if (1 == 1) {
setTimeout(haveago, 3000);
if (cit.indexOf('yn') == 0) { if (document.title.indexOf(' - ') != -1) { document.title=document.title.replace(' - ', ' (' + document.URL.length + ' byte URL at ' + ('' + new Date()) + ') - '); } setTimeout(cityn, 8000); }
} else {
document.body.innerHTML=decodeURIComponent(duin);
document.getElementById('mynum').placeholder='But my CSS number is ...';
fixtitle(document.getElementById('dstyles').innerHTML);
}
}, 2000);
}

function titlenuance(inidc) {
if (inidc == 'none') {
if (document.title.indexOf('Dappled Light') != -1) {
document.title=String.fromCodePoint(10060) + ' Dappled Light' + document.title.split('Dappled Light')[1];
}
document.getElementsByTagName('div')[0].title=document.getElementsByTagName('div')[0].title.replace('(as the default at start, and currently)', '(as the default at start, but not currently)').replace('(as the default at start)', '(as the default at start, but not currently)');
document.getElementById('dstyles').innerHTML+='<style> body { background-color: rgb(240,240,240) !important; </style>';
} else {
if (document.title.indexOf('Dappled Light') != -1) {
document.title=String.fromCodePoint(10004) + ' Dappled Light' + document.title.split('Dappled Light')[1];
}
document.getElementsByTagName('div')[0].title=document.getElementsByTagName('div')[0].title.replace('(as the default at start, but not currently)', '(as the default at start, and currently)').replace('(as the default at start)', '(as the default at start, and currently)');
document.getElementById('dstyles').innerHTML+='<style> body { background-color: rgb(255,255,255) !important; </style>';
}
toorig=document.getElementsByTagName('div')[0].title;
seeingisbelieving=inidc;
document.getElementById('mc').setAttribute('data-sib', inidc);
return inidc;
}

function okd(evt) {
var char = evt.which || evt.keyCode;
switch (char) {
case 77: // M
titlenuance('block'); //alert('m detected');
break;

case 87: // W
titlenuance('none'); //alert('w detected');
break;

default:
break;
}
return true;
}

function oneokd(evt) {
return true;
}

function twookd(evt) {
return true;
}

setInterval(arlook, 2000);
setTimeout(toggleit, 3000);

</script>
</head>
<body onload=" origpl=document.getElementById('mynum').placeholder; document.getElementsByTagName('div')[0].title=document.body.title; setTimeout(function(){ if (('' + document.getElementById('mc').getAttribute('data-sib')) == 'none') { titlenuance('none'); } }, 6500); " onkeydown="return okd(event);" ondblclick="seeingisbelieving=titlenuance(seeingisbelieving == 'block' ? 'none' : 'block');" title="Double click to toggle seeing the user interaction menu (as the default at start) or not. W stops displaying user interaction menu and M starts again."><div title='' class="background-image" style="width:100%;height:100%;"></div>
<div id=mc data-sib="block" style='z-index:99;position:absolute;top:5%;left:calc(100% - 590px);display:none;opacity:0.8;background-color:rgba(127,127,127,0.6);border:13px dashed rgba(0,255,0,0.3);'>
<select style=z-index:99;background-color:rgb(234,232,247); id=mysel size=35 onchange=assess(false,this); multiple>
<option value='' id=optone>Dappled Light - RJM Programming - April, 2025 ... can pick combinations of CSS effects below</option>
<option value='contain'>background-size: contain;</option>
<option value='cover'>background-size: cover;</option>
<option value='repeat'>background-repeat: repeat;</option>
<option value='auto'>background-size: auto;</option>
<option value='no-repeat'>background-repeat: no-repeat;</option>
<option value='background-position' id=optbackground-position ontouchend=maybechange(this); oncontextmenu=maybechange(this);>background-position: 0% 0%;</option>
<option value='background-origin' title='Can have padding-box or border-box or content-box or inherit or initial'>background-origin: border-box;</option>
<option value='background-clip' title='Can have padding-box or border-box or content-box or inherit or initial'>background-clip: content-box;</option>
<option value='background-blend-mode' title='Can have normal or multiply or screen or overlay or darken or lighten or color-dodge or saturation or color or luminosity'>background-blend-mode: multiply;</option>
<option value='background-attachment' title='Can have scroll or fixed or local or initial or inherit'>background-attachment: fixed;</option>
<option value='transform-origin' id=opttranform-origin ontouchend=maybechange(this); oncontextmenu=maybechange(this);>transform-origin: 500px 500px;</option>
<option value='rotate' id=optrotate ontouchend=maybechange(this); oncontextmenu=maybechange(this);>transform: rotate(120deg);</option>
<option value='scale' id=optscale ontouchend=maybechange(this); oncontextmenu=maybechange(this);>transform: scale(0.5,0.5);</option>
<option value='translate' id=opttranslate ontouchend=maybechange(this); oncontextmenu=maybechange(this);>translate: -200px 60px;</option>
<option value='top left'>background-position: top left; /* for multiple backgrounds */</option>
<option value='top center'>background-position: top center; /* for multiple backgrounds */</option>
<option value='top right'>background-position: top right; /* for multiple backgrounds */</option>
<option value='center left'>background-position: center left; /* for multiple backgrounds */</option>
<option value='center center'>background-position: center center; /* for multiple backgrounds */</option>
<option value='center right'>background-position: center right; /* for multiple backgrounds */</option>
<option value='bottom left'>background-position: bottom left; /* for multiple backgrounds */</option>
<option value='bottom center'>background-position: bottom center; /* for multiple backgrounds */</option>
<option value='bottom right'>background-position: bottom right; /* for multiple backgrounds */</option>
<option value='blur' id=optblur ontouchend=maybechange(this); oncontextmenu=maybechange(this);>filter: blur(5px);</option>
<option value='grayscale' id=optgrayscale ontouchend=maybechange(this); oncontextmenu=maybechange(this);>filter: grayscale(100%);</option>
<option value='hue-rotate' id=opthue-rotate ontouchend=maybechange(this); oncontextmenu=maybechange(this);>filter: hue-rotate(90deg);</option>
<option value='invert' id=optinvert ontouchend=maybechange(this); oncontextmenu=maybechange(this);>filter: invert(70%);</option>
<option value='drop-shadow' id=optdrop-shadow ontouchend=maybechange(this); oncontextmenu=maybechange(this);>filter: drop-shadow(8px 8px 10px gray);</option>
<option value='brightness' id=optinvert ontouchend=maybechange(this); oncontextmenu=maybechange(this);>filter: brightness(150%);</option>
<option value='contrast' id=optinvert ontouchend=maybechange(this); oncontextmenu=maybechange(this);>filter: contrast(80%);</option>
<option value='sepia' id=optsepia ontouchend=maybechange(this); oncontextmenu=maybechange(this);>filter: sepia(100%);</option>
<option value='saturate' id=optsepia ontouchend=maybechange(this); oncontextmenu=maybechange(this);>filter: saturate(180%);</option>
<option value='opacity' id=optopacity ontouchend=maybechange(this); oncontextmenu=maybechange(this);>filter: opacity(25%);</option>
<option value=" " id='optzero'></option>
</select><br><br>
<button id=mybut onclick=assess(true,document.getElementById('mysel')); style=background-color:yellow;>Display</button>  <input onkeydown="return oneokd(event);" onfocus='disturb=false;' onlosefocus='disturb=true;' onblur='disturb=butjustlook(this);' title='Is applied to right click or gestured number option wording above. For more than one number comma separate. Will accept a relative or absolute image URL to represent background image data to display, and if URL has appended spaces it will form part of an animated background. Double click to toggle seeing the user interaction menu (as the default at start) or not. W stops displaying user interaction menu and M starts again. Will accept a whole CSS clause of your own eg. filter: sepia(54%);' placeholder='But my CSS number is ...' id=mynum value=''></input>  <input onkeydown="return twookd(event);" onfocus='disturb=false;' onlosefocus='disturb=true;' onblur='disturb=true; maybesend(event);' title='Email or SMS to' placeholder='Email or SMS to ...' id=myes value=''></input>  <a style=text-decoration:none;cursor:pointer; onclick=" animateit=false; document.getElementById('alocal').innerHTML='📂'; if (arwo) { if (!arwo.closed) { arwo.close(); } arwo=null; } arwo=window.open('/HTMLCSS/client_browsing.htm','_blank','top=' + eval(-400 + screen.height) + ',left=' + eval(-1050 + screen.width) + ',width=500,height=400');" target=_blank id=alocal title='Local image file browsing.'>📁</a>  <a style='text-decoration:none;cursor:pointer;' onclick=" animateit=true; document.getElementById('aalocal').innerHTML='📂'; if (arwo) { if (!arwo.closed) { arwo.close(); } arwo=null; } arwo=window.open('/HTMLCSS/client_browsing.htm','_blank','top=' + eval(-400 + screen.height) + ',left=' + eval(-1050 + screen.width) + ',width=500,height=400');" target=_blank id=aalocal title='Local image file browsing for animated scenario.'>📁</a>
</div>
<div id=dsubstance></div>
<div id=dstyles></div>
<div id=myaudios></div>
<iframe src=/About_Us.html style=display:none; onload=checkthis(this); id=myif></iframe>
</body>
</html>