<!doctype html>
<html>
<head>
<title>Promises Primer Tutorial - RJM Programming - October, 2017</title>

<script type='text/javascript'>
var lleft=false, lright=false, cell="left", damdone=false;
var wis, adate, okay=0;

var waiturl1=location.search.split('waiturl1=')[1] ? decodeURIComponent((location.search.split('waiturl1=')[1]).split('&')[0]) : '//www.rjmprogramming.com.au/HTMLCSS/sleep.php?n=5';
var waiturl2=location.search.split('waiturl2=')[1] ? decodeURIComponent((location.search.split('waiturl2=')[1]).split('&')[0]) : '//www.rjmprogramming.com.au/HTMLCSS/sleep.php?n=4';
var geturl1=location.search.split('geturl1=')[1] ? decodeURIComponent((location.search.split('geturl1=')[1]).split('&')[0]) : '//www.rjmprogramming.com.au/PHP/australian_lighthouses.php#selsort';
var geturl2=location.search.split('geturl2=')[1] ? decodeURIComponent((location.search.split('geturl2=')[1]).split('&')[0]) : '//www.rjmprogramming.com.au/HTMLCSS/dams_usa.htm';
var geturl3=location.search.split('geturl3=')[1] ? decodeURIComponent((location.search.split('geturl3=')[1]).split('&')[0]) : '//www.rjmprogramming.com.au/HTMLCSS/sleep.php?n=75';

var gettitle1=location.search.split('gettitle1=')[1] ? decodeURIComponent((location.search.split('gettitle1=')[1]).split('&')[0]) : 'Lighthouses in Australia';
var gettitle2=location.search.split('gettitle2=')[1] ? decodeURIComponent((location.search.split('gettitle2=')[1]).split('&')[0]) : 'Dams in the USA';

var getnicktitle1=(gettitle1 + 'Lighthouses in Australia').substring(1).split(' ')[0];

var mediaurl1=location.search.split('mediaurl1=')[1] ? decodeURIComponent((location.search.split('mediaurl1=')[1]).split('&')[0]) : '//www.rjmprogramming.com.au/Mac/ImageFit_Paintbrush.m4v';
var mediaurl2=location.search.split('mediaurl2=')[1] ? decodeURIComponent((location.search.split('mediaurl2=')[1]).split('&')[0]) : '//www.rjmprogramming.com.au/Mac/ImageFit_Paintbrush.m4v#t=4';

var types = ["audio/wav","audio/x-wav","audio/x-pn-realaudio","audio/x-mpegurl","audio/x-aiff","audio/mpeg","audio/mid",
"audio/basic","audio/ogg","video/x-sgi-movie","video/x-msvideo","video/quicktime","audio/mp3","video/mp4","video/mpeg",
"video/x-la-asf","video/ogg","video/webm","audio/mp4", "image/jpeg", "image/jpeg", "image/png", "image/gif", "image/bmp", "image/tif",
"text/html", "text/html", "text/html", "text/javascript", "text/css", "text/plain", "text/xml", "text/csv",
"application/vnd.ms-word", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "application/x-php", "application/pdf",
"application/vnd.openxmlformats-officedocument.presentationml.presentation", "application/vnd.ms-powerpoint",
"application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"];
var exts = [".wav",".wav",".ram",".m3u",".aiff",".mp3",".rmi",
".snd",".ogg",".movie",".avi",".mov",".mp3",".m4v",".mpeg",
".lsx",".ogv",".webm",".m4a", ".jpg", ".jpeg", ".png", ".gif", ".bmp", ".tif",
".htm", ".html", ".htmls", ".js", ".css", ".txt", ".xml", ".csv",
".doc", ".docx", ".php", ".pdf",
".pptx", ".ppt",
".xls", ".xlsx"];

var thisext1=('.' + mediaurl1).split('#')[0].split('?')[0].split('.')[eval(-1 + ('.' + mediaurl1).split('#')[0].split('?')[0].split('.').length)];
var thisext2=('.' + mediaurl2).split('#')[0].split('?')[0].split('.')[eval(-1 + ('.' + mediaurl2).split('#')[0].split('?')[0].split('.').length)];
var thismtype1='video/mp4';
var thismtype2='video/mp4';
var thisprefix1='><source ';
var thisprefix2='><source ';
var thissuffix1='></source>';
var thissuffix2='></source>';

var imt;

