var SlideItMoo = new Class({ Implements: [Options], options: { overallContainer: null, elementScrolled: null, thumbsContainer: null, itemsVisible: 5, elemsSlide: null, itemsSelector: null, itemWidth: null, showControls: 1, transition: Fx.Transitions.linear, duration: 800, direction: 1, autoSlide: false, mouseWheelNav: false }, initialize: function(a) { this.setOptions(a); this.elements = $(this.options.thumbsContainer).getElements(this.options.itemsSelector); this.totalElements = this.elements.length; if (this.totalElements <= this.options.itemsVisible) { return } this.elementWidth = this.options.itemWidth || this.elements[0].getSize().x; this.currentElement = 0; this.direction = this.options.direction; this.autoSlideTotal = this.options.autoSlide + this.options.duration; if (this.options.elemsSlide == 1) { this.options.elemsSlide = null } this.begin() }, begin: function() { this.setContainersSize(); this.myFx = new Fx.Morph(this.options.thumbsContainer, { wait: true, transition: this.options.transition, duration: this.options.duration }); this.addControls(); if (this.options.mouseWheelNav && !this.options.autoSlide) { $(this.options.thumbsContainer).addEvent("mousewheel", function(a) { new Event(a).stop(); this.slide(-a.wheel) } .bind(this)) } if (this.options.autoSlide) { this.startAutoSlide() } }, setContainersSize: function() { $(this.options.overallContainer).set({ styles: { width: this.options.itemsVisible * this.elementWidth + 50 * this.options.showControls} }); $(this.options.elementScrolled).set({ styles: { width: this.options.itemsVisible * this.elementWidth} }); $(this.options.thumbsContainer).set({ styles: { width: this.totalElements * (this.elementWidth)} }) }, addControls: function() { if (!this.options.showControls) { return } this.fwd = new Element("div", { "class": "SlideItMoo_forward", events: { click: this.slide.pass(1, this)} }); this.bkwd = new Element("div", { "class": "SlideItMoo_back", events: { click: this.slide.pass(-1, this)} }); $(this.options.overallContainer).adopt(this.fwd, this.bkwd) }, slide: function(c) { if (this.started) { return } this.direction = c; var a = this.currentIndex(); if (this.options.elemsSlide && this.options.elemsSlide > 1 && this.endingElem == null) { this.endingElem = this.currentElement; for (var b = 0; b < this.options.elemsSlide; b++) { this.endingElem += c; if (this.endingElem >= this.totalElements) { this.endingElem = 0 } if (this.endingElem < 0) { this.endingElem = this.totalElements - 1 } } } if (this.direction == -1) { this.rearange(); $(this.options.thumbsContainer).setStyle("margin-left", -this.elementWidth) } this.started = true; this.myFx.start({ "margin-left": this.direction == 1 ? -this.elementWidth : 0 }).chain(function() { this.rearange(true); if (this.options.elemsSlide) { if (this.endingElem !== this.currentElement) { this.slide(this.direction) } else { this.endingElem = null } } } .bind(this)) }, rearange: function(a) { if (a) { this.started = false } if (a && this.direction == -1) { return } this.currentElement = this.currentIndex(this.direction); $(this.options.thumbsContainer).setStyle("margin-left", 0); if (this.currentElement == 1 && this.direction == 1) { this.elements[0].injectAfter(this.elements[this.totalElements - 1]); return } if ((this.currentElement == 0 && this.direction == 1) || (this.direction == -1 && this.currentElement == this.totalElements - 1)) { this.rearrangeElement(this.elements.getLast(), this.direction == 1 ? this.elements[this.totalElements - 2] : this.elements[0]); return } if (this.direction == 1) { this.rearrangeElement(this.elements[this.currentElement - 1], this.elements[this.currentElement - 2]) } else { this.rearrangeElement(this.elements[this.currentElement], this.elements[this.currentElement + 1]) } }, rearrangeElement: function(b, a) { this.direction == 1 ? b.injectAfter(a) : b.injectBefore(a) }, currentIndex: function() { var a = null; switch (this.direction) { case 1: a = this.currentElement >= this.totalElements - 1 ? 0 : this.currentElement + this.direction; break; case -1: a = this.currentElement == 0 ? this.totalElements - 1 : this.currentElement + this.direction; break } return a }, startAutoSlide: function() { this.startIt = this.slide.bind(this).pass(this.direction || 1); this.autoSlide = this.startIt.periodical(this.autoSlideTotal, this); this.elements.addEvents({ mouseover: function() { $clear(this.autoSlide) } .bind(this), mouseout: function() { this.autoSlide = this.startIt.periodical(this.autoSlideTotal, this) } .bind(this) }) } });