var indexArrSteps = 0;
var arrSteps = new Array();

var step = new Object();
step['haveBox'] = false;
step['img'] = 'welcome.png';
arrSteps.push(step);

var step = new Object();
step['haveBox'] = false;
step['img'] = 'why.png';
arrSteps.push(step);

var step = new Object();
step['haveBox'] = true;
step['img'] = 'home.png';
step['top'] = 5;
step['left'] = 20;
step['text'] = "It's the home screen of the APP. From here, you can enter the different sections. And you can see your passed dailies (155 of 365).";
step['positionArrow'] = 'pos_down_center';
arrSteps.push(step);

var step = new Object();
step['haveBox'] = true;
step['img'] = 'home.png';
step['top'] = 26;
step['left'] = 22;
step['text'] = "Pressing this button, you will find the done expressions. Therefore, you can review your idioms. Later, we will speak more about it.";
step['positionArrow'] = 'pos_up_left';
arrSteps.push(step);

var step = new Object();
step['haveBox'] = true;
step['img'] = 'home.png';
step['top'] = 42;
step['left'] = 14;
step['text'] = "This is the way to obtain the daily expression. Remember, only one per day. We are going to talk about this now.";
step['positionArrow'] = 'pos_up_right';
arrSteps.push(step);

var step = new Object();
step['haveBox'] = true;
step['img'] = 'daily.png';
step['top'] = 51;
step['left'] = 21;
step['text'] = 'Here, I will told you an idiom every day. "Beat around the bush" is an example. Do you know what does it mean?';
step['positionArrow'] = 'pos_up_right';
arrSteps.push(step);

var step = new Object();
step['haveBox'] = true;
step['img'] = 'getDaily.png';
step['top'] = 20;
step['left'] = 12;
step['text'] = "Don't worry if you don't know the expression meaning. If you need more information about it, press this button and I will help you.";
step['positionArrow'] = 'pos_down_left';
arrSteps.push(step);

var step = new Object();
step['haveBox'] = true;
step['img'] = 'getDaily.png';
step['top'] = 38;
step['left'] = 28;
step['text'] = "Moreover, if you know the expression you can come back to the main screen pressing this button.";
step['positionArrow'] = 'pos_down_left';
arrSteps.push(step);

var step = new Object();
step['haveBox'] = true;
step['img'] = 'home.png';
step['top'] = 26;
step['left'] = 22;
step['text'] = "As we have said before, here you can review the expressions. Let's speak more about this.";
step['positionArrow'] = 'pos_up_left';
arrSteps.push(step);

var step = new Object();
step['haveBox'] = true;
step['img'] = 'review.png';
step['top'] = 24;
step['left'] = 21;
step['text'] = "When you have a lot of expressions it will be difficult to find a sprecific one. For this reason, you can filter your search.";
step['positionArrow'] = 'pos_up_left';
arrSteps.push(step);

var step = new Object();
step['haveBox'] = true;
step['img'] = 'review.png';
step['top'] = 44;
step['left'] = 21;
step['text'] = "It's a list of your got expressions. You can press each one and we will give you the information again. Review is ever necessary, our mind isn't a machine.";
step['positionArrow'] = 'pos_up_left';
arrSteps.push(step);

var step = new Object();
step['haveBox'] = false;
step['img'] = 'notrelax.png';
arrSteps.push(step);


var step = new Object();
step['haveBox'] = true;
step['img'] = 'home-answer-big.png';
step['top'] = 47;
step['left'] = 12;
step['text'] = 'To enter the answer section, we will send you a notification and when you open the app, "put in practice" button will be activated.';
step['positionArrow'] = 'pos_up_left';
arrSteps.push(step);

var step = new Object();
step['haveBox'] = true;
step['img'] = 'home-answer-big.png';
step['top'] = 21;
step['left'] = 35;
step['text'] = 'But if you are busy when the "put in practice" button is activated, you can close it and answering later.';
step['positionArrow'] = 'pos_up_right';
arrSteps.push(step);

var step = new Object();
step['haveBox'] = true;
step['img'] = 'home-answer-review.png';
step['top'] = 22;
step['left'] = 30;
step['text'] = 'Also, you must answer the expressions failed. Then, we will notificate you when one reviewed expression is activated for answering.';
step['positionArrow'] = 'pos_up_right';
arrSteps.push(step);

var step = new Object();
step['haveBox'] = true;
step['img'] = 'answer.png';
step['top'] = 47;
step['left'] = 12;
step['text'] = "This is and example of siatuation that I will give you. And you should answer it.";
step['positionArrow'] = 'pos_up_left';
arrSteps.push(step);

var step = new Object();
step['haveBox'] = true;
step['img'] = 'answer.png';
step['top'] = 38;
step['left'] = 9;
step['text'] = "Here you have to write your answer. If you do it well, this expression will be added to the passed expressions (on the home screen).";
step['positionArrow'] = 'pos_down_left';
arrSteps.push(step);

var step = new Object();
step['haveBox'] = false;
step['img'] = 'bye.png';
arrSteps.push(step);






