var GlossaryItem = new Class({
  Extends: Options,

  options: {
    element: null,
    more: 'tl_files/techCeFaCos/css/images/more.gif',
    less: 'tl_files/techCeFaCos/css/images/less.gif'
  },

  initialize: function( options )
  {
    this.setOptions( options );
    this.$term    = this.options.element;
    this.$def     = this.$term.getNext( 'dd' );
    this.$image   = new Element( 'img', { src: this.options.more });
    this.open     = false;

    this.$image.setStyle( 'margin-right', 5 );
    this.$image.inject( this.$term, 'top' );

    this.$term.setStyles({ cursor: 'pointer'});
    this.$def.setStyles({ display: 'none', opacity: 0 });

    this.fx = new Fx.Morph( this.$def, { link: 'cancel' });
    this.fx.addEvent( 'complete', this.fxCompleted.bind( this ) );
    this.$term.addEvent( 'click', this.toggle.bind( this ) );
  },

  toggle: function()
  {
    var src = this.$image.getProperty( 'src' );  
    this.$term.blur();

    if ( this.open )
    {
      this.open = false;
      src       = src.replace( 'less', 'more' );

      this.$term.setStyle( 'color', '#888888' );
      this.$def.setStyle( 'color', '#888888' );
      this.fx.start({ opacity: 0 });
    }

    else
    {
      this.open = true;
      src       = src.replace( 'more', 'less' );

      this.$term.setStyle( 'color', '#000000' );
      this.$def.setStyle( 'color', '#000000' );
      this.$def.setStyle( 'display', 'block' );
      this.fx.start({ opacity: 1 });
    }

    this.$image.setProperty( 'src', src );
  },

  fxCompleted: function()
  {
    if ( ! this.open )
    {
      this.$def.setStyle( 'display', 'none' );
    }
  }
});

window.addEvent( 'domready', function(){
  $( 'glossary-content' ).getElements( 'dt' ).each( function( item, i ){
    ( new GlossaryItem({ element: item }) );
  });
});