var SimpleSlideshow = new Class({ options: { showControls: true, showDuration: 3000, showTOC: true, tocWidth: 10, tocClass: "toc", tocActiveClass: "toc-active" }, Implements: [Options, Events], initialize: function(a, c, b) { this.container = $(a); this.elements = $$(c); this.currentIndex = 0; this.interval = ""; if (this.options.showTOC) { this.toc = [] } this.elements.each(function(e, d) { if (this.options.showTOC) { this.toc.push(new Element("a", { text: d + 1, href: "#", "class": this.options.tocClass + "" + (d == 0 ? " " + this.options.tocActiveClass : ""), events: { click: function(f) { if (f) { f.stop() } this.stop(); this.show(d); if(this.PlayButton.id == "Pause"){ this.start();} } .bind(this) }, styles: { left: ((d + 1) * (this.options.tocWidth + 10))} }).inject(this.container)) } if (d > 0) { e.set("opacity", 0) } }, this); if (this.options.showControls) { this.createControls() } }, show: function(a) { this.elements[this.currentIndex].fade("out"); if (this.options.showTOC) { this.toc[this.currentIndex].removeClass(this.options.tocActiveClass) } this.currentIndex = ($defined(a) ? a : (this.currentIndex < this.elements.length - 1 ? this.currentIndex + 1 : 0)); this.elements[this.currentIndex].fade("in"); if (this.options.showTOC) { this.toc[this.currentIndex].addClass(this.options.tocActiveClass) } }, start: function() { this.interval = this.show.bind(this).periodical(this.options.showDuration) }, stop: function() { $clear(this.interval) }, createControls: function() { this.PlayButton = new Element("a", { href: "#", id: "Pause", "class": "toc", events: { click: function(a) { if (a) { a.stop() } if (this.PlayButton.id == "Pause") { this.PlayButton.id = "Start"; this.PlayButton.className = this.options.tocClass; this.stop() } else { this.PlayButton.id = "Pause"; this.PlayButton.className = this.options.tocClass + " " + this.options.tocActiveClass; this.start() } } .bind(this) }, styles: { left: ((this.elements.length+ 1) * (this.options.tocWidth + 10))} }).inject(this.container) } });