Event.observe(document, 'dom:loaded', function() {
  new CreditableImage('creditable_image');
});

var CreditableImage = Class.create({
  element: null,
  
  initialize: function(element) {
    element = $(element);
    if (!element) return;
    
    this.element = element;

    this._toggler = element.down('.toggler');
    this._content = element.down('.content');
    
    this._toggler.observe('mouseover', this.show.bindAsEventListener(this));
    this._toggler.observe('mouseout', this.hide.bindAsEventListener(this));
  },
  
  show: function() {
    if (this._hideAnimation) this._hideAnimation.cancel();
    
    this._showAnimation = new Effect.Morph(this._content, {
      style: {width: '400px'},
      duration: .25
    });
  },
  
  hide: function() {
    if (this._showAnimation) this._showAnimation.cancel();

    this._hideAnimation = new Effect.Morph(this._content, {
      style: {width: '0px'},
      duration: .50
    });
  }
});