// execute your scripts when DOM is ready. this is a good habit 
$(function() {         
         
    // initialize outer scrollable  
    $("div.outerScroll").scrollable({ 
        vertical:true,  
        size: 1,
		nextPage: "#null",
		prevPage: "#null",
		items: ".itemsOuter",
		clickable: false,
		keyboard: false,
		globalNav: true
    });     
     
	 // initialize scrollable
    $("div.scrollable").scrollable({ 
        vertical:true,  
        size: 2,
		clickable: true,
		keyboard: true
		
    // use mousewheel plugin 
    }).navigator().mousewheel();
	
	//select all the inner scrollables
	$("div.scrollable").each(function(index) {
		//and if there is only two items in the current list
		if ($("div.scrollable").eq(index).scrollable().getSize() <= 2) {
			//then disable the "More Products (down)" link
			$("div.scrollable").eq(index).next().children().addClass("disabled");
		}
	});
	
});

//moves the outer scrollbox to "id" which is the specific list item
function move(id) {
	$("div.outerScroll").scrollable().seekTo(id);
	$("li a.disabled").removeClass("disabled");
	$("div#actionsOuter a#" + id).addClass("disabled");
}