var SlideShow = new Class({ getOptions: function() {
    return { effect: 'fade', duration: 2000, transition: Fx.Transitions.linear, direction: 'right', color: false, wait: 5000, loop: false, thumbnails: false, thumbnailCls: 'outline', backgroundSlider: false, loadingCls: 'loading', onClick: false
    };
}, initialize: function(container, images, options) {
    this.setOptions(this.getOptions(), options); this.container = $(container); this.container.setStyles({ position: 'relative', overflow: 'hidden'
    }); if (this.options.onClick) { this.container.addEvent('click', function() { this.options.onClick(this.imageLoaded); } .bind(this)); }
    this.imagesHolder = new Element('div').setStyles({ position: 'absolute', overflow: 'hidden', top: this.container.getStyle('height'), left: 0, width: '0px', height: '0px', display: 'none'
    }).injectInside(this.container); if ($type(images) == 'string' && !this.options.thumbnails) { var imageList = []; $$('.' + images).each(function(el) { imageList.push(el.src); el.injectInside(this.imagesHolder); }, this); this.images = imageList; } else if ($type(images) == 'string' && this.options.thumbnails) {
        var imageList = []; var srcList = []; this.thumbnails = $$('.' + images); this.thumbnails.each(function(el, i) { srcList.push(el.href); imageList.push(el.getElement('img')); el.href = 'javascript:;'; el.addEvent('click', function() { this.stop(); this.play(i); } .bind(this, el, i)); }, this); this.images = srcList; this.thumbnailImages = imageList; if (this.options.backgroundSlider) { this.bgSlider = new BackgroundSlider(this.thumbnailImages, { mouseOver: false, duration: this.options.duration, className: this.options.thumbnailCls, padding: { top: 0, right: 1, bottom: -1, left: -2} }); this.bgSlider.set(this.thumbnailImages[0]); }
    } else { this.images = images; }
    this.loading = new Element('div').addClass(this.options.loadingCls).setStyles({ position: 'absolute', top: 0, left: 0, zIndex: 3, display: 'none', width: this.container.getStyle('width'), height: this.container.getStyle('height')
    }).injectInside(this.container); this.oldImage = new Element('div').setStyles({ position: 'absolute', overflow: 'hidden', top: 0, left: 0, opacity: 0, width: this.container.getStyle('width'), height: this.container.getStyle('height')
    }).injectInside(this.container); this.newImage = this.oldImage.clone(); this.newImage.injectInside(this.container); this.timer = 0; this.image = -1; this.imageLoaded = 0; this.stopped = true; this.started = false; this.animating = false;
}, load: function() {
    $clear(this.timer); this.loading.setStyle('display', 'block'); this.image++; var img = this.images[this.image]; delete this.imageObj; doLoad = true; this.imagesHolder.getElements('img').each(function(el) {
        var src = this.images[this.image]; if (el.src == src) { this.imageObj = el; doLoad = false; this.add = false; this.show(); }
    }, this); if (doLoad) { this.add = true; this.imageObj = new Asset.image(img, { onload: this.show.bind(this) }); }
}, show: function(add) {
    if (this.add) { this.imageObj.injectInside(this.imagesHolder); }
    this.newImage.setStyles({ zIndex: 1, opacity: 0
    }); var img = this.newImage.getElement('img'); if (img) { img.replaceWith(this.imageObj.clone()); } else { var obj = this.imageObj.clone(); obj.injectInside(this.newImage); }
    this.imageLoaded = this.image; this.loading.setStyle('display', 'none'); if (this.options.thumbnails) {
        if (this.options.backgroundSlider) { var elT = this.thumbnailImages[this.image]; this.bgSlider.move(elT); this.bgSlider.setStart(elT); } else {
            this.thumbnails.each(function(el, i) {
                el.removeClass(this.options.thumbnailCls); if (i == this.image) { el.addClass(this.options.thumbnailCls); }
            }, this);
        }
    }
    this.effect();
}, wait: function() { this.timer = this.load.delay(this.options.wait, this); }, play: function(num) {
    if (this.stopped) {
        if (num > -1) { this.image = num - 1 }; if (this.image < this.images.length) {
            this.stopped = false; if (this.started) { this.next(); } else { this.load(); }
            this.started = true;
        }
    }
}, stop: function() { $clear(this.timer); this.stopped = true; }, next: function(wait) {
    var doNext = true; if (wait && this.stopped) { doNext = false; }
    if (this.animating) { doNext = false; }
    if (doNext) {
        this.cloneImage(); $clear(this.timer); if (this.image < this.images.length - 1) {
            if (wait) { this.wait(); } else { this.load(); }
        } else {
            if (this.options.loop) {
                this.image = -1; if (wait) { this.wait(); } else { this.load(); }
            } else { this.stopped = true; }
        }
    }
}, previous: function() {
    if (this.imageLoaded == 0) { this.image = this.images.length - 2; } else { this.image = this.imageLoaded - 2; }
    this.next();
}, cloneImage: function() {
    var img = this.oldImage.getElement('img'); if (img) { img.replaceWith(this.imageObj.clone()); } else { var obj = this.imageObj.clone(); obj.injectInside(this.oldImage); }
    this.oldImage.setStyles({ zIndex: 0, top: 0, left: 0, opacity: 1
    }); this.newImage.setStyles({ opacity: 0 });
}, effect: function() {
    this.animating = true; this.effectObj = this.newImage.effects({ duration: this.options.duration, transition: this.options.transition
    }); var myFxTypes = ['fade', 'wipe', 'slide']; var myFxDir = ['top', 'right', 'bottom', 'left']; if (this.options.effect == 'fade') { this.fade(); } else if (this.options.effect == 'wipe') {
        if (this.options.direction == 'random') { this.setup(myFxDir[Math.floor(Math.random() * (3 + 1))]); } else { this.setup(this.options.direction); }
        this.wipe();
    } else if (this.options.effect == 'slide') {
        if (this.options.direction == 'random') { this.setup(myFxDir[Math.floor(Math.random() * (3 + 1))]); } else { this.setup(this.options.direction); }
        this.slide();
    } else if (this.options.effect == 'random') {
        var type = myFxTypes[Math.floor(Math.random() * (2 + 1))]; if (type != 'fade') {
            var dir = myFxDir[Math.floor(Math.random() * (3 + 1))]; if (this.options.direction == 'random') { this.setup(dir); } else { this.setup(this.options.direction); }
        } else { this.setup(); }
        this[type]();
    }
}, setup: function(dir) {
    if (dir == 'top') { this.top = -this.container.getStyle('height').toInt(); this.left = 0; this.topOut = this.container.getStyle('height').toInt(); this.leftOut = 0; } else if (dir == 'right') { this.top = 0; this.left = this.container.getStyle('width').toInt(); this.topOut = 0; this.leftOut = -this.container.getStyle('width').toInt(); } else if (dir == 'bottom') { this.top = this.container.getStyle('height').toInt(); this.left = 0; this.topOut = -this.container.getStyle('height').toInt(); this.leftOut = 0; } else if (dir == 'left') { this.top = 0; this.left = -this.container.getStyle('width').toInt(); this.topOut = 0; this.leftOut = this.container.getStyle('width').toInt(); } else { this.top = 0; this.left = 0; this.topOut = 0; this.leftOut = 0; }
}, fade: function() {
    this.effectObj.start({ opacity: [0, 1]
    }); this.resetAnimation.delay(this.options.duration + 90, this); if (!this.stopped) { this.next.delay(this.options.duration + 100, this, true); }
}, wipe: function() {
    this.oldImage.effects({ duration: this.options.duration, transition: this.options.transition
    }).start({ top: [0, this.topOut], left: [0, this.leftOut]
    })
    this.effectObj.start({ top: [this.top, 0], left: [this.left, 0], opacity: [1, 1]
    }, this); this.resetAnimation.delay(this.options.duration + 90, this); if (!this.stopped) { this.next.delay(this.options.duration + 100, this, true); }
}, slide: function() {
    this.effectObj.start({ top: [this.top, 0], left: [this.left, 0], opacity: [1, 1]
    }, this); this.resetAnimation.delay(this.options.duration + 90, this); if (!this.stopped) { this.next.delay(this.options.duration + 100, this, true); }
}, resetAnimation: function() { this.animating = false; }
}); SlideShow.implement(new Options); SlideShow.implement(new Events);