document.addEventListener("DOMContentLoaded", initQuiz);

function initQuiz () {
	var quiz = new Quiz();
	quiz.registerEvents();
};

var Quiz = function () {};

Quiz.prototype.start = function () {

	var welcomeContainer = document.getElementById("js-welcome");
	var questionContainer = document.getElementById("js-question");

	welcomeContainer.className += " welcome--hidden";
	questionContainer.className = "question";

	// display first question
	this.displayQuestion(this.questionCounter);
	// reset answers
	this.resetAnswers();
};

Quiz.prototype.displayQuestion = function (questionNumber) {

	var currentQuestion = this.allQuestions[questionNumber].question;
	var currentChoices = this.allQuestions[questionNumber].choices;
	var currentCorrectAnswer = this.allQuestions[questionNumber].correctAnswer;

	// question HTML containers
	var questionTitleContainer = document.getElementById("js-question__title");
	var questionChoicesContainer = document.getElementById("js-question__choices");

	// update HTML question
	questionTitleContainer.innerHTML = "<h2 class='t-center'>"+currentQuestion+"</h2>";

	// update HTML choices
	questionChoicesContainer.innerHTML = "";
	var questionChoicesWrapper = document.createElement("div");
	questionChoicesWrapper.className = "btn-group";
	questionChoicesWrapper.setAttribute("data-toggle", "buttons");

	var questionChoicesHtml = "";
	currentChoices.map(function (questionChoice, index) {
		questionChoicesHtml += "<label class='question__choice btn btn-default'><input type='radio' name=question-"+questionNumber+" value="+index+"> "+questionChoice+"</label>";
	});

	questionChoicesWrapper.innerHTML += questionChoicesHtml;
	questionChoicesContainer.appendChild(questionChoicesWrapper);
};

Quiz.prototype.checkAnswers = function (questionNumber) {

	var correctAnswer = this.allQuestions[questionNumber].correctAnswer;

	var inputedAnswer = document.querySelector('input[name=question-'+questionNumber+']:checked').value;

	if ( correctAnswer == inputedAnswer ) {
		this.answers[questionNumber] = 1;
	} else {
		this.answers[questionNumber] = 0;
	}

};

Quiz.prototype.resetAnswers = function () {

	var questionNo = this.allQuestions.length;
	var noAnswerValue = -1;

	for ( var i = 0; i < questionNo; i++) {

		this.answers.push(noAnswerValue);
	}

};

Quiz.prototype.next = function () {

	var questionNo = this.allQuestions.length - 1;

	this.checkAnswers(this.questionCounter);

	if ( this.questionCounter < questionNo ) {
		this.questionCounter++;
	}

	this.displayQuestion(this.questionCounter);
};

Quiz.prototype.prev = function () {

	var questionNo = this.allQuestions.length - 1;

	this.checkAnswers(this.questionCounter);

	if ( this.questionCounter > 0 ) {
			this.questionCounter--;
	}

	this.displayQuestion(this.questionCounter);
};

Quiz.prototype.updateNavigation = function () {

	var questionTotal = this.allQuestions.length - 1;

	var prevBtn = document.getElementById('js-btn-prev');
	var nextBtn = document.getElementById('js-btn-next');

	prevBtn.className = "question__btn question__btn--prev btn btn-primary btn-lg";
	nextBtn.className = "question__btn question__btn--next btn btn-primary btn-lg";

	if ( this.questionCounter === 0 ) {
		prevBtn.className += " question__btn--hidden";
	}
	if ( this.questionCounter === questionTotal ) {
		nextBtn.className += " question__btn--hidden";
	}
};

Quiz.prototype.keepScore = function () {};
Quiz.prototype.displayScore = function () {};

Quiz.prototype.registerEvents = function () {

	var _this = this;

	// start button
	document.getElementById("js-btn-start").addEventListener("click", function(e) {

		e.preventDefault();
		_this.start();
		_this.updateNavigation();
	});

	// next button
	document.getElementById("js-btn-next").addEventListener("click", function(e) {

		e.preventDefault();
		_this.next();
		// updateNavigation btns
		_this.updateNavigation();
	});

	// prev button
	document.getElementById("js-btn-prev").addEventListener("click", function(e) {

		e.preventDefault();
		_this.prev();
		// updateNavigation btns
		_this.updateNavigation();
	});

};

Quiz.prototype.questionCounter = 0;

Quiz.prototype.answers = [];

Quiz.prototype.allQuestions = [
	{
		question: "What color is #fff?",
		choices: [
			"black", "green", "red", "white"
		],
		correctAnswer: 3
	},
	{
		question: "Which is the correct CSS syntax?",
		choices: [
			"{body;color:black;}", "body:color=black;", "body {color: black;}", "{body:color=black;}"
		],
		correctAnswer: 2
	},
	{
		question: "Which property is used to change the background color?",
		choices: [
			"bgcolor", "background-color", "color"
		],
		correctAnswer: 1
	},
	{
		question: "How do you add a background color for all <h1> elements?",
		choices: [
			"h1 {background-color:#FFFFFF;}", "all.h1 {background-color:#FFFFFF;}"
		],
		correctAnswer: 0
	}
];