var viewer = new Class({ mode: 'rand', modes: ['top', 'right', 'bottom', 'left', 'alpha'], sizes: { w: 480, h: 240 }, fxOptions: { duration: 500 }, interval: 5000, initialize: function(a, b) { if (b) for (var o in b) this[o] = b[o]; if (this.buttons) { this.buttons.previous.addEvent('click', this.previous.bind(this, [true])); this.buttons.next.addEvent('click', this.next.bind(this, [true])) } this.current = 0; this.previous = null; this.items = a.setStyle('display', 'none'); this.items[this.current].setStyle('display', 'block'); this.disabled = false; this.attrs = { left: ['left', -this.sizes.w, 0, 'px'], top: ['top', -this.sizes.h, 0, 'px'], right: ['left', this.sizes.w, 0, 'px'], bottom: ['top', this.sizes.h, 0, 'px'], alpha: ['opacity', 0, 1, ''] }; this.rand = this.mode == 'rand'; this.sequence = typeof (this.mode) == 'object' ? this.mode : false; this.curseq = 0; this.timer = null }, walk: function(n, b) { if (this.current !== n && !this.disabled) { this.disabled = true; if (b) { this.stop() } if (this.rand) { this.mode = this.modes.getRandom() } else if (this.sequence) { this.mode = this.sequence[this.curseq]; this.curseq += this.curseq + 1 < this.sequence.length ? 1 : -this.curseq } this.previous = this.current; this.current = n; var a = this.attrs[this.mode].associate(['p', 'f', 't', 'u']); for (var i = 0; i < this.items.length; i++) { if (this.current === i) { this.items[i].setStyles($extend({ 'display': 'block', 'z-index': '2' }, JSON.decode('{"' + a.p + '":"' + a.f + a.u + '"}'))) } else if (this.previous === i) { this.items[i].setStyles({ 'z-index': '1' }) } else { this.items[i].setStyles({ 'display': 'none', 'z-index': '0' }) } } this.items[n].set('tween', $merge(this.fxOptions, { onComplete: this.onComplete.bind(this) })).tween(a.p, a.f, a.t) } }, play: function(a) { this.stop(); if (!a) { this.next() } this.timer = this.next.periodical(this.interval, this, [false]) }, stop: function() { $clear(this.timer) }, next: function(a) { this.walk(this.current + 1 < this.items.length ? this.current + 1 : 0, a) }, previous: function(a) { this.walk(this.current > 0 ? this.current - 1 : this.items.length - 1, a) }, onComplete: function() { this.disabled = false; this.items[this.previous].setStyle('display', 'none'); if (this.onWalk) this.onWalk(this.current) } });