function ScrollablePane(paneSelector, controllerSelector)
{
	var NUM_ITEMS_TO_SHOW = 5;
	var SCROLL_SPEED = 500;

	var me = this;
	var selectedGroup = 0;
	this.$pane = $(paneSelector);
	this.$controller = $(controllerSelector);
	this.$hotels = this.$pane.find('li');

	try
	{
		this.itemWidth = $(this.$hotels[0]).outerWidth(true);
		this.numHotels = this.$hotels.length;
		this.numGroups = Math.ceil(this.$hotels.length/NUM_ITEMS_TO_SHOW);
		this.scrollPx = NUM_ITEMS_TO_SHOW * this.itemWidth;
		this.$pane.width(this.numHotels * this.itemWidth);
		this.$pane.css('visibility', 'visible');

		this.isActive = false;

		if (this.numGroups <2)
			BT.disable(this.$controller.find('.next'));
	}
	catch (err) // there are no items;
	{
		// TODO: This should hide the tab
	}

	// add event handler
	this.$controller.click(function (event) {
		event.preventDefault();
		var $target = $(event.target);
		if ($target.hasClass('enabled') && $target.hasClass('prev'))
			me.scroll(-1);
		else if ($target.hasClass('enabled') && $target.hasClass('next'))
			me.scroll(+1);

		me.refreshController($target.parent());
	});

	// privileged
	this.refreshController = function($scroller)
	{
		if (selectedGroup == 0)
			BT.disable($scroller.children('.prev'));

		if (selectedGroup == (this.numGroups - 1))
			BT.disable($scroller.children('.next'));

		if (selectedGroup == 1)
			BT.enable($scroller.children('.prev'));

		if (selectedGroup == (this.numGroups - 2))
			BT.enable($scroller.children('.next'));
	}

	this.scroll = function(amt)
	{
		var scrollPx = this.scrollPx * amt;
		this.$pane.animate({left: (this.$pane.position().left - scrollPx) }, SCROLL_SPEED);
		selectedGroup += amt;
	}

	this.deactivate = function()
	{
		this.$controller.hide();
		this.$pane.hide();
	}
}