/// <reference path="jQuery.intellisense.js"/>
/// <reference path="xeko.js"/>
/// <reference path="messaging.js"/>

$(document).ready(function() {

	$("#nextButton").click(function(e) {
		e.preventDefault();
		if (xeko.pages.createQuizzle.validate()) xeko.pages.createQuizzle.nextStep();
	});

	$("#backButton").click(function(e) {
		e.preventDefault();
		xeko.pages.createQuizzle.prevStep();
	});

	$(".createAnotherQuizzleButton").click(function(e) {
		e.preventDefault();
		xeko.pages.createQuizzle.reset();
	});

	// Fill in Agent data
	$(".agentId").text(xeko.agentinfo.agentID);

	// How many Xeko points do you get for creating a quizzle?
	$("#xekoPoints").text("50");
	
	// popups
	$(".createquizzleHonorCodeLink").click(function(e)
	{
		e.preventDefault();
		$("#createquizzleHonorCode").toggle("fast");
	});
	
	$(".createquizzleTermsLink").click(function(e)
	{
		e.preventDefault();
		$("#createquizzleTerms").toggle("fast");
	});

});

xeko.pages.createQuizzle = {
	"currentStep": 1,
	"numberOfSteps": 5,
	"selectedMissions": "",
	"selectedSubjects": "",
	"selectedMissionIds": "",
	"selectedSubjectIds": "",
	"questionText": "",
	"answerText": "",
	"incorrectAnswerText1": "",
	"incorrectAnswerText2": "",
	"incorrectAnswerText3": "",
	"selectedImageId": "",
	"validate": function() {
		var isValid = true;
		xeko.validation.clearAll();

		switch (this.currentStep) {
			case 1:
				// User must select at least one Mission, Subjects are not required
				xeko.pages.createQuizzle.selectedMissions = "";
				xeko.pages.createQuizzle.selectedMissionIds = "";
				$("input[name='mission']:checked").each(function() {
					xeko.pages.createQuizzle.selectedMissions += $("label[for='" + $(this).attr("id") + "']").text() + ", ";
					xeko.pages.createQuizzle.selectedMissionIds += $(this).val() + ",";
				});

				if (this.selectedMissions.length > 0) {
					xeko.validation.clearMessage("quizzleMissionsLabel");
					xeko.pages.createQuizzle.selectedMissions = xeko.pages.createQuizzle.selectedMissions.substr(0, this.selectedMissions.length - 2);
				}
				else {
					isValid = false;
					xeko.validation.showMessage("quizzleMissionsLabel", xeko.messaging.alert.CHALLENGE_MISSION_NOT_SELECTED);
				}
				break;
			case 2:
				// Question text
				if ($.trim($("#questionText").val()).length == 0) {
					isValid = false;
					xeko.validation.showMessage("quizzleQuestionLabel", xeko.messaging.alert.QUIZZLE_QUESTION_BLANK);
				}

				// Answer text
				if ($.trim($("#answerText").val()).length == 0) {
					isValid = false;
					xeko.validation.showMessage("quizzleAnswerLabel", xeko.messaging.alert.QUIZZLE_ANSWER_BLANK);
				}

				// Incorrect Answers text
				if ($.trim($("#incorrectAnswerText1").val()).length == 0) {
					isValid = false;
					xeko.validation.showMessage("quizzleIncorrectAnswersLabel", xeko.messaging.alert.QUIZZLE_INCORRECT_ANSWERS_BLANK);
				}

				break;
			case 3:
				// Select an image
				if ($("#selectedImageId").val() == "") {
					isValid = false;
					xeko.validation.showMessage("quizzleSelectedImageLabel", xeko.messaging.alert.QUIZZLE_IMAGE_MISSING);
				}
				break;
			case 4:
				// Submit
				if ($("#termsCheckbox:checked").length == 0) {
					isValid = false;
					xeko.validation.showMessage("quizzleTermsLabel", xeko.messaging.alert.QUIZZLE_TERMS_NOTCHECKED);
				}
				break;
			case 5:
				break;
		}

		return isValid;
	},
	"prevStep": function() {
		this.goTo(this.currentStep, this.currentStep -= 1);
		// Reset back button, next button
		if (this.currentStep < this.numberOfSteps) {
			if (this.currentStep == 1) {
				$("#backButton").hide();
			}
			else {
				$("#backButton").show();
			}
			$("#nextButton").attr("src", "/images/btn/btn_next.gif");
		}
		else {
			$("#nextButton").attr("src", "/images/btn/btn_submit.gif");
		}
	},
	"nextStep": function() {
		if (this.currentStep < this.numberOfSteps) {
			// Save selections
			switch (this.currentStep) {
				case 1:
					// Get selected Subjects
					xeko.pages.createQuizzle.selectedSubjects = "";
					xeko.pages.createQuizzle.selectedSubjectIds = "";
					$("input[name='subject']:checked").each(function() {
						xeko.pages.createQuizzle.selectedSubjects += $("label[for='" + $(this).attr("id") + "']").text() + ", ";
						xeko.pages.createQuizzle.selectedSubjectIds += $(this).val() + ",";
					});

					if (this.selectedSubjects.length > 0) {
						xeko.pages.createQuizzle.selectedSubjects = this.selectedSubjects.substr(0, this.selectedSubjects.length - 2);
					}

					// Fill in selected missions and subjects
					$(".quizzleMissions").html(this.selectedMissions);
					$(".quizzleSubjects").html(this.selectedSubjects);

					if (this.selectedSubjects.length == 0) {
						$(".subjectTags").hide();
					}
					else {
						$(".subjectTags").show();
					}

					// Show back button
					$("#backButton").show();

					// Fill image list if selected missions change
					xeko.pages.createQuizzle.getCardImages();
					break;
				case 2:
					xeko.pages.createQuizzle.questionText = $.trim($("#questionText").val());
					xeko.pages.createQuizzle.answerText = $.trim($("#answerText").val());
					xeko.pages.createQuizzle.incorrectAnswerText1 = $.trim($("#incorrectAnswerText1").val());
					xeko.pages.createQuizzle.incorrectAnswerText2 = $.trim($("#incorrectAnswerText2").val());
					xeko.pages.createQuizzle.incorrectAnswerText3 = $.trim($("#incorrectAnswerText3").val());

					$(".questionText").html(this.questionText);
					$("label[for='quizzleAnswer1']").html(this.answerText + " <span class='answer'>(correct)</span>");
					$("label[for='quizzleAnswer2']").text(this.incorrectAnswerText1);
					$("label[for='quizzleAnswer3']").text(this.incorrectAnswerText2);
					$("label[for='quizzleAnswer4']").text(this.incorrectAnswerText3);

					if (this.incorrectAnswerText2.length > 0) {
						$("div>input[value='3']").show();
					}
					else {
						$("div>input[value='3']").hide();
					}

					if (this.incorrectAnswerText3.length > 0) {
						$("div>input[value='4']").show();
					}
					else {
						$("div>input[value='4']").hide();
					}

					break;
				case 3:
					$("#nextButton").attr("src", "/images/btn/btn_submit.gif");
					break;
				case 4:
					// Save quizzle
					xeko.pages.createQuizzle.saveQuizzle();
					break;
			}

			// Step 4 submits the quizzle, so don't show the next step unless it succeeds.
			if (this.currentStep != 4) {
				this.goTo(this.currentStep, this.currentStep += 1);
			}
		}
	},
	"goTo": function(from, to) {
		$("#createQuizzleStep" + from).hide();
		$("#createQuizzleStep" + to).show();

		// Step Image
		if (to < this.numberOfSteps) {
			if (!($.browser.msie && parseInt($.browser.version) < 7)) $("#createQuizzleStep").attr("src", "/images/g/g_step" + to + ".png");
			$("#createQuizzleStep").attr("class", "g_step" + to).attr("alt", "Step " + to);
		}
		else {
			if (!($.browser.msie && parseInt($.browser.version) < 7)) $("#createQuizzleStep").attr("src", "/images/g/g_stepcomplete.png");
			$("#createQuizzleStep").attr("class", "g_stepcomplete").attr("alt", "Complete!");
		}
		
		// Hide flyouts
	$("#createquizzleHonorCode").hide();
	$("#createquizzleTerms").hide();
	},

	"saveQuizzle": function() {
		var cardId = this.selectedImageId;
		var agentGuid = xeko.agentinfo.agentGUID;

		$.ajax(
		{
			method: "get",
			url: "/widgets/widget.Quizzles.handler.php?type=submitquizzle",
			data: {
				questiontext : this.questionText,
				cardid : cardId,
				correctanswer : this.answerText,
				answer1 : this.incorrectAnswerText1,
				answer2 : this.incorrectAnswerText2,
				answer3 : this.incorrectAnswerText3,
				missionids : this.selectedMissionIds,
				subjectids : this.selectedSubjectIds
			},
			beforeSend: function() {
				// lightbox while the POST is in progress
				xeko.lightbox.show("Please wait while we create your Quizzle.", true, "createquizzle");
			},

			success: function(xml) {
				// check response
				if (xml != null) {
					// success
					xeko.pages.createQuizzle.goTo(xeko.pages.createQuizzle.currentStep, xeko.pages.createQuizzle.currentStep += 1);
					$("#buttonsDiv").hide();
				}
				else {
					// error posting quizzle
					xeko.pages.createQuizzle.hideError();
					xeko.pages.createQuizzle.throwError(xeko.messaging.error.CREATE_CHALLENGE_ERROR);
				}
			},
			error: function(xmlHttpRequest, status, err) {
				if (xmlHttpRequest.status > 0) {
					xeko.pages.createQuizzle.hideError();
					xeko.pages.createQuizzle.throwError(xeko.messaging.error.CREATE_CHALLENGE_ERROR);
				}
			},
			complete: function() {
				// hide lightbox
				xeko.lightbox.hide("createquizzle");
			}
		});
	},
	"getCardImages": function() {
		// Get Card images
		$.ajax(
		{
			method: "get",
			url: "/widgets/widget.Xekopedia.handler.php?response=xml&type=cardindex",
			success: function(xml) {
				if (xml != null && $("card", xml).length > 0) {
					// Parse card xml
					var imgTags = "<div>";
					$("card", xml).each(function() {
						var mission = xeko.utilities.removeSpaces($("hotspot", this).text());
						var cardGuid = $(this).attr("id");
						var cardNumber = $("number", this).text();
						var cardName = $("name", this).text();
						var imgPath = "/images/cardart/" + mission + "/activities_small/" + cardNumber + ".jpg";
						imgTags += "<img src=\"" + imgPath + "\" id=\"" + cardGuid + "\" alt=\"" + cardName + "\"/>";
					});
					imgTags += "</div>";
					$(".imageList").html(imgTags);
				}
				else {
					// Web service error - Get the first 50 images for each mission selected
					var imgTags = "<div>";
					var missions = xeko.pages.createQuizzle.selectedMissions.split(',');
					for (var i = 0; i < missions.length; i++) {
						var mission = xeko.utilities.removeSpaces(missions[i]);
						if (mission != "General") {
							var imgPath = "/images/cardart/" + mission + "/activities_small/";
							for (var j = 1; j <= 50; j++) {
								imgTags += "<img src='" + imgPath + j + ".jpg' id='" + mission + "_" + j + "'/>";
							}
						}
					}
					imgTags += "</div>";
					$(".imageList").html(imgTags);
				}

				// Add click event
				$(".imageList img").click(function(e) {
					xeko.pages.createQuizzle.selectImage(e);
				});
			},
			error: function(xmlHttpRequest, status, err) {
				// bad request
				//alert("Card error: " + err);
			},
			complete: function() {
				// complete
			}
		});
	},
	"selectImage": function(e) {
		var src = e.target.src;
		src = src.replace('small', 'medium');
		xeko.pages.createQuizzle.selectedImageId = e.target.id;
		$("#selectedImageId").val(this.selectedImageId);
		$(".selectedImage").attr("src", src);
		if (e.target.alt != "") {
			$("#selectedImageLabel").text(e.target.alt);
		}
	},
	"reset": function() {
		$("#quizzleForm input[type='text']").val("");
		$("#quizzleForm input[type='hidden']").val("");
		$("#quizzleForm textarea").val("");

		$("input[name='mission']:checked").each(function() { this.checked = false; });
		$("input[name='subject']:checked").each(function() { this.checked = false; });
		$(".selectedImage").attr("src", "/images/g/g_image.gif").attr("alt", "");
		$("#selectedImageLabel").text("Selected Image");
		$(".imageList div").get(0).scrollTop = 0;
		$(".imageList div").html("");

		$("label[for='quizzleAnswer1']").text("");
		$("label[for='quizzleAnswer2']").text("");
		$("label[for='quizzleAnswer3']").text("");
		$("label[for='quizzleAnswer4']").text("");

		$("#nextButton").attr("src", "/images/btn/btn_next.gif");
		$("#backButton").hide();
		$("#buttonsDiv").show();

		$("#termsCheckbox").get(0).checked = false;

		xeko.pages.createQuizzle.selectedMissions = "";
		xeko.pages.createQuizzle.selectedSubjects = "";
		xeko.pages.createQuizzle.selectedMissionIds = "";
		xeko.pages.createQuizzle.selectedSubjectIds = "";
		xeko.pages.createQuizzle.questionText = "";
		xeko.pages.createQuizzle.answerText = "";
		xeko.pages.createQuizzle.incorrectAnswerText1 = "";
		xeko.pages.createQuizzle.incorrectAnswerText2 = "";
		xeko.pages.createQuizzle.incorrectAnswerText3 = "";
		xeko.pages.createQuizzle.selectedImageId = "";

		this.currentStep = 1;
		this.goTo(5, 1);
	},
	"throwError": function(msg) {
		$("form#createQuizzle p.error").text(msg).show();
	},
	"hideError": function() {
		$("form#createQuizzle p.error").hide();
	}
};