Slideshow=new Class({
Implements:[Chain,Events,Options],
options:{
captions:false,
center:true,
classes:[],
controller:false,
delay:2000,
duration:750,
fast:false,
height:false,
href:'',
hu:'',
linked:false,
loader:{'animate':['css/loader-#.png',12]},
loop:true,
match:/\?slide=(\d+)$/,
overlap:true,
paused:false,
random:false,
replace:[/(\.[^\.]+)$/,'t$1'],
resize:'width',
slide:0,
thumbnails:false,
transition:function(p){return-(Math.cos(Math.PI*p)-1)/2;},
width:false
},
initialize:function(el,data,options){
this.setOptions(options);
this.slideshow=$(el);
if(!this.slideshow)
return;
this.slideshow.set('styles',{'display':'block','position':'relative','z-index':0});
var match=window.location.href.match(this.options.match);
this.slide=(this.options.match&&match)?match[1].toInt():this.options.slide;
this.counter=this.delay=this.transition=0;
this.direction='left';
this.paused=false;
if(!this.options.overlap)
this.options.duration*=2;
var anchor=this.slideshow.getElement('a')||new Element('a');
if(!this.options.href)
this.options.href=anchor.get('href')||'';
if(this.options.hu.length&&!this.options.hu.test(/\/$/))
this.options.hu+='/';
var keys=['slideshow','first','prev','play','pause','next','last','images','captions','controller','thumbnails','hidden','visible','inactive','active','loader'];
var values=keys.map(function(key,i){
return this.options.classes[i]||key;
},this);
this.classes=values.associate(keys);
this.classes.get=function(){
var str='.'+this.slideshow;
for(var i=0,l=arguments.length;i<l;i++)
str+=('-'+this[arguments[i]]);
return str;
}.bind(this.classes);
if(!data){
this.options.hu='';
data={};
var thumbnails=this.slideshow.getElements(this.classes.get('thumbnails')+' img');
this.slideshow.getElements(this.classes.get('images')+' img').each(function(img,i){
var src=img.get('src');
var caption=img.get('alt')||img.get('title')||'';
var href=img.getParent().get('href')||'';
var thumbnail=thumbnails[i].get('src')||'';
data[src]={'caption':caption,'href':href,'thumbnail':thumbnail};
});
}
var loaded=this.load(data);
if(!loaded)
return;
this.events=$H({'keydown':[],'keyup':[],'mousemove':[]});
var keyup=function(e){
switch(e.key){
case'left':
this.prev(e.shift);break;
case'right':
this.next(e.shift);break;
case'p':
this.pause();break;
}
}.bind(this);
this.events.keyup.push(keyup);
document.addEvent('keyup',keyup);
var el=this.slideshow.getElement(this.classes.get('images'));
var images=(el)?el.empty():new Element('div',{'class':this.classes.get('images').substr(1)}).inject(this.slideshow);
var div=images.getSize();
this.height=this.options.height||div.y;
this.width=this.options.width||div.x;
images.set({'styles':{'display':'block','height':this.height,'overflow':'hidden','position':'relative','width':this.width}});
this.slideshow.store('images',images);
this.a=this.image=this.slideshow.getElement('img')||new Element('img');
this.a.set('styles',{'display':'none','position':'absolute','zIndex':1});
this.b=this.a.clone();
[this.a,this.b].each(function(img){
anchor.clone().grab(img).inject(images);
});
if(this.options.captions)
this._captions();
if(this.options.controller)
this._controller();
if(this.options.loader)
this._loader();
if(this.options.thumbnails)
this._thumbnails();
this._preload();
},
go:function(n,direction){
if((this.slide-1+this.data.images.length)%this.data.images.length==n||$time()<this.transition)
return;
$clear(this.timer);
this.delay=0;
this.direction=(direction)?direction:((n<this.slide)?'right':'left');
this.slide=n;
if(this.preloader)
this.preloader=this.preloader.destroy();
this._preload(this.options.fast||this.paused);
},
first:function(){
this.prev(true);
},
prev:function(first){
var n=0;
if(!first){
if(this.options.random){
if(this.showed.i<2)
return;
this.showed.i-=2;
n=this.showed.array[this.showed.i];
}
else
n=(this.slide-2+this.data.images.length)%this.data.images.length;
}
this.go(n,'right');
},
pause:function(p){
if($chk(p))
this.paused=(p)?false:true;
if(this.paused){
this.paused=false;
this.delay=this.transition=0;
this.timer=this._preload.delay(100,this);
[this.a,this.b].each(function(img){
['morph','tween'].each(function(p){
if(this.retrieve(p))this.get(p).resume();
},img);
});
if(this.options.controller)
this.slideshow.getElement('.'+this.classes.pause).removeClass(this.classes.play);
}
else{
this.paused=true;
this.delay=Number.MAX_VALUE;
this.transition=0;
$clear(this.timer);
[this.a,this.b].each(function(img){
['morph','tween'].each(function(p){
if(this.retrieve(p))this.get(p).pause();
},img);
});
if(this.options.controller)
this.slideshow.getElement('.'+this.classes.pause).addClass(this.classes.play);
}
},
next:function(last){
var n=(last)?this.data.images.length-1:this.slide;
this.go(n,'left');
},
last:function(){
this.next(true);
},
load:function(data){
this.firstrun=true;
this.showed={'array':[],'i':0};
if($type(data)=='array'){
this.options.captions=false;
data=new Array(data.length).associate(data.map(function(image,i){return image+'?'+i}));
}
this.data={'images':[],'captions':[],'hrefs':[],'thumbnails':[]};
for(image in data){
var obj=data[image]||{};
var caption=(obj.caption)?obj.caption.trim():'';
var href=(obj.href)?obj.href.trim():((this.options.linked)?this.options.hu+image:this.options.href);
var thumbnail=(obj.thumbnail)?obj.thumbnail.trim():image.replace(this.options.replace[0],this.options.replace[1]);
this.data.images.push(image);
this.data.captions.push(caption);
this.data.hrefs.push(href);
this.data.thumbnails.push(thumbnail);
}
if(this.options.thumbnails&&this.slideshow.retrieve('thumbnails'))
this._thumbnails();
if(this.slideshow.retrieve('images')){
[this.a,this.b].each(function(img){
['morph','tween'].each(function(p){
if(this.retrieve(p))this.get(p).cancel();
},img);
});
this.slide=this.transition=0;
this.go(0);
}
return this.data.images.length;
},
destroy:function(p){
this.events.each(function(array,e){
array.each(function(fn){document.removeEvent(e,fn);});
});
this.pause(1);
if(this.options.loader)
$clear(this.slideshow.retrieve('loader').retrieve('timer'));
if(this.options.thumbnails)
$clear(this.slideshow.retrieve('thumbnails').retrieve('timer'));
this.slideshow.uid=Native.UID++;
if(p)
this.slideshow[p]();
},
_preload:function(fast){
if(!this.preloader)
this.preloader=new Asset.image(this.options.hu+this.data.images[this.slide],{'onload':function(){
this.store('loaded',true);
}});
if(this.preloader.retrieve('loaded')&&$time()>this.delay&&$time()>this.transition){
if(this.stopped){
if(this.options.captions)
this.slideshow.retrieve('captions').get('morph').cancel().start(this.classes.get('captions','hidden'));
this.pause(1);
if(this.end)
this.fireEvent('end');
this.stopped=this.end=false;
return;
}
this.image=(this.counter%2)?this.b:this.a;
this.image.set('styles',{'display':'block','height':'auto','visibility':'hidden','width':'auto','zIndex':this.counter});
['src','height','width'].each(function(prop){
this.image.set(prop,this.preloader.get(prop));
},this);
this._resize(this.image);
this._center(this.image);
var anchor=this.image.getParent();
if(this.data.hrefs[this.slide])
anchor.set('href',this.data.hrefs[this.slide]);
else
anchor.erase('href');
if(this.data.captions[this.slide])
anchor.set('title',this.data.captions[this.slide].replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,"'"));
else
anchor.erase('title');
if(this.options.loader)
this.slideshow.retrieve('loader').fireEvent('hide');
if(this.options.captions)
this.slideshow.retrieve('captions').fireEvent('update',fast);
if(this.options.thumbnails)
this.slideshow.retrieve('thumbnails').fireEvent('update',fast);
this._show(fast);
this._loaded();
}
else{
if($time()>this.delay&&this.options.loader)
this.slideshow.retrieve('loader').fireEvent('show');
this.timer=(this.paused&&this.preloader.retrieve('loaded'))?null:this._preload.delay(100,this,fast);
}
},
_show:function(fast){
if(!this.image.retrieve('morph')){
var options=(this.options.overlap)?{'duration':this.options.duration,'link':'cancel'}:{'duration':this.options.duration/2,'link':'chain'};
$$(this.a,this.b).set('morph',$merge(options,{'onStart':this._start.bind(this),'onComplete':this._complete.bind(this),'transition':this.options.transition}));
}
var hidden=this.classes.get('images',((this.direction=='left')?'next':'prev'));
var visible=this.classes.get('images','visible');
var img=(this.counter%2)?this.a:this.b;
if(fast){
img.get('morph').cancel().set(hidden);
this.image.get('morph').cancel().set(visible);
}
else{
if(this.options.overlap){
img.get('morph').set(visible);
this.image.get('morph').set(hidden).start(visible);
}
else{
var fn=function(hidden,visible){
this.image.get('morph').set(hidden).start(visible);
}.pass([hidden,visible],this);
hidden=this.classes.get('images',((this.direction=='left')?'prev':'next'));
img.get('morph').set(visible).start(hidden).chain(fn);
}
}
},
_loaded:function(){
this.counter++;
this.delay=(this.paused)?Number.MAX_VALUE:$time()+this.options.duration+this.options.delay;
this.direction='left';
this.transition=(this.paused||this.options.fast)?0:$time()+this.options.duration;
if(this.slide+1==this.data.images.length&&!this.options.loop&&!this.options.random)
this.stopped=this.end=true;
if(this.options.random){
this.showed.i++;
if(this.showed.i>=this.showed.array.length){
var n=this.slide;
if(this.showed.array.getLast()!=n)this.showed.array.push(n);
while(this.slide==n)
this.slide=$random(0,this.data.images.length-1);
}
else
this.slide=this.showed.array[this.showed.i];
}
else
this.slide=(this.slide+1)%this.data.images.length;
if(this.preloader)
this.preloader=this.preloader.destroy();
this._preload();
},
_center:function(img){
if(this.options.center){
var size=img.getSize();
img.set('styles',{'left':(size.x-this.width)/-2,'top':(size.y-this.height)/-2});
}
},
_resize:function(img){
if(this.options.resize){
var h=this.preloader.get('height'),w=this.preloader.get('width');
var dh=this.height/h,dw=this.width/w,d;
if(this.options.resize=='length')
d=(dh>dw)?dw:dh;
else
d=(dh>dw)?dh:dw;
img.set('styles',{height:Math.ceil(h*d),width:Math.ceil(w*d)});
}
},
_start:function(){
this.fireEvent('start');
},
_complete:function(){
if(this.firstrun&&this.options.paused){
this.firstrun=false;
this.pause(1);
}
this.fireEvent('complete');
},
_captions:function(){
if(this.options.captions===true)
this.options.captions={};
var el=this.slideshow.getElement(this.classes.get('captions'));
var captions=(el)?el.empty():new Element('div',{'class':this.classes.get('captions').substr(1)}).inject(this.slideshow);
captions.set({
'events':{
'update':function(fast){
var captions=this.slideshow.retrieve('captions');
var empty=(this.data.captions[this.slide]==='');
if(fast){
var p=(empty)?'hidden':'visible';
captions.set('html',this.data.captions[this.slide]).get('morph').cancel().set(this.classes.get('captions',p));
}
else{
var fn=(empty)?$empty:function(n){
this.slideshow.retrieve('captions').set('html',this.data.captions[n]).morph(this.classes.get('captions','visible'))
}.pass(this.slide,this);
captions.get('morph').cancel().start(this.classes.get('captions','hidden')).chain(fn);
}
}.bind(this)
},
'morph':$merge(this.options.captions,{'link':'chain'})
});
this.slideshow.store('captions',captions);
},
_loader:function(){
if(this.options.loader===true)
this.options.loader={};
var loader=new Element('div',{
'class':this.classes.get('loader').substr(1),
'morph':$merge(this.options.loader,{'link':'cancel'})
}).store('hidden',false).store('i',1).inject(this.slideshow.retrieve('images'));
if(this.options.loader.animate){
for(var i=0;i<this.options.loader.animate[1];i++)
img=new Asset.image(this.options.loader.animate[0].replace(/#/,i));
if(Browser.Engine.trident4&&this.options.loader.animate[0].contains('png'))
loader.setStyle('backgroundImage','none');
}
loader.set('events',{
'animate':function(){
var loader=this.slideshow.retrieve('loader');
var i=(loader.retrieve('i').toInt()+1)%this.options.loader.animate[1];
loader.store('i',i);
var img=this.options.loader.animate[0].replace(/#/,i);
if(Browser.Engine.trident4&&this.options.loader.animate[0].contains('png'))
loader.style.filter='progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+img+'", sizingMethod="scale")';
else
loader.setStyle('backgroundImage','url('+img+')');
}.bind(this),
'hide':function(){
var loader=this.slideshow.retrieve('loader');
if(!loader.retrieve('hidden')){
loader.store('hidden',true).morph(this.classes.get('loader','hidden'));
if(this.options.loader.animate)
$clear(loader.retrieve('timer'));
}
}.bind(this),
'show':function(){
var loader=this.slideshow.retrieve('loader');
if(loader.retrieve('hidden')){
loader.store('hidden',false).morph(this.classes.get('loader','visible'));
if(this.options.loader.animate)
loader.store('timer',function(){this.fireEvent('animate');}.periodical(50,loader));
}
}.bind(this)
});
this.slideshow.retrieve('loader',loader).fireEvent('hide');
}
});