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

	function BuildBinaryExtensionComponentViewModel(params, element) {
		var self = this;

		self.base = new ACTComponent($(element), params);
		self.element = element;
		self.extension = ko.observable("");
		self.outputs   = [];
		self.folder    = ko.observable("");

		self.transTextFolder = ko.observable(params.Model.TranslatedTexts["Folder"]);
		self.transTextBuild  = ko.observable(params.Model.TranslatedTexts["Build"]);
		self.transTextCancel = ko.observable(params.Model.TranslatedTexts["Cancel"]);
		self.transTextClose  = ko.observable(params.Model.TranslatedTexts["Close"]);
		self.transTextLegend = ko.observable(params.Model.TranslatedTexts["Legend"]);
		self.transTextOptA   = ko.observable(params.Model.TranslatedTexts["OptA"]);
		self.transTextOptB   = ko.observable(params.Model.TranslatedTexts["OptB"]);
		self.transTextOptC   = ko.observable(params.Model.TranslatedTexts["OptC"]);

		self.securityInputValid = false;
		self.folderInputValid = false;

		// elements
		var $element      = $(self.element);
		var $allButtons   = $element.find(".button, .inactiveButton :not(.buildButton)");
		var $outputs      = $element.find(".outputs");
		var $buttons      = $element.find(".buttons");
		var $folderInfo   = $element.find(".folderInfo");
		var $folderEntry  = $element.find(".folderEntry");
		var $folderButton = $element.find(".folderButton");
		var $radioButtons = $element.find(".securityOption input");
		var $buildButton  = $element.find(".buildButton");
		var $progressBar  = $element.find(".progress");

		// callbacks
		self.OpenFolderClicked = params.Model.OpenFolderClicked;
		self.BuildClicked      = params.Model.BuildClicked;
		self.CancelClicked     = params.Model.CancelClicked;
		self.CloseClicked      = params.Model.CloseClicked;

		self.clickBuild = function(object, event) {
			if($(event.target).hasClass("inactiveButton"))   return;
			if ($buildButton.text() == self.transTextBuild()) {
				self.clickBuildB($folderEntry.val(), $radioButtons.filter(":checked").val());
			} else {
				self.clickCancelB();
			}
		}

		self.clickOpenFolder = function(object, event) {
			if($(event.target).hasClass("inactiveButton"))   return;
			self.takeNewFolder = true;
			self.clickOpenFolderB();
		}

		self.clickClose = function(object, event) {
			if($(event.target).hasClass("inactiveButton"))   return;
			self.takeNewFolder = true;
			self.clickCloseB();
		}

		self.base.addCallback(self, "clickOpenFolderB", "OpenFolderClicked", []);
		self.base.addCallbackX(self, "clickBuildB", "BuildClicked");
		self.base.addCallback(self, "clickCancelB", "CancelClicked", []);
		self.base.addCallback(self, "clickCloseB", "CloseClicked", []);

		self.base.onRefresh = function(obj) {
			params.ready(false);
			if (self.extension() != obj.ExtensionName) {
				$radioButtons.prop( "checked", false );
				self.securityInputValid = false;
			}

			self.extension(obj.ExtensionName);

			var outputsChange = obj.Outputs.length != self.outputs.length;

			// ouputs
			if (obj.Outputs.length < self.outputs.length) {
				self.outputs = []
				$outputs.children().remove();
			}

			for (var i = self.outputs.length; i < obj.Outputs.length; i++) {
				var output = obj.Outputs[i];
				var newElem = $("<p></p>");
				newElem.addClass("outputsElement");
				newElem.addClass("output" + output.Type);
				newElem.text(output.Value);

				$outputs.append(newElem);
				self.outputs.push(output);
			}

			if (self.takeNewFolder) {
				self.takeNewFolder = false;
				self.folder(obj.OutputFolder);
			}

			var progression = 100;
			if (self.outputs.length != 0)
				progression = self.outputs[self.outputs.length - 1].Progression;

			if (progression != 100) {
				$allButtons.removeClass("button");
				$allButtons.addClass("inactiveButton");
				$folderEntry.prop("disabled", true);
				$radioButtons.prop("disabled", true);
				$buildButton.text(self.transTextCancel());

				$progressBar.show();
				$progressBar.find(".advancement").css("width", progression + "%");
			} else {
				$allButtons.removeClass("inactiveButton");
				$allButtons.addClass("button");
				$folderEntry.prop("disabled", false);
				$radioButtons.prop("disabled", false);
				$buildButton.text(self.transTextBuild());

				self.folderInputValid = $folderEntry.val() != "";
				self.UpdateBuildButton();

				$progressBar.hide();
			}

			// scrollbar at the bottom
			if (outputsChange) {
				$outputs.scrollTop($outputs[0].scrollHeight);
			}
			params.ready(true);
		}

		// activate/desactivate build button
		self.UpdateBuildButton = function() {
			if (self.securityInputValid && self.folderInputValid) {
				$buildButton.removeClass("inactiveButton");
				$buildButton.addClass("button");
			} else {
				$buildButton.removeClass("button");
				$buildButton.addClass("inactiveButton");
			}
		}

		$folderEntry.on("input", function(event) {
			self.folderInputValid = $folderEntry.val() != "";
			self.UpdateBuildButton();
		});

		$radioButtons.on("change", function(event) {
			self.securityInputValid = true;
			self.UpdateBuildButton();
		});

		params.baseModel.resizeFunctions[params.baseModel.resizeFunctions.length] = function(height,width) {
			// text area height
			var outputHeight = height - $outputs.position().top - $buttons.outerHeight(true)
			$outputs.outerHeight(outputHeight);

			// progress dims
			$progressBar.outerHeight($buttons.height());
			$progressBar.width(width - $buttons.outerWidth(true));

			$folderEntry.css({
				"left": ($folderInfo.position().left + $folderInfo.outerWidth() + 5) + "px",
				"right" : (width - $folderButton.position().left + 5) + "px"
			});
		}

		self.base.initialize();
	}

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

});

