function ScrollBar(element, callback)
{
	
	$(element).append('<div class="button_up"></div>');
	this.button_up = $(".button_up", element);
	
	$(element).append('<div class="button_dn"></div>');
	this.button_dn = $(".button_dn", element);
	
	$(element).append('<div class="rail"></div>');
	this.rail = $(".rail", element);
	this.rail_height = $(this.rail).height();
		
	$(this.rail).append('<div class="handle"></div>');
	this.handle = $(".handle", element);
	this.handle_position = 0;
	this.handle_height = $(this.handle).height();
	
	this.max_scroll = this.rail_height - this.handle_height;
	this.dragging = false;
	this.drag_start = 0;
	this.initial_position = 0;
	this.callback = callback;
	
	var _this = this;

	// prevent selection
	$(element).mousedown(function (e) { return false; });
	$(element).click(function (e) { return false; });
	
	// prevent selection IE
	var prev = document.onselectstart;
	document.onselectstart = function (e) { if (_this.dragging) return false; if (prev) return prev(e); else return true; };
	
	$(this.handle).mousedown(function (e)
	{
		_this.dragging = true;
		_this.drag_start = e.pageY;
		_this.initial_position = _this.handle_position;
	});
	
	$().mousemove(function (e)
	{
		if (_this.dragging)
		{
			_this.handle_position = _this.initial_position + (e.pageY - _this.drag_start);
			if (_this.handle_position < 0)
				_this.handle_position = 0;
			
			if (_this.handle_position > _this.max_scroll)
				_this.handle_position = _this.max_scroll;
						
			$(_this.handle).css("top", _this.handle_position + "px");

			if (_this.callback)
			{
				if (!_this.callback.scrollHandler(_this))
					return;
			}
		}
	});

	$().mouseup(function (e)
	{
		_this.dragging = false;
	});
	
	$(this.button_up).click(function (e)
	{
		_this.handle_position -= 50;
		if (_this.handle_position < 0)
			_this.handle_position = 0;
		
		$(_this.handle).css("top", _this.handle_position + "px");		

		if (_this.callback)
			_this.callback.scrollHandler(_this);
	});
	
	$(this.button_dn, element).click(function (e)
	{
		_this.handle_position += 50;
		if (_this.handle_position > _this.max_scroll)
			_this.handle_position = _this.max_scroll;
		
		$(_this.handle).css("top", _this.handle_position + "px");		

		if (_this.callback)
			_this.callback.scrollHandler(_this);
	});
}

/** Returns a value 0..1 representing the scroll bar position in percent.
 */
ScrollBar.prototype.scrollPosition = function()
{
	return this.handle_position / this.max_scroll;
}

ScrollBar.prototype.update = function()
{
	this.rail_height = $(this.rail).height();
	this.max_scroll = this.rail_height - $(this.handle).height();
}

function ScrolledWindow(element)
{
	this.element = element;
	this.scroll_area = $(".scroll-area", this.element);
	this.content = $(".scroll-content", this.element);
	$(this.element).append('<div class="vertical-scroll"></div>');
	this.scroll = new ScrollBar($(".vertical-scroll", this.element), this);
	this.update();
/*	this.scroll_area =$(".scroll-area", element);
	this.scroll_area_height = $(this.scroll_area).height();
	this.content = $(".scroll-content", element);
	$(element).append('<div class="vertical-scroll"></div>');
	this.scroll = new ScrollBar($(".vertical-scroll", element), this);*/
}

ScrolledWindow.prototype.update = function()
{
	this.scroll_area_height = $(this.scroll_area).height();
	this.scroll.update();
}

ScrolledWindow.prototype.scrollHandler = function(scroll_bar)
{
	if ($(this.content).height() > this.scroll_area_height)
	{
		var h = $(this.content).height() - this.scroll_area_height;
		$(this.content).css("top", (- scroll_bar.scrollPosition() * h) + "px");
		
		return true;
	}
	return false;
}

//create scrolled window objects
$(document).ready(function(){
	$('.scrolled-window').each(function(i,e){

		if (!$(e).hasClass("no-auto-scroll"))
			$(e).data("scrolled_window", new ScrolledWindow(e));
	});
});