var FadeCar = new Class({
    
    initialize: function( cntr ) {
        this.container = cntr;
        this.current = 0;
        this.buildControls();
        this.vPort = $('cViewPort');
        this.panes = this.vPort.getElements('div');
        this.arrowMove;
        this.arrow = $('cArrow');
        this.arrow.set('morph', { duration: 750, link:'cancel',transition: Fx.Transitions.Pow.easeOut });
        this.controls;
        this.timer = null;
        
        if(Browser.Engine.trident4) {
            this.arrow.setStyle('display', 'none');
        }
        
        this.panes.each(function(p,i) {
            p.set('morph');
            if(i>0) {
                p.setOpacity(0);
            }
        
            if (Browser.Engine.trident4){
                var info = p.getElement('span.info');
                info.setStyle('background', '#000');
                info.setOpacity(.75);
            }
            
        });
        
        this.timer = this.autoPlay.periodical(3050, this);
        
        this.container.addEvent('mouseenter', function(e) {
            $clear(this.timer);
        }.bind(this));
        
        this.container.addEvent('mouseleave', function(e) {
            this.timer = this.autoPlay.periodical(3050, this);
        }.bind(this));
        
    },
    
    autoPlay: function() {
        var nxt = this.current + 1;
        if(nxt == this.panes.length) {
            nxt = 0;
        }
        this.mClick( this.controls[nxt], nxt );
        this.show( nxt );
    },
    
    buildControls: function() {
        this.controls = this.container.getElements('ul li a');
        this.controls.each(function(lnk, i) {
            if(i == 0) {
                this.arrowMove = lnk.getSize().y;
            }
            this.buildControl( lnk, i );
        }.bind( this ));
    },
    
    buildControl: function( l, i ) {
        l.addEvent('mouseenter', function(e) {
           e.stop();
           $clear(this.timer);
           this.mClick( l, i );
        }.bind( this ));
    },
    
    mClick: function( l, i ) {
        this.controls.each(function(c) {
             c.removeClass('current');
        });
        this.show( i );
        l.toggleClass('current');
    },
    
    show: function( n ) {
        var p = this.panes[n];
        
        var amt = (n * 66) + 3;
        if(n>1) {
            amt = amt - (1*n);
        }
        this.moveArrow( amt );
        this.hide( this.current );
        this.panes[ n ].morph({ opacity: 1 });
        this.current = n;
    },
    
    hide: function( n ) {
        this.panes[ n ].morph({ opacity: 0 });
    },
    
    moveArrow: function( a ) {
        this.arrow.morph({ top: a });
    }
    
});

window.addEvent('domready', function() {
    var fCar = new FadeCar($('cWidget'));
});