

$(function() {
	
	showAllQuestions();
	//showQuestion(0);
	//showResult();
	
	function showAllQuestions() {
		var html = ["<form class='tq-answers' name='answers'>"];
		for (var i=0; i<quiz.questions.length; i++) {
			var question = quiz.questions[i];
			var hasAnswered = (question.userAnswer != undefined);
			var image = "";
			if (question.image.length > 0) {
				if (question.isVideo)
					image = "<div class='tq-question-video'><object width='" + question.videoWidth + "' height='" + question.videoHeight + "' id='flvPlayer'> <param name='allowFullScreen' value='true'> <param name='movie' value='" + tq_plugin_url + "player.swf?movie=" + question.image + "&autoload=off&volume=70'> <embed src='" + tq_plugin_url + "player.swf?movie=" + question.image + "&autoload=off&volume=70' width='" + question.videoWidth + "' height='" + question.videoHeight + "' allowFullScreen='true' type='application/x-shockwave-flash'></object></div>";
				else
					image = "<div class='tq-question-image'><img class='tq-img-links' src='" + question.image + "'/></div>";
			}
			
			//html.push("<div class='tq-question-number'>Question " + (i+1) + " of " + quiz.questions.length + "</div>" + image + "<div class='tq-question'>" + question.text + "</div>", "<hr class='tq-hr'/>");
			html.push("<div class='tq-question-number'>Question " + (i+1) + "</div>" + image + "<div class='tq-question'>" + question.text + "</div>");
			for (var j=0; j<question.answers.length; j++) {
				var answer = question.answers[j];
				var letter = String.fromCharCode(65 + j);
				html.push("<div class='tq-question-boxes'><input type='radio' name='answer_" + question.id + "' id='answer_" + question.id + "' class='answer-radio-button' value='" + answer.id + "'> " + letter + ". " + answer.text + "</div>");
			}
				
			html.push("<hr class='tq-hr' style='margin-bottom: 20px'/>");
		}
			
		html.push("</form><div class='tq-buttons'><div class='tq-right-button'><a href='#' id='quiz-finish-link'><img class='tq-img-links' src='" + tq_img_url + "btn-done.gif' border='0'/></a></div></div><br style='clear: all'>");
		
		$("#tierra-quiz").html(html.join("\n"));
		
		$(".answer-radio-button").click(function() {
			var parts = this.id.split("_");
			var id = parts[1];
			for (var i=0; i<quiz.questions.length; i++) {
				if (quiz.questions[i].id == id) {
					quiz.questions[i].userAnswer = this.value;
					break;
				}
			}
			return true;
		});
			
		$("#quiz-finish-link").click(function() {
			showResult();
			window.scrollTo(0,0);
			return false;
		});
	}
	
	function showQuestion(num) {
		var question = quiz.questions[num];
		var hasAnswered = (question.userAnswer != undefined);
		var image = "";
		if (question.image.length > 0) {
			if (question.isVideo)
				image = "<div class='tq-question-video'><object width='" + question.videoWidth + "' height='" + question.videoHeight + "' id='flvPlayer'> <param name='allowFullScreen' value='true'> <param name='movie' value='" + tq_plugin_url + "player.swf?movie=" + escape(question.image) + "&autoload=off&volume=70'> <embed src='" + tq_plugin_url + "player.swf?movie=" + escape(question.image) + "&autoload=off&volume=70' width='" + question.videoWidth + "' height='" + question.videoHeight + "' allowFullScreen='true' type='application/x-shockwave-flash'></object></div>";
			else
				image = "<div class='tq-question-image'><img class='tq-img-links' src='" + question.image + "'/></div>";
		}
		
		var html = ["<div class='tq-question-number'>Question " + (num+1) + " of " + quiz.questions.length + "</div>", image, "<div class='tq-question'>" + question.text + "</div>", "<hr class='tq-hr'/><form class='tq-answers' name='answers'>"];
		for (var i=0; i<question.answers.length; i++) {
			var checked = (hasAnswered && (question.userAnswer == question.answers[i].id)) ? " checked" : "";
			var letter = String.fromCharCode(65 + i);
			html.push("<input type='radio' name='answer' class='answer-radio-button' value='" + question.answers[i].id + "'" + checked + "> " + letter + ". " + question.answers[i].text + "<br/>");
		}
			
		var prevButton = "<div class='tq-left-button'><a href='#' id='quiz-prev-link'><img class='tq-img-links' src='" + tq_img_url + "btn-previous.gif' border='0'/></a></div>";
		var nextButton = "<div class='tq-right-button'><a href='#' id='quiz-next-link'><img class='tq-img-links' src='" + tq_img_url + "btn-next.gif' border='0'/></a></div>";
		var finishButton = "<div class='tq-right-button'><a href='#' id='quiz-finish-link'><img class='tq-img-links' src='" + tq_img_url + "btn-done.gif' border='0'/></a></div>";
		
		html.push("</form><hr class='tq-hr'/><div class='tq-buttons'>");
		html.push(num > 0 ? prevButton : "");
		html.push(num < quiz.questions.length - 1 ? nextButton : finishButton);
		html.push("</div><br style='clear: all'>");
		
		$("#tierra-quiz").html(html.join("\n"));
		
		$(".answer-radio-button").click(function() {
			question.userAnswer = this.value;
			return true;
		});
		
		$("#quiz-prev-link").click(function() {
			showQuestion(num - 1);
			return false;
		});
		$("#quiz-next-link").click(function() {
			showQuestion(num + 1);
			return false;
		});
		$("#quiz-finish-link").click(function() {
			showResult();
			return false;
		});
	}
	
	function showResult() {
		var numCorrect = 0;
		var numAnswered = 0;
		var userAnswers = [];
		for (var i=0; i<quiz.questions.length; i++) {
			var question = quiz.questions[i];
			if (question.userAnswer == question.correctAnswer)
				numCorrect++;
			if (question.userAnswer != undefined)
				numAnswered++;
			userAnswers.push(question.userAnswer ? question.userAnswer : 0);
		}
		var percent_correct = Math.floor((numCorrect / quiz.questions.length) * 100);
		var your_score = percent_correct + "% (" + numCorrect + " of " + quiz.questions.length + " correct)";
		var average_score = "<span id='tq-average-score-span'>Loading...</span>";
		
		var html = ["<div id='tq-debug'></div><div class='tq-results'>Results</div>", "<div class='tq-scorebar'><span class='tq-scorebar-yourscore'>YOUR SCORE: " + your_score + "</span><img class='tq-img-links' src='" + tq_img_url + "triangle.jpg'/><span class='tq-scorebar-average'>AVERAGE SCORE: " + average_score + "</span></div>"];
		
		for (var i=0; i<quiz.questions.length; i++) {
			var question = quiz.questions[i];
			var image = question.image.length > 0 ? "<div class='tq-question-image'><img class='tq-img-links' src='" + question.image + "'/></div>" : "";
			html.push(image, "<div class='tq-question'>" + (i + 1) + ". " + question.text + "</div><div class='tq-answers'>");
			
			for (var j=0; j<question.answers.length; j++) {
				var answer = question.answers[j];
				var letter = String.fromCharCode(65 + j);
				var divClass = "tq-answer";
				var postfix = "";
				
				if (question.correctAnswer == answer.id) {
					if (question.userAnswer == answer.id) {
						divClass = "tq-correct-answer";
						postfix = "<img class='tq-img-links' src='" + tq_img_url + "green-check.gif'/>";
					}
					else
						postfix = "<span class='tq-correct-answer-postfix'>(Correct Answer)</span>";
				}
				else if (question.userAnswer == answer.id) {
					divClass = "tq-incorrect-answer";
					postfix = "<img class='tq-img-links' src='" + tq_img_url + "red-x.gif'/>";
				}
				html.push("<div class='" + divClass + "'>" + letter + ". " + answer.text + " " + postfix + "</div>");
			}
			if (question.moreInfo.length > 0)
				html.push("<div class='tq-more-info'>" + question.moreInfo + "</div>");
			if (question.relatedUrl.length > 0)
				html.push("<div class='tq-related-url'><a href='" + question.relatedUrl + "' target='related_url'>Read this article</a></div>");
			html.push("</div><hr class='tq-hr'/>");

		}
		
		$("#tierra-quiz").html(html.join("\n"));
		
		jQuery.post(tq_site_url, 
			{tqQuizAjaxCallback: true, quizId: quiz.id, answers: userAnswers.join(","), numCorrect: numCorrect, numAnswered: numAnswered}, 
			function (data) {
				var correct = data.correct != undefined ? data.correct : 0;
				var total = data.total != undefined ? data.total : 0;
				var percentage = total > 0 ? Math.floor((correct / total) * 100) : 0;
				$("#tq-average-score-span").html(percentage + "% (" + correct + " of " + total + " correct)");
			}, 
			"json");
	}
});