<div id="tutorialOverlay"></div>
<div id="tutorialWrapper">
	<div id="tutorial">
		<div class="slide-container slide_active">
			<div style="position:relative;">
				<p class="slide-container__header slider-header-foreground_custom">$FirstSlideHeader$</p>
				<p class="slide-container__text slider-text-foreground_custom">$FirstSlideDescription$</p>
				<div class="slide-container__image first-slide__image"></div>
			</div>
		</div>
		<div class="slide-container">
			<div style="position:relative;">
				<p class="slide-container__header slider-header-foreground_custom">$SecondSlideHeader$</p>
				<p class="slide-container__text">$SecondSlideDescription$</p>
				<div class="slide-container__image second-slide__image"></div>
			</div>
		</div>
		<div class="slide-container">
			<div style="position:relative;">
				<p class="slide-container__header slider-header-foreground_custom">$ThirdSlideHeader$</p>
				<p class="slide-container__text">$ThirdSlideDescription$</p>
				<div class="slide-container__image third-slide__image"></div>
			</div>
		</div>
		<div class="tutorial-footer">
			<table class="tutorial-footer-content" width="100%" cellspacing="0" cellpadding="0">
				<tr>
					<td width="150" align="left">
						<div class="footer-button left-button close-button">
							<span class="tutorial-footer-content-button__text">$Back$</span><span
								class="tutorial-footer-content-button__text">$Close$</span>
						</div>
					</td>
					<td width="470" style="vertical-align: middle;">
						<div class="slider-dots">
							<div class="slider-dots__dot slider-dots__dot_active"></div>
							<div class="slider-dots__dot"></div>
							<div class="slider-dots__dot"></div>
						</div>
					</td>
					<td width="150" align="right">
						<div class="footer-button right-button next-button">
							<span class="tutorial-footer-content-button__text">$Next$</span><span
								class="tutorial-footer-content-button__text">$Ready$</span>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</div>
</div>
<script type="text/javascript">
	document.getElementsByClassName = function (cl) {
		var retnode = [];
		var elem = this.getElementsByTagName('*');
		for (var i = 0; i < elem.length; i++) {
			if ((' ' + elem[i].className + ' ').indexOf(' ' + cl + ' ') > -1) retnode.push(elem[i]);
		}
		return retnode;
	};
	var windowWidth = window.innerWidth;
	var overlay = document.getElementById('tutorialOverlay');
	var tutorialWrapper = document.getElementById('tutorialWrapper');
	var tutorial = document.getElementById('tutorial');
	var showTutorial = document.getElementById('showTutorial');
	var leftButton = document.getElementsByClassName('left-button')[0];
	var rightButton = document.getElementsByClassName('right-button')[0];
	var dots = document.getElementsByClassName('slider-dots__dot');
	var slides = document.getElementsByClassName('slide-container');

	function getActiveSlideIndex() {
		var index;
		for (j = 0; j < slides.length; j++) {
			if ((" " + slides[j].className + " ").replace(/[\n\t]/g, " ").indexOf(" slide_active ") > -1) {
				index = j;
			}
		};
		return index;
	}

	showTutorial.onclick = function (event) {
		overlay.style.display = "block";
		tutorialWrapper.style.display = "block";
		tutorial.style.display = "inline-block";
		if (!event) { event = window.event; }
		event.preventDefault ? (event.preventDefault(event)) : (event.returnValue = false);

		if (windowWidth >= 820) {
			tutorial.style.width = "770px"
		} else {
			tempWidth = windowWidth - 80;
			tutorial.style.width = tempWidth
		}
	};

	window.onresize = function (e) {
		windowWidth = e.target.window.innerWidth;

		if (windowWidth >= 820) {
			tutorialWidth = "770px"
		} else {
			tutorialWidth = windowWidth - 80 + "px";
		}
		tutorial.style.width = tutorialWidth;
	};

	function hideTutorial() {
		overlay.style.display = "none";
		tutorialWrapper.style.display = "none";
		tutorial.style.display = "none";
		goToSlide(0);
	}

	leftButton.onclick = function (event) {
		var index = getActiveSlideIndex();
		if (index == 0) {
			hideTutorial();
		}
		else {
			goToSlide(index - 1);
		}
	}

	rightButton.onclick = function (event) {
		var index = getActiveSlideIndex();
		if (index + 1 < slides.length) {
			goToSlide(index + 1);
		}
		else {
			hideTutorial();
		}
	}

	function goToSlide(index) {
		leftButton.className = 'footer-button left-button';
		rightButton.className = 'footer-button right-button';
		for (j = 0; j < slides.length; j++) {
			if (j == index) {
				dots[j].className += ' slider-dots__dot_active';
				slides[j].className += " slide_active";
			}
			else {
				dots[j].className = 'slider-dots__dot';
				slides[j].className = "slide-container";
			}
		}
		if (index == 0) {
			leftButton.className += ' close-button';
			rightButton.className += ' next-button';
		}
		else if (index == slides.length - 1) {
			leftButton.className += ' back-button';
			rightButton.className += ' footer-button_recommended ready-button';
		}
		else {
			leftButton.className += ' back-button';
			rightButton.className += ' next-button';
		}
	}

	for (j = 0; j < dots.length; j++) {
		dots[j].onclick = function () {
			var index = Array.prototype.indexOf.call(dots, this);
			if ((" " + this.className + " ").replace(/[\n\t]/g, " ").indexOf(" slider-dots__dot_active ") > -1) {
				return false;
			}
			else { goToSlide(index); }
		}
	}
</script>