var Scroll = {
   
   height:0,
   distance:0,
   direction:0,
   timer:null,
   det:5,
   time:10,
   pos:0,
   init:function(){
      if($('pageScroll')){
         this.dPage = $('pageScroll');
         this.dPage.style.overflow = 'hidden';
         
         var width = this.dPage.offsetWidth;
         this.height = this.dPage.offsetHeight;
         
         this.dCont = DIV({
            'style':'position:relative;height:'+this.height+'px;width:'+width+'px;overflow:hidden;'
         });
         this.dPage.parentNode.insertBefore(this.dCont,this.dPage);
         this.dCont.appendChild(this.dPage);
         this.dPage.style.overflow = 'visible';
         this.dPage.style.height = 'auto';
         this.dPage.style.position = 'absolute';
         this.dPage.style.width = this.dPage.offsetWidth - 20 + 'px';
//         d(this.dPage.offsetWidth,this.dPage.offsetHeight);
         
         this.distance = this.dPage.offsetHeight - this.height;
         if(this.distance > 0)
            this.dCont.appendChild(this.create());
      }
   },
   create:function(){
      var cont = DIV({
         'id':'scroll'
      });
      cont.style.height = this.height +'px';
      
      this.dUp = DIV({
         'class':'btnUp'
      })
      addEvent(this.dUp,'mouseover',this.overUp.bind(this,true));
      addEvent(this.dUp,'mouseout',this.overUp.bind(this,false));
      addEvent(this.dUp,'mousedown',this.moveUp.bind(this));
      addEvent(this.dUp,'mouseup',this.moveStop.bind(this));
      cont.appendChild(this.dUp);
            
      this.dDown = DIV({
         'class':'btnDown'
      })      
      addEvent(this.dDown,'mouseover',this.overDown.bind(this,true));
      addEvent(this.dDown,'mouseout',this.overDown.bind(this,false));
      addEvent(this.dDown,'mousedown',this.moveDown.bind(this));
      addEvent(this.dDown,'mouseup',this.moveStop.bind(this));
      cont.appendChild(this.dDown);
      
      this.Bar.init(this,cont);
      return cont;
   },
   overUp:function(show){
     this.over('up',show);
   },
   overDown:function(show){
     this.over('down',show);
   },
   over:function(kind,show){
      var btn = (kind == 'up') ? this.dUp : btn = this.dDown;
      btn.style.backgroundPosition = show ? '-13px' : '0';
   },
   moveUp:function(){
      this.direction = 1;
      this.move();
       
   },
   moveDown:function(){
      this.direction = -1;
      this.move();
   },
   move:function(){
      var det = this.det;      
      
      
      if(this.direction < 0 && this.pos + det > this.distance){
            det = this.distance - this.pos;
         }else if(this.direction > 0 && this.pos < det){
            det = this.pos;
         }

//   d(det,this.pos,this.distance,this.direction);
      if(det != 0 && (this.direction < 0 && this.pos + det <= this.distance)
         || (this.direction > 0 && this.pos >= det)){
         this.pos = this.pos - this.direction * det;
         this.dPage.style.top = -this.pos +'px';
         this.Bar.setPos(this.pos/this.distance);
         this.timer = setTimeout(this.move.bind(this), this.time);
         
      }
   },
   moveStop:function(){
     
      if(this.timer)
         clearTimeout(this.timer);
   },   
   setPos:function(pos){
      this.pos = this.distance*pos;
      this.dPage.style.top = -this.pos +'px';
      
   }
};
Scroll.Bar = {
   margin:17,
   isClick:false,
   mousePos:0,
   pos:0,
   percent:0,
   distance:0,
   init:function(parent,container){
      this.parent = parent;
      this.dLine = DIV({
         'class':'line'
      });
      this.dLine.style.margin = this.dLine.style.margin = this.margin+'px 0';
      this.distance = parseInt(container.style.height) - this.margin*2;
      this.dLine.style.height = this.distance +'px';
      //wysokosc przycisku
      this.distance-=10;
      this.dBar = DIV({
         'class':'bar'
      });
      
      addEvent(this.dBar,'mousedown',this.dragStart.bindAsEventListener(this));
//      addEvent(this.dBar,'mouseup',this.dragStop.bind(this));
//      addEvent(this.dom,'mousedown',this.down.bindAsEventListener(this));
      
      this.dLine.appendChild(this.dBar);
      container.appendChild(this.dLine);
   },
   setPos:function(perc){
      if(!this.isClick){
         this.percent = perc;
         this.pos = perc*this.distance;
         this.dBar.style.top = this.pos +'px';
      }
   },
   dragStart:function(e){
      addEvent(document.body,'mousemove',this.move.bindAsEventListener(this));
      addEvent(document.body,'mouseup',this.dragStop.bind(this));
      this.mousePos = e.clientY;
      this.isClick = true;
   },
   dragStop:function(){
      removeEvent(document.body,'mouseup',this.dragStop.bind(this));
      removeEvent(document.body,'mousemove',this.move.bindAsEventListener(this));
      this.isClick = false;
      this.mousePos = 0;
   },
   move:function(e){
      if(this.isClick && e.clientY != this.mousePos){
         var det = e.clientY - this.mousePos;
         if(this.pos + det > this.distance){
            det = this.distance - this.pos;
         }else if(this.pos + det < 0){
            det = 0;
         }
         if(det != 0 && this.pos + det <= this.distance && this.pos + det >= 0){
            this.pos+= det;
            this.dBar.style.top = this.pos +'px';
            this.mousePos = e.clientY;
            this.parent.setPos(this.pos / this.distance);
         }
      }
   }
}
addEvent(window,'load',function(){
   Scroll.init();
});