var ImageFlipper = new Class({
    Implements: Options,
    options: {
        imgurlarr: null,
        divcontainer: null,
        divcontainer2: null,
        startIndex: -1

    }, 
    initialize: function(options) {
        this.setOptions(options);

        this.imgarr = new Array();
        this.currIndex = this.options.startIndex;
        this.currX = 0;
        this.myFx = new Fx.Tween(this.options.divcontainer.firstChild, { duration: 1000 });

        this.imgarr = $(this.options.divcontainer.firstChild).getElements('img');

        //this.imgarr.clean();

    },

    add: function(url) {
        this.imgarr.push(url);
    },

    next: function() {

        this.currIndex++;

        if (this.currIndex > this.imgarr.length)
            this.currIndex = 0;

        var img = this.imgarr[this.currIndex];

        if (img.toString().indexOf("http") == -1) {

            this.currX = (img.getPosition().x - this.options.divcontainer.getPosition().x) * (-1);

            this.myFx.start('left', this.currX + "px");
        }
    }

});

var ImageFader = new Class({
    Implements: Options,
    options: {
        imgurlarr: null,
        imgcontainer: null,
        imgcontainerback: null,
        startIndex: 0,
        slideshow: true,
        pauseduration: 5000,
        flipduration: 1400,
        doublefade: false

    },
    initialize: function(options) {
        this.setOptions(options);

        this.imgarr = new Array();
        this.currIndex = this.options.startIndex;

        this.myFx = new Fx.Tween(this.options.imgcontainer, { duration: this.options.flipduration, onComplete: this.onFadeComplete.bind(this) });

        this.options.imgcontainer.addEvent("load", this.onImageLoaded.bind(this));



        //        if (this.options.slideshow == true)
        //            this.next.bind(this).delay(this.options.pauseduration);
    },

    add: function(url) {
        this.imgarr.push(url);
    },

    next: function() {

        this.currIndex++;

        if (this.currIndex >= this.imgarr.length)
            this.currIndex = 0;

        this.options.imgcontainerback.src = this.imgarr[this.currIndex];

        this.myFx.start('opacity', '0');

    },

    onImageLoaded: function(e) {

        this.myFx.start('opacity', '1');
    },

    onFadeComplete: function(e) {
        var op = this.options.imgcontainer.get('opacity');

        if (op.toInt() <= 0) {
            this.options.imgcontainer.src = this.imgarr[this.currIndex];

        } else {

            if (this.options.slideshow == true)
                this.next.bind(this).delay(this.options.pauseduration);
        }
    }

});