(function(a){a.fn.extend({scrollable:function(d,c,b){return this.each(function(){if(typeof d=="string"){var e=a.data(this,"scrollable");e[d].apply(e,[c,b])}else{new a.scrollable(this,d,c)}})}});a.scrollable=function(b,c){a.data(b,"scrollable",this);this.init(b,c)};act=true;a.extend(a.scrollable.prototype,{init:function(f,d){var c=this;var g={size:5,horizontal:false,activeClass:"active",duration:200,onSeek:null,items:".items",prev:".prev",next:".next",navi:".navi",naviItem:"span"};this.opts=a.extend(g,d);var b=this.root=a(f);var e=a(g.items,b);if(!e.length){e=b}e.css({position:"relative",overflow:"hidden",visibility:"visible"});e.children().wrapAll('<div class="__scrollable" style="position:absolute"/>');this.wrap=e.children(":first");this.wrap.css(g.horizontal?"width":"height","20000em").after('<br clear="all"/>');this.items=this.wrap.children();this.index=0;this.pos=-1;this.i=0;if(g.horizontal){e.width(g.size*(this.items.eq(1).offset().left-this.items.eq(0).offset().left)-2)}else{e.height(118)}if(a.isFunction(a.fn.mousewheel)){b.bind("mousewheel.scrollable",function(h,i){c.move(-i,50);return false})}a(window).bind("keypress.scrollable",function(h){if(a(h.target).parents(".__scrollable").length){if(g.horizontal&&(h.keyCode==37||h.keyCode==39)){c.move(h.keyCode==37?-1:1);return false}if(!g.horizontal&&(h.keyCode==38||h.keyCode==40)){c.move(h.keyCode==38?-1:1);return false}}return true});this.items.each(function(i,h){a(this).bind("click.scrollable",function(){c.click(i)})});this.activeIndex=0;a(g.prev,b).click(function(h){h.preventDefault();if(act==true){act=false;c.prev()}});a(g.next,b).click(function(h){h.preventDefault();if(act==true){act=false;c.next()}});a(g.navi,b).each(function(){var m=a(this);var h=c.getStatus();if(m.is(":empty")){for(var k=0;k<h.pages;k++){var l=a("<"+g.naviItem+"/>").attr("page",k).click(function(){var i=a(this);i.parent().children().removeClass(g.activeClass);i.addClass(g.activeClass);c.setPage(i.attr("page"))});if(k==0){l.addClass(g.activeClass)}m.append(l)}}else{m.children().each(function(n){var o=a(this);o.attr("page",n);if(n==0){o.addClass(g.activeClass)}o.click(function(){o.parent().children().removeClass(g.activeClass);o.addClass(g.activeClass);c.setPage(o.attr("page"))})})}})},click:function(c){var e=this.items.eq(c);var b=this.opts.activeClass;if(!e.hasClass(b)&&(c>=0||c<this.items.size())){var d=this.items.eq(this.activeIndex).removeClass(b);e.addClass(b);this.seekTo(c-Math.floor(this.opts.size/2));this.activeIndex=c}},getStatus:function(){var b=this.items.size();var c={length:b,index:this.index,size:this.opts.size,pages:Math.round(b/this.opts.size),page:Math.round(this.index/this.opts.size)};return c},seekTo:function(e,b,d){if(e<0){e=0}e=Math.min(e,this.items.length-this.opts.size);var l=this.items.eq(e);if(l.size()==0){return false}this.index=e;if(this.opts.horizontal){var c=this.wrap.offset().left-l.offset().left;this.wrap.animate({left:c},{duration:this.opts.duration})}else{var f=0;var i=parseInt(this.wrap.css("top"));if(isNaN(i)){i=3}if(d=="next"){if(this.i<parseInt(this.items.length)){if(this.i==0){this.pos=this.i;for(j=0;j<this.items.length;j++){f+=this.items.eq(j).innerHeight();if(f>118){break}}this.i=j+1;i=-(i+this.items.eq(this.i).innerHeight()+(f-118))+8}else{this.i++;if(this.pos!=-1&&this.pos==parseInt(this.items.length)){this.i=this.pos-1;this.pos=-1}i=-(-i+this.items.eq(this.i).innerHeight())}}}else{if(d=="prev"){if(this.i>0){if(this.i==parseInt(this.items.length)){this.pos=this.i;for(j=this.items.length-1;j>=0;j--){f+=this.items.eq(j).innerHeight();if(f>118){break}}this.i=j-1;i=(i+this.items.eq(this.i).innerHeight())}else{if(e<this.opts.size){this.i=e+1}this.i--;i=-(-i-this.items.eq(this.i).innerHeight());if(this.pos!=-1&&this.pos==0){i=3;this.pos=-1;this.i=0}}}}else{var i=this.wrap.offset().top-l.offset().top+3;this.i=this.opts.size+e-1;if(this.i<this.opts.size){this.i=0}}}this.wrap.animate({top:i},{duration:this.opts.duration,complete:function(){act=true}})}if(a.isFunction(this.opts.onSeek)){this.opts.onSeek.call(this.getStatus())}var k=a(this.opts.navi,this.root);if(k.length){var g=this.opts.activeClass;var h=Math.round(e/this.opts.size);k.children().removeClass(g).eq(h).addClass(g)}return true},move:function(d,c,b){this.seekTo(this.index+d,c,b)},next:function(b){this.move(1,b,"next")},prev:function(b){this.move(-1,b,"prev")},movePage:function(c,b){this.move(this.opts.size*c,b,"movepage")},setPage:function(b,c){this.seekTo(this.opts.size*b,c,"setpage")},begin:function(b){this.seekTo(0,b,"begin")},end:function(b){this.seekTo(this.items.size()-this.opts.size,b,"end")}})})(jQuery);


jQuery(function( $ ){

	/**
	 * make sure the CSS knows that we're modifying the DOM and then style accordingly
	 **/		
	$('.scrollable').addClass('js');
	/** 
	 * If you have an element you'd like to use the same style, but not attach the 
	 * behavior you can turn it off by first adding the scrollable classname, but making 
	 * sure the js classname is not applied to the element (this is what I did to show the 
	 * "no javascript" version in the second example). Keeping the use of the scrollable 
	 * classname for the general styles prevents having to write redundant styles
	 **/
	$('.scrollable.nojs').removeClass('js');
	/**
	 * a little DOM modification to keep all of the markup valid
	 **/
	$('.scrollable.js ol').attr('id','items').wrap('<ul><li></li></ul>');
	$('.scrollable.js ul>li').attr('id','itemswrapper');
	var emptyLinkTarget = (window.opera) ? "#" : "#"; // a hash breaks a few flavors of IE & a javascript link (though it's poor form) breaks Opera.
	$('.scrollable.js ul').append('<li><a class="prevline" href="'+emptyLinkTarget+'">&gt;&gt;</a><a class="nextline" href="'+emptyLinkTarget+'">&lt;&lt;</a></li>');
	/** 
	 * and now we initiate 
	 **/
	$('.scrollable.js').scrollable({
		size:5,
		horizontal:false,
		duration:400,
		items:'#items',
		prev:'.prevline',
		next:'.nextline'
	});
});