var mouseX, mouseY;
var ScrollNav = {
  init: function() {
    //this.e = $('thumb_column');
    this.container = $('thumbs');
    var cum_off = Position.cumulativeOffset(this.container);
    this.containerLeft = cum_off[0];
    this.containerTop = cum_off[1];
    containerDimensions = this.container.getDimensions();
    this.containerHeight = containerDimensions.height;
    this.containerWidth = containerDimensions.width;

    this.container.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 horizontal? offset from center of column
    var delta = (this.containerWidth/2 - horizontalPosition)*-1
//console.log(delta)

    // create dead zone in center
    if(Math.abs(delta) < 100) return false
    else delta += delta < 0 ? 100 : -100
    
    // do scroll
    if(delta) {
      delta *= 0.06;
      this.container.scrollLeft += delta
    }
    
    // ***are we at the left or right of the column?
    var left = this.container.scrollLeft == 0
    var right = (this.container.scrollWidth - this.containerWidth - this.container.scrollLeft) == 0
    
    // if so, show appropriate arrow
    $('thumbs_left').style.visibility = left ? 'hidden' : ''
    $('thumbs_right').style.visibility = right ? 'hidden' : ''
  }
}
  
document.observe("dom:loaded", function() {
  ScrollNav.init();
});

window.onload = function() {
	var col_size = 0;
	$$('.thumb').each(function(image){
		col_size += image.offsetWidth;
	});
	$('thumb_column').setStyle({
		width: col_size +'px'
	});
}