var scrollbar = {
      frames : new Array(),
      id     : null,
      offset : 0,
      dir    : 0,
      count : 0,
      add : function(id)
      {
          
          var id = id;
          if(typeof(id) == 'object')
          {
              var e = id;
              this.count++;
              id = this.count;
          }else{
              var e = document.getElementById(id);
          }
          this.frames[id] = new Array();
          this.frames[id]['element'] = e;
          this.frames[id]['height']  = parseInt(this.frames[id]['element'].offsetHeight);
          this.frames[id]['html']    = this.frames[id]['element'].innerHTML;
          this.frames[id]['element'].style.height   = 'auto';
          this.frames[id]['element'].style.overflow = 'hidden';
          this.frames[id]['offset']  = this.frames[id]['element'].offsetHeight;
          this.frames[id]['element'].style.height   = this.frames[id]['height']+'px';
          this.render(id);
      },
      autoload : function()
      {
          //IE6 Workarround
          var v = 10;
          if (navigator.appVersion.indexOf("MSIE") != -1) v = parseFloat(navigator.appVersion.split("MSIE")[1]);
          if(v < 7) return false;
          var elems = document.getElementsByTagName('div');
          for (var i = 0; i < elems.length; i++) {
              if (elems[i].className)
              {
                  var arr = elems[i].className.split(' ');
                  for(var j = 0; j<arr.length; j++)
                  {
                      if(arr[j] == 'scroll') this.add(elems[i]);
                  }
              }
          }
          
      },
      render : function(id)
      {
          if(this.frames[id]['height'] < this.frames[id]['offset'])
          {
              var content = this.div('scroll_content');
              content.innerHTML = this.frames[id]['html'];
              content.style.position = 'absolute';
              content.style.top     = '0px';
              this.frames[id]['element'].innerHTML = '';
              this.frames[id]['element'].appendChild(content);
              this.frames[id]['offset'] = content.offsetHeight;
              this.frames[id]['content'] = content;
              var bar     = this.div('scroll_bar');
              var up      = this.div('scroll_up');
              var down    = this.div('scroll_down');
              var shuttle = this.div('scroll_shuttle');
              var line    = this.div('scroll_line');
              line.appendChild(shuttle);
              bar.appendChild(up);
              bar.appendChild(line);
              bar.appendChild(down);
              this.frames[id]['element'].appendChild(bar);
              shuttle.style.position = 'absolute';
              shuttle.style.top      = '0px';
              this.frames[id]['shuttle'] = shuttle;
              this.frames[id]['line']    = line.offsetHeight;
              this.frames[id]['pos']     = 0;
              up.onmousedown      = function(){scrollbar.up(id);};
              down.onmousedown    = function(){scrollbar.down(id);};
              up.onmouseup        = function(){scrollbar.end();};
              up.onmouseout       = function(){scrollbar.end();};
              down.onmouseup      = function(){scrollbar.end();};
              down.onmouseout     = function(){scrollbar.end();};
              shuttle.onmousedown = function(e){scrollbar.shuttle(id, e);};
              if(window.addEventListener) content.addEventListener('DOMMouseScroll', function(e){scrollbar.wheel(id,e);}, false);
              content.onmousewheel = function(e){scrollbar.wheel(id, e);};
          }
      },
      div : function(klasse)
      {
          var e = document.createElement('div');
          e.setAttribute('class',klasse);
          return e;
      },
      up : function(id)
      {
          this.id = id;
          this.dir = -0.05;
          this.loop();
      },
      down: function(id)
      {
          this.id = id;
          this.dir = 0.05;
          this.loop();
      },
      end: function()
      {
          this.id = null;
          document.onmousemove = function(){};
      },
      shuttle: function(id, e)
      {
          var e = e ? e : event;
          if (e.preventDefault)
          {
              e.preventDefault();
          }else{
              e.returnValue = false;
          }
          if(this.id != id)
          {
              this.end(this.id);
              this.id = id;
          }
          this.offset = e.clientY;
          document.onmousemove = function(e){scrollbar.shuttlemove(e);};
          document.onmouseup   = function(){scrollbar.end();};
      },
      shuttlemove : function(e)
      {
          var e = e ? e : event;
          if (e.preventDefault)
          {
              e.preventDefault();
          }else{
              e.returnValue = false;
          }
          if(this.id != null)
          {
              this.frames[this.id]['pos'] = this.frames[this.id]['pos'] + ((e.clientY - this.offset) / (this.frames[this.id]['line'] - this.frames[this.id]['shuttle'].offsetHeight));
              this.frames[this.id]['pos'] = this.frames[this.id]['pos'] > 1 ? 1 : this.frames[this.id]['pos'];
              this.frames[this.id]['pos'] = this.frames[this.id]['pos'] < 0 ? 0 : this.frames[this.id]['pos'];
              this.offset = e.clientY;
              this.update();
          }
      },
      update : function()
      {
          if(this.id != null)
          {
               this.frames[this.id]['shuttle'].style.top = Math.round((this.frames[this.id]['line'] - this.frames[this.id]['shuttle'].offsetHeight) * this.frames[this.id]['pos'])+'px';
               this.frames[this.id]['content'].style.top = Math.round((this.frames[this.id]['offset'] - this.frames[this.id]['height']) * (-1) * this.frames[this.id]['pos'])+'px';
          }
      },
      loop  : function()
      {
          if(this.id != null && this.dir != 0)
          {
              
              this.frames[this.id]['pos'] = this.frames[this.id]['pos'] + this.dir;
              this.frames[this.id]['pos'] = this.frames[this.id]['pos'] > 1 ? 1 : this.frames[this.id]['pos'];
              this.frames[this.id]['pos'] = this.frames[this.id]['pos'] < 0 ? 0 : this.frames[this.id]['pos'];
              this.update();
              window.setTimeout(function(){scrollbar.loop();},50);
          }
      },
      wheel : function(id, e)
      {
          this.end();
          if(id)
          {
              this.end();
              this.id = id;
              var delta = 0;
              var e = e ? e : event;
              if (e.wheelDelta)
              {
               delta = e.wheelDelta / 120;
              }
              else if (e.detail)
              {
                delta = -e.detail / 3;
              }
              delta = delta / (-10);
              this.frames[this.id]['pos'] = this.frames[this.id]['pos'] + delta;
              this.frames[this.id]['pos'] = this.frames[this.id]['pos'] > 1 ? 1 : this.frames[this.id]['pos'];
              this.frames[this.id]['pos'] = this.frames[this.id]['pos'] < 0 ? 0 : this.frames[this.id]['pos'];
              this.update();
          }
      }
  }