Annnnnnnnnnd part 2.
/**
Private method: show
Does the slideshow effect.
*/
_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);
}
}
},
/**
Private method: loaded
Run after the current image has been loaded, sets up the next image to be shown.
*/
_loaded: function(){
this.counter++;
this.delay = (this.paused) ? Number.MAX_VALUE : $time() + this.options.duration + this.options.delay;
this.direction = 'left';
this.transition = (this.options.fast == 2 || (this.options.fast == 1 && this.paused)) ? 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.image.getStyle('visibility') != 'visible')
(function(){ this.image.setStyle('visibility', 'visible'); }).delay(1, this);
if (this.preloader)
this.preloader = this.preloader.destroy();
this._preload();
},
/**
Private method: center
Center an image.
*/
_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});
}
},
/**
Private method: resize
Resizes an image.
*/
_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)});
}
},
/**
Private method: start
Callback on start of slide change.
*/
_start: function(){
this.fireEvent('start');
},
/**
Private method: complete
Callback on start of slide change.
*/
_complete: function(){
if (this.firstrun && this.options.paused){
this.firstrun = false;
this.pause(1);
}
this.fireEvent('complete');
},
/**
Private method: captions
Builds the optional caption element, adds interactivity.
This method can safely be removed if the captions option is not enabled.
*/
_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);
},
/**
Private method: controller
Builds the optional controller element, adds interactivity.
This method can safely be removed if the controller option is not enabled.
*/
_controller: function(){
if (this.options.controller === true)
this.options.controller = {};
var el = this.slideshow.getElement(this.classes.get('controller'));
var controller = (el) ? el.empty() : new Element('div', {'class': this.classes.get('controller').substr(1)}).inject(this.slideshow);
var ul = new Element('ul').inject(controller);
$H({'first': 'Shift + Leftwards Arrow', 'prev': 'Leftwards Arrow', 'pause': 'P', 'next': 'Rightwards Arrow', 'last': 'Shift + Rightwards Arrow'}).each(function(accesskey, action){
var li = new Element('li', {
'class': (action == 'pause' && this.options.paused) ? this.classes.play + ' ' + this.classes[action] : this.classes[action]
}).inject(ul);
var a = this.slideshow.retrieve(action, new Element('a', {
'title': ((action == 'pause') ? this.classes.play.capitalize() + ' / ' : '') + this.classes[action].capitalize() + ' [' + accesskey + ']'
}).inject(li));
a.set('events', {
'click': function(action){this[action]();}.pass(action, this),
'mouseenter': function(active){this.addClass(active);}.pass(this.classes.active, a),
'mouseleave': function(active){this.removeClass(active);}.pass(this.classes.active, a)
});
}, this);
controller.set({
'events': {
'hide': function(hidden){
if (!this.retrieve('hidden'))
this.store('hidden', true).morph(hidden);
}.pass(this.classes.get('controller', 'hidden'), controller),
'show': function(visible){
if (this.retrieve('hidden'))
this.store('hidden', false).morph(visible);
}.pass(this.classes.get('controller', 'visible'), controller)
},
'morph': $merge(this.options.controller, {'link': 'cancel'})
}).store('hidden', false);
var keydown = function(e){
if (['left', 'right', 'p'].contains(e.key)){
var controller = this.slideshow.retrieve('controller');
if (controller.retrieve('hidden'))
controller.get('morph').set(this.classes.get('controller', 'visible'));
switch(e.key){
case 'left':
this.slideshow.retrieve((e.shift) ? 'first' : 'prev').fireEvent('mouseenter'); break;
case 'right':
this.slideshow.retrieve((e.shift) ? 'last' : 'next').fireEvent('mouseenter'); break;
default:
this.slideshow.retrieve('pause').fireEvent('mouseenter'); break;
}
}
}.bind(this);
this.events.keydown.push(keydown);
var keyup = function(e){
if (['left', 'right', 'p'].contains(e.key)){
var controller = this.slideshow.retrieve('controller');
if (controller.retrieve('hidden'))
controller.store('hidden', false).fireEvent('hide');
switch(e.key){
case 'left':
this.slideshow.retrieve((e.shift) ? 'first' : 'prev').fireEvent('mouseleave'); break;
case 'right':
this.slideshow.retrieve((e.shift) ? 'last' : 'next').fireEvent('mouseleave'); break;
default:
this.slideshow.retrieve('pause').fireEvent('mouseleave'); break;
}
}
}.bind(this);
this.events.keyup.push(keyup);
var mousemove = function(e){
var images = this.slideshow.retrieve('images').getCoordinates();
if (e.page.x > images.left && e.page.x < images.right && e.page.y > images.top && e.page.y < images.bottom)
this.slideshow.retrieve('controller').fireEvent('show');
else
this.slideshow.retrieve('controller').fireEvent('hide');
}.bind(this);
this.events.mousemove.push(mousemove);
document.addEvents({'keydown': keydown, 'keyup': keyup, 'mousemove': mousemove});
this.slideshow.retrieve('controller', controller).fireEvent('hide');
},
/**
Private method: loader
Builds the optional loader element, adds interactivity.
This method can safely be removed if the loader option is not enabled.
*/
_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');
},
/**
Private method: thumbnails
Builds the optional thumbnails element, adds interactivity.
This method can safely be removed if the thumbnails option is not enabled.
*/
_thumbnails: function(){
if (this.options.thumbnails === true)
this.options.thumbnails = {};
var el = this.slideshow.getElement(this.classes.get('thumbnails'));
var thumbnails = (el) ? el.empty() : new Element('div', {'class': this.classes.get('thumbnails').substr(1)}).inject(this.slideshow);
thumbnails.setStyle('overflow', 'hidden');
var ul = new Element('ul', {'tween': {'link': 'cancel'}}).inject(thumbnails);
this.data.thumbnails.each(function(thumbnail, i){
var li = new Element('li').inject(ul);
var a = new Element('a', {
'events': {
'click': function(i){
this.go(i);
return false;
}.pass(i, this),
'loaded': function(){
this.data.thumbnails.pop();
if (!this.data.thumbnails.length){
var div = thumbnails.getCoordinates();
var props = thumbnails.retrieve('props');
var limit = 0, pos = props[1], size = props[2];
thumbnails.getElements('li').each(function(li){
var li = li.getCoordinates();
if (li[pos] > limit) limit = li[pos];
}, this);
thumbnails.store('limit', div[size] + div[props[0]] - limit);
}
}.bind(this)
},
'href': this.options.hu + this.data.images[i],
'morph': $merge(this.options.thumbnails, {'link': 'cancel'})
}).inject(li);
if (this.data.captions[i] && this.options.titles)
a.set('title', this.data.captions[i].replace(/<.+?>/gm, '').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, "'"));
var img = new Asset.image(this.options.hu + thumbnail, {
'onload': function(){this.fireEvent('loaded');}.bind(a)
}).inject(a);
}, this);
thumbnails.set('events', {
'scroll': function(n, fast){
var div = this.getCoordinates();
var ul = this.getElement('ul').getPosition();
var props = this.retrieve('props');
var axis = props[3], delta, pos = props[0], size = props[2], value;
var tween = this.getElement('ul').get('tween', {'property': pos});
if ($chk(n)){
var li = this.getElements('li')[n].getCoordinates();
delta = div[pos] + (div[size] / 2) - (li[size] / 2) - li[pos]
value = (ul[axis] - div[pos] + delta).limit(this.retrieve('limit'), 0);
if (fast)
tween.set(value);
else
tween.start(value);
}
else{
var area = div[props[2]] / 3, page = this.retrieve('page'), velocity = -0.2;
if (page[axis] < (div[pos] + area))
delta = (page[axis] - div[pos] - area) * velocity;
else if (page[axis] > (div[pos] + div[size] - area))
delta = (page[axis] - div[pos] - div[size] + area) * velocity;
if (delta){
value = (ul[axis] - div[pos] + delta).limit(this.retrieve('limit'), 0);
tween.set(value);
}
}
}.bind(thumbnails),
'update': function(fast){
var thumbnails = this.slideshow.retrieve('thumbnails');
thumbnails.getElements('a').each(function(a, i){
if (i == this.slide){
if (!a.retrieve('active', false)){
a.store('active', true);
var active = this.classes.get('thumbnails', 'active');
if (fast) a.get('morph').set(active);
else a.morph(active);
}
}
else {
if (a.retrieve('active', true)){
a.store('active', false);
var inactive = this.classes.get('thumbnails', 'inactive');
if (fast) a.get('morph').set(inactive);
else a.morph(inactive);
}
}
}, this);
if (!thumbnails.retrieve('mouseover'))
thumbnails.fireEvent('scroll', [this.slide, fast]);
}.bind(this)
})
var div = thumbnails.getCoordinates();
thumbnails.store('props', (div.height > div.width) ? ['top', 'bottom', 'height', 'y'] : ['left', 'right', 'width', 'x']);
var mousemove = function(e){
var div = this.getCoordinates();
if (e.page.x > div.left && e.page.x < div.right && e.page.y > div.top && e.page.y < div.bottom){
this.store('page', e.page);
if (!this.retrieve('mouseover')){
this.store('mouseover', true);
this.store('timer', function(){this.fireEvent('scroll');}.periodical(50, this));
}
}
else {
if (this.retrieve('mouseover')){
this.store('mouseover', false);
$clear(this.retrieve('timer'));
}
}
}.bind(thumbnails);
this.events.mousemove.push(mousemove);
document.addEvent('mousemove', mousemove);
this.slideshow.store('thumbnails', thumbnails);
}
});
