$(document).ready(function(){
	$("[rel='scrollable']").each(function(){
		attachScrollers($(this));
	});
});	

function attachScrollers(scrollable) {
	var __SPEED__ = 30;
	var _control = $('<div class="scroll_control"><a class="scroll_up" href="#"><img src="/common/images/blank.gif" width="14" height="20" alt="" border="0" /></a><div id="scroll_inner"></div><a class="scroll_down" href="#"><img src="/common/images/blank.gif" width="14" height="20" alt="" border="0" /></a></div>');

	var scrollPane = scrollable;
	var container = scrollPane.parent();
	var containerHeight = container.height();
	var scrollPaneHeight = scrollPane.height();
	var total = scrollPaneHeight - containerHeight;
	var maxScrollDown = 0;

	_control.appendTo(container.parent());

	// var __SCROLL_CONTROL_SEL__ = "#" + control_id;
	var __SCROLL_BTN_UP_SEL__ = _control.children(".scroll_up");
	var __SCROLL_BTN_DOWN_SEL__ = _control.children(".scroll_down");
	
	var __CONTENT_SEL__ = _control.attr("rel");
	// var __CONTAINER_SEL__ = $(scrollable.attr("rel")).parent;


	$(__SCROLL_BTN_UP_SEL__).click(function(){ return false; });
	$(__SCROLL_BTN_DOWN_SEL__).click(function(){ return false; });


	var scrollUp = function(){
		// var current = scrollPane.position()['top'];
		var current = scrollPane.attr("offsetTop");
		var newTop = current + __SPEED__;

		// console.log("newTop: " + newTop);
		// console.log("scrollPane.offsetTop (pre-scroll): " + scrollPane.attr("offsetTop"));
		if(newTop < 0){		
			scrollPane.css("top", newTop + "px");
		} else {
			scrollPane.css("top", "0px");
		}
		// console.log("scrollPane.offsetTop (post-scroll): " + scrollPane.attr("offsetTop"));
		return false;
	};

	var scrollDown = function(){
		// var current = scrollPane.position()['top'];
		var current = scrollPane.attr("offsetTop");
		var newTop = current - __SPEED__;

		// console.log("newTop: " + newTop);
		// console.log("maxScrollDown: " + maxScrollDown);
		// console.log("scrollPane.offsetTop (pre-scroll): " + scrollPane.attr("offsetTop"));
		if(newTop >= maxScrollDown){
			scrollPane.css("top", newTop + "px");
		} else {
			scrollPane.css("top", "auto");
			scrollPane.css("bottom", "0px");
		}
		// console.log("scrollPane.offsetTop (post-scroll): " + scrollPane.attr("offsetTop"));
		return false;
	};

	if(scrollPaneHeight > containerHeight){
		container.css("overflow", "hidden");
		scrollPane.css("position", "absolute");
		scrollPane.css("top", "0px");
		scrollPane.css("left", "0px");
	
		if(container.attr("offsetHeight") > containerHeight){
			containerHeight = container.attr("offsetHeight");
		};
		if(scrollPane.attr("offsetHeight") > scrollPaneHeight){
			scrollPaneHeight = scrollPane.attr("offsetHeight");
		};

		// routine to measure the real height by how far the scrollPane can travel
		// container.css("overflow", "hidden");
		scrollPane.css("top", "auto");
		scrollPane.css("bottom", "0px");
		maxScrollDown = scrollPane.attr("offsetTop");
		// then set everything back
		scrollPane.css("bottom", "auto");
		scrollPane.css("top", "0px");
		// container.css("overflow-y", "auto");
	
		_control.show();
		_control.children().show();
		$(__SCROLL_BTN_UP_SEL__).click(scrollUp);
		$(__SCROLL_BTN_DOWN_SEL__).click(scrollDown);
	
	
		var calculatedLeft = parseInt(container.css("left").replace("px", "")) + parseInt(container.css("width").replace("px", "")); // + 18;
		_control.css("top", container.css("top"));
		_control.css("left", calculatedLeft + "px");
		_control.css("height", container.css("height"));
	
		var doScroll = null;
		$(__SCROLL_BTN_DOWN_SEL__).mouseup(function(){
			clearInterval(doScroll);
		});
		$(__SCROLL_BTN_DOWN_SEL__).mousedown(function(){
			doScroll = setInterval(scrollDown, 200);
		});
		$(__SCROLL_BTN_UP_SEL__).mouseup(function(){
			clearInterval(doScroll);
		});
		$(__SCROLL_BTN_UP_SEL__).mousedown(function(){
			doScroll = setInterval(scrollUp, 200);
		});
	
	}
}