/**
* jquery.scrollable 0.11. Making HTML elements scroll.
* 
* http://flowplayer.org/tools/scrollable.html
*
* Copyright (c) 2008 Tero Piirainen (tero@flowplayer.org)
*
* Released under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
* 
* >> Basically you can do anything you want but leave this header as is <<
*
* Since  : 0.01 - 03/01/2008
* Version: 0.11 - 05/20/2008
*/
(function($) { $.fn.extend({ scrollable: function(b, c, d) { return this.each(function() { if (typeof b == "string") { var a = $.data(this, "scrollable"); a[b].apply(a, [c, d]) } else { new $.scrollable(this, b, c) } }) } }); $.scrollable = function(a, b) { $.data(a, "scrollable", this); this.init(a, b) }; $.extend($.scrollable.prototype, { init: function(e, f) { var g = this; var h = { size: 5, horizontal: false, activeClass: 'active', speed: 300, onSeek: null, items: '.items', prev: '.prev', next: '.next', navi: '.navi', naviItem: 'span' }; this.opts = $.extend(h, f); var j = this.root = $(e); var k = $(h.items, j); if (!k.length) k = j; k.css({ position: 'relative', overflow: 'hidden', visibility: 'visible' }); k.children().wrapAll('<div class="__scrollable" style="position:absolute"/>'); this.wrap = k.children(":first"); this.wrap.css(h.horizontal ? "width" : "height", "200000em").after('<br clear="all"/>'); this.items = this.wrap.children(); this.index = 0; if (h.horizontal) { k.width(h.size * (this.items.eq(1).offset().left - this.items.eq(0).offset().left) - 2) } else { k.height(h.size * (this.items.eq(1).offset().top - this.items.eq(0).offset().top) - 2) } if ($.isFunction($.fn.mousewheel)) { j.bind("mousewheel.scrollable", function(a, b) { g.move(-b, 50); return false }) } $(window).bind("keypress.scrollable", function(a) { if ($(a.target).parents(".__scrollable").length) { if (h.horizontal && (a.keyCode == 37 || a.keyCode == 39)) { g.move(a.keyCode == 37 ? -1 : 1); return false } if (!h.horizontal && (a.keyCode == 38 || a.keyCode == 40)) { g.move(a.keyCode == 38 ? -1 : 1); return false } } return true }); this.items.each(function(a, b) { $(this).bind("click.scrollable", function() { g.click(a) }) }); this.activeIndex = 0; $(h.prev, j).click(function() { g.prev() }); $(h.next, j).click(function() { g.next() }); $(h.navi, j).each(function() { var b = $(this); var c = g.getStatus(); if (b.is(":empty")) { for (var i = 0; i < c.pages; i++) { var d = $("<" + h.naviItem + "/>").attr("page", i).click(function() { var a = $(this); a.parent().children().removeClass(h.activeClass); a.addClass(h.activeClass); g.setPage(a.attr("page")) }); if (i == 0) d.addClass(h.activeClass); b.append(d) } } else { b.children().each(function(i) { var a = $(this); a.attr("page", i); if (i == 0) a.addClass(h.activeClass); a.click(function() { a.parent().children().removeClass(h.activeClass); a.addClass(h.activeClass); g.setPage(a.attr("page")) }) }) } }) }, click: function(a) { var b = this.items.eq(a); var c = this.opts.activeClass; if (!b.hasClass(c) && (a >= 0 || a < this.items.size())) { var d = this.items.eq(this.activeIndex).removeClass(c); b.addClass(c); this.seekTo(a - Math.floor(this.opts.size / 2)); this.activeIndex = a } }, getStatus: function() { var a = this.items.size(); var s = { length: a, index: this.index, size: this.opts.size, pages: Math.floor(a / this.opts.size), page: Math.floor(this.index / this.opts.size) }; return s }, seekTo: function(a, b) { if (a < 0) a = 0; a = Math.min(a, this.items.length - this.opts.size); var c = this.items.eq(a); if (c.size() == 0) return false; this.index = a; if (this.opts.horizontal) { var d = this.wrap.offset().left - c.offset().left; this.wrap.animate({ left: d }, b || this.opts.speed) } else { var e = this.wrap.offset().top - c.offset().top; this.wrap.animate({ top: e }, b || this.opts.speed) } if ($.isFunction(this.opts.onSeek)) { this.opts.onSeek.call(this.getStatus()) } var f = $(this.opts.navi, this.root); if (f.length) { var g = this.opts.activeClass; var h = Math.round(a / this.opts.size); f.children().removeClass(g).eq(h).addClass(g) } return true }, move: function(a, b) { this.seekTo(this.index + a, b) }, next: function(a) { this.move(1, a) }, prev: function(a) { this.move(-1, a) }, movePage: function(a, b) { this.move(this.opts.size * a, b) }, setPage: function(a, b) { this.seekTo(this.opts.size * a, b) }, prevPage: function(a) { var b = Math.floor(this.index / this.opts.size); this.seekTo(this.opts.size * (b - 1), a) }, nextPage: function(a) { var b = Math.floor(this.index / this.opts.size); this.seekTo(this.opts.size * (b + 1), a) }, begin: function(a) { this.seekTo(0, a) }, end: function(a) { this.seekTo(this.items.size() - this.opts.size, a) } }) })(jQuery);