function loadTextQuestion(quiz, qNumber){
	var questionNumber = "<h2 class='qNumber'><span class='cy'>C</span><span class='en'>Q</span>"+qNumber+"</h2>";
	
	var question = "<div class='qText' style='"+quiz['question'][2]+"'><p class='cy'>"+quiz['question'][0]+"</p><p class='en'>"+quiz['question'][1]+"</p></div>";
	
	var answer = "<div class='qAnswer'";
	if(quiz['answer_style']){
		answer += "style='"+quiz['answer_style']+"'";
	}
	answer += "><input type='text' data-type='text' data-answer='"+quiz['possible_answers']+"' /></div>";
	
	var button = "<div class='completeBtn' data-type='text' data-total='1' data-qID='"+qNumber+"'><span class='cy'>Barod?</span><span class='en'>Ready?</span></div>";
	
	var html = "<div class='question' data-id='"+qNumber+"'>"+questionNumber+question+answer+button+"</div>";
	
	$('#quiz').append(html);
	
}

function loadRadioQuestion(quiz, qNumber){
	var questionNumber = "<h2 class='qNumber'><span class='cy'>C</span><span class='en'>Q</span>"+qNumber+"</h2>";
	
	var question = "<div class='qText' style='"+quiz['question'][2]+"'><p class='cy'>"+quiz['question'][0]+"</p><p class='en'>"+quiz['question'][1]+"</p></div>";
	
	var answer = "<div class='qAnswer'";
	if(quiz['answer_style']){
		answer += "style='"+quiz['answer_style']+"'";
	}else{
		answer += ">";
	}
	answer += "<table class='radioAnswers'>";
	var i = 0; 
	var trueAns = 0;
	$.each(quiz['possible_answers'], function(a, ans){
		i++;
		if(ans['answer']){
			trueAns++;
		}
		answer += "<tr> \
			<td> \
				<input type='radio' name='q"+qNumber+"' value='"+i+"' data-correct='"+ans['answer']+"' id='radio_q"+qNumber+"_r"+i+"'><label for='radio_q"+qNumber+"_r"+i+"'><span></span></label> \
			</td> \
			<td> \
				<span class='cy'>"+ans['answer_text'][0]+"</span> \
				<span class='en'>"+ans['answer_text'][1]+"</span> \
			</td> \
		</tr>";
				
		
	});
	
	answer += "</table></div>"
	
	
	var button = "<div class='completeBtn' data-type='radio' data-total='"+trueAns+"' data-qID='"+qNumber+"'><span class='cy'>Barod?</span><span class='en'>Ready?</span></div>";
	
	var html = "<div class='question' data-id='"+qNumber+"'>"+questionNumber+question+answer+button+"</div>";
	
	$('#quiz').append(html);
}

function loadMultiQuestion(quiz, qNumber){
	var questionNumber = "<h2 class='qNumber'><span class='cy'>C</span><span class='en'>Q</span>"+qNumber+"</h2>";
	
	var question = "<div class='qText' style='"+quiz['question'][2]+"'><div class='cy'>"+quiz['question'][0]+"</div><div class='en'>"+quiz['question'][1]+"</div></div>";
	
	var answer = "<div class='qAnswer' data-max='"+quiz['maxSelect']+"'";
	if(quiz['answer_style']){
		answer += "style='"+quiz['answer_style']+"'";
	}else{
		answer += ">";
	}
	answer += "<table class='checkAnswers'>";
	var i = 0; 
	var trueAns = 0;
	$.each(quiz['possible_answers'], function(a, ans){
		i++;
		if(ans['answer']){
			trueAns++;
		}
		answer += "<tr> \
			<td> \
				<input type='checkbox' name='q"+qNumber+"' value='"+i+"' data-correct='"+ans['answer']+"' id='check_q"+qNumber+"_r"+i+"'><label for='check_q"+qNumber+"_r"+i+"'><span></span></label> \
			</td> \
			<td> \
				<span class='cy'>"+ans['answer_text'][0]+"</span> \
				<span class='en'>"+ans['answer_text'][1]+"</span> \
			</td> \
		</tr>";
				
		
	});
	
	answer += "</table></div>"
	
	
	var button = "<div class='completeBtn' data-type='multiChoice' data-total='"+trueAns+"' data-qID='"+qNumber+"'><span class='cy'>Barod?</span><span class='en'>Ready?</span></div>";
	
	var html = "<div class='question' data-id='"+qNumber+"'>"+questionNumber+question+answer+button+"</div>";
	
	$('#quiz').append(html);
}

