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

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

		self.base = new ACTComponent($(element), params);
		self.content = ko.observable("");
		self.element = element;

		self.onDomUpdated = function() {
			var $collapsables = $(self.element).find("[collapse]");
			for (var i = 0; i < $collapsables.length; i++)
			{
				var $collapsable = $($collapsables[i]);
				var className = "_initialisationDone_";
				if ($collapsable.hasClass("_initialisationDone_"))
					continue;
				$collapsable.addClass("_initialisationDone_");

				$collapsable.on("click", function() {
					var $this = $(this);

					var $target = $(self.element).find($(this).attr("collapse"));
					if ($target.is(":visible")) {
						$this.addClass("__collapsed__");
						$target.slideUp(200);
					} else {
						$this.removeClass("__collapsed__");
						$target.slideDown(200);
					}
				});
				$collapsable.prepend('<img class="__collapseButton__" src="images/dropdown_black.png" height="20" width="20"/>');
			}

			params.ready(true);
		}

		self.base.onRefresh = function(obj) {
			params.ready(false);
			self.content(obj.Content);

			// ready when dom updated
			setTimeout(self.onDomUpdated, 0);
		}

		self.base.initialize();
	}

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

});

