//

var Carousel = new Class({
    ctr: -1,
    xpos: 0,
    ypos: 0,
    delay: 0,
    item: [],
    scroll: null,
    frame: null,
    options: {
        group: 1,
        delay: 50,
        duration: 500,
        transition: Fx.Transitions.Cubic.easeIn,
        linkBack: null,
        linkNext: null,
        linkCtrl: 'linkCtrl'
    },

    initialize: function(win, el, options) {
        if (!$(win)) {
            return false;
        }
        
        this.item = new Array();
        this.setOptions(options);
        
        var x = 0;
        $(win).getElements('.' + el).each(function(item) {
            this.ctr++;
            this.item[this.ctr] = {
                left: x,
                width: item.getCoordinates().width,
                height: item.getCoordinates().height
            };
            x += this.item[this.ctr].width;
        }.bind(this));
        
        this.ctr = 0;
        this.frame = $(win).getElement('div');
        this.scroll = new Fx.Scroll(win, {
            wait: true,
            duration: this.options.duration,
            transition: this.options.transition,
            onStart: this.frameOut.bind(this),
            onComplete: this.frameIn.bind(this)
        });

        if (this.options.linkBack) {
            var ctl = new Element('div')
                .injectBefore(win)
                .addClass(this.options.linkCtrl);
            new Element('p')
                .addEvent('mouseover', this.hoverOn)
                .addEvent('mouseout', this.hoverOff)
                .addEvent('click', function() {
                    this.options.delay = -1;
                    this.rewind();
                }.bind(this))
                .addClass(this.options.linkBack)
                .setOpacity(0.2)
                .injectInside(ctl)
                .set('html', 'Back');
            new Element('p')
                .addEvent('mouseover', this.hoverOn)
                .addEvent('mouseout', this.hoverOff)
                .addEvent('click', function() {
                    this.options.delay = -1;
                    this.advance();
                }.bind(this))
                .addClass(this.options.linkNext)
                .setOpacity(0.2)
                .injectInside(ctl)
                .set('html', 'Next');
        }

        this.delay = this.options.delay;
        this.pause.periodical(100, this);
    },
    
    pause: function() {
        if (this.delay == 0) { 
            this.advance.delay(this.options.delay, this);
        } else {
            this.delay--;
        }
    },
    
    advance: function() {
        this.xpos += (this.item[this.ctr].width * this.options.group);
        this.ctr += (1 * this.options.group);
        
        if (this.ctr >= this.item.length) {
            this.xpos = 0;
            this.ctr = 0;
        }
        
        this.render();
    },
    
    rewind: function() {
        this.xpos -= (this.item[this.ctr].width * this.options.group);
        this.ctr -= (1 * this.options.group);
        
        if (this.ctr < 0) {
            this.ctr = this.item.length - 1;
            this.xpos = this.item[this.ctr].left;
        }
        
        this.render();
    },
    
    render: function() {
        this.scroll.start(this.xpos, this.ypos);
        this.delay = this.options.delay;
    },
    
    hoverOn: function() {
        this.tween('opacity', 1, {
            wait: false
        });
    },
    
    hoverOff: function() {
        this.tween('opacity', 0.2, {
            wait: false
        });
    },
    
    frameOut: function() {
        this.frame.tween('opacity', 0.2);
    },
    
    frameIn: function() {
        this.frame.tween('opacity', 1);
    }
});

Carousel.implement(new Options);