<!doctype html>
<html>
<head>
<title>The vh Explore - RJM Programming - July, 2017</title>
<style>
body {
overflow: hidden;
position: relative;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: center;
vertical-align: middle;
width: 100%;
height: 100vh;
background-color: red;
}
#orange {
position: relative;
margin: auto;
top: 2vh;
text-align: center;
vertical-align: middle;
width: 96%;
height: 96vh;
background-color: orange;
}
#yellow {
margin: auto;
position: relative;
text-align: center;
vertical-align: middle;
top: 2vh;
width: 92%;
height: 92vh;
background-color: yellow;
}
#green {
margin: auto;
position: relative;
left: 0.5%;
text-align: center;
vertical-align: middle;
top: 2vh;
width: 88%;
height: 88vh;
background-color: green;
}
#blue {
margin: auto;
position: relative;
text-align: center;
vertical-align: middle;
top: 2vh;
width: 84%;
height: 84vh;
background-color: blue;
}
#indigo {
margin: auto;
position: relative;
text-align: center;
vertical-align: middle;
top: 2vh;
width: 80%;
height: 80vh;
background-color: indigo;
}
#violet {
margin: auto;
position: relative;
text-align: center;
vertical-align: middle;
top: 2vh;
width: 76%;
height: 76vh;
background-color: violet;
}
#themiddle {
position:relative;
top: 0%;
text-align: center;
vertical-align: middle;
display: table-cell;
}
table { width:100%; height:100%; }
select { text-align-last:center; direction: rtl; }
</style>

<script type='text/javascript'>
var tcontent='<select id="myselect" onchange="one_at_a_time_will_later_become_more(this);"><option value="">Rainbow Central</option></select><br><br><input id="mycolour" type="color" value="#FF0000"></input>';
var step=2, sofarwsymbol="%", sofarhsymbol="vh", sofarwunit=2, sofarhunit=2, firstgo=true;

function getcheck() {
var wasc=tcontent;
tcontent=location.search.split('content=')[1] ? decodeURIComponent(location.search.split('content=')[1].split('&')[0]).replace(/\+/g,' ') : tcontent;
if (wasc != tcontent) document.getElementById('themiddle').innerHTML=tcontent;
var odivs=document.getElementsByTagName('div');
for (var idivs=0; idivs<odivs.length; idivs++) {
odivs[idivs].onclick = function(e) { e = e || window.event; var targ = e.target || e.srcElement; if (targ.nodeType == 3) { targ = targ.parentNode; } targ.style.backgroundColor=document.getElementById('mycolour').value; };
document.getElementById('myselect').innerHTML+='<option value="' + odivs[idivs].id + '">Rainbow ' + odivs[idivs].id.substring(0,1).toUpperCase() + odivs[idivs].id.substring(1).toLowerCase() + ' becomes colour below</option>';
}
document.getElementById('myselect').innerHTML+='<option value="-1">Rainbow Step In Bigger</option>';
document.getElementById('myselect').innerHTML+='<option value="1">Rainbow Step In Smaller</option>';
if (document.getElementById('mycolour')) {
document.getElementById('mycolour').focus();
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.getElementById('mycolour').click();
}
}
}

