var Carousel = new Class({

    initialize: function(containerId, imageURLs, numImagesPerSeat, transitionInterval, transitionDuration) {
    
        this.container = $(containerId);
        this.seats = [];
        this.imageURLs = imageURLs || [];
        this.numImagesPerSeat = numImagesPerSeat || 4;
        this.transitionInterval = transitionInterval || 5000;
        this.transitionDuration = transitionDuration || 3000;
        this.previousSeat = 0;
        this.currentSeat = 0;
        this.loadingImages = [];
    
        if(this.container) {
        
            var numSeats = Math.ceil(imageURLs.length/numImagesPerSeat);

            // Create the seats for the carousel
            for(var i = 0; i < numSeats; i++) {
            
                this.seats.push(new Element('div', {'class': 'carousel-seat'}));
            }

            this.currentSeat = this.seats.length - 1;
            this.loadNextSeat();
        }
    },
    
    loadNextSeat: function() {

        this.previousSeat = this.currentSeat;
    
        if(this.currentSeat == this.seats.length - 1) {
        
            this.currentSeat = 0;
            
        } else {
        
            this.currentSeat++;
        }
        
        this.prepareSeat();
    },
    
    prepareSeat: function() {
    
        this.seats[this.currentSeat].setStyle('left', this.container.getCoordinates().width);
        this.seats[this.currentSeat].injectInside(this.container);

        // Is the seat already prepared?
        if(this.seats[this.currentSeat].getChildren().length == 0) {
        
            this.loadingImages = [];
            
            var image;
            var imageIndex;
        
            // Start load of images
            for(var i = 0; i < this.numImagesPerSeat; i++) {
            
                imageIndex = this.currentSeat * this.numImagesPerSeat + i;
            
                if(imageIndex < this.imageURLs.length) {
            
                    image = new Element('img', {'src': this.imageURLs[imageIndex],
                                                'class': 'carousel-passenger'});
                
                    this.loadingImages.push(image);
                    
                    // Add the image to the seat
                    image.injectInside(this.seats[this.currentSeat]);
                }
            }
            
            this.prepareSeat.bind(this).delay(2000);
            
        } else {

            // Check to see if the seat has been loaded yet
            if(this.seatLoaded()) {
            
                this.rotateCarousel();
                
            } else {
            
                this.prepareSeat.bind(this).delay(2000);
            }
        }
    },
    
    seatLoaded: function() {
    
        if(this.loadingImages.length == 0) {
        
            return false;
        }
        
        for(var i = 0; i < this.loadingImages.length; i++) {

            if(this.loadingImages[i].complete == false) {
            
                return false;
            }
        }
        
        return true;
    },
    
    rotateCarousel: function() {

        // Create effects if not already exists
        if(!this.seats[this.previousSeat].fx) {

            this.seats[this.previousSeat].fx = new Fx.Style(this.seats[this.previousSeat], 'left', {duration: this.transitionDuration, 
                                                                                                  transition: Fx.Transitions.Cubic.easeOut,
                                                                                                  onComplete: this.rotateCompleteListener.bind(this, [this.seats[this.previousSeat], this.previousSeat])});
        }
        
        if(!this.seats[this.currentSeat].fx) {
        
            this.seats[this.currentSeat].fx = new Fx.Style(this.seats[this.currentSeat], 'left', {duration: this.transitionDuration,
                                                                                                transition: Fx.Transitions.Cubic.easeOut,
                                                                                                onComplete: this.rotateCompleteListener.bind(this, [this.seats[this.currentSeat], this.currentSeat])});
        }
        
        // Start transition
        this.seats[this.previousSeat].fx.start(0, 0 - this.container.getCoordinates().width);
        this.seats[this.currentSeat].fx.start(this.container.getCoordinates().width, 0);
    },
    
    rotateCompleteListener: function(seat, index) {
    
        // Which seat has completed moving?
        if(index == this.previousSeat) {

            if(seat.parentNode) {
            
                seat.remove();
            }
        
        } else if(index == this.currentSeat) {

            this.loadNextSeat.bind(this).delay(this.transitionInterval);
        }
    }

});