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

var force_error = false;

$(document).ready(function()
{
	// Clicks for Next/Back
	$("#nextButton").click(function(e)			// override the click default, instead go the next step in the form
	{
		e.preventDefault();
		if (xeko.pages.createChallenge.validate()) xeko.pages.createChallenge.nextStep();
	});
	$("#backButton").click(function(e)			// override the click default, instead go the previous step in the form
	{
		e.preventDefault();
		xeko.pages.createChallenge.prevStep();
	});
	
	// Clicks for the Create Another button
	$("#createchallengeCreateAnother").click(function(e)			// override the click default, instead reset the form
	{
		e.preventDefault();
		xeko.pages.createChallenge.reset();
	});
	
//	// Populate Missions & Subjects checkbox lists
//	xeko.pages.createChallenge.makeCheckboxList("mission");
//	xeko.pages.createChallenge.makeCheckboxList("subject");
	// Hard-coded for now
	$("#createchallengeMissions").show();
	$("#createchallengeSubjects1").show();
	$("#createchallengeSubjects2").show();
	$("#createchallengeSubjects3").show();
	$("ul.threeColumn").css("display", "inline-block");
	
	// append instruction length messaging
	$("#createchallengeInstructions").after("<br/><small id=\"createchallengeInstructionsCharsLeft\" class=\"right\">" + xeko.pages.createChallenge.instructionsMaxLength + " characters remaining</small>");
	
	// add inline instructions prompt
	$("#createchallengeInstructions").val(xeko.strings.CHALLENGE_INSTRUCTIONS_PROMPT);
	$("#createchallengeInstructions").addClass("instructional");
	
	// remove prompt text on field focus
	$("#createchallengeInstructions").focus(function(e)
	{
		if (this.value == xeko.strings.CHALLENGE_INSTRUCTIONS_PROMPT) this.value = "";
		xeko.pages.createChallenge.instructionsUpdate(this);
	});
	
	// re-add prompt text as necessary
	$("#createchallengeInstructions").blur(function(e)
	{
		if (this.value == "") this.value = xeko.strings.CHALLENGE_INSTRUCTIONS_PROMPT;
		xeko.pages.createChallenge.instructionsUpdate(this);
	});
	
	// update letter count
	$("#createchallengeInstructions").bind("keyup click change mouseup", function(e) { xeko.pages.createChallenge.instructionsUpdate(this); });
	
	// add inline name prompt
	$("#createchallengeName").val(xeko.strings.CHALLENGE_NAME_PROMPT);
	$("#createchallengeName").addClass("instructional");
	
	// remove prompt text on field focus
	$("#createchallengeName").focus(function(e)
	{
		if (this.value == xeko.strings.CHALLENGE_NAME_PROMPT)
		{
			$(this).removeClass("instructional");
			this.value = "";
		}
	});
	
	// re-add prompt text as necessary
	$("#createchallengeName").blur(function(e)
	{
		if (this.value == "")
		{
			$(this).addClass("instructional");
			this.value = xeko.strings.CHALLENGE_NAME_PROMPT;
		}
	});
	
	// Display Agent Id
	if (xeko.agentinfo.agentID.length > 0) $("#createChallengeAgentId").text(xeko.agentinfo.agentID + ",");
	$(".createchallengeAgentIdDisplay").after(" Agent " + xeko.agentinfo.agentID);
	
	// popups
	$("#createchallengeInstructionsPopupLink").click(function(e)
	{
		e.preventDefault();
		$("#createchallengeInstructionsPopup").toggle("fast");
	});
	$("#createchallengeAgreePopupCodeLink").click(function(e)
	{
		e.preventDefault();
		$("#createchallengeAgreePopupCode").toggle("fast");
	});
	$("#createchallengeAgreePopupTermsLink").click(function(e)
	{
		e.preventDefault();
		$("#createchallengeAgreePopupTerms").toggle("fast");
	});

});