function one_at_a_time_will_later_become_more(osel) {
var odivs, idivs, sofarw=0, sofarh=0;
if (osel.value != '') {
if (('' + osel.value) == '1') {
if (document.getElementById('myselect')) {
if (('' + document.getElementById('myselect').style.width).trim() == '' && firstgo) {
document.getElementById('myselect').style.width='' + window.getComputedStyle(document.getElementById('myselect'), null).getPropertyValue("width").replace('px','').replace('%','').replace('vh','') + 'px';
}
}
step--;
odivs=document.getElementsByTagName('div');
sofarw=sofarwunit;
sofarh=sofarhunit;
for (idivs=0; idivs<odivs.length; idivs++) {
if (('' + odivs[idivs].style.width).trim() == '' && firstgo) {
sofarwunit=eval(eval(('' + window.getComputedStyle(document.getElementById(odivs[idivs].id), null).getPropertyValue("width").replace('px','').replace('%','').replace('vh',''))) / 96);
sofarhunit=eval(eval(('' + window.getComputedStyle(document.getElementById(odivs[idivs].id), null).getPropertyValue("height").replace('px','').replace('%','').replace('vh',''))) / 96);
sofarw=sofarwunit;
sofarh=sofarhunit;
sofarwsymbol='px';
sofarhsymbol='px';
}
firstgo=false;
odivs[idivs].style.width = '' + eval(eval('' + sofarw) + eval('' + window.getComputedStyle(document.getElementById(odivs[idivs].id), null).getPropertyValue("width").replace('px','').replace('%','').replace('vh',''))) + sofarwsymbol;
odivs[idivs].style.height = '' + eval(eval('' + sofarh) + eval('' + window.getComputedStyle(document.getElementById(odivs[idivs].id), null).getPropertyValue("height").replace('px','').replace('%','').replace('vh',''))) + sofarhsymbol;
odivs[idivs].style.top = '' + step + 'vh';
sofarw+=sofarwunit;
sofarh+=sofarhunit;
if (document.getElementById('myselect')) {
if (eval(window.getComputedStyle(document.getElementById('myselect'), null).getPropertyValue("width").replace('px','').replace('%','').replace('vh','')) > eval(window.getComputedStyle(document.getElementById(odivs[idivs].id), null).getPropertyValue("width").replace('px','').replace('%','').replace('vh',''))) {
document.getElementById('myselect').style.width='' + eval(window.getComputedStyle(document.getElementById(odivs[idivs].id), null).getPropertyValue("width").replace('px','').replace('%','').replace('vh','')) + 'px';
}
}
}
osel.value='';
} else if (('' + osel.value) == '-1') {
step++;
odivs=document.getElementsByTagName('div');
sofarw=eval(0 - sofarwunit);
sofarh=eval(0 - sofarhunit);
for (idivs=0; idivs<odivs.length; idivs++) {
if (('' + odivs[idivs].style.width).trim() == '' && firstgo) {
sofarwunit=eval(eval(('' + window.getComputedStyle(document.getElementById(odivs[idivs].id), null).getPropertyValue("width").replace('px','').replace('%','').replace('vh',''))) / 96);
sofarhunit=eval(eval(('' + window.getComputedStyle(document.getElementById(odivs[idivs].id), null).getPropertyValue("height").replace('px','').replace('%','').replace('vh',''))) / 96);
sofarw=eval(0 - sofarwunit);
sofarh=eval(0 - sofarhunit);
sofarwsymbol='px';
sofarhsymbol='px';
}
firstgo=false;
odivs[idivs].style.width = '' + eval(eval('' + sofarw) + eval('' + window.getComputedStyle(document.getElementById(odivs[idivs].id), null).getPropertyValue("width").replace('px','').replace('%','').replace('vh',''))) + sofarwsymbol;
odivs[idivs].style.height = '' + eval(eval('' + sofarh) + eval('' + window.getComputedStyle(document.getElementById(odivs[idivs].id), null).getPropertyValue("height").replace('px','').replace('%','').replace('vh',''))) + sofarhsymbol;
odivs[idivs].style.top = '' + step + 'vh';
sofarw-=sofarwunit;
sofarh-=sofarhunit;
if (document.getElementById('myselect')) {
if (eval(window.getComputedStyle(document.getElementById('myselect'), null).getPropertyValue("width").replace('px','').replace('%','').replace('vh','')) > eval(window.getComputedStyle(document.getElementById(odivs[idivs].id), null).getPropertyValue("width").replace('px','').replace('%','').replace('vh',''))) {
document.getElementById('myselect').style.width='' + eval(window.getComputedStyle(document.getElementById(odivs[idivs].id), null).getPropertyValue("width").replace('px','').replace('%','').replace('vh','')) + 'px';
}
}
}
osel.value='';
} else {
document.getElementById(osel.value).style.backgroundColor=document.getElementById('mycolour').value;
}
} else {
document.body.style.backgroundColor=document.getElementById('mycolour').value;
}
}
</script>

</head>
<body onload='getcheck();' onclick=" this.style.backgroundColor=document.getElementById('mycolour').value; ">
<div id='orange'>
<div id='yellow'>
<div id='green'>
<div id='blue'>
<div id='indigo'>
<div id='violet'>
<table><tr><td id='themiddle'><script type='text/javascript'> document.write(tcontent); </script></td></tr></table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>