function nextStep(){
	indexArrSteps++;
	
	if( arrSteps.length > indexArrSteps){	
		if( arrSteps[indexArrSteps]['img'] !=  arrSteps[(indexArrSteps-1)]['img'] ){
			nextImg( arrSteps[indexArrSteps]['img'] );
		}
		//si este estep no tiene box y el anterior sí, ocurltarlo
		if( !arrSteps[indexArrSteps]['haveBox'] && arrSteps[(indexArrSteps-1)]['haveBox'] ){
			
			hideTutorialBox();
			//$('.counterSteps.main').show('fade');
			$('.counterSteps.main').css('display','block');
		}
		//si este estep tiene box y el anterior no tenía, mostrarlo y asignarle valores
		else if( arrSteps[indexArrSteps]['haveBox'] && !arrSteps[(indexArrSteps-1)]['haveBox'] ){
			showTutorialBox();
			var top = arrSteps[indexArrSteps]['top'];
			var left = arrSteps[indexArrSteps]['left'];
			var text = arrSteps[indexArrSteps]['text'];
			var positionArrow = arrSteps[indexArrSteps]['positionArrow'];
			runStep(top, left, text, positionArrow);
			//$('.counterSteps.main').hide('fade');
			$('.counterSteps.main').css('display', 'none');
		}else{
			var top = arrSteps[indexArrSteps]['top'];
			var left = arrSteps[indexArrSteps]['left'];
			var text = arrSteps[indexArrSteps]['text'];
			var positionArrow = arrSteps[indexArrSteps]['positionArrow'];
			runStep(top, left, text, positionArrow);
		}
		$('.counterSteps .step').html(indexArrSteps+1);
		$('.counterSteps .allSteps').html(arrSteps.length);
	}else if( arrSteps.length == indexArrSteps ){
		window.location.href = '#/home';
	}else{
		indexArrSteps = arrSteps.length;
	}
	
}

function backStep(){

		indexArrSteps--;
	
		if( indexArrSteps > 0){
			if( arrSteps[indexArrSteps]['img'] !=  arrSteps[(indexArrSteps+1)]['img'] ){
				nextImg( arrSteps[indexArrSteps]['img'] );
			}
			//si este estep no tiene box y el anterior sí, ocurltarlo
			if( !arrSteps[indexArrSteps]['haveBox'] && arrSteps[(indexArrSteps+1)]['haveBox'] ){
				hideTutorialBox();
				//$('.counterSteps.main').show('fade');
				$('.counterSteps.main').css('display', 'block');
			}
			//si este estep tiene box y el anterior no tenía, mostrarlo y asignarle valores
			else if( arrSteps[indexArrSteps]['haveBox'] && !arrSteps[(indexArrSteps+1)]['haveBox'] ){
				showTutorialBox();
				var top = arrSteps[indexArrSteps]['top'];
				var left = arrSteps[indexArrSteps]['left'];
				var text = arrSteps[indexArrSteps]['text'];
				var positionArrow = arrSteps[indexArrSteps]['positionArrow'];
				runStep(top, left, text, positionArrow);
				//$('.counterSteps.main').hide('fade');
				$('.counterSteps.main').css('display', 'none');
			}else{
				var top = arrSteps[indexArrSteps]['top'];
				var left = arrSteps[indexArrSteps]['left'];
				var text = arrSteps[indexArrSteps]['text'];
				var positionArrow = arrSteps[indexArrSteps]['positionArrow'];
				runStep(top, left, text, positionArrow);
			}
			$('.counterSteps .step').html(indexArrSteps+1);
			$('.counterSteps .allSteps').html(arrSteps.length);
		}else{
			indexArrSteps = 0;
		}

}

function nextImg(img){
	//alert(img);
	$('#img_tutorial2').attr('src', '../css/partials/img/tutorial/'+img);
	//$('#img_tutorial').hide('fade');
	$('#img_tutorial').css('display', 'none');
	//setTimeout(function(){
		$('#img_tutorial').attr('src', '../css/partials/img/tutorial/'+img);
		$('#img_tutorial').css('display', 'block');
		//alert('set time out');
	//},750);
}

function hideTutorialBox(){
	//$('#tutorial_box').hide('fade');
	$('#tutorial_box').css('display', 'none');

}
function showTutorialBox(){
	//$('#tutorial_box').show('fade');
	$('#tutorial_box').css('display', 'block');
}


function runStep(top, left, text, positionArrow){
	//$('#tutorial_box p').hide('fade');
	$('#tutorial_box p').css('display', 'none');
	//$('#arrow').hide('fade');
	$('#arrow').css('display', 'none');
		
	/*$('#tutorial_box').animate({
	    left: left+"%",
	    top: top+"%",
	  }, 500, function() {
	    $('#tutorial_box p').html(text);
	    $('#arrow').removeClass();
	    $('#arrow').addClass(positionArrow);
	    $('#tutorial_box p').show('fade');
	    $('#arrow').show('fade');
	  });*/
	
	  $('#tutorial_box').css({
	    left: left+"%",
	    top: top+"%",
	  });

	    $('#tutorial_box p').html(text);
	    $('#arrow').removeClass();
	    $('#arrow').addClass(positionArrow);
	    
	    $('#tutorial_box p').css('display', 'block');
	   
	    $('#arrow').css('display', 'block');
	  
}


		