function loadDropDownQuestion(quiz, qNumber){
	var questionNumber = "<h2 class='qNumber'><span class='cy'>C</span><span class='en'>Q</span>"+qNumber+"</h2>";
	
	var question = "<div class='qText' style='"+quiz['question'][1]+"'><p>"+quiz['question'][0]+"</p></div>";
	
	
	var answer = "<div class='qAnswer'";
	if(quiz['answer_style']){
		answer += "style='"+quiz['answer_style']+"'";
	}
	answer += "><select data-type='select'>";
	var i = 0;
	$.each(quiz['possible_answers'], function(a, ans){
		i++;

		answer += "<option class='cy' value='"+ans['answer']+"' data-correct='"+ans['answer']+"'>"+ans['answer_text'][0]+"</option>";
		answer += "<option class='en' value='"+ans['answer']+"' data-correct='"+ans['answer']+"'>"+ans['answer_text'][1]+"</option>";
			
				
		
	});
	
	answer += "</select></div>";
	
	var button = "<div class='completeBtn' data-type='select' data-total='1' data-qID='"+qNumber+"'><span class='cy'>Barod?</span><span class='en'>Ready?</span></div>";
	
	var html = "<div class='question' data-id='"+qNumber+"'>"+questionNumber+question+answer+button+"</div>";
	
	$('#quiz').append(html);
}

function loadEmbedInputs(quiz, qNumber){
	var questionNumber = "<h2 class='qNumber'><span class='cy'>C</span><span class='en'>Q</span>"+qNumber+"</h2>";
	
	var embed = "<div class='cy'>"+quiz['question'][0]+"</div><div class='en'>"+quiz['question'][1]+"</div>";
	
	var button = "<div class='completeBtn' data-type='embedHtml' data-total='"+quiz['total']+"' data-qID='"+qNumber+"'><span class='cy'>Barod?</span><span class='en'>Ready?</span></div>";
	
	var html = "<div class='question' data-id='"+qNumber+"'>"+questionNumber+embed+button+"</div>";
	$('#quiz').append(html);
	setTimeout(function(){
		$('select').each(function(){
			$(this).prop('selectedIndex',0);
		});
	}, 300);
}

function loadQuiz(quiz){
	var i = 0;
	$.each(quiz, function(qz, quiz){
		i++;
		switch(quiz['type']){
			case 1:
				loadTextQuestion(quiz, i);
				break;
			case 2:
				loadRadioQuestion(quiz, i);
				break;
			case 3:
				loadMultiQuestion(quiz, i);
				break;
			case 4:
				loadDropDownQuestion(quiz, i);
				break;
			case 20:
				loadEmbedInputs(quiz, i);
		}
	});
	
}

function highlightAnswers(){
	$('.marked').addClass('correct');
	$('.markedWrong').addClass('wrong');
}

function removeHighlight(){
	$('.correct').removeClass('correct');
	$('.wrong').removeClass('wrong');
}

function showScore(totalQs, correct){
	console.log("show score: "+$('#theScore').length);
	if($('#theScore').length <= 0){
		var html = "<div id='theScore'> \
			<div id='scoreWrapper'> \
				<p id='scoreText'>"+correct+" / " +totalQs+ "</p> \
				<p class='restartBtn'> \
					<span class='cy'>Ailgychwyn</span> \
					<span class='en'>Restart</span> \
				</p> \
			</div>";
		$('#quiz').append(html);
	}else{
		$('#scoreText').html(correct+" / " +totalQs);
		$('#theScore').show();
	}
	
	highlightAnswers();
	var lang = checkLang();
	changeLang(lang);
}

function hideScore(){
	$('#theScore').hide();
}

function resetQuiz(){
	$('div').removeClass('marked').removeClass('markedWrong').removeClass('correct').removeClass('wrong');
	$("input").each(function(){
		$(this).val('');
		$(this).removeAttr('checked');
		this.checked = false;
	});
	$('select').each(function(){
		$(this).prop('selectedIndex',0);
	});
	$('.completeBtn').show();
	hideScore();
}
$(document).ready(function(){

	$('input[type=checkbox]').on('change', function(evt) {	
		var limit = $(this).parents('.question').find('.qAnswer').attr('data-max');
		if($(this).parents('.question').find(':checked').length > limit) {
			this.checked = false;
		}
		$(this).parents('.question').find('.completeBtn').each(function(){
				$(this).show();
				$(this).parents('.question').removeClass('marked').removeClass('markedWrong').removeClass('correct').removeClass('wrong');
			
		});
		hideScore();
		
	});
	
	
	$('input[type=text]').on('focus', function(evt) {	
		$(this).parents('.question').find('.completeBtn').each(function(){
				$(this).show();
				$(this).parents('.question').removeClass('marked').removeClass('markedWrong').removeClass('correct').removeClass('wrong');
			
		});
		
		hideScore();
		
	});
	
	$('body').on('click','.completeBtn', function(evt) {	
		// data-type='text' data-total='1' data-qID
	
		var dataType = $(this).attr('data-type');
		var dataTotal = $(this).attr('data-total');
		var questionID = $(this).attr('data-qID');
		markQuestion(questionID, dataType, dataTotal);
	});

	$('input[type=radio]').on('change', function(evt) {	
	var limit = $(this).parents('.question').find('.completeBtn').attr('data-total');
	 console.log($(this).siblings(':checked').length);
		if($(this).siblings(':checked').length >= limit) {
			this.checked = false;
		}
		$(this).parents('.question').find('.completeBtn').each(function(){
				$(this).show();
				$(this).parents('.question').removeClass('marked').removeClass('markedWrong').removeClass('correct').removeClass('wrong');
		});
		hideScore();
		
	});
	
	$('body').on('click','.restartBtn', function(){
		resetQuiz();
	});
});


