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

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

		self.text = "";

		self.base = new ACTComponent($(element), params);
		$(element).css("background-color", "#ffffff");
		$(element).css("color", "#6D6E71");

		self.base.onRefresh = function(obj) {
			self.Clicked = obj.Clicked;
			self.text = obj.Text;
			self.base.addCallback(self, "click", "Clicked", []);
		}

		var desactivateSelectionFunction = function() {
			if (typeof this.onselectstart != 'undefined') {
				this.onselectstart = function() { return false; };
			} else if (typeof this.style.MozUserSelect != 'undefined') {
				this.style.MozUserSelect = 'none';
			} else {
				this.onmousedown = function() { return false; };
			}
		}
		$plusElement = $(element).find(".plus");
		$plusElement.each(desactivateSelectionFunction);
		$(element).attr("ignore-search", true);

		// animation
		$(element).on("mouseenter", $plusElement, function(event) {
			var elem = event.data;
			elem.text(self.text);
			elem.css("font-size", "36px");

			$({deg: 0}).animate({deg: 360}, {
				duration: 500,
				step: function(now) {
					elem.css({
						transform: 'rotate(' + now + 'deg)',
					});
				},
			});
		});

		$(element).on("mouseleave", $plusElement, function(event) {
			var elem = event.data;
			elem.text("+");
			elem.css("font-size", "64px");
		});

		$(element).on("click", function(event) {
			self.click();
		});

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

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

});

