<!doctype html>
<html>
<head>
<title>Multiple Class Slideshow - RJM Programming - November, 2017</title>
<script type='text/javascript'>

var numimages=0, simages=[], curimg=0, myiprefix='';
var imageobj=[];
var imagefiles=['','','','','','','','',''];
var zero=0;
var delay=0.0;
var noneblock='block';
var hideform='on';
var hideformlater='off';
var burl='';
var wo=null;
var commad=' ... ';
var candidate=false;
var duration=location.search.split('duration=')[1] ? eval(decodeURIComponent(location.search.split('duration=')[1].split('&')[0]) * 1000) : 2000;

function noplus(inp) {
var outp=inp;
while (outp.indexOf('+') != -1) {
outp=outp.replace('+',' ');
}
return outp;
}

function fixhide() {
var sofar='off';
if (document.getElementById('hideform').checked) {
sofar='on';
}
if (document.getElementById('hideformlater').checked) {
sofar+='on';
} else {
sofar+='off';
}
document.getElementById('hide').value=sofar;
}

function precheckget() {
if (wo && wo.closed) {
wo=null;
zero++;
setTimeout(checkget, 20);
} else {
setTimeout(precheckget, 100);
}
}

function maybeclickmysub() {
if (candidate) {
document.getElementById('mysub').click();
}
}

function checkget() {
var i;
delay=0.0;
document.getElementById('duration').value='' + eval(duration / 1000);
document.getElementById('defval').value='' + eval(duration / 1000);
document.getElementById('defval').innerHTML='Time between slides [' + '' + eval(duration / 1000) + ' seconds] below ...';
//alert('' + eval(duration / 1000));
if (document.URL.indexOf('?') != -1) {
candidate=true;
document.getElementById('webpage').removeAttribute("open");
}
if (zero == 0) {
imagefiles[0]=location.search.split('image1=')[1] ? decodeURIComponent(location.search.split('image1=')[1].split('&')[0]) : '';
imagefiles[1]=location.search.split('image2=')[1] ? decodeURIComponent(location.search.split('image2=')[1].split('&')[0]) : '';
imagefiles[2]=location.search.split('image3=')[1] ? decodeURIComponent(location.search.split('image3=')[1].split('&')[0]) : '';
imagefiles[3]=location.search.split('image4=')[1] ? decodeURIComponent(location.search.split('image4=')[1].split('&')[0]) : '';
imagefiles[4]=location.search.split('image5=')[1] ? decodeURIComponent(location.search.split('image5=')[1].split('&')[0]) : '';
imagefiles[5]=location.search.split('image6=')[1] ? decodeURIComponent(location.search.split('image6=')[1].split('&')[0]) : '';
imagefiles[6]=location.search.split('image7=')[1] ? decodeURIComponent(location.search.split('image7=')[1].split('&')[0]) : '';
imagefiles[7]=location.search.split('image8=')[1] ? decodeURIComponent(location.search.split('image8=')[1].split('&')[0]) : '';
imagefiles[8]=location.search.split('image9=')[1] ? decodeURIComponent(location.search.split('image9=')[1].split('&')[0]) : '';
var hide=location.search.split('hide=')[1] ? decodeURIComponent(location.search.split('hide=')[1].split('&')[0]) : 'offoff';
document.getElementById('hide').value=hide;
if (hide.substring(0,2) == 'on') {
hideform='on';
} else {
hideform='off';
}
hide=hide.replace(hideform,'');
//hideform=location.search.split('hideform=')[1] ? decodeURIComponent(location.search.split('hideform=')[1].split('&')[0]) : hideform;
hideformlater=hide; //location.search.split('hideformlater=')[1] ? decodeURIComponent(location.search.split('hideformlater=')[1].split('&')[0]) : hideformlater;
if (hideform == 'on') document.getElementById('hideform').checked=true;
if (hideformlater == 'on') document.getElementById('hideformlater').checked=true;
burl=location.search.split('background=')[1] ? decodeURIComponent(location.search.split('background=')[1].split('&')[0]) : burl;
if (burl != '') {
document.getElementById('background').value=burl;
document.body.style.background=" url('" + burl + "')";
if (hideform != 'on') {
document.body.style.opacity=0.6;
} else {
noneblock='none';
}
} else {
if (hideform == 'on') noneblock='none';
}
if (imagefiles[eval(0 + zero)] != '' && document.getElementById('subis')) {
document.getElementById('subis').value='Currently Playing ...';
}
}
if (imagefiles[eval(0 + zero)] != '') {
for (i=eval(1 + zero); i<=(1 + zero); i++) {
if (noplus(imagefiles[eval(0 + zero)]) != '') {
document.getElementById('image' + i).value=noplus(imagefiles[eval(0 + zero)]);
//document.getElementById('iimage' + i).src=imagefiles[eval(0 + zero)];
//document.getElementById('iimage' + i).load();
//document.getElementById('iimage' + i).play();
if (noplus(imagefiles[eval(0 + zero)]).indexOf(' ') != -1) {
document.getElementById('subis').value='Currently Playing ' + noplus(imagefiles[eval(0 + zero)]) + " via Google Translate if you press speaker and am waiting for you to close that window.";
wo=window.open('https://translate.google.com/#auto/en/' + encodeURIComponent(noplus(imagefiles[eval(0 + zero)])),'_blank','top=50,left=50,width=600,height=600');
setTimeout(precheckget, 20);
} else if (1 == 1) {
for (var ii=1; ii<=9; ii++) {
//myiprefix='';
document.getElementById('image' + ii).value=noplus(imagefiles[eval(0 + zero)]);
if (document.getElementById('image' + ii).value.toLowerCase().indexOf('.htm') != -1) {
if (commad == '') {
document.getElementById('controls').innerHTML=document.getElementById('image' + ii).value;
} else {
document.getElementById('controls').innerHTML+=commad + document.getElementById('image' + ii).value;
}
commad=',';
myiprefix=document.getElementById('image' + ii).value.replace(document.getElementById('image' + ii).value.split('/')[eval(-1 + document.getElementById('image' + ii).value.split('/').length)],'');
if (ii == 1) location.href='#slideshow'; //mysub';
//alert(myiprefix + ' ... ' + document.getElementById('image' + ii).value + ' --- ' + document.getElementById('image' + ii).value.split('/')[eval(-1 + document.getElementById('image' + ii).value.split('/').length)]);
document.getElementById('myiframe').src=document.getElementById('image' + ii).value;
zero++;
} else if (document.getElementById('image' + ii).value.indexOf('.') != -1) {
if (commad == '') {
document.getElementById('controls').innerHTML=document.getElementById('image' + ii).value;
} else {
document.getElementById('controls').innerHTML+=commad + document.getElementById('image' + ii).value;
}
commad=',';
if (ii == 1) location.href='#slideshow'; //mysub';
playslideshow(document.getElementById('image' + ii));
curimg=i;
zero++;
}
}
} else {
imageobj.push(new Image()); // thanks to http://stackoverflow.com/questions/10868249/html5-image-player-duration-showing-nan
imageobj[zero].src=noplus(imagefiles[eval(0 + zero)]);
imageobj[zero].addEventListener('loadedmetadata', function() {
//alert("Playing " + imageobj[zero].src + ", for: " + imageobj[zero].duration + "seconds.");
delay+=imageobj[zero].duration;
document.getElementById('subis').value='Currently Playing ' + imageobj[zero].src + " for " + imageobj[zero].duration + " seconds";
zero++;
if (zero < imagefiles.length) {
setTimeout(checkget, eval(1000 * delay));
}
imageobj[eval(-1 + zero)].play();
});
}
} else if (document.getElementById('subis')) {
document.getElementById('subis').value='Show Slideshow';
if (hideformlater != 'on') {
document.getElementById('formbits').style.display='block';
document.getElementById('formbits').style.backgroundColor='yellow';
} else {
document.getElementById('formbits').style.display='none';
}
}
}
document.getElementById('formbits').style.display=noneblock;
} else if (zero != 0) {
document.getElementById('formbits').style.display=noneblock;
document.getElementById('subis').value='Show Slideshow';
if (hideformlater != 'on') {
document.getElementById('formbits').style.display='block';
document.getElementById('formbits').style.backgroundColor='yellow';
} else {
document.getElementById('formbits').style.display='none';
}
} else {
document.getElementById('formbits').style.display=noneblock;
}
setTimeout(keepchecking, duration);
}

