//array.shuffle functie voor mootools
Array.implement({
shuffle:function() {
this.sort(function (x,y) { return Math.floor(Math.random()*3)-1; });
return this;
} 
});

/**************************************************************

Script          : SlideShow
Version         : 1.3
Authors         : Samuel Birch
Desc            : 
Licence         : Open Source MIT Licence

**************************************************************/

var SlideShow = new Class({

    getOptions: function () {
        return {
            effect: 'fade', //fade|wipe|slide|random
            duration: 2000,
            transition: Fx.Transitions.linear,
            direction: 'right', //top|right|bottom|left|random
            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: -2, bottom: -2, left: 0} });
                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);


/*************************************************************/