/**
 * 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/29/2008
 */
(function($) { $.fn.extend({ SmallScrollable: function(arg1, arg2, arg3) { return this.each(function() { if (typeof arg1 == "string") { var el = $.data(this, "SmallScrollable"); el[arg1].apply(el, [arg2, arg3]); } else { new $.SmallScrollable(this, arg1, arg2); } }); } }); $.SmallScrollable = function(el, opts) {  $.data(el, "SmallScrollable", this); this.init(el, opts); }; $.extend($.SmallScrollable.prototype, { init: function(el, config) { var self = this; var opts = { size: 1, horizontal:false,  activeClass:'active', speed: 300, onSeek: null, items: '.SmallItems', prev:'.SmallPrev', next:'.SmallNext', navi:'.SmallNavi', naviItem:'span' }; this.opts = $.extend(opts, config); var root = this.root = $(el); var itemRoot = $(opts.items, root); if (!itemRoot.length) itemRoot = root; itemRoot.css({position:'relative', overflow:'hidden', visibility:'visible'}); itemRoot.children().wrapAll('<div class="__SmallScrollable" style="position:absolute"/>'); this.wrap = itemRoot.children(":first"); this.wrap.css(opts.horizontal ? "width" : "height", "200000em").after('<br clear="all"/>'); this.items = this.wrap.children(); this.index = 0; if (opts.horizontal) { itemRoot.width(opts.size * (this.items.eq(1).offset().left - this.items.eq(0).offset().left) -2); } else { itemRoot.height(opts.size * (this.items.eq(1).offset().top - this.items.eq(0).offset().top) -2); } if ($.isFunction($.fn.mousewheel)) { root.bind("mousewheel.SmallScrollable", function(event, delta) { self.move(-delta, 50); return false; }); } $(window).bind("keypress.SmallScrollable", function(evt) { if ($(evt.target).parents(".__SmallScrollable").length) { if (opts.horizontal && (evt.keyCode == 37 || evt.keyCode == 39)) { self.move(evt.keyCode == 37 ? -1 : 1); return false; } if (!opts.horizontal && (evt.keyCode == 38 || evt.keyCode == 40)) { self.move(evt.keyCode == 38 ? -1 : 1); return false; } } return true; }); this.items.each(function(index, arg) { $(this).bind("click.SmallScrollable", function() { self.click(index); }); }); this.activeIndex = 0; $(opts.prev, root).click(function() { self.prev() }); $(opts.next, root).click(function() { self.next() }); $(opts.navi, root).each(function() { var navi = $(this); var status = self.getStatus(); if (navi.is(":empty")) { for (var i = 0; i < status.pages; i++) { var item = $("<" + opts.naviItem + "/>").attr("page", i).click(function() {var el = $(this); el.parent().children().removeClass(opts.activeClass); el.addClass(opts.activeClass); self.setPage(el.attr("page")); }); if (i == 0) item.addClass(opts.activeClass); navi.append(item); } } else { navi.children().each(function(i) { var item = $(this); item.attr("page", i); if (i == 0) item.addClass(opts.activeClass); item.click(function() { item.parent().children().removeClass(opts.activeClass); item.addClass(opts.activeClass); self.setPage(item.attr("page")); }); }); } }); }, click: function(index) { var item = this.items.eq(index); var klass = this.opts.activeClass; if (!item.hasClass(klass) && (index >= 0 || index < this.items.size())) { var prev = this.items.eq(this.activeIndex).removeClass(klass); item.addClass(klass); this.seekTo(index - Math.floor(this.opts.size / 2)); this.activeIndex = index; } }, getStatus: function() { var len = this.items.size(); var s = { length: len, index: this.index, size: this.opts.size, pages: Math.floor(len / this.opts.size), page: Math.floor(this.index / this.opts.size) }; return s; }, getLength: function(obj) { obj.value = this.items.size(); return true; }, seekTo: function(index, time) { if (document.getElementById('SKT' + index).innerHTML == document.getElementById('SKT' + this.index).innerHTML) { $("DIV.SKT" + this.index).hide(); $("DIV.SKT" + index).show(); } else { $("DIV.SKT" + this.index).fadeOut(200); $("DIV.SKT" + index).show(); } $("DIV.SSP" + index).show(); if (document.getElementById('SSP' + index).style.backgroundImage == '') document.getElementById('SSP' + index).style.backgroundImage = 'url('+document.getElementById('SSP' + index + '_').innerHTML+')'; if (index < 0) index = 0; index = Math.min(index, this.items.length - this.opts.size); var item = this.items.eq(index); if (item.size() == 0) return false; this.index = index; if (this.opts.horizontal) { var left = this.wrap.offset().left - item.offset().left;  this.wrap.animate({left: left}, time || this.opts.speed); } else { var top = this.wrap.offset().top - item.offset().top; this.wrap.animate({top: top}, time || this.opts.speed);} if ($.isFunction(this.opts.onSeek)) { this.opts.onSeek.call(this.getStatus()); } var navi = $(this.opts.navi, this.root); if (navi.length) { var klass = this.opts.activeClass; var page = Math.round(index / this.opts.size); navi.children().removeClass(klass).eq(page).addClass(klass); } return true; }, move: function(offset, time) { this.seekTo(this.index + offset, time); }, next: function(time) { var CurrentPage = Math.floor(this.index / this.opts.size) + 1; var Pages = Math.floor(this.items.size() / this.opts.size); if ( CurrentPage == Pages ) this.begin(time); else this.move(1, time); }, prev: function(time) { var CurrentPage = Math.floor(this.index / this.opts.size) + 1; if ( CurrentPage == 1 ) this.end(time); else this.move(-1, time); }, movePage: function(offset, time) { this.move(this.opts.size * offset, time); }, setPage: function(index, time) { this.seekTo(this.opts.size * index, time); }, prevPage: function(time) { var page = Math.floor(this.index / this.opts.size); this.seekTo(this.opts.size * (page-1), time); }, nextPage: function(time) { var page = Math.floor(this.index / this.opts.size); this.seekTo(this.opts.size * (page+1), time); }, begin: function(time) { this.seekTo(0, time); }, end: function(time) { this.seekTo(this.items.size() - this.opts.size, time); } }); })(jQuery); (function($) { $.fn.extend({ BigScrollable: function(arg1, arg2, arg3) { return this.each(function() { if (typeof arg1 == "string") { var el = $.data(this, "BigScrollable"); el[arg1].apply(el, [arg2, arg3]); } else { new $.BigScrollable(this, arg1, arg2); } }); } }); $.BigScrollable = function(el, opts) {  $.data(el, "BigScrollable", this); this.init(el, opts); }; $.extend($.BigScrollable.prototype, { init: function(el, config) { var self = this; var opts = { size: 1, horizontal:false,  activeClass:'active', speed: 300, onSeek: null, items: '.BigItems', prev:'.BigPrev', next:'.BigNext', navi:'.BigNavi', naviItem:'span' }; this.opts = $.extend(opts, config); var root = this.root = $(el); var itemRoot = $(opts.items, root); if (!itemRoot.length) itemRoot = root; itemRoot.css({position:'relative', overflow:'hidden', visibility:'visible'}); itemRoot.children().wrapAll('<div class="__BigScrollable" style="position:absolute"/>'); this.wrap = itemRoot.children(":first"); this.wrap.css(opts.horizontal ? "width" : "height", "200000em").after('<br clear="all"/>'); this.items = this.wrap.children(); this.index = 0; if (opts.horizontal) { itemRoot.width(opts.size * (this.items.eq(1).offset().left - this.items.eq(0).offset().left) -2); } else { itemRoot.height(opts.size * (this.items.eq(1).offset().top - this.items.eq(0).offset().top) -2); } if ($.isFunction($.fn.mousewheel)) { root.bind("mousewheel.BigScrollable", function(event, delta) { self.move(-delta, 50); return false; }); } $(window).bind("keypress.BigScrollable", function(evt) { if ($(evt.target).parents(".__BigScrollable").length) { if (opts.horizontal && (evt.keyCode == 37 || evt.keyCode == 39)) { self.move(evt.keyCode == 37 ? -1 : 1); return false; } if (!opts.horizontal && (evt.keyCode == 38 || evt.keyCode == 40)) { self.move(evt.keyCode == 38 ? -1 : 1); return false; } } return true; }); this.items.each(function(index, arg) { $(this).bind("click.BigScrollable", function() { self.click(index); }); }); this.activeIndex = 0; $(opts.prev, root).click(function() { self.prev() }); $(opts.next, root).click(function() { self.next() }); $(opts.navi, root).each(function() { var navi = $(this); var status = self.getStatus(); if (navi.is(":empty")) { for (var i = 0; i < status.pages; i++) { var item = $("<" + opts.naviItem + "/>").attr("page", i).click(function() {var el = $(this); el.parent().children().removeClass(opts.activeClass); el.addClass(opts.activeClass); self.setPage(el.attr("page")); }); if (i == 0) item.addClass(opts.activeClass); navi.append(item); } } else { navi.children().each(function(i) { var item = $(this); item.attr("page", i); if (i == 0) item.addClass(opts.activeClass); item.click(function() { item.parent().children().removeClass(opts.activeClass); item.addClass(opts.activeClass); self.setPage(item.attr("page")); }); }); } }); }, click: function(index) { var item = this.items.eq(index); var klass = this.opts.activeClass; if (!item.hasClass(klass) && (index >= 0 || index < this.items.size())) { var prev = this.items.eq(this.activeIndex).removeClass(klass); item.addClass(klass); this.seekTo(index - Math.floor(this.opts.size / 2)); this.activeIndex = index; } }, getStatus: function() { var len = this.items.size(); var s = { length: len, index: this.index, size: this.opts.size, pages: Math.floor(len / this.opts.size), page: Math.floor(this.index / this.opts.size) }; return s; }, getLength: function(obj) { obj.value = this.items.size(); return true; }, seekTo: function(index, time) { if (document.getElementById('BKT' + index).innerHTML == document.getElementById('BKT' + this.index).innerHTML) { $("DIV.BKT" + this.index).hide(); $("DIV.BKT" + index).show(); } else { $("DIV.BKT" + this.index).fadeOut(200); $("DIV.BKT" + index).show(); } $("DIV.BSP" + index).show(); if (document.getElementById('BSP' + index).style.backgroundImage == '') document.getElementById('BSP' + index).style.backgroundImage = 'url('+document.getElementById('BSP' + index + '_').innerHTML+')'; if (index < 0) index = 0; index = Math.min(index, this.items.length - this.opts.size); var item = this.items.eq(index); if (item.size() == 0) return false; this.index = index; if (this.opts.horizontal) { var left = this.wrap.offset().left - item.offset().left;  this.wrap.animate({left: left}, time || this.opts.speed); } else { var top = this.wrap.offset().top - item.offset().top; this.wrap.animate({top: top}, time || this.opts.speed);} if ($.isFunction(this.opts.onSeek)) { this.opts.onSeek.call(this.getStatus()); } var navi = $(this.opts.navi, this.root); if (navi.length) { var klass = this.opts.activeClass; var page = Math.round(index / this.opts.size); navi.children().removeClass(klass).eq(page).addClass(klass); } return true; }, move: function(offset, time) { this.seekTo(this.index + offset, time); }, next: function(time) { var CurrentPage = Math.floor(this.index / this.opts.size) + 1; var Pages = Math.floor(this.items.size() / this.opts.size); if ( CurrentPage == Pages ) this.begin(time); else this.move(1, time); }, prev: function(time) { var CurrentPage = Math.floor(this.index / this.opts.size) + 1; if ( CurrentPage == 1 ) this.end(time); else this.move(-1, time); }, movePage: function(offset, time) { this.move(this.opts.size * offset, time); }, setPage: function(index, time) { this.seekTo(this.opts.size * index, time); }, prevPage: function(time) { var page = Math.floor(this.index / this.opts.size); this.seekTo(this.opts.size * (page-1), time); }, nextPage: function(time) { var page = Math.floor(this.index / this.opts.size); this.seekTo(this.opts.size * (page+1), time); }, begin: function(time) { this.seekTo(0, time); }, end: function(time) { this.seekTo(this.items.size() - this.opts.size, time); } }); })(jQuery);