function keepchecking() {
curimg=eval(0 + eval((1 + curimg) % simages.length));
//document.title='' + simages.length + ' ... ' + curimg;
if (curimg <= 1) {
document.getElementById('slideshow').className='none is1';
} else {
document.getElementById('slideshow').className+=' is' + eval(1 + curimg);
}
setTimeout(keepchecking, duration);
}

function playslideshow(oi) {
if (oi.value.toLowerCase().indexOf('.htm') != -1) {
myiprefix=oi.value.replace(document.getElementById('image' + ii).value.split('/')[eval(-1 + oi.value.split('/').length)],'');
document.getElementById('myiframe').src=oi.value;
} else if (oi.value.indexOf('.') != -1) {
if (simages.length == 0) {
document.getElementById('slideshow').style.display='block';
document.getElementById('slideshow').style.width='100%';
document.getElementById('slideshow').style.height='700px';
}
simages.push(oi.value);
curimg=simages.length;
document.getElementById('endoff').innerHTML+='<style> .is' + simages.length + ' { background: URL(' + oi.value + '); background-repeat: no-repeat; } </style>';
document.getElementById('slideshow').className+=' is' + simages.length;
}
}

function checklast(iois) {
var between=' src=', bsuff='"';
//alert(1);
if (iois != null) {
//alert(12);
var aconto = (iois.contentWindow || iois.contentDocument);
//alert(123);
if (aconto != null) {
//alert(1234);
if (aconto.document) { aconto = aconto.document; }
//alert(12345);
if (aconto.body != null) {
//alert(123456 + ' ' + between + bsuff + ' ' + aconto.body.innerHTML.length);
var imgs=aconto.body.innerHTML.split(between + bsuff);
//alert(1234567);
if (imgs.length == 1) {
bsuff="'";
imgs=aconto.body.innerHTML.split(between + bsuff);
//alert(12345678 + ' ' + between + bsuff);
}
if (imgs.length > 1) {
//alert(imgs.length);
for (var iii=1; iii<imgs.length; iii++) {
//alert(0);
//alert(imgs[iii].split(bsuff)[0]);
if (simages.length == 0) {
document.getElementById('slideshow').style.display='block';
document.getElementById('slideshow').style.width='100%';
document.getElementById('slideshow').style.height='700px';
}
if (imgs[iii].split(bsuff)[0].indexOf("/") == -1) {
simages.push(myiprefix + imgs[iii].split(bsuff)[0]);
curimg=simages.length;
document.getElementById('endoff').innerHTML+='<style> .is' + simages.length + ' { background: URL(' + myiprefix + imgs[iii].split(bsuff)[0] + '); background-repeat: no-repeat; } </style>';
document.getElementById('slideshow').className+=' is' + simages.length;
} else {
simages.push(imgs[iii].split(bsuff)[0]);
curimg=simages.length;
document.getElementById('endoff').innerHTML+='<style> .is' + simages.length + ' { background: URL(' + imgs[iii].split(bsuff)[0] + '); background-repeat: no-repeat; } </style>';
document.getElementById('slideshow').className+=' is' + simages.length;
}
}
}
}
}
}
}

