var Scrollers = new Class({

    initialize: function() {
        $$('.scroller').each(function(scroller) {
        
            // Get the data wrapper
            var dataWrapper = scroller.getElement('.data');
            
            // Get all the items
            var items = dataWrapper.getElements('.item');
            
            var hiddenElements = dataWrapper.getElements('.hidden');
            
            hiddenElements.each(function(el) {
            
                el.dispose(); // Remove from DOM
                el.removeClass('hidden'); // Remove hidden class
            });
            
            var scrollerWindow = new ScrollerWindow(items, (items.length - hiddenElements.length));
        
            // Setup forward/backward events
            var forwardButton = scroller.getElement('.forward');
            
            if(forwardButton) {
            
                if(scroller.hasClass('scroller-vertical')) {
            
                    forwardButton.addEvent('click', this.scroll.bindWithEvent(this, [scroller, scrollerWindow, dataWrapper, 'forward', 'vertical']));
                    
                } else {
                
                    forwardButton.addEvent('click', this.scroll.bindWithEvent(this, [scroller, scrollerWindow, dataWrapper, 'forward', 'horizontal']));
                }
            }
            
            var backwardButton = scroller.getElement('.backward');
            
            if(backwardButton) {
            
                if(scroller.hasClass('scroller-vertical')) {
            
                    backwardButton.addEvent('click', this.scroll.bindWithEvent(this, [scroller, scrollerWindow, dataWrapper, 'backward', 'vertical']));
                    
                } else {
                
                    backwardButton.addEvent('click', this.scroll.bindWithEvent(this, [scroller, scrollerWindow, dataWrapper, 'backward', 'horizontal']));
                }
            }
            
            // Enable/disable buttons appropriately
            this.updateButtons(scroller, scrollerWindow);
        
        }, this);
    },
    
    scroll: function(event, scroller, scrollerWindow, dataWrapper, direction, orientation) {
    
        if(!this.scrolling) {
        
            // Flag a scroll is happening to prevent any other attempts
            this.scrolling = true;

            var itemToInsert;
            var itemToRemove;
            
            if(direction == 'backward') {
            
                itemToRemove = dataWrapper.getElement('.item:first-child');
                itemToInsert = scrollerWindow.previous();
                
                // Check there is an item to insert
                if(!itemToInsert) {
                
                    this.scrolling = false;
                    return false;
                }
                
                itemToInsert.inject(dataWrapper, 'bottom');

            } else {
            
                itemToRemove = dataWrapper.getElement('.item:last-child');
                itemToInsert = scrollerWindow.next();
                
                // Check there is an item to insert
                if(!itemToInsert) {
                
                    this.scrolling = false;
                    return false;
                }
                
                itemToInsert.inject(dataWrapper, 'top');
            }
            
            this.updateButtons(scroller, scrollerWindow);
            
            itemToInsert.setStyle('opacity', 0);
            
            if(orientation == 'vertical') {
            
                itemToInsert.setStyle('height', 0);
                
            } else {
            
                itemToInsert.setStyle('width', 0);
            }
            
            // Animate disappearance of item to remove
            var fx = new Fx.Elements([itemToRemove, itemToInsert], {
    
                duration: 'short',
                onComplete: (function() { 
                
                    itemToRemove.dispose();
                    this.scrolling = false;
                    
                }).bind(this)
    
            });
            
            if(orientation == 'vertical') {
            
                fx.start({
                
                    '0': {'height': 0, 'opacity': 0},
                    '1': {'height': itemToRemove.getStyle('height')}
                });
            
            } else {
    
                fx.start({
                
                    '0': {'width': 0, 'opacity': 0},
                    '1': {'width': itemToRemove.getStyle('width')}
                });
            }
            
            // Animate display of item to insert
            (function() { 
            
                new Fx.Elements([itemToInsert]).start({'0': {'opacity': 1}});
                
            }).delay(250);
        }
    
        event.preventDefault();
        
        return true;
    },
    
    updateButtons: function(scroller, scrollerWindow) {
    
        if(scrollerWindow.isFirst()) {
        
            this.disableButton(scroller.getElement('.forward'));
            
        } else {
        
            this.enableButton(scroller.getElement('.forward'));
        }
        
        if(scrollerWindow.isLast()) {
        
            this.disableButton(scroller.getElement('.backward'));
        
        } else {
        
            this.enableButton(scroller.getElement('.backward'));
        }
    },
    
    enableButton: function(button) {
    
        button.removeClass('disabled');
    },
    
    disableButton: function(button) {
    
        button.addClass('disabled');
    }
    
});