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

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

		var $element    = $(element);
		var $caption    = $element.find(".caption");
		var $image      = $element.find(".image");
		var $path       = $element.find(".path");
		var $leftArrow  = $element.find(".leftArrow");
		var $rightArrow = $element.find(".rightArrow");

		self.caption = null;
		self.image = null;
		self.used = false;
		self.mouseIsIn = false;
		self.isFirstElement = false;

		$element.css("overflow", "hidden");

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

			self.isFirstElement = obj.IsFirstElement;
			if (self.isFirstElement && $leftArrow.is(":visible")) {
				$image.css("left", $image.position().left - $leftArrow.width() + "px");
				$caption.css("left", $caption.position().left - $leftArrow.width() + "px");
				$leftArrow.hide();
			}

			self.caption = obj.Caption;
			$caption.text(self.caption);

			self.used = obj.Used;
			self.updateColor();

			self.image = obj.Image;
			$image.attr("src", self.image);

			var effectiveWidth = $caption.position().left + $caption.width();
			$element.find(".rectangle").attr("width", effectiveWidth + "px");

			self.Clicked = obj.Clicked;
			self.base.addCallbackX(self, "clicked", "Clicked");

			params.ready(true);
		}

		self.updateColor = function() {
			if (self.mouseIsIn || self.used)
				$element.addClass("hovered");
			else
				$element.removeClass("hovered");
		}

		$element.on("mouseenter", function() {
			self.mouseIsIn = true;
			self.updateColor();
		});

		$element.on("mouseleave", function() {
			self.mouseIsIn = false;
			self.updateColor();
		});

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

		self.base.initialize();
	}

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