HTMLElement.prototype.makeBurns = makeBurns;
for(slider of document.getElementsByClassName('ken-burns')) {
	slider.makeBurns();
}

function makeBurns() {
	
	// Initialize
	let sections = this.getElementsByTagName('section'),
			background = document.createElement('div');
	
	// Create background div
	for(section of sections) {
		let img = document.createElement('img');
		img.setAttribute('src', section.dataset.background);
		background.appendChild(img);
		TweenLite.set(section, { perspective: 600 });
	}
	
	background.setAttribute('class', 'background');
	this.appendChild(background);
	
	let backgroundImages = background.getElementsByTagName('img');
	
	// Burns timeline
	const burnsDuration = 15,
				displacement = '25%';
	
	new TimelineMax({
		repeat: -1
	})
		.set(background, { transformOrigin: 'right' })
		.to(background, burnsDuration, {
			scale: 1.25,
			ease: Linear.easeNone
		})
		.to(background, burnsDuration, {
			x: '25%',
			ease: Linear.easeNone
		})
		.set(background, { x: '0%', transformOrigin: 'left' })
		.to(background, burnsDuration, {
			scale: 1,
			ease: Linear.easeNone
		})
	
	// Slider
	const transitionTime = 2,
				timeout = 5,
				translationAmount = 150;
	
	let current = 0;
	
	for(var i = 0; i < backgroundImages.length; i++) {
		let alpha = i == current ? 1 : 0,
				z = i == current ? 0 : translationAmount,
				filter = i == current ? 'blur(0)' : 'blur(4px)';
		TweenLite.set(backgroundImages[i], { autoAlpha: alpha });
		TweenLite.set(sections[i].children, { autoAlpha: alpha, z: z, filter: filter });
	}
	
	function goTo(index) {
		
		if(index == current) return false;
		
		new TimelineLite({
			onComplete: autoPlay
		})
			.to(backgroundImages[current], transitionTime, {
				autoAlpha: 0,
				ease: Linear.easeNone
			})
			.to(backgroundImages[index], transitionTime, {
				autoAlpha: 1,
				ease: Linear.easeNone
			}, 0)
			.staggerTo(sections[current].children, transitionTime, {
				autoAlpha: 0,
				z: translationAmount,
				filter: 'blur(4px)',
				autoRound: false,
				ease: Power2.easeIn
			}, transitionTime / 10, 0)
			.staggerTo(sections[index].children, transitionTime, {
				autoAlpha: 1,
				z: 0,
				filter: 'blur(0)',
				autoRound: false,
				ease: Back.easeOut
			}, transitionTime / 10)
			
		
		current = index;
		
	}
	
	function autoPlay() {
		let nextIndex = current + 1 > backgroundImages.length - 1 ? 0 : current + 1;
		TweenLite.delayedCall(timeout, goTo, [nextIndex]);
	}
	
	autoPlay();
	
}