var ThumbnailResize = Behavior.create({
  initialize: function(){
    this._constrainGeometry();
    this._alignThumbnails();
  },
  
  _alignThumbnails: function(){
    var image = this.element;
    var parentWidth = image.up(".container").clientWidth
    if(image.clientWidth > image.up(".container").clientWidth) {
      var newLeft = ((parentWidth - image.clientWidth)/2) + 'px';
      image.setStyle({ 'left': newLeft });
    };
  },
  
  _constrainGeometry: function(){
    var image = this.element;
    var className = image.clientHeight > image.clientWidth ? 'constrain_width' : 'constrain_height';
    image.addClassName(className)
  }
});

/* Use window:load here instead of dom:load, 
   since we want to wait for images. 
   Also, you have to use the old Event.observe syntax. */
Event.observe(window, 'load', function() {
  Event.addBehavior({
    'body.people.edit .photos .photo .container img': ThumbnailResize,
    'body.people.index .people .photo img': ThumbnailResize
  });
});
