var banners = [
	["image0a.jpg", ""],
	["image1a.jpg", ""],
	["image2 (2).jpg", ""],
	["image3 (2).jpg", ""],
	["image4a.jpg", ""],
]

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%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%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);