var currentSlide = ${pageNum};
 var ThumbScroller = new Class({
 Extends: Fx.Scroll,

 scrollOptions: {
     thumbs: '.thum',
     axis: 'x',
     thumbContainer: null,
     nav: {
         next: '.next',
         previous: '.previous',
         start: '.start',
         end: '.end'
     }
 },

 initialize: function(element, scrollOptions) {
     this.parent(element, $merge(scrollOptions, this.scrollOptions));
     this.thumbs = this.element.getElements(this.options.thumbs);
     this.positions = this.getLocations();
     this.setParentSize();
     this.initNav();
     this.element.store('thumbscroller', this);
     return this;
 },

 isAtEnd: function(range) {
     range = range || this.getRange()
     return (range[range.length-1].index == this.thumbs.length-1 && range[range.length-1].type != 'partial');
 },
 isAtStart: function(range) {
     range = range || this.getRange()
     return (range[0].index == 0 && range[0].type != 'partial')
 },


 getLocations: function() {
     return this.thumbs.map(function(aThumb) {
         var tSize = aThumb.getComputedSize()[this.getDir('total')];
         var tStart = aThumb.getPosition(aThumb.getParent())[this.getDir('xy')];
         var tEnd = tSize + tStart;
         return {
             start: tStart,
             end: tEnd,
             size: tSize
         }
     }, this);
 },

 initNav: function() {
     $$(this.options.nav.next).addEvent('click', this.toNextScreen.bind(this));
     $$(this.options.nav.previous).addEvent('click', this.toPreviousScreen.bind(this));
     $$(this.options.nav.start).addEvent('click', this.toStart.bind(this));
     $$(this.options.nav.end).addEvent('click', this.toEnd.bind(this));
 },


 getDir: function(type) {
     switch (type) {
         case 'total':
             if (this.options.axis == 'y') return 'totalHeight';
             return 'totalWidth';
         case 'dir':
             if (this.options.axis == 'y') return 'height';
             return 'width';
         case 'xy':
         default:
             if (this.options.axis == 'y') return 'y';
             return 'x';
     }
 },

 getStart: function(to) {
     if (this.options.axis == 'y')
         return [0,to];
     return [to,0];
 },

 getStartPx: function(index) {
     if (!index) return 0;
     return this.positions[index].start - (this.positions[index].start - this.positions[index-1].end);
 },

 setParentSize: function() {
     var parent = (this.options.thumbContainer) ? this.element.getElement(this.options.thumbContainer) : this.element.getElement(this.options.thumbs).getParent();
     var totalSize = 0;
     $each(this.thumbs, function(aThumb) {
         totalSize += aThumb.getComputedSize({styles: ['padding','border','margin']})[this.getDir('total')];
     },this);
     parent.setStyle(this.getDir('dir'), totalSize);
 },

 getRange: function(scrollStart) {
     scrollStart = scrollStart || this.element.getScroll()[this.getDir('xy')];
     var windowSize = this.element.getComputedSize({
         styles: ['padding']
     })[this.getDir('total')];
     var range = [];
     var x;
     for (x=0; x<this.positions.length; x++) {
         var tryRange = this.withinRange(this.positions[x], scrollStart, scrollStart + windowSize);
         if (tryRange) {
             range.push($merge(tryRange, {index: x}));
             if (tryRange.where == 'end') break;
         }
     }
     return range;

 },

 withinRange: function(pos, viewStart, viewEnd) {
     if (pos.end > viewStart && pos.end <= viewEnd) {
         if (pos.start >= viewStart) {
             return {type: 'full'}
         } else {
             return {type: 'partial', where: 'start'};
         }
     } else if (pos.start >= viewStart && pos.start < viewEnd) {
         return {type: 'partial', where: 'end'};
     } else if (pos.start < viewStart && pos.end > viewEnd) {
         return {type: 'full'};
     }
     return false;
 },

 toNextScreen: function() {
     var range = this.getRange();
     if (range.getLast().type == 'partial' && range.length > 1) {
         this.start.run(this.getStart(this.getStartPx(range.getLast().index)), this);
     } else if ($(this.thumbs[range.getLast().index + 1])) {
         this.start.run(this.getStart(this.getStartPx(range.getLast().index+1)), this);
     } else {
         this.toEnd();
     }
 },

 toPreviousScreen: function() {
     var range = this.getRange();
     var index = (range[0].type == 'partial' && range.length > 1) ? range[0].index : range[0].index - 1;
     if (!this.positions[index]) {
         this.toStart();
         return;
     }
     var startPos = this.positions[index].end - this.element.getComputedSize({styles: ['padding']})[this.getDir('total')];
     var pRange = this.getRange(startPos);
     var newIndex = (pRange[0].type=="partial" && pRange.length > 1) ? pRange[0].index+1 : pRange[0].index;
     this.start.run(this.getStart(this.getStartPx(newIndex)), this);
 },

 toIndex: function(index) {
     this.start.run(this.getStart(this.getStartPx(index)), this);
 },

 toStart: function() {
     if (this.options.axis == 'y') this.toTop();
     else this.toLeft();
 },

 toEnd: function() {
     if (this.options.axis == 'y') this.toBottom();
     else this.toRight();
 }

 });