Software Público Brasileiro

(function(wikilibras, $, undefined) {

	var videos_url = '';
	var base_url = '';
	var server_backend_url = '';
	var api_url = '';
	var upload_signs_url = '';
	var current_task_id = -1;
	var tmpParameterJSON = {};
	var parsedParameterJSON = {};

	function _setupTmpParameterJSON(sign_name) {
		tmpParameterJSON = {
			'sinal' : sign_name,
			'userId' : _getLoggedUser(),
			'facial' : {},
			'right-hand' : {},
			'left-hand' : {}
		};
		parsedParameterJSON = {};
	}

	function _getLoggedUser() {
		var pybossa_rembember_token = Cookies.get('remember_token');
		var splitted_token_id = pybossa_rembember_token.split('|');
		return splitted_token_id.length > 0 ? splitted_token_id[0]
				: 'anonymous';
	}

	function _loadTaskInfo(task) {
		current_task_id = task.id;
		var sign_name = task.info.sign_name;
		var ref_vid_link = videos_url + sign_name + '_REF.webm';
		$('.sign-label').text(sign_name);
		$('.ref-video').attr('src', ref_vid_link);

		_setupTmpParameterJSON(task.info.sign_name);
	}

	function _changeImage(img, url) {
		img.attr('src', url);
	}

	function _enableIconHover(container, isHover) {
		var img = $(container).find('img').first();
		var hover_img_url = base_url + '/img/' + $(container).attr('name');
		if (isHover) {
			hover_img_url += '-icon-hover.png';
		} else {
			hover_img_url += '-icon.png';
		}
		_changeImage(img, hover_img_url);
	}

	function _selectIcon(iconName, isSelect, panel) {
		panel = typeof panel == 'undefined' ? '' : '[panel=' + panel + ']';
		var icon_id = '.icon_container[name=' + iconName + ']' + panel;
		_enableIconHover(icon_id, isSelect);
		$(icon_id).attr('select', isSelect);
	}

	function _deselectIcon(iconName, parent) {
		_selectIcon(iconName, false, parent);
	}

	function _enableIconCheck(container, isCheck) {
		var img = $(container).find('img').first();
		var check_img_url = base_url + '/img/' + $(container).attr('name');

		if (isCheck) {
			check_img_url += '-icon-check.png';
		} else {
			check_img_url += '-icon.png';
		}
		_changeImage(img, check_img_url);
	}

	function _setupCheckIcon(option, isCheck, panel) {
		panel = typeof panel == 'undefined' ? '' : '[panel=' + panel + ']';
		var icon_id = '.icon_container[name=' + option + ']' + panel;
		_enableIconCheck(icon_id, isCheck);
		$('.icon_container[name=' + option + ']' + panel).attr('complete',
				isCheck);
	}

	function _isSelectingState() {
		return $('#configuration-panel .icon_container[select=true]').length > 0;
	}

	function _isConfigurationComplete(config) {
		var baseId = '.subconfiguration-panel[mainConfig=' + config + ']';
		var total_config = $(baseId
				+ ' .icon_container[json_name][active=true]').length;
		var completed_config = $(baseId
				+ ' .icon_container[active=true][complete=true]').length;
		return completed_config != 0 && total_config == completed_config;
	}

	function _canHover(el) {
		var incompleteConfig = typeof $(el).attr('complete') == 'undefined'
				|| $(el).attr('complete') == 'false';
		return (!_isSelectingState() && incompleteConfig)
				|| (typeof $(el).attr('select') == 'undefined' && incompleteConfig);
	}

	function _getCurrentMainConfiguration() {
		return _isSelectingState() ? $(
				'#configuration-panel .icon_container[select=true]').attr(
				'name') : '';
	}

	function _addZoomInToAvatar(option, callback) {
		$('#avatar-default')
				.fadeOut(
						500,
						function() {
							$('#avatar-container').removeClass('col-sm-7');
							$('#avatar-container').addClass('col-sm-5');
							$('#selection-container').removeClass('col-sm-2');
							$('#selection-container').addClass('col-sm-4');
							$('#avatar-container').removeClass(
									'avatar-container-zoom-out');
							$('#avatar-container').addClass(
									'avatar-container-zoom-in');
							$('#avatar-' + option).removeClass(
									'avatar-img-zoom-out');
							$('#avatar-' + option).fadeIn(
									500,
									function() {
										$('#avatar-' + option).addClass(
												'avatar-' + option
														+ '-img-zoom-in');
										callback();
									});
						});
	}

	function _addZoomOutToAvatar(option, callback) {
		$('#avatar-' + option).fadeOut(
				500,
				function() {
					$('#selection-container').removeClass('col-sm-4');
					$('#selection-container').addClass('col-sm-2');
					$('#avatar-container').removeClass('col-sm-5');
					$('#avatar-container').addClass('col-sm-7');
					$('#avatar-container').removeClass(
							'avatar-container-zoom-in');
					$('#avatar-container')
							.addClass('avatar-container-zoom-out');
					$('#avatar-default').fadeIn(
							500,
							function() {
								$('#avatar-' + option).removeClass(
										'avatar-' + option + '-img-zoom-in');
								$('#avatar-' + option).addClass(
										'avatar-img-zoom-out');
								callback();
							});
				});
	}

	function _clearPreviousSelection() {
		$('.selection-panel-body').hide();
		$('.subconfiguration-panel').hide();

		if (_isSelectingState()) {
			var current_option = _getCurrentMainConfiguration();
			_selectIcon(current_option, false);
			if (_isConfigurationComplete(current_option)) {
				_setupCheckIcon(current_option, true);
			}
			$('#avatar-' + current_option).fadeOut(500);
		}
	}

	function _showSelectionPanel(option) {
		_clearPreviousSelection();
		_selectIcon(option, true);
		dynworkflow.selectMainConfig(option);
		_setupGUIOnSelection(option, function() {
			dynworkflow.initTimeline();
		});
	}

	function _hideSelectionPanel() {
		var config = _getCurrentMainConfiguration();
		_deselectIcon(config);
		if (_isConfigurationComplete(config)) {
			_finishConfiguration(config, true);
		} else {
			_finishConfiguration(config, false);
		}

		_addZoomOutToAvatar(config, function() {
			$('#ready-button').fadeIn(300);
			$('.edit-container').fadeIn(300);
		});
		$('#selection-panel').fadeOut(300);
	}

	function _canRenderSignVideo() {
		return _isConfigurationComplete('facial')
				&& (_isConfigurationComplete('right-hand') || _isConfigurationComplete('left-hand'));
	}

	function _finishConfiguration(config, toFinish) {
		_setupCheckIcon(config, toFinish);
		_setupCheckIcon('avatar-' + config, toFinish);

		if (toFinish) {
			$('#' + config + '-edit .check-icon').show();
		} else {
			$('#' + config + '-edit .check-icon').hide();
		}
		if (_canRenderSignVideo()) {
			$('#ready-button').removeClass('disabled');
		} else {
			$('#ready-button').addClass('disabled');
		}
	}

	function _unfinishConfiguration(config, panel) {
		_setupCheckIcon(config, false, panel);
		_setupCheckIcon('avatar-' + config, false, panel);
		$('#' + config + '-edit .check-icon').hide();

		if (!_canRenderSignVideo()) {
			$('#ready-button').addClass('disabled');
		}
	}

	function _setupGUIOnSelection(option, finishCallback) {
		$('#ready-button').fadeOut(300);
		$('.edit-container').fadeOut(300);
		_addZoomInToAvatar(option, function() {
			$('#selection-panel').fadeIn(300, function() {
				finishCallback();
			});
		});
	}

	function _setupConfigurationPanel() {
		$('.icon_container').off('mouseover').on('mouseover', function() {
			if (_canHover(this)) {
				_enableIconHover(this, true);
			}
		});
		$('.icon_container').off('mouseout').on('mouseout', function() {
			if (_canHover(this)) {
				_enableIconHover(this, false);
			}
		});
		$('.config-panel-option').off('click').on('click', function() {
			_showSelectionPanel($(this).attr('panel'));
		});
		$('#minimize-icon-container').off('click').on('click', function() {
			$('#ref-video-container').hide();
			$('#minimize-icon-container').hide();
			$('#maximize-icon-container').show();
		});
		$('#maximize-icon-container').off('click').on('click', function() {
			$('#ref-video-container').show();
			$('#maximize-icon-container').hide();
			$('#minimize-icon-container').show();
		});
	}

	function _updateTempParameterJSON(mainConfig, subConfig, step, value) {
		var subConfigJSON = tmpParameterJSON[mainConfig][subConfig];
		if (typeof subConfigJSON == 'undefined') {
			tmpParameterJSON[mainConfig][subConfig] = [];
			subConfigJSON = tmpParameterJSON[mainConfig][subConfig];
		}

		subConfigJSON[parseInt(step) - 1] = value;
	}

	function _selectAnOption(parentId, el) {
		$(parentId + ' .selection-panel-option[select=true]').removeAttr(
				'select');
		$(el).attr('select', true);

		var mainConfig = $(parentId).attr('mainConfig');
		var subConfig = $(parentId).attr('subConfig');
		var step = $(parentId).attr('step');
		_updateTempParameterJSON(mainConfig, subConfig, step, $(el).attr(
				'value'));
	}

	function _setupSelectionPanel() {
		$('#selection-panel .x').off('click').on('click', function() {
			_hideSelectionPanel();
		});
	}

	// Render Screen
	function _submitParameterJSON(callback) {
		parsedParameterJSON = tmpJSONParser.parse(tmpParameterJSON);
		console.log(parsedParameterJSON);

		$.ajax({
			type : 'POST',
			url : api_url + '/sign',
			data : JSON.stringify(parsedParameterJSON),
			contentType : 'application/json',
			success : function(response) {
				console.log(response);
				callback();
			},
			error : function(xhr, textStatus, error) {
				alert(xhr.responseText);
			}
		});
	}

	function _getRenderedAvatarUrl(userId, signName) {
		return api_url + '/public/' + userId + '/' + signName + ".webm";
	}

	function _showRenderedAvatar(parameterJSON) {
		var userId = parameterJSON['userId'];
		var signName = parameterJSON['sinal'];
		$("#render-avatar video").attr("src",
				_getRenderedAvatarUrl(userId, signName));
		$("#render-avatar").fadeIn(300);
	}
	
	function _controlVideo(elId, toPlay) {
		var videoSrc = $(elId).attr("src");
		if (typeof videoSrc == "undefined" ||
				(typeof videoSrc != "undefined" && videoSrc === ""))
			return;
		if (toPlay) {
			$(elId).get(0).play();
		} else {
			$(elId).get(0).pause();
		}
	}
	
	function _playVideo(elId) {
		_controlVideo(elId, true);
	}
	
	function _pauseVideo(elId) {
		_controlVideo(elId, false);
	}
	
	function _showInitialScreen(toShow) {
		if (toShow) {
			$("#initial-screen").fadeIn(300);
			_playVideo("#initial-screen video");
		} else {
			$("#initial-screen").hide();
			_pauseVideo("#initial-screen video");
		}
	}
	
	function _showConfigurationScreen(toShow) {
		if (toShow) {
			$("#configuration-screen").show();
			_playVideo("#ref-video-container video");
		} else {
			$("#configuration-screen").hide();
			_pauseVideo("#ref-video-container video");
		}
	}
	
	function _showRenderScreen(toShow) {
		if (toShow) {
			$("#render-screen").fadeIn(300);
			_playVideo("#render-ref video");
			_playVideo("#render-avatar video");
		} else {
			$("#render-screen").hide();
			_pauseVideo("#render-ref video");
			_pauseVideo("#render-avatar video");
		}
	}

	function _setupRenderScreen() {
		_showConfigurationScreen(false);
		_showRenderScreen(true);
		$("#render-avatar").hide();
		$("#render-loading").fadeIn(300);
		$("#render-button-container .btn").hide();
		$("#finish-button").addClass("disabled");
		$("#finish-button").show();

		_submitParameterJSON(function() {
			$("#render-loading").fadeOut(300);
			$("#finish-button").removeClass("disabled");
			_showRenderedAvatar(parsedParameterJSON);
		});
	}

	function _setupApprovalScreen(parameterJSON) {
		$("#render-button-container .btn").hide();
		$("#approval-button").show();
		$("#approval-msg").show();

		_showRenderedAvatar(parameterJSON);
		_showRenderScreen(true);
	}

	function _submitAnswer(task, deferred, status) {
		var answer = _createAnswer(task, status);
		if (status == "APPROVED") {
			_finishTask(task, deferred, answer);
		} else {
			_saveAnswer(task, deferred, answer);
		}
		_showRenderScreen(false);
		$("#thanks-screen").show();
	}

	function _clearGUI() {
		articulation.clean();
		$(".selection-panel-option").removeAttr('select');
		$(".icon_container").removeAttr("select");
		$(".icon_container[complete=true]").each(
				function() {
					_unfinishConfiguration($(this).attr("name"), $(this).attr(
							"panel"));
				});
	}

	function _setupMainScreen(task, deferred) {
		var last_answer = task.info.last_answer;
		var hasLastAnswer = typeof last_answer != "undefined";
		if (hasLastAnswer) {
			_setupApprovalScreen(last_answer.parameter_json);
		} else {
			_showInitialScreen(true);
		}
		
		$("#start-button").off("click").on("click", function() {
			_showInitialScreen(false);
			_showConfigurationScreen(true);
		});
		$("#ready-button").off("click").on("click", function() {
			if ($(this).hasClass('disabled')) {
				event.preventDefault();
				return;
			}
			_setupRenderScreen();
		});
		$("#render-edit").off("click").on("click", function() {
			_showRenderScreen(false);
			_showConfigurationScreen(true);
		});
		$("#finish-button").off("click").on("click", function() {
			if ($(this).hasClass('disabled')) {
				event.preventDefault();
				return;
			}
			_submitAnswer(task, deferred, "FINISHED");
		});
		$("#approval-button").off("click").on("click", function() {
			_submitAnswer(task, deferred, "APPROVED");
		});
	}

	function _setupGUI(task, deferred) {
		_clearGUI();
		_setupConfigurationPanel();
		_setupSelectionPanel();
		_setupMainScreen(task, deferred);
	}

	function _createAnswer(task, status) {
		var answer = {}
		answer["status"] = status;
		var last_answer = task.info.last_answer;
		var hasLastAnswer = typeof last_answer != "undefined";

		if (hasLastAnswer && status == "APPROVED") {
			answer["number_of_approval"] = last_answer.number_of_approval + 1;
			answer["parameter_json"] = last_answer.parameter_json;
		} else {
			answer["number_of_approval"] = 0;
			answer["parameter_json"] = parsedParameterJSON;
		}
		return answer;
	}

	function _finishTask(task, deferred, answer) {
		var last_answer = task.info.last_answer;
		var hasLastAnswer = typeof last_answer != "undefined";
		var toSubmitUserId =  hasLastAnswer ?
				last_answer.parameter_json["userId"] : _getLoggedUser();
		$.ajax({
			type : "POST",
			url : server_backend_url + "/finish_task",
			data : {
				"task_id" : task.id,
				"project_id" : task.project_id,
				"user_id" : toSubmitUserId,
				"sign_name" : task.info.sign_name,
				"number_of_approval" : answer.number_of_approval
			},
			success : function(response) {
				_saveAnswer(task, deferred, answer);
			},
			error : function(xhr, textStatus, error) {
				alert(xhr.responseText);
			}
		});
	}

	function _saveAnswer(task, deferred, answer) {
		pybossa.saveTask(task.id, answer).done(function() {
			setTimeout(function() {
				$("#thanks-screen").hide();
				deferred.resolve();
			}, 2500);
		});
	}

	function _showCompletedAllTaskMsg() {
		$("#completed-task-msg").hide();
		$("#completed-all-task-msg").show();
		$("#thanks-screen").fadeIn(300);
		// It removes the PyBossa default message
		$(".row .col-md-12 p").remove();
	}
	
	function _setupLoginContainer() {
		if ($("#login-container").html() === "") {
			$("#login-container").html(
					$("#main-navbar-collapse .navbar-right li").html());
		}
	}

	function _loadMainComponents() {
		dynengine.load();
		dynworkflow.load();
		submitSign.setup(upload_signs_url);
		teachedSigns.setup();
		_setupLoginContainer();
	}

	pybossa.presentTask(function(task, deferred) {
		_loadMainComponents();
		if (!$.isEmptyObject(task) && current_task_id != task.id) {
			_loadTaskInfo(task);
			_setupGUI(task, deferred)
			$("#main-container").fadeIn(500);
		} else {
			_showCompletedAllTaskMsg();
		}
	});

	// Private methods
	function _run(projectname) {
		pybossa.setEndpoint("/pybossa");
		pybossa.run(projectname);
	}

	// Public methods
	wikilibras.run = function(serverhost, serverbackend, projectname, apihost,
			uploadsignshost) {
		base_url = serverhost;
		server_backend_url = serverbackend;
		videos_url = base_url + "/videos/";
		api_url = apihost;
		upload_signs_url = uploadsignshost;
		_run(projectname);
	};

	wikilibras.updateTempParameterJSON = function(mainConfig, subConfig, step,
			value) {
		_updateTempParameterJSON(mainConfig, subConfig, step, value);
	}

	wikilibras.hideSelectionPanel = function() {
		_hideSelectionPanel();
	}

	wikilibras.selectAnOption = function(parentId, el) {
		_selectAnOption(parentId, el);
	}

	wikilibras.enableIconCheck = function(container, isHover) {
		_enableIconCheck(container, isHover);
	}

	wikilibras.canHover = function(container) {
		return _canHover(container);
	}

	wikilibras.enableIconHover = function(container, isHover) {
		_enableIconHover(container, isHover);
	}

	wikilibras.getRenderedAvatarUrl = function(userId, signName) {
		return _getRenderedAvatarUrl(userId, signName);
	}

	wikilibras.showTeachContainer = function() {
		$(".sub-main-container").hide();
		$("#teach-container").show();
	}

	wikilibras.showSubmitSignContainer = function() {
		$(".sub-main-container").hide();
		$("#submit-sign-container").show();
	}

	wikilibras.showTeachedSignsContainer = function() {
		$(".sub-main-container").hide();
		$("#teached-signs-container").show();
	}

	wikilibras.showTutorialContainer = function() {
		$(".sub-main-container").hide();
		$("#tutorial-container").show();
	}

}(window.wikilibras = window.wikilibras || {}, jQuery));