</script>
</head>
<body onload='checkget();'>
<div id='formbits' style='display:none;text-align:center; width: 100%; '>
<h1 style='text-align:center; width: 100%;'>Multiple Class Slideshow - RJM Programming - November, 2017</h1>
<form style='text-align:center; width: 100%;' method='GET' action='./slideshow_multiple_class.htm'>
<details id=webpage open=open onclick='candidate=!candidate;'><summary id=controls><select onclick='candidate=!candidate;' onchange='maybeclickmysub();' name='duration' id='duration'><option id="defval" value="2">Time between slides [2 seconds] below ...</option><option value="0.01">0.01</option><option value="0.05">0.05</option><option value="0.1">0.1</option><option value="0.2">0.2</option><option value="0.5">0.5</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="20">20</option><option value="30">30</option><option value="40">40</option><option value="50">50</option><option value="60">60</option><option value="300">300 (5 minutes)</option></select></summary>
Optional Image File (or HTML slideshow) 1: <input onblur='playslideshow(this);' style='width:50%;' type='text' name='image1' id='image1'></input><br>
Optional Image File (or HTML slideshow) 2: <input onblur='playslideshow(this);' style='width:50%;' type='text' name='image2' id='image2'></input><br>
Optional Image File (or HTML slideshow) 3: <input onblur='playslideshow(this);' style='width:50%;' type='text' name='image3' id='image3'></input><br>
Optional Image File (or HTML slideshow) 4: <input onblur='playslideshow(this);' style='width:50%;' type='text' name='image4' id='image4'></input><br>
Optional Image File (or HTML slideshow) 5: <input onblur='playslideshow(this);' style='width:50%;' type='text' name='image5' id='image5'></input><br>
Optional Image File (or HTML slideshow) 6: <input onblur='playslideshow(this);' style='width:50%;' type='text' name='image6' id='image6'></input><br>
Optional Image File (or HTML slideshow) 7: <input onblur='playslideshow(this);' style='width:50%;' type='text' name='image7' id='image7'></input><br>
Optional Image File (or HTML slideshow) 8: <input onblur='playslideshow(this);' style='width:50%;' type='text' name='image8' id='image8'></input><br>
Optional Image File (or HTML slideshow) 9: <input onblur='playslideshow(this);' style='width:50%;' type='text' name='image9' id='image9'></input><br><br>
<div style='display:none;'>Optional Background Image: </div><input style='width:50%;' type='hidden' name='background' id='background'></input><br><br>
<div style='display:none;'>Hide This Form While Image Plays? </div><input style='display:none;' onchange='fixhide();' type='checkbox' id='hideform'></input><br>
<div style='display:none;'>Hide This Form After Image Plays? </div><input style='display:none;' onchange='fixhide();' type='checkbox' id='hideformlater'></input><br><br>
<input type='hidden' name='hide' id='hide' value='offoff'></input>
<input id='mysub' onclick='fixhide();' id='subis' style='text-align:center; background-color: pink; ' type='submit' value='View Slideshow'></input>
</details>
<br><br>
<div id='slideshow' class='none' style='display:none;'></div>
</form>
</div>

<div id='endoff'></div>
<iframe id='myiframe' onload='checklast(this);' style='display:none;' src=''></iframe>
</body>
</html>