function ScrollBarV(element) {
  this.attach = element;
  
  var elpos = getPos(this.attach);
  var elw = this.attach.offsetWidth;
  var elh = this.attach.offsetHeight;
  
  this.attach.style.position = "relative";
  
  this.scrollable = document.createElement("div");
  //this.scrollable.style.marginRight = "16px";
  //this.scrollable.style.backgroundColor = "green";
  this.scrollable.style.width = (elw-23-5) + "px";
  this.scrollable.style.height = (elh) + "px";
  this.scrollable.style.left = "0px";
  this.scrollable.style.top = "0px";
  this.scrollable.style.overflow = "hidden";
  
  //alert(this.attach.childNodes.length);
  
  //alert(this.attach.innerHTML);

  for (var i=0; i<this.attach.childNodes.length; i++) {
    this.scrollable.appendChild(this.attach.childNodes.item(i).cloneNode(true));
  }
  
  for (var i=this.attach.childNodes.length-1; i>=0; i--) {
    this.attach.removeChild(this.attach.childNodes.item(i));
  }
  
  this.attach.appendChild(this.scrollable);
  
  //alert(this.attach.innerHTML);
  
  this.bar = document.createElement("div");
  this.bar.style.position = "absolute";
  this.bar.style.width = "23px";
  this.bar.style.height = (elh) + "px";
  this.bar.style.left = (elw-23) + "px";
  this.bar.style.top = "0px";
  this.bar.style.background = "url(skin/scrollbar-back.gif) repeat-y 50% 0%";
  this.bar.style.borderTop = "1px solid #C59076";
  this.bar.style.borderBottom = "1px solid #C59076";
  
  this.blurtop = document.createElement("div");
  this.blurtop.style.position = "absolute";
  this.blurtop.style.width = "100%";
  this.blurtop.style.top = "0px";
  this.blurtop.style.left = "0px";
  this.blurtop.style.height = "32px";
  if (window.ActiveXObject) {
    this.blurtop.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='skin/border-top.png', sizingMethod=crop)";
  }
  else {
    this.blurtop.style.background = "url(skin/border-top.png) no-repeat 0% 0%";
  }
  this.blurtop.style.zOrder = 1000;
  this.blurtop.style.visibility = "hidden";
  
  this.attach.appendChild(this.blurtop);
  
  this.blurbottom = document.createElement("div");
  this.blurbottom.style.position = "absolute";
  this.blurbottom.style.width = "100%";
  this.blurbottom.style.top = (elh-32) + "px";
  this.blurbottom.style.left = "0px";
  this.blurbottom.style.height = "32px";
  if (window.ActiveXObject) {
    this.blurbottom.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='skin/border-bottom.png', sizingMethod=crop)";
  }
  else {
    this.blurbottom.style.background = "url(skin/border-bottom.png) no-repeat 0% 0%";
  }
  this.blurbottom.style.visibility = "hidden";
  
  this.attach.appendChild(this.blurbottom);
  
  var play = this.scrollable.scrollHeight - elh;
  var pagesize = elh / play;
  
  this.thumb = document.createElement("div");
  this.thumb.style.position = "absolute";
  this.thumb.style.width = "100%";
  this.thumb.style.height = "64px";
  this.thumb.style.left = "0px";
  this.thumb.style.top = "0px";
  this.thumb.style.background = "url(skin/scrollarrow-bottom.gif) no-repeat 50% 100%";
  
  var hat = document.createElement("div");
  hat.style.background = "url(skin/scrollarrow-top.gif) no-repeat 50% 0%";
  hat.style.position = "absolute";
  hat.style.width = "100%";
  hat.style.height = "100%";
  hat.style.left = "0px";
  hat.style.top = "0px";
  this.thumb.appendChild(hat);
  
  this.bar.appendChild(this.thumb);
  
  this.updateThumb = function() {
    var elh = this.attach.offsetHeight;
    var play = this.scrollable.scrollHeight - elh;
    var pagesize = elh / this.scrollable.scrollHeight;
    
    // We are viewing (elh) of (scrollHeight) => pagesize
    
    // thumbsize/thumbplay = pagesize
    // thumbplay = elh-thumbsize
    var sh = this.scrollable.scrollHeight;
    var sy = this.scrollable.scrollTop;
    var eh = this.scrollable.offsetHeight;
    
    var th = this.bar.offsetHeight;
    var ts = th * eh / sh;
    var ty = sy * (th-ts) / (sh-eh);
    
    if (ts <= 0 || ty < 0 || ts >= th) {
      this.bar.style.visibility = "hidden";
      this.blurtop.style.visibility = "hidden";
      this.blurbottom.style.visibility = "hidden";
    }
    else {
      this.bar.style.visibility = "visible";
      this.thumb.style.height = (ts) + "px";
      this.thumb.style.top = (ty) + "px";
      
      if (ty > 0) {
        this.blurtop.style.visibility = "visible";
      }
      else {
        this.blurtop.style.visibility = "hidden";
      }
      if (ty+ts+1 < sh) {
        this.blurbottom.style.visibility = "visible";
      }
      else {
        this.blurbottom.style.visibility = "hidden";
      }
    }
    
  }
  
  this.overbar = document.createElement("div");
  this.overbar.style.cssText = "position: absolute; left:0%; top: 0%; width: 100%; height: 100%; background:white; opacity:0";
  if (window.ActiveXObject) {
    this.overbar.style.filter = "alpha(opacity=0)";
  }
  
  this.bar.appendChild(this.overbar);
  
  this.attach.appendChild(this.bar);
  
  this.scroller = new ElementScroller(this.overbar, {} , this.scrollable);
  
  addEvent(this.scrollable, 'scroll', this.updateThumb.bind(this), false);
  this.updateThumb();
}


