var banners = [
	["Hot Mikado 2006 Cast w526.jpg", "'Hot Mikado' 2006"],
	["Sweeney Todd 2018 Cast w542.jpg", "'Sweeney Todd' 2018"],
	["9 to 5 The Musical 2017 Checking Time w542.jpg", "'9 to 5 The Musical' 2017"],
	["Evita 2016 Curtain Call w542.jpg", "'Evita' 2016"],
	["Beauty And The Beast 2011 Banquet w542.jpeg", "'Beauty And The Beast' 2011 Banquet"],
	["White Christmas 2016 Train w542.jpg", "'White Christmas' 2016"],
	["South Pacific 2012 Bloody Mary w542.jpg", "'South Pacific' 2012"],
	["Beauty And The Beast 2011 Gaston in Tavern w542.jpeg", "'Beauty And The Beast' 2011 Gaston in Tavern"],
	["White Christmas 2016 Snow w542.jpg", "'White Christmas' 2016"],
	["JCS 2017 Cast w542.jpg", "'Jesus Christ Superstar' 2017"],
	["Merry Widow 2008 Cast w542.jpeg", "'The Merry Widow' 2008 - Cast"],
	["Top Hat 2018 Cast w542.jpg", "'Top Hat' 2018"],
	["Tom Jones 1951 Cast w542.jpg", "'Tom Jones' 1951"],
	["Sweet Charity 2000 Dancers w542.jpg", "'Sweet Charity' 2000"],
	["Beauty And The Beast 2011 Finale Part One w542.jpeg", "'Beauty And The Beast' 2011 Finale Part One"],
	["King & I 2015 Cast w542.jpg", "'The King & I' 2015"],
	["Sister Act 2014 Nuns w542.jpg", "'Sister Act' 2014"],
	["42nd St 2019 Act 2 Finale w542.jpg", "'42nd Street' 2019"],
	["Arcadians 1938 Horse 542x163.jpg", "'The Arcadians' 1938 - including a live horse!"],
	["White Christmas 2016 Opening Act 2 w542.jpg", "'White Christmas' 2016 - Opening Act 2"],
	["Merry Widow 2008 Comedy Group w542.jpeg", "'The Merry Widow' 2008 - Comedy Group"],
	["Anything Goes 2023 Cast and Crew banner w542.jpeg", "'Anything Goes' 2023 - Cast and Crew"],
	["Beauty And The Beast 2011 Finale Part Two w542.jpeg", "'Beauty And The Beast' 2011 Finale Part Two"],
	["Legally Blonde 2022 w542.jpeg", "'Legally Blonde' 2022 - Cast"],
]

var timer = 100;

//console.log(banners);

var style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode('.fadeit { position:relative;display:block;float:left;width:542px;height:200px;overflow:hidden; }'));
style.appendChild(document.createTextNode('.fadeit div, .fadeit img { position:absolute;display:block;min-width:542px;min-height:200px; }'));
for (var i = 1; i <= banners.length; i++) {
	style.appendChild(document.createTextNode('.fadeit div:nth-child('+i+') { animation:fade'+i+' '+timer+'s infinite; }'));
}
var keyframe = 100/banners.length;
for (var i = 1; i <= banners.length; i++) {
	var node = '';
	for (var j = 1; j <= banners.length+1; j++) {
		var k = keyframe * (j-1);
		opacity = i == j ? 1 : 0; if (i==1 && j==banners.length+1) opacity = 1;
		node += k+'% {opacity:'+opacity+'} ';
	}
	style.appendChild(document.createTextNode('@keyframes fade'+i+' { '+node+'}'));
}
style.appendChild(document.createTextNode('.fadeit p { position:absolute;top:160px;right:32px;color:#fff;font-size:17px;margin:0;z-index:999;text-indent:0;text-shadow:1px 1px 0px #000; }'));
style.appendChild(document.createTextNode('.fadeit::before { content:"";width:542px;height:12px;position:absolute;z-index:99;top:auto;right:0;bottom:0;left:0;background-image:linear-gradient(to bottom, transparent 20%, #000 100%); }'));
style.appendChild(document.createTextNode('.fadeit { width:calc(100% - 209px);max-width:542px; }')); // RESPONSIVE OVERRIDE
document.head.appendChild(style);

/*document.write('<div class="fadeit">');
for (var i = 0; i < banners.length; i++) {
	document.write('<div>');
	document.write('<img src="/uploads/images/000%20YAOS%20Admin/Banners%20for%20Home%20Page/'+banners[i][0]+'">'); // title="'+banners[i][1]+'"
	document.write('<p>'+banners[i][1]+'</p>');
	document.write('</div>');
}
document.write('</div>');*/

var fadeit = document.createElement('div');
fadeit.classList.add('fadeit');
for (var i = 0; i < banners.length; i++) {
	var imgx = document.createElement('img');
	imgx.src = '/uploads/images/000%20YAOS%20Admin/Banners%20for%20Home%20Page/'+banners[i][0];
	//imgx.title = banners[i][1];
	var px = document.createElement('p');
	px.appendChild(document.createTextNode(banners[i][1]));
	var divx = document.createElement('div');
	divx.appendChild(imgx);
	divx.appendChild(px);
	fadeit.appendChild(divx);
}
document.getElementById('headerlink').appendChild(fadeit);