var GalleryScroller = Class.create({
  initialize: function() {
    Event.observe(window, 'load', this.start.bind(this));
  },
  start: function () {
    this.scroll_offset = 0;
    this.left = $('laquo');
    this.right = $('raquo');
    this.outsides = $('gallery');
    this.insides = $('gallery-insides');

    this.left.observe('mouseover', this.startScrolling.bind(this, 'left'));
    this.right.observe('mouseover', this.startScrolling.bind(this, 'right'));
    this.left.observe('mouseout', this.stopScrolling.bind(this));
    this.right.observe('mouseout', this.stopScrolling.bind(this));

    Event.observe(window, 'resize', this.checkState.bind(this));

    this.checkState();
  },
  startScrolling: function(direction) {
    this.scroll_increment = direction == 'right' ? -1 : 1;
    this.timer = setInterval(this.doScroll.bind(this), 50);
  },
  stopScrolling: function() {
    clearInterval(this.timer);
  },
  doScroll: function() {
    if (this.scroll_increment > 0 && this.scroll_increment < 10) {
      this.scroll_increment += 1;
    } else if (this.scroll_increment < 0 && this.scroll_increment > -10) {
      this.scroll_increment += -1;
    }
    this.scroll_offset += this.scroll_increment;
    this.checkState();
  },
  checkState: function() {
    
    // too far to the left?
    if (this.scroll_offset > 0) {
      this.scroll_offset = 0;
    }

    // too far to the right?
    if (this.scroll_offset < (this.outsides.getWidth() - this.insides.getWidth())) {
      this.scroll_offset = Math.min(0, this.outsides.getWidth() - this.insides.getWidth());
    }
    
    // hide the right arrow?
    if ((this.insides.getWidth() + this.scroll_offset) > this.outsides.getWidth()) this.right.show();
    else this.right.hide();

    // hide the left arrow?
    if (this.scroll_offset < 0) this.left.show();
    else this.left.hide();

    this.insides.setStyle({left: this.scroll_offset + 'px'});
  }
});

var ImageSwapper = Class.create({
  initialize: function(pieces) {
    this.pieces = $A(pieces);
    this.showPiece(this.pieces.first().id);
  },
  showPiece: function(id) {
    var hash = this.pieces.find(function(obj) { return obj.id == id; });
    $('piece_name').update(hash.name);
    $('piece_materials').update(hash.materials);
    $('piece_dimensions').update(hash.dimensions);
    $('piece_image').src = '/images/spinner.gif';
    $('piece_image').src = '/system/images/' + hash.default_image_id + '/640x480.jpg';
    $('piece_description').update(hash.images.find(function(obj) { return obj[0] == hash.default_image_id; })[1]);

    // add images
    $('other_images').update('');
    hash.images.each(function(image) {
      var div = $(document.createElement('div'));
      div.setStyle({textAlign: 'center', width: '56px', height: '56px', verticalAlign: 'middle'});
      $('other_images').appendChild(div);
      
      var img = $(document.createElement('img'));
      img.setStyle({margin: '2px', border: '1px solid #aaa'});
      img.src = '/system/images/' + image[0] + '/50x50.jpg';
      img.observe('mouseover', function() { 
        $('piece_image').src = '/images/spinner.gif';
        $('piece_image').src = '/system/images/' + image[0] + '/640x480.jpg';
        $('piece_description').update(image[1]);
      });
      div.appendChild(img);
    });
  }
});
  
  
var ImagePreLoader = Class.create({
  initialize: function(pieces) {
    $A(pieces).each(function(piece) {
      piece.images.each(function(image) {
        new Image(1,1).src = '/system/images/' + image[0] + '/50x50.jpg';
        new Image(1,1).src = '/system/images/' + image[0] + '/640x480.jpg';
      });
    });
  }
});