// ---------------------------
// SCROLLERS
// ---------------------------

var currentTop = 0;
var containerHeight = 210;

function hookScrollers() {
	$(".scrolldown").click(function () {
		if(currentTop>($(".scrollcontainer").height()-$(".scrollcontent").height())) {
			currentTop = currentTop - (containerHeight-45);
			$(".scrollcontent").animate({ top:currentTop }, {
				duration: 1300,
				easing: "easeInOutQuart"
			});
		}
		return false;
    });

	$(".scrollup").click(function () {
		if(currentTop<0) {
			currentTop = currentTop + (containerHeight-45);
			$(".scrollcontent").animate({ top:currentTop }, {
				duration: 1300,
				easing: "easeInOutQuart"
			});
		}
		return false;
    });
}

function removeScrollers() {
	$(".scrollable").each(function() {
		$(this).removeClass("scrollcontent");
		$(this).parent().removeClass("scrollcontainer");
		$(".scrollers").remove();
	});
}

function createScrollers() { 
	$(".scrollable").each(function() {
		
		// set up the content itself
		$(this).addClass("scrollcontent");
		$(this).parent().addClass("scrollcontainer");
		
		// set up the container
		$(".scrollcontainer").css('overflow','hidden');
		$(".scrollcontainer").css('position','relative');
		$(".scrollcontainer").css('marginBottom','50px');
		
		// controls the pixel value height of the 'scroll window' -- adjust as needed
		$(".scrollcontainer").height(containerHeight);

		// if applicable, add the scrollers themselves
		if($(".scrollcontent").height()>$(".scrollcontainer").height()) {
			
			// update the container
			$(this).css('float','left');
			$(this).width($(this).width()-40);
			$(this).css('position','absolute');
			$(this).css('left','0');
			$(this).css('top','0');
			
			// inject scrollers
			$(this).before('<ul class="scrollers"><li class="scrollup"><a href="#">Up</a></li><li class="scrolldown"><a href="#">Down</a></li></ul>');
			
			// stylize the scrollers
			$('ul.scrollers').width(35);
			$('ul.scrollers').css('float','right');
			$('ul.scrollers').css('margin','0');
			$('ul.scrollers').css('padding','0');
			$('ul.scrollers').css('paddingTop','10px');
			$('ul.scrollers').css('background','transparent');
			hookScrollers();
		}
	});
	
}





// ---------------------------
// INIT
// ---------------------------

$(document).ready(function(){
	createScrollers();
});