var Scrollbar = new Class({
  Extends: Slider,
  initialize: function(cont) {
    this.scrollable = cont;
    this.init();
    this.parent(this.scrollable, this.scroll_handler, {
      wheel: true,
      mode: 'vertical',
      steps: 10,
      onChange: function(pos){
        this.scrollable.scrollTo(0, pos * (this.scrollable.getScrollSize().y - this.scrollable.getSize().y) * this.options.steps / 100);
      }
    });
    
    window.onresize = this.window_resize.bind(this);
    
  },
  
  init:function() {
    // Conteneur du scrollable
    this.scrollable_cont = this.scrollable.clone(false);
    this.scrollable_cont.addClass('scrollable_cont');
    this.scrollable_cont.setStyles({
      'overflow-x': 'hidden'
    });
    this.scrollable_cont.inject(this.scrollable.getParent());
    this.scrollable.inject(this.scrollable_cont);
    // On cache la scrollbar d'origine
    this.scrollable.setStyles({
      'width': '105%',
      'top': 0,
      'bottom': 0
    });
    // Scrollbar handler
    // Background
    this.scroll_handler_bkg = new Element('div', {
      'class': 'scroll_handler_bkg'
    });
    this.scroll_handler = new Element('div', {
      'class': 'scroll_handler',
      'styles': {
        'top': 0
      }
    });
	new Element('img', {
		'src': '/images/scroll_haut.gif',
		'class': 'scroll_haut'
	}).inject(this.scroll_handler);
	new Element('img', {
		'src': '/images/scroll_bas.gif',
		'class': 'scroll_bas'
	}).inject(this.scroll_handler);
    this.init_scroll_handler();
    this.scroll_handler.inject(this.scroll_handler_bkg.inject(this.scrollable_cont));
    
    this.scrollable.addEvent('click', function(e){
      //e.stop();
      //console.log('click');
    });
  },
  
  window_resize: function() {
    this.init_scroll_handler();
  },
  
  init_scroll_handler: function() {
    if(this.scrollable.getScrollSize().y > this.scrollable.getSize().y) {
      this.scroll_handler_bkg.setStyle('display', 'block');
      this.scroll_handler.setStyle('height', this.scrollable_cont.getSize().y * this.scrollable_cont.getSize().y / this.scrollable.getScrollSize().y + 'px');
    }
    else {
      this.scroll_handler_bkg.setStyle('display', 'none');
    }
  },
  
  // on override la fonction clickedElement pour pas avoir le click sur le scrollable
  clickedElement:function() {
    return;
  }

});