define(['scripts/knockout-3.3.0','scripts/ACTComponent.js', "scripts/ACTUtils", 'jqx/jqxtooltip'], function(ko, ACTComponent, ACTUtils) {

	function ExtensionFolderComponentViewModel(params, element) {
		var self = this;
		self.base = new ACTComponent($(element), params);

		self.folders = ko.observableArray([]);
		self.debugMode = ko.observable(false);

		self.transTextHelp = ko.observable(params.Model.TranslatedTexts["Help"]);
		self.transTextAddFolder = ko.observable(params.Model.TranslatedTexts["AddFolder"]);
		self.transTextCatDev = ko.observable(params.Model.TranslatedTexts["CatDevelopment"]);
		self.transTextCatAdditionalFolders = ko.observable(params.Model.TranslatedTexts["CatAdditionalFolders"]);
		self.transTextDebugMode = ko.observable(params.Model.TranslatedTexts["DebugMode"]);

		// Input with "text-overflow:ellipsis;"" doesn't work well in webkit and in some other navigator. So we do it here.
		self.updateEllipsisValue = function(folderObject, $input) {
			var $garbageElement = $("<div></div>");
			$garbageElement.addClass("actNormal1");
			$garbageElement.css("position", "absolute");
			$(element).find(".folders").append($garbageElement);
			$garbageElement.text("");
			for (var i = 0; i < folderObject.realValue.length; i++) {
				$garbageElement.text($garbageElement.text() + folderObject.realValue[i]);
				if ($garbageElement.width() > $input.width()) {
					var garbageElementText = $garbageElement.text();
					var newValue = garbageElementText.substr(0, garbageElementText.length - 5) + "...";
					folderObject.valueEll = newValue;
					$input.val(newValue);
					folderObject.isEllipsis = true;
					break;
				}
				folderObject.isEllipsis = false;
			}
			$garbageElement.remove();
		}

		self.updateAllEllipsis = function() {
			var $inputs = $(element).find(".input");
			for (var inputsIndex = 0; inputsIndex < $inputs.length; inputsIndex++) {
				var folderObject = self.folders()[inputsIndex];
				if (typeof folderObject != 'undefined') {
					var $input = $($inputs[inputsIndex]);
					self.updateEllipsisValue(folderObject, $input);
				}
			}
		}

		params.baseModel.resizeFunctions[params.baseModel.resizeFunctions.length] = function(height,width) {
			self.updateAllEllipsis();
		}

		self.debugModeClicked = function(e) {
			self._debugModeClicked(self.debugMode());
			return true;
		}

		self.base.onRefresh = function(obj) {
			self.AddClicked = obj.AddClicked;
			self.base.addCallback(self, "addClick", "AddClicked", []);

			self.DebugModeClicked = obj.DebugModeClicked;
			self.base.addCallbackX(self, "_debugModeClicked", "DebugModeClicked", []);

			var folderObjects = [];
			for (var indexFolder = 0; indexFolder < obj.Folders.length; indexFolder++) {
				var folder = obj.Folders[indexFolder] || "";
				var folderObject = {
					valueEll: folder,
					realValue: folder,
					index: indexFolder,
					isEllipsis: false,
				};

				folderObject.RemoveClicked = obj.RemoveClicked;
				folderObject.OnChange = obj.OnChange;
				folderObject.ExploreClicked = obj.ExploreClicked;

				self.base.addCallback(folderObject, "removeClick", "RemoveClicked", [indexFolder]);
				self.base.addCallback(folderObject, "exploreClick", "ExploreClicked", [indexFolder]);

				folderObject.onchange = function(data, event) {
					this.valueChanged(this.index, this.valueEll);
				}
				self.base.addCallbackX(folderObject, "valueChanged", "OnChange");

				folderObject.mouseenter = function(data, event) {
					if ($(event.target).is(":focus") || !data.isEllipsis)
						return;

					// create tooltip
					ACTUtils.CreateTooltip($(event.target), data.realValue, false, {position:"bottom"});
					$(event.target).jqxTooltip("open");
				}

				folderObject.mouseleave = function(data, event) {
					$(event.target).jqxTooltip("destroy");
				}

				folderObject.focus = function(data, event) {
					$(event.target).jqxTooltip("destroy");
					event.target.value = data.realValue;
				}

				folderObject.blur = function(data, event) {
					event.target.value = data.valueEll;
				}

				folderObjects.push(folderObject);
			}

			self.folders(folderObjects);
			self.debugMode(obj.DebugMode);

			// setTimeout : to be after knockout databind
			setTimeout(function() {
				self.updateAllEllipsis();
			}, 0);
		}

		self.base.initialize();
		params.ready(true);
	}

	return {
		createViewModel: function(params, componentInfo) {
			return new ExtensionFolderComponentViewModel(params, componentInfo.element);
		}
	};
});