for (imt=0; imt<exts.length; imt++) {
if (('.' + thisext1.toLowerCase()) == exts[imt]) {
thismtype1=types[imt];
if (thismtype1 == 'audio') {
thisprefix1='';
thissuffix1='';
}
}
}

for (imt=0; imt<exts.length; imt++) {
if (('.' + thisext2.toLowerCase()) == exts[imt]) {
thismtype2=types[imt];
if (thismtype2 == 'audio') {
thisprefix2='';
thissuffix2='';
}
}
}

var thistag1=thismtype1.split('/')[0];
var thistag2=thismtype2.split('/')[0];

// Promise.all([promise1, promise2]).then(function(results) {
// // Both promises resolved
// })
// .catch(function(error) {
// // One or more promises was rejected
// });

// From Jake Archibald's Promises and Back:
// http://www.html5rocks.com/en/tutorials/es6/promises/#toc-promisifying-xmlhttprequest

function get(url) {
// Return a new promise.
return new Promise(function(resolve, reject) {
// Do the usual XHR stuff
var req = new XMLHttpRequest();
req.open('GET', url);

req.onreadystatechange = function () {
//document.title='' + req.readyState + ' ' + req.status;
if (req.readyState == 4 && req.status == 200) {
console.log(req.responseText);
if (cell.indexOf("centre") == -1) {
document.getElementById(cell).innerHTML=req.response;
if (req.response.indexOf(getnicktitle1) != -1 || damdone) {
adate=new Date();
document.getElementById('middle').innerHTML+=adate.toLocaleString() + '<br>' + geturl1.split('#')[0].split('/')[eval(-1 + geturl1.split('#')[0].split('/').length)] + ' Ajax response<br><br>';
document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + geturl1.split('#')[0].split('/')[eval(-1 + geturl1.split('#')[0].split('/').length)] + ' Ajax response<br><br>';
adate=new Date();
document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + geturl1.split('#')[0].split('/')[eval(-1 + geturl1.split('#')[0].split('/').length)] + ' IFRAME src<br><br>';
if (1 == 1) {
document.getElementById('h' + cell).innerHTML+='<iframe id="i' + cell + '" onload="ldone(' + "'" + geturl1.split('#')[0].split('?')[0].split('/')[eval(-1 + geturl1.split('#')[0].split('?')[0].split('/').length)] + "'" + ');" style="display:none;width:800px;float:left;height:900px;" src="' + geturl1 + '" title="' + gettitle1 + '"></iframe>';
} else {
document.getElementById('h' + cell).innerHTML+='<iframe onload="ldone(' + "'" + geturl1.split('#')[0].split('?')[0].split('/')[eval(-1 + geturl1.split('#')[0].split('?')[0].split('/').length)] + "'" + ');" style="width:800px;float:left;height:900px;" src="' + geturl1 + '" title="' + gettitle1 + '"></iframe>';
}
} else {
adate=new Date();
document.getElementById('middle').innerHTML+=adate.toLocaleString() + '<br>' + geturl2.split('#')[0].split('/')[eval(-1 + geturl2.split('#')[0].split('/').length)] + ' Ajax response<br><br>';
document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + geturl2.split('#')[0].split('/')[eval(-1 + geturl2.split('#')[0].split('/').length)] + ' Ajax response<br><br>';
damdone=true;
//alert(window.getComputedStyle(document.getElementById(cell), null).getPropertyValue("width"));
wis='' + eval(eval(window.getComputedStyle(document.getElementById(cell), null).getPropertyValue("width").replace('px','')) - 0) + 'px';
adate=new Date();
if (document.getElementById('hmiddle').innerHTML == "") document.getElementById('hmiddle').innerHTML=document.getElementById('middle').innerHTML;
document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + geturl2.split('#')[0].split('/')[eval(-1 + geturl2.split('#')[0].split('/').length)] + ' IFRAME src<br><br>';
if (1 == 1) {
document.getElementById('h' + cell).innerHTML+='<iframe id="i' + cell + '" onload="ldone(' + "'" + geturl2.split('#')[0].split('?')[0].split('/')[eval(-1 + geturl2.split('#')[0].split('?')[0].split('/').length)] + "'" + ');" style="display:none;width:' + wis + ';float:left;height:900px;" src="' + geturl2 + '" title="' + gettitle2 + '"></iframe>';
} else {
document.getElementById('h' + cell).innerHTML+='<iframe onload="ldone(' + "'" + geturl2.split('#')[0].split('?')[0].split('/')[eval(-1 + geturl2.split('#')[0].split('?')[0].split('/').length)] + "'" + ');" style="width:' + wis + ';float:left;height:900px;" src="' + geturl2 + '" title="' + gettitle2 + '"></iframe>';
}
}
if (cell == "right") {
cell="centre";
} else {
cell="right";
}
} else {
adate=new Date();
if (cell == 'centre') {
document.getElementById('middle').innerHTML+=adate.toLocaleString() + '<br>' + geturl3.split('#')[0].split('/')[eval(-1 + geturl3.split('#')[0].split('/').length)] + ' Ajax response<br><br>';
document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + geturl3.split('#')[0].split('/')[eval(-1 + geturl3.split('#')[0].split('/').length)] + ' Ajax response<br><br>';
document.getElementById('ileft').style.display='block';
document.getElementById('iright').style.display='block';
} else {
document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + geturl3.split('#')[0].split('=')[0].split('/')[eval(-1 + geturl3.split('#')[0].split('=')[0].split('/').length)] + '=' + cell.replace('centre','') + ' Ajax response<br><br>';
if (cell.indexOf((waiturl2 + '&=4').split('=')[1].split('&')[0]) != -1) {
if (thistag1 != 'audio') document.getElementById('hleft').innerHTML='<' + thistag1 + ' controls="controls" onended="atend(this);" autoplay="autoplay" id="vleft"' + thisprefix1 + ' src="' + mediaurl1 + '" type="' + thismtype1 + '"' + thissuffix1 + '</' + thistag1 + '>';
document.getElementById('hright').innerHTML='<' + thistag2 + ' controls="controls" onloadstart="atstart(this);" onended="atend(this);" autoplay="autoplay" id="vright"' + thisprefix2 + ' src="' + mediaurl2 + '" type="' + thismtype2 + '"' + thissuffix2 + '</' + thistag2 + '>';
}
cell=cell.replace('centre' + (waiturl2 + '&=4').split('=')[1].split('&')[0],'centre0' + (waiturl1 + '&=5').split('=')[1].split('&')[0]).replace('centre' + (waiturl1 + '&=5').split('=')[1].split('&')[0],'centre0' + (waiturl2 + '&=4').split('=')[1].split('&')[0]).replace('centre0','centre');
}
}
}
};

// Handle network errors
req.onerror = function() {
reject(Error("Network Error"));
};

// Make the request
req.send();
});
}

