(function($) {

$.widget("ui.scrollable", {
	options : {
		speed : 200,
		height : "250px"
	},

	_create : function() {
		var self = this,
			options = this.options;

//		if($(self.element).innerHeight()) options.height = $(self.element).innerHeight();

		var getTop = function() {
			var top = $(self.element).css("top");
			top = top.slice(0,-2)
			return parseInt(top);
		};

		var scrollUp = function() {
			if(getTop() < 0) {
				$(self.element).animate({"top": "+=5px"}, options.speed, "linear", scrollUp);
			}
		};

		var scrollDown = function() {
			if(-1*getTop() < $(self.element).innerHeight() - $(self.element).parent("div").height()) {
				$(self.element).animate({"top": "-=5px"}, options.speed, "linear", scrollDown);
			}
		};

		var stop = function() {
			$(self.element).stop(true);
		};

		var height = options.height;
		var wrapper = $("<div />", {
			css : {
				width : $(self.element).innerWidth(),
				height : height
			},
			className : "ui-scrollable"
		});

		$(self.element)
			.wrap(wrapper)
			.css({
				"position": "relative",
				"top": "0px",
				"height": "auto"
				});

		$("<div />", {
			className : "ui-scrollable-nav ui-scrollable-nav-up",
			mouseover : scrollUp,
			mouseout : stop
		}).appendTo($(self.element).parent("div"));

		$("<div />", {
			className : "ui-scrollable-nav ui-scrollable-nav-down",
			mouseover : scrollDown,
			mouseout : stop
		}).appendTo($(self.element).parent("div"));
	}
});

})(jQuery);