Slider = new Class({ Implements: Options, options: { nextText: 'Next', prevText: 'Previous', transitionTime: 250, transition: 'quad', initialisedClass: 'active', cssClass: 'slider' }, className: 'Slider', initialize:function(id, options){ this.setOptions(options); // Elements this.slider = $(id); /*this.slider.getParent().setStyles({ position:'absolute' }); if(this.slider.getParent().hasClass('bottom')){ this.slider.getParent().setStyles({ bottom:0 }); }else { this.slider.getParent().setStyles({ top:0 }); this.position = 'top'; }*/ this.slider.addClass(this.options.cssClass+'-'+this.options.initialisedClass); this.slideContainer = this.slider.getElement('.'+this.options.cssClass+'-slides-container'); this.slides = this.slideContainer.getChildren(); // don't configure as slider if there isn't more than one panel if(this.slides.length > 1){ this.containerWidth = this.slider.getStyle('width').toInt(); this.slideContainer.setStyle('width', (this.containerWidth + this.slides[0].getStyle('margin-right').toInt() + this.slides[0].getStyle('margin-left').toInt()) * this.slides.length); //this.slideWidth = this.containerWidth - this.slides[0].getStyle('margin-left').toInt() - this.slides[0].getStyle('margin-right').toInt() - this.slides[0].getStyle('padding-left').toInt() - this.slides[0].getStyle('padding-right').toInt() - this.slides[0].getStyle('border-left-width').toInt() - this.slides[0].getStyle('border-right-width').toInt(); this.slideWidth = this.containerWidth; // Slides this.slides.each(function(slide, index){ slide.setStyle('width',this.slideWidth-40); var slideFx = new Fx.Tween(slide, {property:'opacity'}); if(index > 0){ slideFx.set(0.4 ); } slide.store('slideFx', slideFx); }.bind(this)); // FX this.scroll = this.slider.getElement('.'+this.options.cssClass+'-scroll'); this.scrollFx = new Fx.Scroll(this.scroll, {duration: this.options.transitionTime, transition:this.options.transition}); this.heightFx = new Fx.Tween(this.scroll, {duration: this.options.transitionTime, transition:this.options.transition}); this.heightFx.set('height', this.slides[0].getComputedSize().totalHeight); // Controls if(this.position == 'top'){ var injectWhere = 'before'; }else { var injectWhere = 'after'; } this.controls = new Element('div', {'class':this.options.cssClass+'-controls'}).inject(this.scroll, injectWhere); this.controls.controlNext = new Element('a', {'class':this.options.cssClass+'-controls-next'}).inject(this.controls); this.controls.controlNext.addClass(this.options.cssClass+'-controls-'+this.options.initialisedClass); this.controls.controlPrevious = new Element('a', {'class':this.options.cssClass+'-controls-previous'}).inject(this.controls); this.controls.controlNext.addEvent('click', this.slideNext.bind(this)); this.controls.controlPrevious.addEvent('click', this.slidePrev.bind(this)); } }, slideNext:function(evt) { evt.preventDefault(); this.slide(1, evt); }, slidePrev:function(evt) { evt.preventDefault(); this.slide(-1, evt); }, slide:function(move, evt){ this.checkTagName(evt.target); if(this.target.hasClass(this.options.cssClass+'-controls-'+this.options.initialisedClass)){ // scroll to next increment var index = Math.floor(this.scroll.getScroll().x / this.containerWidth); var newIndex = index + move; this.setupControls(newIndex); this.heightFx.start('height', this.slides[newIndex].getComputedSize().totalHeight).chain(function(){ this.slides[index].retrieve('slideFx').start(0); this.slides[newIndex].retrieve('slideFx').start(1); this.scrollFx.toElement(this.slides[newIndex], 'x'); }.bind(this)); /*this.slides.each(function(slide){ slide.removeClass('history-state'); }); this.slides[newIndex -1].addClass('history-state'); var historyStates = $$('.history-state'); historyStatesIndex = new Array; historyStates.each(function(state){ historyStatesIndex.push(state.getParent().getChildren().indexOf(state)); }); //to do: add a has-history class to anything that remembers it's history history.pushState(historyStatesIndex, '', '');*/ } }, setupControls:function(newIndex) { this.controls.controlPrevious.removeClass(this.options.cssClass+'-controls-'+this.options.initialisedClass); this.controls.controlNext.removeClass(this.options.cssClass+'-controls-'+this.options.initialisedClass); if(newIndex > 0){ this.controls.controlPrevious.addClass(this.options.cssClass+'-controls-'+this.options.initialisedClass); } if(newIndex < this.slides.length - 1){ this.controls.controlNext.addClass(this.options.cssClass+'-controls-'+this.options.initialisedClass); } }, checkTagName:function(element){ if(element.tagName != 'A'){ this.checkTagName(element.getParent()); }else { this.target = element; } } }); // MooTools: the javascript framework. // Load this file's selection again by visiting: http://mootools.net/more/bb3e380031a99f31bbdc4b8c81f31d47 // Or build this file again with packager using: packager build More/Element.Measure More/Fx.Scroll /* --- copyrights: - [MooTools](http://mootools.net) licenses: - [MIT License](http://mootools.net/license.txt) ... */ MooTools.More={version:"1.3.2.1",build:"e586bcd2496e9b22acfde32e12f84d49ce09e59d"};(function(){var b=function(e,d){var f=[];Object.each(d,function(g){Object.each(g,function(h){e.each(function(i){f.push(i+"-"+h+(i=="border"?"-width":"")); });});});return f;};var c=function(f,e){var d=0;Object.each(e,function(h,g){if(g.test(f)){d=d+h.toInt();}});return d;};var a=function(d){return !!(!d||d.offsetHeight||d.offsetWidth); };Element.implement({measure:function(h){if(a(this)){return h.call(this);}var g=this.getParent(),e=[];while(!a(g)&&g!=document.body){e.push(g.expose()); g=g.getParent();}var f=this.expose(),d=h.call(this);f();e.each(function(i){i();});return d;},expose:function(){if(this.getStyle("display")!="none"){return function(){}; }var d=this.style.cssText;this.setStyles({display:"block",position:"absolute",visibility:"hidden"});return function(){this.style.cssText=d;}.bind(this); },getDimensions:function(d){d=Object.merge({computeSize:false},d);var i={x:0,y:0};var h=function(j,e){return(e.computeSize)?j.getComputedSize(e):j.getSize(); };var f=this.getParent("body");if(f&&this.getStyle("display")=="none"){i=this.measure(function(){return h(this,d);});}else{if(f){try{i=h(this,d);}catch(g){}}}return Object.append(i,(i.x||i.x===0)?{width:i.x,height:i.y}:{x:i.width,y:i.height}); },getComputedSize:function(d){d=Object.merge({styles:["padding","border"],planes:{height:["top","bottom"],width:["left","right"]},mode:"both"},d);var g={},e={width:0,height:0},f; if(d.mode=="vertical"){delete e.width;delete d.planes.width;}else{if(d.mode=="horizontal"){delete e.height;delete d.planes.height;}}b(d.styles,d.planes).each(function(h){g[h]=this.getStyle(h).toInt(); },this);Object.each(d.planes,function(i,h){var k=h.capitalize(),j=this.getStyle(h);if(j=="auto"&&!f){f=this.getDimensions();}j=g[h]=(j=="auto")?f[h]:j.toInt(); e["total"+k]=j;i.each(function(m){var l=c(m,g);e["computed"+m.capitalize()]=l;e["total"+k]+=l;});},this);return Object.append(e,g);}});})();(function(){Fx.Scroll=new Class({Extends:Fx,options:{offset:{x:0,y:0},wheelStops:true},initialize:function(c,b){this.element=this.subject=document.id(c); this.parent(b);if(typeOf(this.element)!="element"){this.element=document.id(this.element.getDocument().body);}if(this.options.wheelStops){var d=this.element,e=this.cancel.pass(false,this); this.addEvent("start",function(){d.addEvent("mousewheel",e);},true);this.addEvent("complete",function(){d.removeEvent("mousewheel",e);},true);}},set:function(){var b=Array.flatten(arguments); if(Browser.firefox){b=[Math.round(b[0]),Math.round(b[1])];}this.element.scrollTo(b[0],b[1]);return this;},compute:function(d,c,b){return[0,1].map(function(e){return Fx.compute(d[e],c[e],b); });},start:function(c,d){if(!this.check(c,d)){return this;}var b=this.element.getScroll();return this.parent([b.x,b.y],[c,d]);},calculateScroll:function(g,f){var d=this.element,b=d.getScrollSize(),h=d.getScroll(),j=d.getSize(),c=this.options.offset,i={x:g,y:f}; for(var e in i){if(!i[e]&&i[e]!==0){i[e]=h[e];}if(typeOf(i[e])!="number"){i[e]=b[e]-j[e];}i[e]+=c[e];}return[i.x,i.y];},toTop:function(){return this.start.apply(this,this.calculateScroll(false,0)); },toLeft:function(){return this.start.apply(this,this.calculateScroll(0,false));},toRight:function(){return this.start.apply(this,this.calculateScroll("right",false)); },toBottom:function(){return this.start.apply(this,this.calculateScroll(false,"bottom"));},toElement:function(d,e){e=e?Array.from(e):["x","y"];var c=a(this.element)?{x:0,y:0}:this.element.getScroll(); var b=Object.map(document.id(d).getPosition(this.element),function(g,f){return e.contains(f)?g+c[f]:false;});return this.start.apply(this,this.calculateScroll(b.x,b.y)); },toElementEdge:function(d,g,e){g=g?Array.from(g):["x","y"];d=document.id(d);var i={},f=d.getPosition(this.element),j=d.getSize(),h=this.element.getScroll(),b=this.element.getSize(),c={x:f.x+j.x,y:f.y+j.y}; ["x","y"].each(function(k){if(g.contains(k)){if(c[k]>h[k]+b[k]){i[k]=c[k]-b[k];}if(f[k]