var ScrollBar = new Class({
  initialize: function(){},
  init: function( container, console, unique_id, scroll ){

    var left   = $(container).getCoordinates().left;
    var top    = $(container).getCoordinates().top;
    var width  = $(container).getCoordinates().width;
    var height = $(container).getCoordinates().height;
    var slider_width  = 8;
    var slider_height = 25;
    var mscroll = false;
    if( scroll != null ) mscroll = scroll;

    $(container).setStyle('position', 'relative');
    $(console).setStyle('position', 'relative');
    $(console).setStyle('top', 0);
    var h = $(console).getCoordinates().height + 0;
    if( h > height ){
      if( $(unique_id) != null ){
        $(container).removeChild( $(unique_id) );        
      }
      if( $(unique_id+'jump') != null ){
        $(container).removeChild( $(unique_id+'jump') );
      }

      var overflow_height = h-height;
      var sdiv = document.createElement('div');
      $(sdiv).setAttribute('id', unique_id);
      $(sdiv).setStyle('background-color', '#8cbe40');
      $(sdiv).setStyle('width', slider_width+'px');
      $(sdiv).setStyle('height', slider_height+'px');
      $(sdiv).setStyle('position', 'absolute');
      $(sdiv).setStyle('cursor', 'pointer');
      $(sdiv).setStyle('top', '0px' );
      $(sdiv).setStyle('z-index', '100' );
      $(sdiv).setStyle('left', width-slider_width-2 );

      var jdiv = document.createElement('div');
      $(jdiv).setAttribute('id', unique_id+"jump");
      $(jdiv).setStyle('background-color', '#222');
      $(jdiv).setStyle('border-left', '1px solid #333' );
      $(jdiv).setStyle('width', (slider_width+1)+'px');
      $(jdiv).setStyle('height', height+'px');
      $(jdiv).setStyle('position', 'absolute');
      $(jdiv).setStyle('cursor', 'pointer');
      $(jdiv).setStyle('top', '0px' );
      $(jdiv).setStyle('z-index', '50' );
      $(jdiv).setStyle('left', width-slider_width-2 );


      $(container).appendChild( jdiv );
      $(container).appendChild( sdiv );


      if( scroll == true ){

        this.container = container;
        this.console = console;
        this.unique_id = unique_id;

        $(container).removeEvents();
        $(container).setProperty('tabIndex', '-1');
        //$(container).addEvent('mouseover', function(){ $(container).focus() } );
        //$(container).addEvent('mouseout', function(){ $(container).blur() } );

        $(jdiv).addEvent('click', function(e, _scrollbar){
          var target = $(e.target);
          var targetheight = target.getCoordinates().height;
          var diff = e.page.y - target.getCoordinates().top;
          if( diff < 0 ) diff = 0; 
          var perc = diff / targetheight;
          var top = (perc * targetheight) - (25/2);
          if( top > targetheight - 25 ) top = targetheight - 25; 
          $(_scrollbar.unique_id).setStyle('top', top );
          var container_height = $(_scrollbar.container).getCoordinates().height;
          var console_height = $(_scrollbar.console).getCoordinates().height;
          var diff = console_height - container_height - 5;
          if( diff > 0 ){
            top = diff * perc;
            $(_scrollbar.console).setStyle('top', -top );
          }
        }.bindWithEvent( $(jdiv), this ) );

        $(container).addEvent('keydown', function(e, _scrollbar ){ 
          if( e.key == 'up' || e.key == 'down' || e.code == 33 || e.code == 34 ){
            var container_height = $(_scrollbar.container).getCoordinates().height;
            var console_height = $(_scrollbar.console).getCoordinates().height;
            var container_top = $(_scrollbar.container).getCoordinates().top;
            var console_top = $(_scrollbar.console).getCoordinates().top;
            var diff = console_height - container_height;
            if( console_height > container_height ){
              var top = container_top-console_top;    
              if( e.key == 'up' ){
                if( top > 0 ){
                  $(_scrollbar.console).setStyle('top', parseInt( $(_scrollbar.console).getStyle('top') ) + 10 );
                }else{
                  if( top < 0 ){
                    $(_scrollbar.console).setStyle('top', parseInt( $(_scrollbar.container).getStyle('top') ) );
                  }else if( isNaN( parseInt( $(_scrollbar.container).getStyle('top') ) ) ){
                    $(_scrollbar.console).setStyle('top', 0 );
                  }else{
                    $(_scrollbar.console).setStyle('top', parseInt( $(_scrollbar.container).getStyle('top') ) );
                  }
                }
              }else if( e.key == 'down' ){
                if( top < diff ){
                  $(_scrollbar.console).setStyle('top', parseInt( $(_scrollbar.console).getStyle('top') ) - 10 );
                }else{ 
                  $(_scrollbar.console).setStyle('top', 0-diff );
                  //$(_scrollbar.console).setStyle('top', parseInt( $(_scrollbar.container).getStyle('top') ) - diff );
                }
              }else if( e.code == 33 ){
                if( top > (container_height - 10) ){
                  $(_scrollbar.console).setStyle('top', parseInt( $(_scrollbar.console).getStyle('top') ) + (container_height - 10) );
                }else{
                  if( top < 0 ){
                    $(_scrollbar.console).setStyle('top', parseInt( $(_scrollbar.container).getStyle('top') ) );
                  }else if( isNaN( parseInt( $(_scrollbar.container).getStyle('top') ) ) ){
                    $(_scrollbar.console).setStyle('top', 0 );
                  }else{
                    $(_scrollbar.console).setStyle('top', parseInt( $(_scrollbar.container).getStyle('top') ) );
                  }
                }
              }else if( e.code == 34 ){
                console_top = parseInt( $(_scrollbar.console).getStyle('top') );
                if( console_top - (container_height - 10) > -diff ){
                  $(_scrollbar.console).setStyle('top', parseInt( $(_scrollbar.console).getStyle('top') ) - (container_height - 10) );
                }else{
                  $(_scrollbar.console).setStyle('top', 0-diff );
                  //$(_scrollbar.console).setStyle('top', parseInt( $(_scrollbar.container).getStyle('top') ) - diff );
                }
              }
              if( diff == 0 ) return;
              console_top = parseInt( $(_scrollbar.console).getStyle('top') );
              var perc = Math.abs( console_top ) / diff;
              var slider_top = (container_height-25)*perc;
              $(_scrollbar.unique_id).setStyle('top', slider_top+'px');


            } 
            return false;           
          }
        }.bindWithEvent( $(container), this ) );
      }

      var limit = new Object();
      limit = { 'x': [width-slider_width-2,width-slider_width-2], 'y' : [0,height-slider_height] };
      var obj = { 'el': $(sdiv), 'top' :  top, 'bottom' : top+height-slider_height, 'diff' : overflow_height, 'console' : $(console) };
      var options = new Object();
      options.limit = limit;
      options.onDrag = function(o){
           //alert( o.diff );
        var perc = (o.el.getCoordinates().top-top)/(o.bottom-o.top)
        o.console.setStyle('top', -(o.diff*perc) );
      }.pass(obj);
      var dragInstance = new Drag( sdiv, options );
    }else{
      if( $(unique_id) != null ){
        $(container).removeChild( $(unique_id) );
      }
    }
  },
  adjust: function( container, console, unique_id, el ){
    var container_top    = $(container).getCoordinates().top;
    var container_height = $(container).getCoordinates().height;
    var container_bot    = container_top + container_height;
    var el_top           = el.getCoordinates().top;
    var el_bot           = el.getCoordinates().height + el_top;
    var diff = null;
    if( el_top < container_top ){  diff = el_top - container_top; }
    else if( el_bot > container_bot ){ diff = el_bot-container_bot; }
    var console_top = $(console).getStyle('top');
    var idx = console_top.indexOf("px");
    if( idx != -1 ) console_top = parseInt(console_top.substring(0, idx));
    $(console).setStyle('top', console_top-diff );
    var console_height = $(console).getCoordinates().height;
    if( console_height > container_height ){
      var overflow_height = console_height-container_height;
      var perc = Math.abs( console_top-diff ) / overflow_height;
      var slider_top = (container_height-25)*perc;
      $(unique_id).setStyle('top', slider_top+'px');
    }
  }
});