function atstart(vo) {
adate=new Date();
if (vo.id.indexOf('left') != -1) {
document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + mediaurl1.split('#')[0].split('/')[eval(-1 + mediaurl1.split('#')[0].split('/').length)] + ' ' + thismtype1.split('/')[0] + ' started<br><br>';
} else {
document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + mediaurl2.split('#')[0].split('/')[eval(-1 + mediaurl2.split('#')[0].split('/').length)] + ' (delayed) ' + thismtype2.split('/')[0] + ' started<br><br>';
}
}

function atend(vo) {
adate=new Date();
if (vo.id.indexOf('left') != -1) {
okay++;
document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + mediaurl1.split('#')[0].split('/')[eval(-1 + mediaurl1.split('#')[0].split('/').length)] + ' ' + thismtype1.split('/')[0] + ' ended<br><br>';
document.getElementById('dend').innerHTML+=adate.toLocaleString() + '<br>' + mediaurl1.split('#')[0].split('/')[eval(-1 + mediaurl1.split('#')[0].split('/').length)] + ' ' + thismtype1.split('/')[0] + ' ended<br><br>';
} else {
okay++;
document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + mediaurl2.split('#')[0].split('/')[eval(-1 + mediaurl2.split('#')[0].split('/').length)] + ' (delayed) ' + thismtype2.split('/')[0] + ' ended<br><br>';
document.getElementById('dend').innerHTML+=adate.toLocaleString() + '<br>' + mediaurl2.split('#')[0].split('/')[eval(-1 + mediaurl2.split('#')[0].split('/').length)] + ' (delayed) ' + thismtype2.split('/')[0] + ' ended<br><br>';
}
}

function ost() {
adate=new Date();
document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + ' Timer here<br><br>';
if (okay < 2) setTimeout(ost,1000);
}

function ldone(what) {
adate=new Date();
document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + what + ' IFRAME loaded<br><br>';
}

// Would take only 5000ms total!
async function parallel() {
const wait1 = get(waiturl1.split('#')[0]);
const wait2 = get(waiturl2.split('#')[0]);
await wait1;
await wait2;
return "done!";
}

