<div id="tutorialOverlay"></div>
<div id="tutorial">

	<div class="slide-container slide_active">
		<p class="slide-container__header">$FirstSlideHeader$</p>
		<p class="slide-container__text">$FirstSlideDescription$</p>
		<div class="slide-container__image first-slide__image"></div>
	</div>
	<div class="slide-container">
		<p class="slide-container__header">$SecondSlideHeader$</p>
        <p class="slide-container__text">$SecondSlideDescription$</p>
		<div class="slide-container__image second-slide__image"></div>
	</div>
	<div class="slide-container">
		<p class="slide-container__header">$ThirdSlideHeader$</p>
        <p class="slide-container__text">$ThirdSlideDescription$</p>
		<div class="slide-container__image third-slide__image"></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>
<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 overlay = document.getElementById('tutorialOverlay');
	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";
	    tutorial.style.display = "block";
	    if (!event) { event = window.event; }
	    event.preventDefault ? (event.preventDefault(event)) : (event.returnValue = false);
	};
	
	function hideTutorial() {
		overlay.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>