var mouseX, mouseY;
var ScrollNav = {
  init: function() {
    this.e = $('thumb_column')

    this.containerLeft = Position.cumulativeOffset(this.e)[0];
    this.containerTop = Position.cumulativeOffset(this.e)[1];
    containerDimensions = this.e.getDimensions();
    this.containerHeight = containerDimensions.height;
    this.containerWidth = containerDimensions.width;

    this.e.observe("mousemove", function(e) {
      mouseX = Event.pointerX(e);
      mouseY = Event.pointerY(e);
    });
    
    window.setInterval("ScrollNav.doit()", 50);
  },
  
  doit: function() {
    // calculate the relative mouse position in the div,
    var horizontalPosition = mouseX - this.containerLeft;
    var verticalPosition = mouseY - this.containerTop;

    // check if the mouse is out or inside the div
    if(horizontalPosition < 0 || verticalPosition < 0 || mouseX > (this.containerWidth + this.containerLeft) || mouseY > (this.containerHeight + this.containerTop)) {
      return false;
    }
    
    // calculate vertical offset from center of column
    var delta = (this.containerHeight/2 - verticalPosition)*-1

    // create dead zone in center
    if(Math.abs(delta) < 100) return false
    else delta += delta < 0 ? 100 : -100
    
    // do scroll
    if(delta) {
      delta *= 0.125;
      this.e.scrollTop += delta
    }
    
    // are we at the top or the bottom of the column?
    var top = this.e.scrollTop == 0
    var bottom = (this.e.scrollHeight - this.containerHeight - this.e.scrollTop) == 0
    
    // if so, show appropriate arrow
    $('thumbs_up').style.visibility = top ? 'hidden' : ''
    $('thumbs_down').style.visibility = bottom ? 'hidden' : ''
  }
}
  
document.observe("dom:loaded", function() {
  ScrollNav.init();
});