var SlideShow = new Class({ getOptions: function(){ return { effect: 'fade', duration: 2000, transition: Fx.Transitions.linear, direction: 'right', color: false, wait: 5000, loop: false, thumbnails: false, thumbnailCls: 'outline', backgroundSlider: false, loadingCls: 'loading', onClick: false, randomize:false
};}, initialize: function(container, images, options){ this.setOptions(this.getOptions(), options); this.container = $(container); this.container.setStyles({ position: 'relative', overflow: 'hidden'
}); if(this.options.onClick){ this.container.addEvent('click', function(){ this.options.onClick(this.imageLoaded);}.bind(this));}
this.imagesHolder = new Element('div').setStyles({ position: 'absolute', overflow: 'hidden', top: this.container.getStyle('height'), left: 0, width: '0px', height: '0px', display: 'none'
}).injectInside(this.container); if($type(images) == 'string' && !this.options.thumbnails){ var imageList = []; var i = $$('.'+images); if (this.options.randomize) i = this.rand(i); i.each(function(el){ imageList.push(el.src); el.injectInside(this.imagesHolder);},this); this.images = imageList;}else if($type(images) == 'string' && this.options.thumbnails){ var imageList = []; var srcList = []; this.thumbnails = $$('.'+images); this.thumbnails.each(function(el,i){ srcList.push(el.href); imageList.push(el.getElement('img')); el.href = 'javascript:;'; el.addEvent('click',function(){ this.stop(); this.play(i);}.bind(this,el,i));},this); this.images = srcList; this.thumbnailImages = imageList; if(this.options.backgroundSlider){ this.bgSlider = new BackgroundSlider(this.thumbnailImages,{mouseOver: false, duration: this.options.duration, className: this.options.thumbnailCls, padding:{top:0,right:-2,bottom:-2,left:0}}); this.bgSlider.set(this.thumbnailImages[0]);}
}else{ this.images = (this.options.randomize) ? this.rand(images) : images;}
this.loading = new Element('div').addClass(this.options.loadingCls).setStyles({ position: 'absolute', top: 0, left: 0, zIndex: 3, display: 'none', width: this.container.getStyle('width'), height: this.container.getStyle('height')
}).injectInside(this.container); this.oldImage = new Element('div').setStyles({ position: 'absolute', overflow: 'hidden', top: 0, left: 0, opacity: 0, width: this.container.getStyle('width'), height: this.container.getStyle('height')
}).injectInside(this.container); this.newImage = this.oldImage.clone(); this.newImage.injectInside(this.container); this.timer = 0; this.image = -1; this.imageLoaded = 0; this.stopped = true; this.started = false; this.animating = false;}, rand:function(imgs){ function randOrd(){return (Math.round(Math.random())-0.5);}
imgs = imgs.sort( randOrd ); return imgs;}, load: function(){ $clear(this.timer); this.loading.setStyle('display','block'); this.image++; var img = this.images[this.image]; delete this.imageObj; doLoad = true; this.imagesHolder.getElements('img').each(function(el){ var src = this.images[this.image]; if(el.src == src){ this.imageObj = el; doLoad = false; this.add = false; this.show();}
},this); if(doLoad){ this.add = true; this.imageObj = new Asset.image(img, {onload: this.show.bind(this)});}
}, show: function(add){ if(this.add){ this.imageObj.injectInside(this.imagesHolder);}
this.newImage.setStyles({ zIndex: 1, opacity: 0
}); var img = this.newImage.getElement('img'); if(img){ img.replaceWith(this.imageObj.clone());}else{ var obj = this.imageObj.clone(); obj.injectInside(this.newImage);}
this.imageLoaded = this.image; this.loading.setStyle('display','none'); if(this.options.thumbnails){ if(this.options.backgroundSlider){ var elT = this.thumbnailImages[this.image]; this.bgSlider.move(elT); this.bgSlider.setStart(elT);}else{ this.thumbnails.each(function(el,i){ el.removeClass(this.options.thumbnailCls); if(i == this.image){ el.addClass(this.options.thumbnailCls);}
},this);}
}
this.effect();}, wait: function(){ this.timer = this.load.delay(this.options.wait,this);}, play: function(num){ if(this.stopped){ if(num > -1){this.image = num-1}; if(this.image < this.images.length){ this.stopped = false; if(this.started){ this.next();}else{ this.load();}
this.started = true;}
}
}, stop: function(){ $clear(this.timer); this.stopped = true;}, next: function(wait){ var doNext = true; if(wait && this.stopped){ doNext = false;}
if(this.animating){ doNext = false;}
if(doNext){ this.cloneImage(); $clear(this.timer); if(this.image < this.images.length-1){ if(wait){ this.wait();}else{ this.load();}
}else{ if(this.options.loop){ this.image = -1; if(wait){ this.wait();}else{ this.load();}
}else{ this.stopped = true;}
}
}
}, previous: function(){ if(this.imageLoaded == 0){ this.image = this.images.length-2;}else{ this.image = this.imageLoaded-2;}
this.next();}, cloneImage: function(){ var img = this.oldImage.getElement('img'); if(img){ img.replaceWith(this.imageObj.clone());}else{ var obj = this.imageObj.clone(); obj.injectInside(this.oldImage);}
this.oldImage.setStyles({ zIndex: 0, top: 0, left: 0, opacity: 1
}); this.newImage.setStyles({opacity:0});}, effect: function(){ this.animating = true; this.effectObj = this.newImage.effects({ duration: this.options.duration, transition: this.options.transition
}); var myFxTypes = ['fade','wipe','slide']; var myFxDir = ['top','right','bottom','left']; if(this.options.effect == 'fade'){ this.fade();}else if(this.options.effect == 'wipe'){ if(this.options.direction == 'random'){ this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);}else{ this.setup(this.options.direction);}
this.wipe();}else if(this.options.effect == 'slide'){ if(this.options.direction == 'random'){ this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);}else{ this.setup(this.options.direction);}
this.slide();}else if(this.options.effect == 'random'){ var type = myFxTypes[Math.floor(Math.random()*(2+1))]; if(type != 'fade'){ var dir = myFxDir[Math.floor(Math.random()*(3+1))]; if(this.options.direction == 'random'){ this.setup(dir);}else{ this.setup(this.options.direction);}
}else{ this.setup();}
this[type]();}
}, setup: function(dir){ if(dir == 'top'){ this.top = -this.container.getStyle('height').toInt(); this.left = 0; this.topOut = this.container.getStyle('height').toInt(); this.leftOut = 0;}else if(dir == 'right'){ this.top = 0; this.left = this.container.getStyle('width').toInt(); this.topOut = 0; this.leftOut = -this.container.getStyle('width').toInt();}else if(dir == 'bottom'){ this.top = this.container.getStyle('height').toInt(); this.left = 0; this.topOut = -this.container.getStyle('height').toInt(); this.leftOut = 0;}else if(dir == 'left'){ this.top = 0; this.left = -this.container.getStyle('width').toInt(); this.topOut = 0; this.leftOut = this.container.getStyle('width').toInt();}else{ this.top = 0; this.left = 0; this.topOut = 0; this.leftOut = 0;}
}, fade: function(){ this.effectObj.start({ opacity: [0,1]
}); this.resetAnimation.delay(this.options.duration+90,this); if(!this.stopped){ this.next.delay(this.options.duration+100,this,true);}
}, wipe: function(){ this.oldImage.effects({ duration: this.options.duration, transition: this.options.transition
}).start({ top: [0,this.topOut], left: [0, this.leftOut]
})
this.effectObj.start({ top: [this.top,0], left: [this.left,0], opacity: [1,1]
},this); this.resetAnimation.delay(this.options.duration+90,this); if(!this.stopped){ this.next.delay(this.options.duration+100,this,true);}
}, slide: function(){ this.effectObj.start({ top: [this.top,0], left: [this.left,0], opacity: [1,1]
},this); this.resetAnimation.delay(this.options.duration+90,this); if(!this.stopped){ this.next.delay(this.options.duration+100,this,true);}
}, resetAnimation: function(){ this.animating = false;}
}); SlideShow.implement(new Options); SlideShow.implement(new Events);