$(document).ready
(
    function() {
    	var _ScrollableCL = $('#scrollable-cl');
    	var _Scrollable = $('#scrollable');
    	if (_ScrollableCL.length > 0) {
    		_ScrollableCL.scrollable
    		(
    			{
    				circular: true,
    				keyboard: false,
    				speed: 0
    			}
    		)
    		.autoscroll(5000);
    		_ScrollableCL.mouseover(function() {
    			_ScrollableCL.data('scrollable').pause();
    		});
    	}
    	else if (_Scrollable.length > 0) {
    		_Scrollable
			  .scrollable
			  (
				  {
				  	circular: true,
				  	keyboard: false,
				  	size: 3,
				  	speed: 250,
				  	// When seek starts make overlay template transparent
				  	onBeforeSeek: function(event, index) {
				  		$('#scrollabletemplatetop').fadeTo(50, 0);
				  		$('#scrollabletemplatebottom').fadeTo(50, 0);
				  	},
				  	// When seek ends make overlay template opaque
				  	onSeek: function(event, index) {
				  		$('#scrollabletemplatetop').fadeTo(50, 1);
				  		$('#scrollabletemplatebottom').fadeTo(50, 1);
				  	}
				  }
			);

    		// The following code is used to loosely emulate the "per page" scrolling behavior available in v1.1.2 of Scrollable
				  var scrollAPI = _Scrollable.data('scrollable');
    		var pageSize = scrollAPI.getConf().size;
    		var lastPageItemIndex = (scrollAPI.getSize() - pageSize);
    		$('#nextPage').click(function() {
    			scrollAPI.move(pageSize);
    		});
    		$('#prevPage').click(function() {
    			// Scrollable will not permit a negative "move" from the initial item, even with circular enabled; hence, we will 
    			// seek to the element that will cause the last logical "page" to be displayed in this case [even though the direction 
    			// of scrolling will be the opposite of the desired direction]
    			if (scrollAPI.getIndex() == 0) {
    				scrollAPI.seekTo(lastPageItemIndex);
    			}
    			else {
    				scrollAPI.move(-pageSize);
    			}
    		});
    	}
    }
);