var SelectSwitch = new Class({
    
    Implements: [Options],
    
    options: {
        id_format: 'carrier-list-{id}'
    },
    
    initialize: function(select_el, content_box, options) {
        
        this.oSelect = $(select_el);
        this.oPane = new Fx.Tween($(content_box), {
            duration: 250,
            property: 'height',
            transition: Fx.Transitions.Quad.easeInOut
        });
        
        this.setOptions(options);
        
        this.items = []; // Array of item info
        
        var self = this;
        
        var initial = 0;
        var sel = this.oSelect.getSelected();
        
        this.oSelect.getChildren().each(function(item, index) {
            
            var val = {id: item.value}
            var box = $(self.options.id_format.substitute(val));
            
            this.items.push({
                fade: new Fx.Tween(box, {
                    duration: 250,
                    property: 'opacity',
                    transition: Fx.Transitions.Quad.easeInOut
                }),
                height: box.getHeight()
            });
            
            if (item == sel[0]) {
                initial = index;
            } else {
                this.items[index].fade.set(0);
                this.items[index].fade.element.setStyle('display', 'none');
            }
            
        }, this);
                
        this.oSelect.addEvent('change', function(e) {
            if (this.selectedIndex != self.current) {
                self.setContent(this.selectedIndex);
            }
        });
        
        this.current = initial;
        this.oPane.set(this.items[this.current].height);
        
    },
    
    setContent: function(idx) {
        
        this.items[this.current].fade.start(0).chain(function() {
            this.items[this.current].fade.element.setStyle('display', 'none');
            this.oPane.start(this.items[idx].height).chain(function() {
                this.items[idx].fade.element.setStyle('display', 'block');
                this.items[idx].fade.start(1);
                this.current = idx;
            }.bind(this));
        }.bind(this));
        
    }
    
});