BLIP.Class.create("BLIP.Unit.ShoutOuts", BLIP.Unit,
	function(config) {
		BLIP.Unit.call(this, config);
	},
	{
		selector : "#ShoutOuts",
		listWidth : 0,
		containerWidth : 0,
		handleActive : false,
		contentOffset : 0,
		scrollbarOffset : 0,

		init : function() {
			this.initContents();
			this.initListWidth();

			if(this.listWidth > this.containerWidth) {
				this.initScrollbarWidth();
				this.initEvents();
			}
		},

		initContents : function() {
			this.scrollbar = this.domRoot.find(".Scrollbar");
			this.content = this.domRoot.find(".ShoutOutList");
			this.container = this.domRoot.find(".ScrollableX");
		},

		initListWidth : function() {
			this.domRoot.find(".ShoutOutList").width(
				this.domRoot.find(".ShoutOutList li").outerWidth(true) *
				this.domRoot.find(".ShoutOutList li").length
			);
			this.listWidth = this.domRoot.find(".ShoutOutList").outerWidth();
			this.containerWidth = this.domRoot.find(".ScrollableX").width();
			this.maxContentOffset = this.listWidth - (this.containerWidth);
		},

		initScrollbarWidth : function() {
			this.domRoot.find(".Scrollbar").width(
				Math.max(((this.containerWidth / this.listWidth) * this.containerWidth), 100)
			);
			this.domRoot.find(".ScrollbarGutter").css("display","block");
			this.maxScrollbarOffset = this.domRoot.find(".ScrollbarGutter").width() - this.domRoot.find(".Scrollbar").width();
		},

		initEvents : function() {
			this.domRoot.find(".Scrollbar").bind("mousedown",this.delegate(this.on_handleClick));
			$(document).bind("mouseup", this.delegate(this.on_mouseUp));
			$(document).bind("mousemove", this.delegate(this.on_mouseMove));
		},

		on_handleClick : function(event) {
			this.handleActive = true;
			this.mouseX = event.clientX;
			event.preventDefault();
		},

		on_mouseUp : function() {
			this.handleActive = false;
		},

		on_mouseMove : function(event) {
			var delta = 0,
					mouseX,
					scrollbar,
					interOffset;

			if(this.handleActive) {
				delta = event.clientX - this.mouseX;
				this.mouseX = event.clientX;
				this.setScrollbarPosition(this.calculateScrollbarPosition(
					delta + this.scrollbarOffset
				));
				this.setContentPosition(this.calculateContentPosition());
			}
			event.preventDefault();
		},

		calculateScrollbarPosition : function(offset) {
			var ret = typeof offset !== 'undefined' ? offset : this.contentOffset * this.scrollbar.width() / this.content.width();

			if(ret > this.maxScrollbarOffset) {
				ret = this.maxScrollbarOffset;
			}
			else if (ret < 0) {
				ret = 0;
			}
			return ret;
		},

		calculateContentPosition : function(offset) {
			var ret = typeof offset !== 'undefined' ? offset : this.scrollbarOffset * this.content.width() / this.scrollbar.width();

			if(ret > this.maxContentOffset) {
				ret = this.maxContentOffset;
			}
			else if (ret < 0) {
				ret = 0;
			}
			return ret;
		},

		setScrollbarPosition : function(offset) {
			this.scrollbarOffset = offset;
			this.scrollbar.css("left", offset);
		},

		setContentPosition : function(offset) {
			this.contentOffset = offset;
			this.content.css("left", offset * -1);
		}
	}
);