//
// Quiz.js
//   for ~/Modules/Quiz.ascx
//

/// <reference path="../Edentity.Global.js" />
/// <reference path="../External/jquery-1.3.2-vsdoc2.js" />


Edentity.RegisterNamespace("WNetwork.Modules.Quiz");

(function(Quiz, $) {

	var defaults = {
		QuizID: -1,
		QuizContainerID: '',
		IsCustom: false,
		WebServiceUrl: ''
	};

	var parameters = null;
	var quizID = -1;
	var currentPage = 0;
	var isCustomQuiz = false;
	var isMultipleChoice = false;
	var quizPages = null;
	var quizResults = null;
	var quizStartPage = null;
	var quizContainer = null;
	var quizNavigation = null;

	Quiz.OnInit = function(p) {

		parameters = $.extend({}, defaults, p || {});
		quizID = parameters.QuizID;
		isCustomQuiz = parameters.IsCustom;
		isShowResults = parameters.ShowResults;
		isMultipleChoice = parameters.QuizType == 'MultipleChoice';
		quizStartPage = $(parameters.QuizStartPageID);

		if (quizID > 0) {
			if (isCustomQuiz) {
				MoveToQuizTemplate();
				if (isShowResults) {
					GetQuizResultsByCode();
				} else if (parameters.UserCanTakeQuiz == false) {
					DisplayErrorPage('MultipleTryError');
				}
				else {
					quizStartPage.find('.Button img').bind('click', function() {
						quizStartPage.block({
							css: { backgroundColor: 'transparent', border: 'none', opacity: 1 },
							overlayCSS: { backgroundColor: '#ffffff' },
							message: '<img border="0" src="' + Edentity.ResolveUrl('~/Images/Modules/Quiz-Load.gif') + '" />'
						});

						InitCustomQuiz();
						GetQuizPage(0);
					});
				}
			}
			RateQuiz();
		}

		//Bind quiz sharing tracking
		BindQuizShare();
	};

	function RateQuiz() {
		RequestRating();
		var cookie = GetWNetworkRatingCookie();
		if (cookie != null && cookie.indexOf(',Quiz-' + quizID + ',') > -1) {
			$('div.RatingStars').hide();
			$('div.Thanks').show();
		}
	}

	function SubmitRating(value) {
		$.ajax({
			type: "POST",
			url: parameters.WebServiceUrl + '/SubmitRating',
			data: "{'Object':'Quiz','ObjectID':" + quizID + ",'Rating': " + value + "}",
			contentType: "application/json; charset=utf-8",
			dataType: "json",
			success: function(result) {
				if (result.d != undefined && result.d != null) {
					SetWNetworkRatingCookie('Quiz-' + quizID);
					$('div.RatingStars').hide();
					$('div.Thanks').show();
					RenderRated(result.d);
				}
			},
			complete: function(XMLHttpRequest, textStatus) {
				//alert(XMLHttpRequest.status + ' ' + textStatus);
				//alert(XMLHttpRequest.responseText);
			}
		});
	}

	function RenderRated(value) {
		var rated = Math.ceil(value);
		var html = '';
		for (var i = 1; i <= 5; i++) {
			html += "<input class='star' type='radio' name='RatedStars' value='" + i + "' disabled='disabled' ";
			if (i == rated) {
				html += "checked='checked'";
			}
			html += "/>";
		}
		$('div.RatedStars').html(html);
		$('div.RatedStars :radio.star').rating();
	}

	function RenderRating(rated) {
		var html = '';
		rated = Math.ceil(rated);
		for (var i = 1; i <= 5; i++) {
			html += "<input class='star2' type='radio' name='RatingStars' value='" + i + "' ";
			if (i == rated) {
				html += "checked='checked'";
			}
			html += "/>";
		}
		$('div.RatingStars').append("<div class='Left'>" + html + "</div><div class='Clear'></div>");

		$('div.RatingStars :radio.star2').rating({
			callback: function(value, link) {
				SubmitRating(value);
			}
		});
	}

	function RequestRating() {
		$.ajax({
			type: "POST",
			url: parameters.WebServiceUrl + '/RatingResults',
			data: "{'Object':'Quiz','ObjectID':" + quizID + "}",
			contentType: "application/json; charset=utf-8",
			dataType: "json",
			success: function(result) {
				if (result.d != undefined && result.d != null) {
					RenderRated(result.d);
					RenderRating(result.d);
				}
			},
			complete: function(XMLHttpRequest, textStatus) {
				//alert(XMLHttpRequest.status + ' ' + textStatus);
				//alert(XMLHttpRequest.responseText);
			}
		});
	}

	function InitCustomQuiz() {

		// Initialize data containers
		quizPages = new Array(parameters.PageCount);
		quizResults = new Array(parameters.PageCount);

		// Initialize navigation section
		quizContainer = $(parameters.QuizContainerID).show();
		quizNavigation = quizContainer.find('.Navigation');
		quizNavigation.find('.ProgressBar').progressbar({ value: 0 });
		quizStartPage.unblock().hide();

		var next = quizNavigation.find('.NextButton');
		var imgNext = $('<img />').attr('src', parameters.NavNextButtonDisabledUrl);

		imgNext.bind('click', function() {

			if ($(this).hasClass('Disabled')) return;

			var answerIndices = GetAnswerIndices();

			quizContainer.block({
				css: { backgroundColor: 'transparent', border: 'none', opacity: 1 },
				overlayCSS: { backgroundColor: '#ffffff' },
				message: '<img border="0" src="' + Edentity.ResolveUrl('~/Images/Modules/Quiz-Load.gif') + '" />'
			});

			if (isMultipleChoice) {
				var answerSection = quizContainer.find('.Content .Answers');
				if (!answerSection.hasClass('MultipleChoice')) {
					answerSection.addClass('MultipleChoice');
					SubmitMultipleChoiceAnswer(answerIndices);
					quizResults[currentPage] = answerIndices;
					return;
				}
				else {
					answerSection.removeClass('MultipleChoice');
				}
			}
			else {
				quizResults[currentPage] = answerIndices;
			}
			// console.log(quizResults);
			currentPage++;

			if (currentPage == parameters.QuizPageCount) {
				SubmitQuizAnswers();
				return;
			}

			GetQuizPage(currentPage);
		});

		imgNext.hover(function() {
			if ($(this).hasClass('Disabled') == false) {
				$(this).attr('src', parameters.NavNextButtonHoverUrl);
			}
		}, function() {
			if ($(this).hasClass('Disabled') == false) {
				$(this).attr('src', parameters.NavNextButtonUrl);
			}
		});

		next.append(imgNext);
		DisableNextButton(true);
	}

	function GetQuizPage(n) {

		$.ajax({
			type: "POST",
			url: parameters.WebServiceUrl + '/GetQuizPage',
			data: "{'QuizType':'" + parameters.QuizType + "','QuizID':" + parameters.QuizID + ",'PageNum': " + n + "}",
			contentType: "application/json; charset=utf-8",
			dataType: "json",
			success: function(result) {
				if (result.d != undefined && result.d != null) {
					quizPages[n] = result.d;
					DisableNextButton(true);
					DisplayQuizPage(result.d);
					UpdateProgressbar(parameters.QuizPageCount, currentPage);
					AdRefresh();
					quizContainer.unblock();
				}
			}
		});
	}

	function DisplayQuizPage(page) {

		var questionType = parameters.QuestionSelectionType;
		var answerSection = quizContainer.find('.Content .Answers');

		quizContainer.find('.Top').html(page.TopHTML);
		quizContainer.find('.Bottom').html(page.BottomHTML);
		quizContainer.find('.Content .Question').html(page.Question);

		var answerList = $('<ul></ul>').addClass(questionType);
		var answersAry = GetAnswersArray(page);

		// Setup answers section and results (i.e. user navigating with previous and next buttons)

		if (answersAry.length > 0) {

			jQuery.each(answersAry, function(i, item) {

				var answerItem = $('<div></div>').addClass('Answer');
				i++;

				if (questionType == 'HoverButton') {

					answerItem
						.text(item).attr('index', i)
						.hover(function() {
							$(this).addClass('AnswerHover');
						}, function() {
							if ($(this).attr('selected') != 'selected') {
								$(this).removeClass('AnswerHover');
							}
						})
						.bind('click', function() {
							if (page.HasMultipleAnswers != null && page.HasMultipleAnswers == true) {

								if ($(this).attr('selected') != 'selected') {
									$(this).attr('selected', 'selected').addClass('AnswerHover');
								} else {
									$(this).removeAttr('selected').removeClass('AnswerHover');
								}

								var selected = answerList.find('li .Answer[selected=selected]').length > 0;
								DisableNextButton(!selected);
							} else {
								answerList.find('li .Answer').removeAttr('selected').removeClass('AnswerHover');
								$(this).attr('selected', 'selected').addClass('AnswerHover');
								DisableNextButton(false);
							}
						});

				} else if (questionType == 'RadioButton') {

					var ctlID = 'Answer' + i;
					var groupName = parameters.QuizClientID + '_Answers';
					var radioOpt = $('<input type="radio" />').attr('id', ctlID).attr('index', i)
						.bind('click', function() {
							DisableNextButton(false);
						});
					var labelOpt = $('<label></label>').attr('for', ctlID).addClass('Text').text(item);

					// If quiz is multiple choice, do not group the buttons to allow multiple selections.
					// Also, radio buttons can only be "checked" and not "unchecked" so add ability to "uncheck".
					if (!isMultipleChoice) {
						radioOpt.attr('name', groupName);
					} else if (page.HasMultipleAnswers != null && page.HasMultipleAnswers == false) {
						radioOpt.attr('name', groupName);
					} else {
						var radioChecked;
						radioOpt.bind('mousedown', function() {
							radioChecked = $(this).attr('checked');
						}).bind('click', function() {
							if (radioChecked) {
								$(this).attr('checked', false);
							} else {
								$(this).attr('checked', true);
							}
							var checked = answerList.find('li .Answer input[checked=true]').length > 0;
							DisableNextButton(!checked);
						});
						labelOpt.bind('click', function() {
							radioChecked = $(this).prev().attr('checked');
							if (radioChecked) {
								$(this).prev().attr('checked', false);
							} else {
								$(this).prev().attr('checked', true);
							}
							var checked = answerList.find('li .Answer input[checked=true]').length > 0;
							DisableNextButton(!checked);
						});
					}

					// Uncomment: If implementing previous button
					// Select radio button if option has been selected before
					// var answerIndex = quizResults[currentPage];
					// if (typeof answerIndex != 'undefined' && answerIndex != null && answerIndex == i) {
					//		radioOpt.attr('checked', 'checked');
					//		DisableNextButton(false);
					// }

					answerItem.append(radioOpt);
					answerItem.append(labelOpt);

				}

				answerList.append($('<li></li>').append(answerItem));
			});
		}

		answerSection.empty();
		answerSection.append(answerList);
	}

	function SubmitQuizAnswers() {

		$.ajax({
			type: "POST",
			url: parameters.WebServiceUrl + '/SubmitQuizAnswers',
			data: "{'QuizType':'" + parameters.QuizType + "','QuizID':" + parameters.QuizID + ",'Answers':" + JSON.stringify(quizResults) + "}",
			contentType: "application/json; charset=utf-8",
			dataType: "json",
			success: function(result) {
				if (result.d != undefined && result.d != null) {
					if (result.d.UserID > 0) {
						// Refresh page with quiz results code
						var sep = (window.location.href.indexOf("?") === -1) ? "?" : "&";
						window.location.href = window.location.href + sep + "res=" + result.d.ResultsID;
					}
					else {
						quizContainer.hide();
						quizNavigation.hide();
						DisplayQuizResults(result.d);
						quizContainer.unblock();
						$('#' + parameters.ResultsClientID + ' .Share').hide();
					}
				}
			}
		});
	}

	function SubmitMultipleChoiceAnswer(answer) {

		$.ajax({
			type: "POST",
			url: parameters.WebServiceUrl + '/SubmitMultipleChoiceAnswer',
			data: "{'QuizID':" + parameters.QuizID + ",'PageNum':" + currentPage + ",'AnswerIndex':[" + answer + "]}",
			contentType: "application/json; charset=utf-8",
			dataType: "json",
			success: function(result) {
				if (result.d != undefined && result.d != null) {
					var answerSection = quizContainer.find('.Content .Answers');
					var messageDiv = $('<div class="MCAnswer"></div>').html(result.d);
					answerSection.empty().append(messageDiv);
					quizContainer.unblock();
				}
			}
		});
	}

	function GetQuizResultsByCode() {

		$.ajax({
			type: "POST",
			url: parameters.WebServiceUrl + '/GetQuizResults',
			data: "{'QuizID':" + parameters.QuizID + ",'ResultsID':'" + parameters.ResultsCode + "'}",
			contentType: "application/json; charset=utf-8",
			dataType: "json",
			success: function(result) {
				if (result.d != undefined && result.d != null) {
					DisplayQuizResults(result.d);

					var btnSection = $('#' + parameters.ResultsClientID + ' .Buttons');
					$('.Save', btnSection).bind('click', function() {
						$.ajax({
							type: "POST",
							url: parameters.WebServiceUrl + '/SaveQuizResultsToProfile',
							data: "{'ResultsID':'" + parameters.ResultsCode + "'}",
							contentType: "application/json; charset=utf-8",
							dataType: "json",
							success: function(result) {
								var msg = '';
								if (result.d != undefined && result.d != null && result.d == true) {
									msg = $('.QuizError .SaveToProfileSuccess').html();
								}
								else {
									msg = $('.QuizError .SaveToProfileError').html();
								}
								var msgDiv = $('<div />').addClass('SaveMessage').html(msg).hide();
								btnSection.prepend(msgDiv);
								msgDiv.fadeIn('slow', function() {
									setTimeout(function() { $('#' + parameters.ResultsClientID + ' .Buttons .SaveMessage').remove() }, 5000);
								});
							}
						});
					});
				}
				else {
					DisplayErrorPage('ResultsError');
				}
			}
		});
	}

	function DisplayQuizResults(results) {

		var contentArea = $(parameters.ResultsContainerID).css('visibility', 'visible');

		if (results.Results == null) return;

		if (parameters.QuizType == 'Mostly') {

			jQuery.each(results.Results, function(i, item) {
				var div = $('<div class="Results"></div>')
					.append($('<div class="Title"></div>').text(item.Title))
					.append($('<div class="Description"></div>').html(item.Description));
				contentArea.append(div);
			});

		} else if (parameters.QuizType == 'Tallied') {

			jQuery.each(results.Results, function(i, item) {
				var div = $('<div class="Results"></div>')
					.append($('<div class="Title"></div>').text(item.Title))
					.append($('<div class="Description"></div>').html(item.Description));
				contentArea.append(div);
			});

		} else if (parameters.QuizType == 'MultipleChoice') {

			// Process template and load results
			var div = $('<div class="MCResultsContainer"></div>');
			contentArea.append(div);

			var $container = $('.MCResultsContainer');
			if (!$container.hasTemplate()) {
				$container.setTemplateElement('mcOutputTemplate');
			}

			// Determine parameter values
			var r = results.Results;
			var correctlyAnswered = 0;
			for (var i = 0; i < r.length; i++) {
				if (r[i].IsCorrect == true) {
					correctlyAnswered++;
				}
			}

			// Set parameter values
			$container.setParam('CorrectNumber', correctlyAnswered);
			$container.setParam('CorrectPercentage', Math.round((correctlyAnswered * 100) / r.length) + '%');
			$container.setParam('OverallNumber', r.length);

			$container.processTemplate(results);
		}

		$('#' + parameters.ResultsClientID).show();
	}

	// Bind the Quiz sharing to the share control
	function BindQuizShare() {
		$("div.SharingService a").click(function(event) {
			var href = this.href.toLowerCase();
			if (href.indexOf("www.facebook.com") > 0) {
				TrackQuizSharing(parameters.QuizID, "FB");
			}
			else if (href.indexOf("www.twitter.com") > 0) {
				TrackQuizSharing(parameters.QuizID, "Twit");
			}
			else if (href.indexOf("www.digg.com") > 0) {
				TrackQuizSharing(parameters.QuizID, "Digg");
			}
			else {//Email
				TrackQuizSharing(parameters.QuizID, "Email");
			}
		});
	};

	// Tracking the Quiz sharing
	function TrackQuizSharing(QuizID, ShareType) {

		$.ajax({
			type: "POST",
			url: parameters.WebServiceUrl + '/TrackObject',
			data: "{'ContentType':'Quiz-" + ShareType + "','ContentID':" + QuizID + "}",
			contentType: "application/json; charset=utf-8",
			dataType: "json",
			complete: function(XMLHttpRequest, textStatus) {
				alert(XMLHttpRequest.status + ' ' + textStatus);
				alert(XMLHttpRequest.responseText);
			}
		});
	};

	/***********************************************
	* Helper Functions
	**********************************************/

	// Returns the selected answer index (or indices) depending on the type of quiz.
	function GetAnswerIndices() {
		var questionType = parameters.QuestionSelectionType;
		if (questionType != null) {
			if (questionType == 'HoverButton') {
				var indices = new Array();
				var hovItems = quizContainer.find('.Content .Answers .Answer[selected=selected]');
				hovItems.each(function() {
					indices.push(parseInt($(this).attr('index')));
				});
				return indices;
			} else if (questionType == 'RadioButton') {
				var indices = new Array();
				var chkItems = quizContainer.find('.Content .Answers .Answer input:checked');
				chkItems.each(function() {
					indices.push(parseInt($(this).attr('index')));
				});
				return indices;
			}
		}
		return -1;
	}

	// Sets the enable/disable state of the 'Next' button.
	function DisableNextButton(disabled) {
		var next = quizNavigation.find('.NextButton img');
		if (disabled == true) {
			next.addClass('Disabled').attr('src', parameters.NavNextButtonDisabledUrl);
		} else {
			next.removeClass('Disabled').attr('src', parameters.NavNextButtonUrl);
		}
	}

	// Returns an array of answers, where are displayed as options to a question.
	function GetAnswersArray(page) {
		var answersAry = new Array();
		if (page != null) {
			if (page.Answer1 != null && page.Answer1 != '') { answersAry.push(page.Answer1); }
			if (page.Answer2 != null && page.Answer2 != '') { answersAry.push(page.Answer2); }
			if (page.Answer3 != null && page.Answer3 != '') { answersAry.push(page.Answer3); }
			if (page.Answer4 != null && page.Answer4 != '') { answersAry.push(page.Answer4); }
			if (page.Answer5 != null && page.Answer5 != '') { answersAry.push(page.Answer5); }
			if (page.Answer6 != null && page.Answer6 != '') { answersAry.push(page.Answer6); }
		}
		return answersAry;
	}

	// Updates the progress bar based on the current page.
	function UpdateProgressbar(numPages, currentPage) {
		var progressBar = quizNavigation.find('.ProgressBar');
		var progressText = quizNavigation.find('.ProgressText');
		var completionRate = ((currentPage + 1) / numPages) * 100;
		progressBar.progressbar('option', 'value', completionRate);
		progressText.text('Pages ' + (currentPage + 1) + ' of ' + numPages);
	}

	function MoveToQuizTemplate() {
		// Elements are initially hidden so user cannot see elements being moved around
		var $quizBody = $('#' + parameters.TemplateID + ' .QuizBody');
		$quizBody.append($('#' + parameters.ResultsClientID))
			.append($('#' + parameters.QuizClientID).show())
			.append($('#' + parameters.ErrorClientID));
	}

	function DisplayErrorPage(errClass) {
		$('#' + parameters.QuizClientID).hide();
		$('#' + parameters.ResultsClientID).hide();
		$('#' + parameters.ErrorClientID).show().find('.' + errClass).show();
	}

})(WNetwork.Modules.Quiz, jQuery);


function renderMCCorrectLayout(result, idx) {
	return '<div class="Correct">' + (idx + 1) + '<br />' + (result.IsCorrect ? 'Correct' : 'Incorrect') + '</div>';
}

function renderMCAnswersLayout(result, idx) {

	var output = '<ul>';
	
	for (var i = 0; i < result.Answers.length; i++) {

		var isCorrect = $.inArray(i + 1, result.CorrectAnswers);
		var userSelAnswer = $.inArray(i + 1, result.UserAnswers);
				
		output += '<li><div class="Check">' +
			(isCorrect != -1 ? '<img src="' + Edentity.ResolveUrl('~/Images/Modules/Quiz-Correct.gif') + '" />' : '&nbsp;') +
			'</div><input type="radio" style="float:left" ' + (userSelAnswer != -1 ? 'checked="checked"' : '') + ' disabled="disabled" />' +
			'<div class="Answer"><label for="" class="Text">' + result.Answers[i] + '</label></div><div class="Clear"></div></li>';
	}

	output += '</ul>';
		
	return output;
}