var Scroller = new Class({
    
    options: {
        scroll_fighter_width: 170, //width plus padding
        bar_size : {
            min: .25,
            max: .75,
            units: '%'
        }
    },
    
    initialize: function(){
        this.fighter_scroller = $('fighter_scroller');
        this.fighters_pane = this.fighter_scroller.getElement('#fighters_pane');
        this.container = this.fighter_scroller.getElement('#fighters_container');
        this.weight_classes = this.container.getElements('.weight_class');
        this.fighters = this.container.getElements('.scroll_fighter');
        this.scroll_box = this.fighter_scroller.getElement('#scroll_box');
        this.scroll_handle = this.scroll_box.getElement('#scroll_handle');        

        this.container_scroll =  new Fx.Scroll(this.fighters_pane);

        this.box_size = this.scroll_box.getSize();
        this.pane_size = this.fighters_pane.getSize();
        this._setContainerWidth()._buildSlider();
    },
    
    _setContainerWidth: function(){
        var count = this.fighters.length;
        this.container_width = count * this.options.scroll_fighter_width;
        
        this.container.setStyle('width', this.container_width);
        return this;
    },
    
    _setSlideBarSize: function(){
        
        var handle_denom    = this.box_size.x > this.container_width ? this.pane_size.x : this.container_width;
        var calculated_size = (this.box_size.x / handle_denom) * this.pane_size.x;
        var calculated_size = calculated_size > this.box_size.x ? this.box_size.x : calculated_size;
        
        if(this.options.bar_size.min && this.options.bar_size.max){
            var min, max;
        
            switch(this.options.bar_size.units){
                case 'px':
                    min = this.options.bar_size.min;
                    max = this.options.bar_size.max;
                    break;
                
                case '%':
                default:
                    min = this.options.bar_size.min * calculated_size;
                    max = this.options.bar_size.max * calculated_size;
                    break;
            }
        
            calculated_size = calculated_size < min ? min : 
                            calculated_size > max ? max : calculated_size;
        }
        
        this.scroll_handle.setStyle('width', calculated_size);
        
        return this;
    },
    
    _buildSlider: function(){
        this._setSlideBarSize();
        var calculated_width = this.container_width - this.pane_size.x;
                
        this.slider = new Slider(this.scroll_box, this.scroll_handle, {
        	steps: 100,
        	onChange: function(step){
        	    var left = step/100 * calculated_width;
            	this.container.setStyle('left',  left * -1)                
        	}.bind(this)
        }).set(100);
        
        return this;
    },
    
    _buildTitles: function(){
        var left = 0;
        
        var clearer = this.scroll_box.getElement('.clearer');
        
        this.weight_classes.each(function(container, i){
            var size = container.getSize();
            var title = container.get('title');
            var pect = size.x / this.container_width;
            var width = Math.floor(this.box_size.x * pect) - 2;
                        
            var title_ele = new Element('span', {
                'class' : 'scroll_title',
                'styles' : {
                    'width': width,
                    'left' : left
                }
            }).set('html', title).inject(clearer, 'before');
            left += width;
        }.bind(this));
        
        return this;
    }
});