(function(dynworkflow, $, undefined) {

	// Workflow configuration
	var jsonWF = {};
	var baseUrl = "";
	
	// Main configurations: right-hand, left-hand and facial
	var mainConfig = "";
	// The converted Main Config (right/left-hand) to hand for using the same configuration
	var preprocessedMainConfig = "";
	// Subconfigurations: Movimento, articulacao, configuracao, orientacao, etc
	var currentSubconfig = "";
	var currentSubConfigName = "";
	var currentSubconfigParent = "";
	var currentStep = 0;
	
	function _preprocessMainConfig(config) {
		config = config.replace("right-hand", "hand");
		config = config.replace("left-hand", "hand");
		return config;
	}
	
	function _getFirstKey(json) {
	    var first_key = undefined;
	    for (first_key in json) break;
	    return first_key;
	}
	
	function _getAttributes(json) {
		var result = [];
	    for (attr in json) {
	    	result.push(attr);
	    }
	    return result;
	}
	
	function _getNextSubConfig() {
	    var attrs = _getAttributes(currentSubconfigParent);
	    for (var i = 0; i < attrs.length; i++) {
	    	if (attrs[i] == currentSubConfigName && i < attrs.length - 1) {
	    		return attrs[i+1];
	    	}
	    }
	    return -1;
	}
	
	function _showCurrentSubconfig() {
		_showSubconfiguration(mainConfig, currentSubConfigName, currentStep);
	}
	
	// It checks if a selection panel is already loaded
	function _isSubconfigurationPanelLoaded(mainConfig, subConfig, stepNumber) {
		var stepNumber = stepNumber + 1;
		return $(".selection-panel-body[mainConfig=" + mainConfig + "][subConfig=" + subConfig +
				"][step=" +	stepNumber + "]").length > 0;
	}
	
	function _showLoadedSubconfigurationPanel(mainConfig, subConfig, stepNumber) {
		var stepNumber = stepNumber + 1;
		return $(".selection-panel-body[mainConfig=" + mainConfig + "][subConfig=" + subConfig +
				"][step=" +	stepNumber + "]").show();
	}
	
	// It renders or shows the requested selection panel
	function _showSubconfiguration(mainConfig, subConfig, stepNumber) {
		$(".selection-panel-body").hide();
		if (_isSubconfigurationPanelLoaded(mainConfig, subConfig, stepNumber)) {
			_showLoadedSubconfigurationPanel(mainConfig, subConfig, stepNumber);
		} else {
			var step = currentSubconfig[stepNumber];
			step = typeof step == "undefined" ? "passo-1" : step;
			dynengine.render(baseUrl, "/" + preprocessedMainConfig + "/" + subConfig +
					"/" + step + ".html", "#selection-panel", true);
		}
		_selectTimelineIcon(mainConfig, subConfig, true);
	}
	
	function _selectSubConfig(subConfig) {
		currentSubConfigName = subConfig;
		currentSubconfig = currentSubconfigParent[currentSubConfigName];
		currentStep = 0;
		
		_showCurrentSubconfig();
	}
	
	// It show the next selection panel on the workflow
	function _showNextSubConfig() {
		currentStep = currentStep + 1;
		if (currentStep < currentSubconfig.length) {
			_showCurrentSubconfig();
		} else {
			var nextSubConfig = _getNextSubConfig();
			if (nextSubConfig != -1) {
				dynworkflow.selectSubConfig(nextSubConfig);
			} else {
				wikilibras.hideSelectionPanel();
			}
		}
	}
	
	// A callback function to be called when the user selects a option on a panel
	function _userSelectedAnOption() {
		if (currentStep == currentSubconfig.length - 1) {
			_setupCheckIcon(mainConfig, currentSubConfigName);
		}
		_showNextSubConfig();	
	}
	
	// Timeline functions
	function _selectTimelineIcon(mainConfig, subConfig) {
		var icon_id = ".subconfiguration-panel[mainConfig=" + mainConfig +
				  "] .icon_container[json_name=" + subConfig + "]";
		
		var previousSelected = $(".subconfiguration-panel[mainConfig=" + mainConfig 
			+ "] .icon_container[select=true]").attr("json_name");
		if (typeof previousSelected != "undefined") {
			_deselectTimelineIcon(mainConfig, previousSelected);
		}
		
		wikilibras.enableIconHover($(icon_id), true);
		$(icon_id).attr("select", true);
	}
	
	function _deselectTimelineIcon(mainConfig, subConfig) {
		var icon_id = ".subconfiguration-panel[mainConfig=" + mainConfig +
		  "] .icon_container[json_name=" + subConfig + "]";
		
		if ($(icon_id + "[complete=true]").length > 0) {
			_setupCheckIcon(mainConfig, subConfig);
		} else {
			wikilibras.enableIconHover($(icon_id), false);
			$(icon_id).attr("select", false);
		}
	}
	
	function _setupCheckIcon(mainConfig, subConfig) {
		var icon_id = $(".subconfiguration-panel[mainConfig=" + mainConfig +
				  "] .icon_container[json_name=" + subConfig + "]");
		wikilibras.enableIconCheck(icon_id, true);
		$(icon_id).attr("complete", true);
		$(icon_id).attr("select", false);
	}
	
	function _isTimelineLoaded() {
		return $(".subconfiguration-panel[mainConfig=" + mainConfig + "]").length > 0;
	}
	
	function _setupTimelineIcons(timelineBaseId) {
		$(timelineBaseId + " .icon_container[json_name]").hide();
		
		for (var name in currentSubconfigParent) {
			$(timelineBaseId + " .icon_container[json_name=" + name + "]").show();
		}
		if (preprocessedMainConfig == "hand") {
			$(timelineBaseId + " .icon_container[json_name=movimento]").show();
			_setupCheckIcon(mainConfig, "movimento");
			//TODO Refact
			_selectTimelineIcon(mainConfig, "articulacao");
		}
		$(timelineBaseId + " .icon_container[json_name]").off("click").on("click",
			     		function() {
			     			var subConfig = $(this).attr("json_name");
			     			_selectSubConfig(subConfig);
		});
		
		$(timelineBaseId).show();
	}
	
	function _setupTimeline() {
		var timelineBaseId = ".subconfiguration-panel[mainConfig=" + mainConfig + "]";
		if (_isTimelineLoaded()) {
			$(timelineBaseId).show();
		} else {
			dynengine.render(baseUrl, "/" + preprocessedMainConfig +
					"/timeline.html", "#selection-panel", false, function() {
				_setupTimelineIcons(timelineBaseId);
			});
		}
	}
	
	// Public methods
	dynworkflow.selectMainConfig = function(config) {
		mainConfig = config;
		preprocessedMainConfig = _preprocessMainConfig(mainConfig);
		currentSubConfigName = _getFirstKey(jsonWF[preprocessedMainConfig]);
		currentSubconfig = jsonWF[preprocessedMainConfig][currentSubConfigName];
		currentSubconfigParent = jsonWF[preprocessedMainConfig];
		currentStep = 0;
		
		_showCurrentSubconfig();
		
		if (preprocessedMainConfig != "hand" || _isTimelineLoaded()) {
			_setupTimeline();
		}
	}
	
	dynworkflow.selectMovement = function(movement) {
		var subconfigJSON = currentSubconfig[movement]
		currentSubConfigName = _getFirstKey(subconfigJSON);
		currentSubconfigParent = subconfigJSON;
		currentSubconfig = subconfigJSON[currentSubConfigName];
		currentStep = 0;
		
		_showCurrentSubconfig();
		_setupTimeline();
	}
	
	dynworkflow.selectSubConfig = function(subConfig) {
		_selectSubConfig(subConfig);
	}
	
	dynworkflow.userSelectedAnOption = function() {
		_userSelectedAnOption();
	}
	
	dynworkflow.load = function() {
		baseUrl = $('#server-url').data('url');
		$.get(baseUrl + "/conf/selection-workflow-json", function(result) {
			jsonWF = $.parseJSON(result);
		}).fail(function() {
			console.log("Failed to load the workflow configuration");
		});
	}

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