var GalleryScroller = Class.create();
GalleryScroller.prototype = {

  initialize: function(container, previous_button, next_button, center_on) {
    this.previous_button = $(previous_button);
    this.next_button = $(next_button);
    this.container = $(container);
    this.disable_buttons = false;
    // gotta wait for everything to load so sizing is right
    Event.observe(window, "load", function(evt) {
      this.width = Element.getWidth(this.container.parentNode);
      this.widths = Element.childElements(this.container).map(function(e) { 
        return Element.getWidth(e) + 
               parseInt(Element.getStyle(e, 'margin-left')||0) + 
               parseInt(Element.getStyle(e, 'margin-right')||0); 
      });
      var w = 0;
      this.widths.each(function(e) {w = w + e});
      this.total_width = w;
      this.total_count = Element.childElements(this.container).length;
      average = w/this.total_count;
      this.count_per_page = Math.round(this.width / average);
      this.position = this.count_per_page;
      this.position = (center_on || 1) + parseInt(this.count_per_page/2);
      if (this.position > this.total_count) this.position = this.total_count;
      var new_position = 0;
      if (this.position <= this.count_per_page) {
        // starting flush
        new_position = this.width;
      } else {
        for (var i = 0; i < this.position; i++) new_position = new_position + this.widths[i];
      }
      Element.setStyle(this.container, { width:this.total_width + 'px', left:-(new_position - this.width || 0) + 'px' });
      Event.observe(this.next_button, 'click', this.next.bindAsEventListener(this)); 
      Event.observe(this.previous_button, 'click', this.previous.bindAsEventListener(this)); 
      this.updateButtons();
    }.bind(this));
  },

  next: function() {
    if (this.disable_buttons) return false;
    if (this.onLastPage()) return false;
    this.disable_buttons = true;
    var left = -parseFloat(this.container.getStyle('left') || '0');
    this.position = this.position + this.count_per_page;
    if (this.position > this.total_count) this.position = this.total_count;
    var new_position = 0;
    for (var i = 0; i < this.position; i++) new_position = new_position + this.widths[i];
    var move = new_position - left - this.width;
    new Effect.Move(this.container, { x:-move, mode:'relative', afterFinish:this.finishMove.bind(this) });
  },

  previous: function() {
    if (this.disable_buttons) return false;
    if (this.onFirstPage()) return false;
    this.disable_buttons = true;
    // will always be negative since can't scroll past start
    var left = -parseFloat(this.container.getStyle('left') || '0');

    this.position = this.position - this.count_per_page;
    if (this.position < this.count_per_page) this.position = this.count_per_page;
    var new_position = 0;
    for (var i = 0; i < this.position-this.count_per_page; i++) new_position = new_position + this.widths[i];
    var move = left - new_position;
    new Effect.Move(this.container, { x:move, mode:'relative', afterFinish:this.finishMove.bind(this) });
  },

  updateButtons: function() {
    this.onFirstPage() ? Element.removeClassName(this.previous_button, 'active') : Element.addClassName(this.previous_button, 'active');
    this.onLastPage() ? Element.removeClassName(this.next_button, 'active') : Element.addClassName(this.next_button, 'active');
  },

  finishMove: function() {
    this.updateButtons();
    this.disable_buttons = false;
  },

  onFirstPage: function() {
    return parseFloat(this.container.getStyle('left') || '0') == 0;
  },
  onLastPage: function() {
    return (this.width - parseFloat(this.container.getStyle('left') || '0')) == this.total_width;
  }

};