var ScrollerArea = new Class({
	pixels_per_step: 5,
	
	initialize: function(elem){
		this.outer_height = $(elem).parentNode.clientHeight;		
		this.inner_height = $(elem).clientHeight;
		this.amount_to_scroll = this.inner_height - this.outer_height;
		this.steps = Math.ceil(this.amount_to_scroll / this.pixels_per_step);
	},
	
	needs_scroller: function(){
		return (this.outer_height < this.inner_height);
	}
	
});

// only one scroller per page with this, because s (ScrollerArea) is global
function make_scroller(area_to_scroll, slider_area, slider, number_of_elements, start_at) {
	
	//inner_scroller_area_height = $$("#area_to_scroll .inner_slider_area")[0].clientHeight;
	s = new ScrollerArea(area_to_scroll);

	// the idea here is to start the scroller at the current element in the case of a list
	// it doesn't work exactly as I planed but it seems to work really well, so I'll leave it for now
	// but... well see
	if (number_of_elements && start_at) {
		steps_per_element = Math.ceil(s.steps / number_of_elements);
		start = steps_per_element * start_at;
	} else {
		start = 0;
	}

	if (s.needs_scroller()) {
		var slider = new Slider($(slider_area), $(slider), {	
			steps: s.steps,	
			mode: "vertical",
			onChange: function(step){				
				$(area_to_scroll).setStyle("top", (0-step)*s.pixels_per_step+"px");
			}
		}).set(start);
	} else {
		$(slider).setStyle("background", 'none')
	}
}



function vertical_center(element) {
	outer_height = $(element).parentNode.clientHeight;		
	inner_height = $(element).clientHeight;
	if (outer_height > inner_height) {
		amount = Math.round((outer_height - inner_height) / 2);
		$(element).setStyle("position", 'relative');
		$(element).setStyle("top", amount + "px");
	}
}