function ol() {

document.getElementById('myform').action=document.URL.split('#')[0].split('?')[0];

if (document.URL.indexOf('video=') != -1 || document.URL.indexOf('audio=') != -1 || document.URL.indexOf('async=') != -1 || document.URL.indexOf('await=') != -1) {
setTimeout(ost,1000);
document.getElementById('hleft').innerHTML='<' + thistag1 + ' controls="controls" onloadstart="atstart(this);" onended="atend(this);" autoplay="autoplay" id="vleft"' + thisprefix1 + ' src="' + mediaurl1 + '" type="' + thismtype1 + '"' + thissuffix1 + '</' + thistag1 + '>';
cell='centre' + (waiturl2 + '&=4').split('=')[1].split('&')[0];
parallel();

} else if (1 == 1) {
document.getElementById('trajax').style.display='none';
var promise1=get(geturl1.split('#')[0]).then(function(response) {
console.log("Success!", response);
}, function(error) {
console.error("Failed!", error);
});
var promise2=get(geturl2.split('#')[0]).then(function(response) {
console.log("Success!", response);
}, function(error) {
console.error("Failed!", error);
});
var promise3=get(geturl3.split('#')[0]).then(function(response) {
console.log("Success!", response);
}, function(error) {
console.error("Failed!", error);
});
Promise.all([promise1, promise2, promise3]).then(function(results) {
// All promises resolved
//alert(97);
document.getElementById('ileft').style.display='block';
document.getElementById('iright').style.display='block';
})
.catch(function(error) {
// One or more promises was rejected
//alert(997);
document.getElementById('ileft').style.display='block';
document.getElementById('iright').style.display='block';
});

} else {

adate=new Date();
document.getElementById('middle').innerHTML+=adate.toLocaleString() + '<br>' + geturl1.split('#')[0].split('/')[eval(-1 + geturl1.split('#')[0].split('/').length)] + ' get()<br><br>';
document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + geturl1.split('#')[0].split('/')[eval(-1 + geturl1.split('#')[0].split('/').length)] + ' get()<br><br>';
//get('//www.rjmprogramming.com.au/HTMLCSS/sleep.php?n=56').then(function(response) {
get(geturl1.split('#')[0]).then(function(response) {
console.log("Success!", response);
}, function(error) {
console.error("Failed!", error);
});

adate=new Date();
document.getElementById('middle').innerHTML+=adate.toLocaleString() + '<br>' + geturl2.split('#')[0].split('/')[eval(-1 + geturl2.split('#')[0].split('/').length)] + ' get()<br><br>';
document.getElementById('hmiddle').innerHTML+=adate.toLocaleString() + '<br>' + geturl2.split('#')[0].split('/')[eval(-1 + geturl2.split('#')[0].split('/').length)] + ' get()<br><br>';
get(geturl2.split('#')[0]).then(function(response) {
console.log("Success!", response);
}, function(error) {
console.error("Failed!", error);
});

}

}

function rmedia(ro) {
if (ro.title.toLowerCase().indexOf('second') == 0) {
document.getElementById(ro.id.replace('r','')).value=ro.value.split('#')[0] + '#t=' + document.getElementById('rwaiturl2').value;
} else {
document.getElementById(ro.id.replace('r','')).value=ro.value;
}
}

function rurl(ro) {
if (ro.title.toLowerCase().indexOf('second') != -1) {
document.getElementById(ro.id.replace('r','')).value=ro.value;
} else {
document.getElementById(ro.id.replace('r','')).value=ro.value;
}
}