xeko.pages.createChallenge = {
  "currentStep": 1,
  "numberOfSteps": 4,
  "instructionsMaxLength": 2000,
  "selectedMissions": "",
  "selectedSubjects": "",
  "selectedMissionIds": "",
  "selectedSubjectIds": "",
  "cardNumber": new Array(),
  "cardHotspot": new Array(),
  "validate": function() {
    var isValid = false;
    switch (this.currentStep) {
      case 1:
        isValid = true;

        // valid when user selects at least one Mission and one Subject
        var missionsChecked = false;
        this.selectedMissions = "";
        this.selectedMissionIds = "";
        $(".createchallengeMissions").each(function() {
          if (this.checked) {
            missionsChecked = true;
            xeko.pages.createChallenge.selectedMissions += $("label[for='" + $(this).attr("id") + "']").text() + ", ";
            xeko.pages.createChallenge.selectedMissionIds += $(this).val() + ",";
            xeko.debug.trace($(this).val());
          }
        });
        if (this.selectedMissions.length > 0) {
          this.selectedMissions = this.selectedMissions.substr(0, this.selectedMissions.length - 2);
          this.selectedMissionIds = this.selectedMissionIds.substr(0, this.selectedMissionIds.length - 1);
        }

        var subjectsChecked = false;
        this.selectedSubjects = "";
        this.selectedSubjectIds = "";
        $(".createchallengeSubjects").each(function() {
          if (this.checked) {
            subjectsChecked = true;
            xeko.pages.createChallenge.selectedSubjects += $("label[for='" + $(this).attr("id") + "']").text() + ", ";
            xeko.pages.createChallenge.selectedSubjectIds += $(this).val() + ",";
          }
        });
        if (this.selectedSubjects.length > 0) {
          this.selectedSubjects = this.selectedSubjects.substr(0, this.selectedSubjects.length - 2);
          this.selectedSubjectIds = this.selectedSubjectIds.substr(0, this.selectedSubjectIds.length - 1);
        }

        if (missionsChecked) {
          xeko.validation.clearMessage("createchallengeMissionsLabel");
          // Keep the running tally up to date
          // jQuery text() does not work on all matched elements for the class in IE, using .each() instead
          $(".createchallengeMissionDisplay").each(function() { this.innerHTML = " " + xeko.pages.createChallenge.selectedMissions; });
        }
        else {
          isValid = false;
          xeko.validation.showMessage("createchallengeMissionsLabel", xeko.messaging.alert.CHALLENGE_MISSION_NOT_SELECTED);
        }

        if (subjectsChecked) {
          xeko.validation.clearMessage("createchallengeSubjectsLabel");
          // Keep the running tally up to date
          $(".createchallengeSubjectDisplay").each(function() { this.innerHTML = " " + xeko.pages.createChallenge.selectedSubjects; });
        }
        else {
          isValid = false;
          xeko.validation.showMessage("createchallengeSubjectsLabel", xeko.messaging.alert.CHALLENGE_SUBJECT_NOT_SELECTED);
        }
        
        // Populate Picture list with current hotspot selection
        if (isValid) xeko.pages.createChallenge.makePictureList();

        break;
      case 2:
        // valid if instructional text exists and isn't longer than the maxlength
        if ($("#createchallengeInstructions").val().length > 0 && $("#createchallengeInstructions").val().length <= this.instructionsMaxLength && $("#createchallengeInstructions").val() != xeko.strings.CHALLENGE_INSTRUCTIONS_PROMPT) {
          isValid = true;
          xeko.validation.clearMessage("createchallengeSubjectsLabel");
          // Keep the running tally up to date
          $(".createchallengeInstructionsDisplay").each(function() { this.innerHTML = " " + xeko.utilities.htmlEncode($("#createchallengeInstructions").val()); });
        }
        else {
          isValid = false;
          xeko.validation.showMessage("createchallengeInstructionsLabel", xeko.messaging.alert.CHALLENGE_INSTRUCTIONS_MISSING);
        }

        break;
      case 3:
        // valid if name and image are specified
        var imageSelected = false;
        $("input[name='createchallengeImages']").each(function() {
          if (this.checked) {
            imageSelected = true;
            // Keep the running tally up to date
            var src = "/images/cardart/" + xeko.pages.createChallenge.cardHotspot[this.value] + "/activities_medium/" + xeko.pages.createChallenge.cardNumber[this.value] + ".jpg";
            $(".createchallengeImageDisplay").attr("src", src);
          }
        });

        if (imageSelected) xeko.validation.clearMessage("createchallengeImageLabel");
        else xeko.validation.showMessage("createchallengeImageLabel", xeko.messaging.alert.CHALLENGE_IMAGE_MISSING);

        var nameSpecified = false;
        if ($("#createchallengeName").val().length > 0 && $("#createchallengeName").val() != xeko.strings.CHALLENGE_NAME_PROMPT) {
          xeko.validation.clearMessage("createchallengeNameLabel");
          nameSpecified = true;
          // Keep the running tally up to date
          $(".createchallengeNameDisplay").each(function() { this.innerHTML = " " + $("#createchallengeName").val(); });
        }
        else xeko.validation.showMessage("createchallengeNameLabel", xeko.messaging.alert.CHALLENGE_NAME_MISSING);

        if (imageSelected && nameSpecified) isValid = true;

        break;
      case 4:
        // User must agree to terms
        if ($("#createChallengeAgree").get(0).checked) {
          isValid = true;
          xeko.validation.clearMessage("createChallengeAgree");
        }
        else xeko.validation.showMessage("createChallengeAgree", xeko.messaging.alert.CHALLENGE_AGREE_TERMS);

        break;
    }
    return isValid;
  },
  "createChallenge": function() {
    $.ajax(
		{
		  method: "get",
		  url: "/widgets/widget.Challenges.handler.php",
		  data: "type=submitchallenge" +
					"&title=" + escape($("#createchallengeName").val()) +
		  //		"&challengetype=text" +
					"&questiontext=" + escape($("#createchallengeInstructions").val()) +
					"&missions=" + xeko.pages.createChallenge.selectedMissionIds +
					"&subjects=" + xeko.pages.createChallenge.selectedSubjectIds +
					"&cardid=" + $("input[name='createchallengeImages']:checked").val()
			,
		  beforeSend: function() { xeko.lightbox.show(xeko.strings.CHALLENGE_CREATE_WAIT, true, "CreateResponse") },
		  complete: function() { xeko.lightbox.hide("CreateResponse"); },
		  success: function(xml) {
		    // success?
		    if ($("challenge", xml).length > 0) {
		      // Show confirmation screen
		      xeko.pages.createChallenge.hideError();
		      xeko.pages.createChallenge.goTo(xeko.pages.createChallenge.currentStep, xeko.pages.createChallenge.currentStep += 1);
		      xeko.debug.trace("new challenge: " + $("challenge", xml).attr("id"));

		      $("#buttonsDiv").hide();
		    } else if ($("error", xml).length > 0) {
		      xeko.pages.createChallenge.hideError();
		      var errorNo = $("error", xml).attr("id");
		      //##TODO enumerate expected errors from FMD
		      switch (errorNo) {
		        case ("10001"):
		          xeko.pages.createChallenge.throwError(xeko.messaging.error.CREATE_SS_VALIDATION_ERROR);
		          break;
		        default:
		          xeko.pages.createChallenge.throwError(xeko.messaging.error.CREATE_CHALLENGE_ERROR);
		          break;
		      }
		    }
		    else {
		      // 500
		      xeko.pages.createChallenge.hideError();
		      xeko.pages.createChallenge.throwError(xeko.messaging.error.CREATE_CHALLENGE_ERROR);
		    }
		  },
		  error: function(xmlHttpRequest, status, err) {
			if (xmlHttpRequest.status > 0) {
				xeko.pages.createChallenge.hideError();
				xeko.pages.createChallenge.throwError(xeko.messaging.error.CREATE_CHALLENGE_ERROR);
			}
		  }
		});
  },
  "prevStep": function() {
    this.goTo(this.currentStep, this.currentStep -= 1);
  },
  "nextStep": function() {
    if (this.currentStep < this.numberOfSteps) { this.goTo(this.currentStep, this.currentStep += 1); }
    else this.createChallenge();
  },
  "goTo": function(from, to) {
    $("#createchallengeStep" + from).hide();
    $("#createchallengeStep" + to).show();

    if (this.currentStep == 1) {
      $("#backButton").hide();
    }
    else {
      $("#backButton").show();
    }

    if (this.currentStep < this.numberOfSteps) {
      $("#nextButton").attr("src", "/images/btn/btn_next.gif");
    }
    else {
      $("#nextButton").attr("src", "/images/btn/btn_submit.gif");
    }

    // Step Image
    if (to <= this.numberOfSteps) {
      if (!$.browser.msie || parseInt($.browser.version) >= 7) $("#createchallengeShowStep").attr("src", "/images/g/g_step" + to + ".png");
      $("#createchallengeShowStep").attr("class", "g_step" + to);
      $("#createchallengeShowStep").attr("alt", "Step " + to);
    }
    else {
      if (!$.browser.msie || parseInt($.browser.version) >= 7) $("#createchallengeShowStep").attr("src", "/images/g/g_stepcomplete.png");
      $("#createchallengeShowStep").attr("class", "g_stepcomplete");
      $("#createchallengeShowStep").attr("alt", "Complete!");
    }

    location = "#step" + to;
  },
  "reset": function() {
    // clear form fields
    $(".createchallengeMissions").each(function() { this.checked = false; });
    $(".createchallengeSubjects").each(function() { this.checked = false; });
    $("#createchallengeInstructions").val("");
    $("#createchallengeName").val("");
    $("#createchallengeSelectedImage>img").attr("src", "/images/g/g_image.gif");
    $("input[name='createchallengeImages']").each(function() { this.checked = false; });
    $("#createChallengeAgree").get(0).checked = false;

    // reset instructions character count
    this.instructionsUpdate($("#createchallengeInstructions").get(0));

    // instructional prompts
    $("#createchallengeInstructions").val(xeko.strings.CHALLENGE_INSTRUCTIONS_PROMPT);
    $("#createchallengeInstructions").addClass("instructional");
    $("#createchallengeName").val(xeko.strings.CHALLENGE_NAME_PROMPT);
    $("#createchallengeName").addClass("instructional");

    $("#backButton").hide();
    $("#buttonsDiv").show();

    // return to first step
    this.currentStep = 1;
    this.goTo(5, 1);
  },
  "instructionsUpdate": function(elm) {
    if (elm.value.length > this.instructionsMaxLength)
      elm.value = elm.value.substr(0, this.instructionsMaxLength);

    var charsRemaining;
    if (elm.value == xeko.strings.CHALLENGE_INSTRUCTIONS_PROMPT) charsRemaining = this.instructionsMaxLength;
    else charsRemaining = this.instructionsMaxLength - elm.value.length;

    // Update informational text
    $("#createchallengeInstructionsCharsLeft").text(charsRemaining + " characters remaining");

    if (charsRemaining == this.instructionsMaxLength) $(elm).addClass("instructional");
    else $(elm).removeClass("instructional");
  },
  "makeCheckboxList": function(which) {
    var label, tagType, multicolumn, numberOfTags, inputType;
    switch (which) {
      case "mission":
        label = "Missions";
        tagType = "major";
        multicolumn = false;
        inputType = "radio";
        break;
      case "subject":
        label = "Subjects";
        tagType = "minor";
        multicolumn = true;
        inputType = "checkbox";
        break;
    }

    $.ajax(
		{
		  method: "get",
		  url: "/widgets/widget.Challenges.handler.php?type=gettags&tagtype=" + tagType,
		  beforeSend: function() { },
		  complete: function() {
		    $("#createchallengeLoadingMissions").hide();
		    $("#createchallengeLoadingSubjects").hide();

		    $("#createchallengeMissions").show();
		    $("#createchallengeSubjects1").show();
		    $("#createchallengeSubjects2").show();
		    $("#createchallengeSubjects3").show();

		    // Reinstate display:inline
		    $("ul.threeColumn").css("display", "inline-block");
		  },
		  success: function(xml) {
		    numberOfTags = $("tag>value", xml).size();
		    if (numberOfTags > 0) {
		      // Clear hard-coded values
		      $("#createchallenge" + label + ">li").remove();
		      $("#createchallenge" + label + "1>li").remove();
		      $("#createchallenge" + label + "2>li").remove();
		      $("#createchallenge" + label + "3>li").remove();

		      var columnNo = (multicolumn) ? 1 : "";
		      var i = 1;

		      // Replace with values from the web service
		      $("tag", xml).each(function() {
		        var guid = $(this).attr("id");
		        var val = $("value", this).text();

		        // Multicolumn layout should be divided into three columns
		        if (multicolumn) {
		          if (i > ((numberOfTags / 3) * 2)) columnNo = 3;
		          else if (i > numberOfTags / 3) columnNo = 2;
		        }

		        $("#createchallenge" + label + columnNo).append(
							"<li>" +
							"<input name=\"" + label + "\" type=\"" + inputType + "\" " +
								"id=\"createchallenge" + label + xeko.utilities.makeId(val) + "\" " +
								"class=\"createchallenge" + label + "\" " +
								"value=\"" + guid + "\" " +
								"/> " +
							"<label for=\"createchallenge" + label + xeko.utilities.makeId(val) + "\" class=\"checkbox\">" +
							val +
							"</label></li>"
						);

		        i++;
		      });
		    }
		  },
		  error: function(xmlHttpRequest, status, err) {
		    // No action; use tags already hardcoded into page
		  }
		});
  },
  "makePictureList": function() {
    // Backyard and General are not hotspots
    var hotspotQs = "";
    if (xeko.pages.createChallenge.selectedMissions != "General" && xeko.pages.createChallenge.selectedMissions != "Backyard")
		hotspotQs = "&hotspot=" + xeko.pages.createChallenge.selectedMissions;
    
    $.ajax(
		{
		  method: "get",
		  url: "/widgets/widget.Xekopedia.handler.php?response=xml&type=species" + hotspotQs,
		  beforeSend: function() {
		    // refresh list
		    $("#createchallengeChooseImage>ul>li").remove();
	        xeko.pages.createChallenge.cardNumber = new Array();
	        xeko.pages.createChallenge.cardHotspot = new Array();
	        $(".cardThumbImg").attr("src", "/images/g/g_image.gif");
			$("#createchallengeChooseImage>ul").append('<li id="createChallengeImagesLoad">Loading...</li>');
		  },
		  complete: function() { $("#createChallengeImagesLoad").remove(); },
		  success: function(xml) {
		    if ($("cards>item", xml).size() > 0) {
		      $("cards>item", xml).each(function() {
		        var id = $(this).children("cardid").text();
		        var num = $(this).children("cardno").text();
		        var hotspot = xeko.utilities.removeSpaces($(this).children("hotspot").text());

		        // Create the radio button
		        $("#createchallengeChooseImage>ul").append(
							"<li>" +
							"<input type=\"radio\" name=\"createchallengeImages\" id=\"createchallengeImage" + id + "\" value=\"" + id + "\" />" +
							"<label for=\"createchallengeImage" + id + "\">" +
							"<img src=\"/images/cardart/" + hotspot + "/activities_small/" + num + ".jpg\" alt=\"\" />" +
							"</label></li>"
						);

		        // Index the number and hotspot for this card based on its ID
		        xeko.pages.createChallenge.cardNumber[id] = num;
		        xeko.pages.createChallenge.cardHotspot[id] = hotspot;
		      });

		      // Hide radio buttons for images
		      $("input[name='createchallengeImages']").hide();

		      // Cause label click to update selected image preview
		      $("#createchallengeChooseImage>ul>li>label").click(function(e) {
		        var id = $(this).prev().val();
		        var hotspot = xeko.pages.createChallenge.cardHotspot[id];
		        var num = xeko.pages.createChallenge.cardNumber[id];
		        var src = "/images/cardart/" + xeko.utilities.removeSpaces(hotspot) + "/activities_medium/" + num + ".jpg";

		        // Set image preview SRC
		        $("#createchallengeSelectedImage>img").attr("src", src);

		        // IE doesn't recognize clicking on an IMG within a LABEL, so it must be forced
		        e.preventDefault();
		        $("#createchallengeImage" + id).get(0).checked = true;
		      });
		    }
		  },
		  error: function(xmlHttpRequest, status, err) {
		    //##TODO error messaging 
		  }
		  //			,complete: function() { xeko.lightbox.hide("GetPictures"); }
		});
  },
  "throwError": function(msg) {
    $("form#createChallenge p.error").text(msg).show();
  },
  "hideError": function() {
    $("form#createChallenge p.error").hide();
  }
};