var Gallery = new Class({
  Implements: [ Options ],

  options: {
    element: null,
    mainWidth: 164,
    mainHeight: 169
  },


  initialize: function( options )
  {
    this.setOptions( options );
    if ( ! this.options.element )
    {
      return false;
    }

    this.$element = this.options.element.getElement( '.middle' );
    this.$zoom    = new Element( 'div', { styles: { float: 'left', width: this.options.mainWidth + 15, height: this.options.mainHeight + 15 } });
    this.fx       = new Fx.Morph( this.$zoom, { duration: 'normal', link: 'cancel' });
    var image     = new Element( 'img', { width: this.options.mainWidth, height: this.options.mainHeight });
    this.src      = this.$element.getElement( 'img' ).get( 'src' );

    this.$element.getElements( 'img' ).setStyle( 'cursor', 'pointer' );

    this.$zoom.inject( this.$element, 'top' );
    image.inject( this.$zoom );


    this.$element.addEvent( 'click', this.beginChange.bind( this ) );
    this.fx.addEvent( 'complete', this.endChange.bind( this ) );

    this.fx.start({ opacity: 0  });
  },


  beginChange: function( event )
  {
    if ( event.target.get( 'tag' ) == 'img' )
    {
      event.stop();
      this.src = event.target.get( 'src' );
      this.fx.start({ opacity: 0 });
    }
  },


  endChange: function()
  {
    if ( this.$zoom.getStyle( 'opacity' ) == 0 )
    {
      this.$zoom.getElement( 'img' ).setProperty( 'src', this.src );
      this.fx.start({ opacity: 1 });
    }
  }
});



window.addEvent( 'domready', function(){
  $$(  '.mod_article .gallery' ).each( function( item ){
    ( new Gallery({ element: item }) );
  });
});