function rtitle(ro) {
if (ro.title.toLowerCase().indexOf('second') != -1) {
document.getElementById(ro.id.replace('r','')).value=ro.value;
} else {
document.getElementById(ro.id.replace('r','')).value=ro.value;
}
}
</script>
</head>
<body style=background-color:#f0f0f0; onload='ol();'>
<h1>Promises Primer Tutorial</h1>
<h3>RJM Programming - October, 2017</h3>
<h3> Thanks to <a target=_blank title='Useful link, thanks' href='https://davidwalsh.name/promises'>https://davidwalsh.name/promises</a></h3>
<div id='dend'></div>
<details id='mydetail'><summary style=background-color:yellow; id='mysummary'>Interactive Form for User Driven Runs<br><br></summary>
<div id='dform'>
<br><br>
<form style='background-color:pink;border:5px solid green;padding:7px 7px 7px 7px;' id='myform' action='./promises_test.htm' method='GET'>
<input type=hidden name=waiturl1 id=waiturl1 value='//www.rjmprogramming.com.au/HTMLCSS/sleep.php?n=5'></input>
<input type=hidden name=waiturl2 id=waiturl2 value='//www.rjmprogramming.com.au/HTMLCSS/sleep.php?n=4'></input>
<input type=hidden name=geturl1 id=geturl1 value='//www.rjmprogramming.com.au/PHP/australian_lighthouses.php#selsort'></input>
<input type=hidden name=geturl2 id=geturl2 value='//www.rjmprogramming.com.au/HTMLCSS/dams_usa.htm'></input>
<input type=hidden name=geturl3 id=geturl3 value='//www.rjmprogramming.com.au/HTMLCSS/sleep.php?n=75'></input>
<input type=hidden name=mediaurl1 id=mediaurl1 value='//www.rjmprogramming.com.au/Mac/ImageFit_Paintbrush.m4v'></input>
<input type=hidden name=mediaurl2 id=mediaurl2 value='//www.rjmprogramming.com.au/Mac/ImageFit_Paintbrush.m4v#t=4'></input>
<input type=hidden name=gettitle1 id=gettitle1 value='Lighthouses in Australia'></input>
<input type=hidden name=gettitle2 id=gettitle2 value='Dams in the USA'></input>
Media Left URL: <input style=width:30%; onblur=rmedia(this); id=rmediaurl1 title=FirstMedia type=text value='//www.rjmprogramming.com.au/Mac/ImageFit_Paintbrush.m4v'></input><br>

Media Right URL: <input style=width:30%; onblur=rmedia(this); id=rmediaurl2 title=SecondMedia type=text value='//www.rjmprogramming.com.au/Mac/ImageFit_Paintbrush.m4v#t=4'></input><br>
Delay of Play of Right in Seconds: <input style=width:5%; onchange="document.getElementById('waiturl2').value='//www.rjmprogramming.com.au/HTMLCSS/sleep.php?n=' + this.value; document.getElementById('waiturl1').value='//www.rjmprogramming.com.au/HTMLCSS/sleep.php?n=' + eval(1 + eval('' + this.value)); rmedia(document.getElementById('rmediaurl2'));" onblur="document.getElementById('waiturl2').value='//www.rjmprogramming.com.au/HTMLCSS/sleep.php?n=' + this.value; document.getElementById('waiturl1').value='//www.rjmprogramming.com.au/HTMLCSS/sleep.php?n=' + eval(1 + eval('' + this.value)); rmedia(document.getElementById('rmediaurl2'));" id=rwaiturl2 step='1' min='0' type=number value='4'></input><br><br>
<input name='async' type='submit' value='Play Media' id='myplay'></input><br><br><p> ... or ...</p><br><br>
Application <input style=width:10%; type=text id=rtitle1 onblur=atitle(this); id=rgettitle1 value='Lighthouses in Australia'></input> First Get URL: <input style=width:30%; onblur=aurl(this); id=rgeturl1 title=FirstApp type=text value='//www.rjmprogramming.com.au/PHP/australian_lighthouses.php#selsort'></input><br>
Application <input style=width:10%; type=text id=rtitle2 onblur=atitle(this); id=rgettitle2 value='Dams in the USA'></input> Second Get URL: <input style=width:30%; onblur=aurl(this); id=rgeturl2 title=SecondApp type=text value='//www.rjmprogramming.com.au/HTMLCSS/dams_usa.htm'></input><br>
Delay behind the Scenes in Seconds: <input style=width:5%; onchange="document.getElementById('geturl3').value='//www.rjmprogramming.com.au/HTMLCSS/sleep.php?n=' + eval(0 + eval('' + this.value));" onblur="document.getElementById('geturl3').value='//www.rjmprogramming.com.au/HTMLCSS/sleep.php?n=' + eval(0 + eval('' + this.value));" id=rgeturl3 step='1' min='1' type=number value='75'></input><br><br>
<input type='submit' value='Run Applications' id='mysubmit'></input>
</form>
</div>
<br><br>
</details>
<table style='width:100%;'>
<tbody>
<tr><th id='hleft' style='vertical-align:top;width:550px;'></th><th id='hmiddle' style='vertical-align:top;'></th><th id='hright' style='vertical-align:top;'></th></tr>
<tr id='trajax'><td id='left' style='vertical-align:top;width:550px;'></td><td id='middle' style='vertical-align:top;'></td><td id='right' style='vertical-align:top;'></td></tr>
</tbody>
</table>
</body>
</html>