var CarPicker = new Class({
    
    initialize: function() {
        
        this.wrapper = $('carName');
        this.slides = $('port').getChildren();
        this.cardata = $('carMeta');
        
        this.prev = this.slides.length - 1;
        this.current = 0;
        this.next = 1;
        
        this.scrollFx = new Fx.Scroll(this.wrapper, { duration: 1150, link:'cancel',transition: Fx.Transitions.Pow.easeOut });
        this.infoScroll = new Fx.Scroll(this.cardata, { duration: 1000, link:'cancel',transition: Fx.Transitions.Pow.easeOut });
        
        this.larrow = $('leftArrow');
        this.larrow.addEvent('click', function(evt) {
           evt.stop();
           this.scrollTo( this.prev );
        }.bind(this));
        
        
        this.rarrow = $('rightArrow');        
        this.rarrow.addEvent('click', function(evt) {
           evt.stop();
           this.scrollTo( this.next );
        }.bind(this));
        
        this.smallcars = new Element('div', { html: $('port').get('html') });
        this.smallcars.setStyle('height', 0);
        this.smallcars.set('morph');
        this.smallcars.morph({ height: 35 });
        this.smallcars.inject($('carData'), 'top');
        this.smallcars.cars = this.smallcars.getChildren();
        
        this.smallcars.cars.each(function(car,i){
            car.addEvent('click', function(evt){
                this.scrollTo(i);
            }.bind(this))}.bind(this));
        
        this.smallcars.cars[0].addClass('active');
        
        this.carinfos = this.cardata.getElement('div.port').getChildren();
        
        this.hrs = $('hrs');
        this.price = $('total_price');
        if(this.hrs) {
            this.hrs.addEvent('change', function(e) {
                this.determinePrice();
            }.bind(this));
        }
        
        this.priceInput = $('pricev');
        this.carInput = $('carname');
        
        this.determinePrice();
        
    },
    
    determinePrice: function() {
        if(this.hrs) {
            var num = this.carinfos[this.current].get('price') * this.hrs.value;
            this.price.set('text', '$' + num.toInt());
            this.priceInput.value = num;
            this.carInput.value = this.smallcars.cars[this.current].get('text');
        }
    },
    
    scrollTo: function( toN ) {
        
        this.scrollFx.toElement(this.slides[ toN ]);
        this.infoScroll.toElement(this.carinfos[ toN ]);
        
        this.smallcars.cars.each(function(c) { if (c.hasClass('active')) c.removeClass('active'); });
        this.smallcars.cars[toN].addClass('active');
        
        var next = toN + 1;
        var prev = toN - 1;
        this.current = toN;
        this.determinePrice();
        
        if(this.slides[toN+1]) {
            if (toN == 0) {
                this.next = next;
                this.prev = this.slides.length - 1;
            } else {
                this.next = next;
                this.prev = prev;
            }
        } else if (toN+1 == this.slides.length) {
            this.next = 0;
            this.prev = this.slides.length - 2;
        }
        
    }
    
});

window.addEvent('domready', function() {
    var cp = new CarPicker();
    $$('input.DatePicker').each( function(el){
	new DatePicker(el);
    });
});