// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults

var Gallery = {
  setPhoto: function(path) {
    $('bigImage').innerHTML = '<img src="'+ path +'" width="740" height="340" />';
  },
  
  preload: function(images) {
    images.each(function(path) {
      var image = new Image();
      image.src = path;
    });
  },
  
  scroll: {
    itemWidth: 87,
    
    right: function() {
      new Effect.AnimateScroll($('stripContainer'),  Gallery.scroll.itemWidth*8, { afterFinish: Gallery.scroll.check });
    },
    
    left: function() {
      new Effect.AnimateScroll($('stripContainer'), -Gallery.scroll.itemWidth*8, { afterFinish: Gallery.scroll.check });
    },
    
    check: function() {
      var container = $('stripContainer');
      if (container.scrollLeft <= 0) {
        $$('.leftArrow')[0].addClassName('empty');
      } else {
        $$('.leftArrow')[0].removeClassName('empty');
      }
      
      if (container.scrollLeft >= parseInt($('thumbList').style.width) - Gallery.scroll.itemWidth*8) {
        $$('.rightArrow')[0].addClassName('empty');
      } else {
        $$('.rightArrow')[0].removeClassName('empty');
      }
    }
  }
};

// Create a new class to hold our functionality
Effect.AnimateScroll = Class.create();

// Extend our class with the effects base that all scriptaculous efects share
Object.extend(Object.extend(Effect.AnimateScroll.prototype, Effect.Base.prototype), {
  
  // initialize() should setup any variables you will need while updating,
  // as well as setup options (and defaults) to be passed into the effects engine.
  initialize: function(element, amount) {
    
    // Save the element to update internally to this object
    this.element = $(element);
    
    // Create an options hash based on some defaults, with the optional
    // options object merged into the defaults.
    var options = Object.extend({
      from: this.element.scrollLeft,
      to:   this.element.scrollLeft + amount
    }, arguments[2] || {});
    
    // Everything is setup, kick off the animation
    this.start(options);
  },
  
  // update() always receieves the "position" argument which contains the value
  // of the current frame of the animation.  So put here the javascript that changes
  // the page on each frame.
  update: function(position) {
    this.element.scrollLeft = position;
  }
});