/*
---
script: SlideShow.js
description: The ultimate, class-based, slideshow class. Use any element, not just images. so it's prefect for galleries, newstickers, whatever. Comes with packaged transitions but is ridiculously easy to extend and create your own transitions
license: MIT-style license.
authors: Ryan Florence
docs: http://moodocs.net/rpflo/mootools-rpflo/SlideShow
provides: [SlideShow]
...
*/
var Loop = new Class({
loopCount: 0,
isStopped: true,
isLooping: false,
loopMethod: $empty,
setLoop: function(fn,delay){
if(this.isLooping) this.stopLoop();
this.loopMethod = fn;
this.loopDelay = delay || 3000;
return this;
},
stopLoop: function() {
this.isStopped = true;
this.isLooping = false;
$clear(this.periodical);
return this;
},
startLoop: function(delay) {
if(this.isStopped){
var delay = (delay) ? delay : this.loopDelay;
this.isStopped = false;
this.isLooping = true;
this.periodical = this.looper.periodical(delay,this);
};
return this;
},
resetLoop: function(){
this.loopCount = 0;
return this;
},
looper: function(){
this.loopCount++;
this.loopMethod(this.loopCount);
return this;
}
});
var SlideShow = new Class({
Implements: [Options, Events, Loop],
options: {
delay: 7000
},
initialize: function(element, options){
this.setOptions(options);
this.setLoop(this.showNext, this.options.delay);
this.element = document.id(element);
this.slides = this.element.getChildren();
this.current = this.slides[0];
this.setup();
},
setup: function(){
this.slides.each(function(slide, index){
this.storeTransition(slide).reset(slide);
if(index != 0) slide.setStyle('display','none');
}, this);
},
storeTransition: function(slide){
var classes = slide.get('class');
var transitionRegex = /transition:[a-zA-Z]+/;
var durationRegex = /duration:[0-9]+/;
var transition = classes.match(transitionRegex)[0].split(':')[1];
var duration = classes.match(durationRegex)[0].split(':')[1];
slide.store('ssTransition', transition);
slide.store('ssDuration', duration);
return this;
},
getTransition: function(slide){
return slide.retrieve('ssTransition');
},
getDuration: function(slide){
return slide.retrieve('ssDuration');
},
show: function(slide){
var transition = this.getTransition(slide);
var duration = this.getDuration(slide);
var previous = this.current.setStyle('z-index', 1);
var next = this.reset(slide);
this.transitions[transition](previous, next, duration, this);
(function() { previous.setStyle('display','none'); }).bind(this).delay(duration);
this.current = next;
return this;
},
reset: function(slide){
return slide.setStyles({
'position': 'absolute',
'z-index': 0,
'display': 'block',
'left': 0,
'top': 0
}).fade('show');
return this;
},
nextSlide: function(){
var next = this.current.getNext();
return (next) ? next : this.slides[0];
},
previousSlide: function(){
var previous = this.current.getPrevious();
return (previous) ? previous : this.slides.getLast();
},
showNext: function(){
this.show(this.nextSlide());
return this;
},
showPrevious: function(){
this.show(this.previousSlide());
return this;
}
});
SlideShow.adders = {
transitions:{},
add: function(className, fn){
this.transitions[className] = fn;
this.implement({
transitions: this.transitions
});
},
addAllThese : function(transitions){
$A(transitions).each(function(transition){
this.add(transition[0], transition[1]);
}, this);
}
}
$extend(SlideShow, SlideShow.adders);
SlideShow.implement(SlideShow.adders);
SlideShow.add('fade', function(previous, next, duration, instance){
previous.set('tween',{duration: duration}).fade('out');
return this;
});
SlideShow.addAllThese([
['crossFade', function(previous, next, duration, instance){
previous.set('tween',{duration: 80}).fade('out');
next.set('tween',{duration: duration}).fade('in');
return this;
}]
]);
window.addEvent('domready', function(){
var slides = $('slides')
slides.set('opacity',1);
var mySlideShow = new SlideShow('slides',{
delay: 8000
}).startLoop();
var remote_ctrl = $('remote-control');
if (remote_ctrl) {
var prevli = remote_ctrl.getChildren();
var remote_btns = {};
prevli.each(function(li){
remote_btns[li.className] = li.getElement('a');
switch (li.className) {
case 'prev':
remote_btns[li.className].addEvent('click', function(e) {
e.preventDefault();
mySlideShow.showPrevious();
this.blur();
});
break;
case 'pause':
remote_btns[li.className].addEvent('click', function(e) {
e.preventDefault();
mySlideShow.stopLoop();
prevli[1].setStyle('display','none');
prevli[2].setStyle('display','block');
this.blur();
});
break;
case 'play':
remote_btns[li.className].addEvent('click', function(e) {
e.preventDefault();
mySlideShow.startLoop();
prevli[2].setStyle('display','none');
prevli[1].setStyle('display','block');
this.blur();
});
break;
case 'next':
remote_btns[li.className].addEvent('click', function(e) {
e.preventDefault();
mySlideShow.showNext();
this.blur();
});
break;
}
});
}
var browser_name = '';
var ua = navigator.userAgent.toLowerCase();
switch (Browser.Engine.name) {
case 'trident':
browser_name = 'Internet Explorer';
break;
case 'gecko':
browser_name = 'Firefox';
break;
case 'presto':
browser_name = 'Opera';
break;
case 'webkit':
if (ua.match(/Opera[\s\/]([^\s]*)/)) {
browser_name = 'Opera';
} else if (ua.indexOf('chrome') > -1) {
browser_name = 'Google Chrome';
} else if (/Apple.*Mobile.*Safari/.test(ua)) {
browser_name = 'Safari Mobile';
} else {
browser_name = 'Safari';
}
break;
}
var asc_tooltips = new AscTips([{ id:"what-browser",msg:"What’s a web browser?
You’re using one right now to view this website…the " + browser_name + " browser.
Click to learn more",cls:'',align:'s',width:185 }], { default_align:'sw' });
var modal = new AscModal('', '', {
addCloseBtn: true,
speed: 300,
popOpacity: 1,
onHide: function(e) {
this.popc.empty();
var tipnote = new Element('div',{'class':'mi'}).inject(this.popc);
mySlideShow.startLoop();
}
});
var what_browser = $('what-browser');
if (what_browser) {
what_browser.addEvent('click', function(e) {
e.preventDefault();
mySlideShow.stopLoop();
modal.set_contents('', 'browser', 540);
modal.show();
});
}
});