var Carousel = Class.create({
    
    initialize: function(element, options) {
    
        this.element = $(element);
        
        this.options = Object.extend({
            imageWidth:      90,
            padWidth:        15,
            numVisible:      7,
            outerFrameClass: 'ShowImg',
            innerFrameClass: 'imagecontainer',
            prevButtonClass: 'PrevLink',
            nextButtonClass: 'NextLink'
        }, options || {});
        
        this.isMax = false;
        this.isMin = false;
        
        this.outerFrame = this.element.select('.'+this.options.outerFrameClass)[0];
        this.innerFrame = this.outerFrame.select('.'+this.options.innerFrameClass)[0];
        
        // IE6 wants this
        this.innerFrame.setStyle({ left: '0px' });
        
        this.prevButton = this.element.select('.'+this.options.prevButtonClass)[0];
        this.nextButton = this.element.select('.'+this.options.nextButtonClass)[0];
        
        this.numImages = this.innerFrame.select('img').grep({
            match: function(element) { return element.visible(); }
        }).length;

        this.totalImagesWidth = ((this.numImages * (this.options.imageWidth + this.options.padWidth)) - this.options.padWidth);
        this.visibleWidth     = this.outerFrame.getStyle('width').sub('px', '');
        
        this.maxLeft = this.totalImagesWidth - this.visibleWidth;
        
        if(this.prevButton) {
            if(this.getLeft() <= 0)
            new Effect.Fade(this.prevButton, { to: 0.25, duration: 0.5 });
                
            this.prevButton.observe('click', this.scrollPrev.bind(this));
        }
        
        if(this.nextButton)  {
            if(this.getLeft() >= this.maxLeft)
            new Effect.Fade(this.nextButton, { to: 0.25, duration: 0.5 });
                
            this.nextButton.observe('click', this.scrollNext.bind(this));
        }
    },
    
    scrollPrev: function() {
        
        if(this.nextButton)
        new Effect.Fade(this.nextButton, { to: 1, duration: 0.5 })
        
        var curLeft = this.getLeft();
        var toLeft = curLeft - (this.options.numVisible * (this.options.imageWidth + this.options.padWidth));

        if(toLeft <= 0) {
            new Effect.Fade(this.prevButton, { to: 0.25, duration: 0.5 });
            toLeft = 0;
        }

        var scrollFunc = this.scrollTo.bind(this);
        scrollFunc(toLeft);
    },
    
    scrollNext: function() {
        
        this.isMin = false;
        
        if(this.prevButton)
        new Effect.Fade(this.prevButton, { to: 1, duration: 0.5 });
        
        var curLeft = this.getLeft();
        var toLeft = curLeft + (this.options.numVisible * (this.options.imageWidth + this.options.padWidth));
        
        if(toLeft >= this.maxLeft) {
            new Effect.Fade(this.nextButton, { to: 0.25, duration: 0.5 });
            toLeft = this.maxLeft;
        }
        
        var scrollFunc = this.scrollTo.bind(this);
        scrollFunc(toLeft);
    },
    
    scrollTo: function(to) {
        var toStr = '-' + to + 'px';
        
        if(Effect.Morph) {
            new Effect.Morph(this.innerFrame, {
                style: { left: toStr },
                transition: Effect.Transitions.sinoidal
            })
        } else {
            this.innerFrame.setStyle({ left: toStr });
        }
    },
    
    getLeft: function() {
        var styleLeft = $(this.innerFrame).getStyle('left');
        return Math.abs(styleLeft.sub('px', ''));
    }
});