var View = window.View||{};

View.ScrollBar = Class.create({
  initialize : function(element, options){
    this.element = $(element);
    if(this.element){
      this.options = Object.extend({      
        handle_minimum_height : 50
      }, options||{});
      
      this.content = new Element('div').update(this.element.innerHTML).setStyle({
        height: '100%',
        overflow: 'hidden'
      });
      this.element.update(this.content);
      
      this.track = new Element('div', {className: 'track'}).update(new Element('div', {className: 'handle'}).update('<div class="t"></div><div class="f"></div>'));
      this.handle = this.track.firstDescendant();      
      this.element.insert(this.track);
      
      this.slider = new Control.Slider(this.handle, this.track, {
        axis : 'vertical',
        onChange : this.on_change.bind(this),
        onSlide : this.on_change.bind(this)
      });

      this.render();

    }else{
      return false;
    }
  },
  render : function(){
    this.slider.trackLength = this.slider.maximumOffset() - this.slider.minimumOffset();
    
    var h = Math.max(this.content.offsetHeight * (this.content.offsetHeight / this.content.scrollHeight),this.options.handle_minimum_height);
    if(!isNaN(h)){    
      this.handle.style.height = h+'px';
      this.slider.handleLength = this.handle.style.height.replace(/px/,'');  
    }
  },
  on_change : function(value){
    this.content.scrollTop = Math.round(value/this.slider.maximum * (this.content.scrollHeight - this.content.offsetHeight));  
  }
});