var Slideshow = new Class({
options: {
showDuration: 5000,
showControls: true,
showTOC: true,
tocWidth: 35,
tocMargin: 5,
tocClass: 'toc',
tocActiveClass: 'tocActive',
tocIds: ['1', '2', '3', '4'],
tocCats: ['993', '996', '999', '994']
},
Implements: [Options,Events],
initialize: function(container, display) {
this.container = $(container);
this.display = $(display);
this.elements = this.container.getElements('img');
this.currentIndex = 0;
this.interval = '';
if(this.options.showTOC) this.toc = [];
this.elements.each(function(el,i){
if(this.options.showTOC) {
this.toc.push(new Element('a',{
text: this.options.tocIds[i],
href: '#',
'id': this.options.tocIds[i],
'class': this.options.tocClass + '' + (i == 0 ? ' ' + this.options.tocActiveClass : ''),
events: {
click: function(e) {
if(e) e.stop();
this.stop();
this.show(i);
}.bind(this)
},
styles: {
right: ((this.elements.length - i) * (this.options.tocWidth + this.options.tocMargin))
}
}).inject(this.container));
}
if(i > 0) el.set('opacity',0);
},this);
if(this.options.showControls) {
this.createControls();
}
this.container.addEvents({
mouseenter: function() { this.stop(); }.bind(this),
mouseleave: function() { this.start(); }.bind(this)
});
this.display.addEvents({
mouseenter: function() { this.stop(); }.bind(this),
mouseleave: function() { this.start(); }.bind(this)
});
},
show: function(to) {
this.elements[this.currentIndex].fade('out');
if(this.options.showTOC) this.toc[this.currentIndex].removeClass(this.options.tocActiveClass);
this.elements[this.currentIndex = ($defined(to) ? to : (this.currentIndex < this.elements.length - 1 ? this.currentIndex+1 : 0))].fade('in');
if(this.options.showTOC) this.toc[this.currentIndex].addClass(this.options.tocActiveClass);
// Ajax
new Request.HTML({
url: "/ajaxoutput.php?PageID=home-ajax&id_category=" + this.options.tocCats[this.currentIndex],
update: $('selection'),
onRequest: function() {
$('selection').set('html', '
\r\r\r\r\r');
$('selection').style.zIndex = '1000';
$('selection').fade('out');
},
onSuccess: function(responseHTML) {
$('selection').fade('in');
},
onFailure: function() {
$('selection').set('html', '
\r\r\r\r\r');
$('selection').style.zIndex = '1000';
}
}).get();
},
start: function() {
this.interval = this.show.bind(this).periodical(this.options.showDuration);
},
stop: function() {
$clear(this.interval);
},
createControls: function() {
var next = new Element('a',{
href: '#',
id: 'next',
text: '',
events: {
click: function(e) {
if(e) e.stop();
this.stop();
this.show();
}.bind(this)
}
}).inject(this.container);
var previous = new Element('a',{
href: '#',
id: 'previous',
text: '',
events: {
click: function(e) {
if(e) e.stop();
this.stop();
this.show(this.currentIndex != 0 ? this.currentIndex -1 : this.elements.length-1);
}.bind(this)
}
}).inject(this.container);
}
});
window.addEvent('domready', function() {
var slider = new Slideshow('slider', 'selection');
// Ajax
new Request.HTML({
url: "/ajaxoutput.php?PageID=home-ajax&id_category=993",
update: $('selection'),
onRequest: function() {
$('selection').set('html', '\r\r\r\r\r');
$('selection').style.zIndex = '1000';
$('selection').fade('out');
},
onSuccess: function(responseHTML) {
$('selection').fade('in');
},
onFailure: function() {
$('selection').set('html', '\r\r\r\r\r');
$('selection').style.zIndex = '1000';
}
}).get();
slider.start();
});