<!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 size=2 id="myselect" onchange="one_at_a_time_will_later_become_more(this.value);" multiple><option onclick="here(this);" value="">Rainbow Central</option><option onclick="here(this);" value=" ">Central Rainbow</option></select><br><input style="display:none;text-align:center;width:100%;" onclick="multilook();" id="myselhelper" type="button" value="Ready"></input><br><input style="background-color:white;color:red;text-color:white;text-align:center;width:80%;" onclick="focusis(this);" onchange="colouris(this);" id="mycolour" type="color" value="#FF0000"></input><br><input style="background-color:white;color:blue;text-color:white;text-align:center;width:80%;" onclick="focusis(this);" onchange="colouris(this);" id="mycolourtwo" type="color" value="#0000FF"></input>';
var step=2, sofarwsymbol="%", sofarhsymbol="vh", sofarwunit=2, sofarhunit=2, firstgo=true, within=false;
var myselectih='';
var oktocall=0.0, alreadydonelist='';

function focusis(ioco) {
ioco.style.backgroundColor='white';
ioco.style.color='black';
}

function colouris(ioco) {
ioco.style.color=ioco.value;
ioco.style.backgroundColor='white';
}

function multilook() {
var ii;
if (eval(('' + oktocall)) == 0.0) {
within=true;
okaytocall=-0.1;
var needtodo=false;
var osel=document.getElementById('myselect');
for (ii=1; ii<=osel.length; ii++) {
if (osel.options[eval(-1 + ii)].selected) {
if (osel.options[eval(-1 + ii)].value.trim() == '') {
if (osel.options[eval(-1 + ii)].value == ' ') alreadydonelist+='red';
} else if (osel.options[eval(-1 + ii)].value.indexOf(' ') != -1 && alreadydonelist.indexOf(osel.options[eval(-1 + ii)].value.replace(' ','') == -1)) {
alreadydonelist+=osel.options[eval(-1 + ii)].value.replace(' ','');
myselectih=myselectih.replace(osel.options[eval(-1 + ii)].value.substring(1) + 'becomes colour below',osel.options[eval(-1 + ii)].value.substring(1) + 'border becomes colour');
}
}
}
for (ii=1; ii<=osel.length; ii++) {
if (osel.options[eval(-1 + ii)].selected) {
if (osel.options[eval(-1 + ii)].value.indexOf(' ') != -1) {
needtodo=true;
one_at_a_time_will_later_become_more(osel.options[eval(-1 + ii)].value);
}
}
}
for (ii=1; ii<=osel.length; ii++) {
if (osel.options[eval(-1 + ii)].selected) {
if (osel.options[eval(-1 + ii)].value.indexOf(' ') == -1) {
needtodo=true;
one_at_a_time_will_later_become_more(osel.options[eval(-1 + ii)].value);
}
}
}
if (needtodo) document.getElementById('myselect').innerHTML=myselectih;
within=false;
}
}

function graduallycallitoff() {
if (eval(('' + oktocall)) >= 0.2) {
oktocall-=0.2;
if (eval(('' + oktocall)) <= 0.0) {
oktocall=0.0;
//document.title='forceit';
multilook();
} else {
setTimeout(graduallycallitoff, 200);
}
} else {
oktocall=0.0;
//document.title='itforce';
multilook();
}
}

function here(opto) {
//document.title='option clicked';
setTimeout(multilook,2000);
if (eval(('' + oktocall)) <= 0.0) {
oktocall=2.0;
graduallycallitoff();
}
}

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 onclick="here(this);" 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').size++;
document.getElementById('myselect').innerHTML+='<option onclick="here(this);" value="' + odivs[idivs].id + ' ">Rainbow ' + odivs[idivs].id.substring(0,1).toUpperCase() + odivs[idivs].id.substring(1).toLowerCase() + ' becomes colour gradient</option>';
document.getElementById('myselect').size++;
}
document.getElementById('myselect').innerHTML+='<option onclick="here(this);" value="-1">Rainbow Step In Bigger</option>';
document.getElementById('myselect').size++;
document.getElementById('myselect').innerHTML+='<option onclick="here(this);" value="1">Rainbow Step In Smaller</option>';
document.getElementById('myselect').size++;
myselectih=document.getElementById('myselect').innerHTML;
if (document.getElementById('mycolour')) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.getElementById('myselhelper').style.display='block';
document.getElementById('mycolourtwo').style.backgroundColor='white';
document.getElementById('mycolour').style.backgroundColor='white';
//document.getElementById('mycolourtwo').click();
//document.getElementById('mycolour').click();
}
document.getElementById('mycolour').focus();
}
}

function one_at_a_time_will_later_become_more(oselvalue) {
var osel=document.getElementById('myselect');
var odivs, idivs, sofarw=0, sofarh=0;
if (oselvalue.trim() != '') {
if (('' + oselvalue.trim()) == '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 (('' + oselvalue.trim()) == '-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 if (oselvalue != oselvalue.trim()) {
document.getElementById(oselvalue.trim()).style.background="-moz-linear-gradient(top, " + document.getElementById('mycolour').value + ", " + document.getElementById('mycolourtwo').value + ")";
document.getElementById(oselvalue.trim()).style.background="-webkit-gradient(linear, 0% 0%, 0% 100%, from(" + document.getElementById('mycolour').value + "), to(" + document.getElementById('mycolourtwo').value + "))";
document.getElementById(oselvalue.trim()).style.background="linear-gradient(top, " + document.getElementById('mycolour').value + ", " + document.getElementById('mycolourtwo').value + ")";
if (oselvalue.indexOf(' ') != -1 && alreadydonelist.indexOf(oselvalue.replace(' ','') == -1)) {
alreadydonelist+=oselvalue.replace(' ','');
var previs=myselectih;
myselectih=myselectih.replace(oselvalue.substring(1) + 'becomes colour below',oselvalue.substring(1) + 'border becomes colour');
if (previs != alreadydonelist) {
if (eval(('' + oktocall)) == 0.0 && !within) {
document.getElementById('myselect').innerHTML=myselectih;
}
}
}
} else if (alreadydonelist.indexOf(oselvalue.trim()) != -1) {
document.getElementById(oselvalue.trim()).style.border='1px solid ' + document.getElementById('mycolour').value;
} else {
document.getElementById(oselvalue.trim()).style.backgroundColor=document.getElementById('mycolour').value;
}
} else if (oselvalue != '') {
document.body.style.background="-moz-linear-gradient(top, " + document.getElementById('mycolour').value + ", " + document.getElementById('mycolourtwo').value + ")";
document.body.style.background="-webkit-gradient(linear, 0% 0%, 0% 100%, from(" + document.getElementById('mycolour').value + "), to(" + document.getElementById('mycolourtwo').value + "))";
document.body.style.background="linear-gradient(top, " + document.getElementById('mycolour').value + ", " + document.getElementById('mycolourtwo').value + ")";
if (oselvalue.trim() == '') {
if (oselvalue == ' ') alreadydonelist+='red';
}
document.body.style.border='1px solid ' + 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>