fx.NavigationItem = new Class({
  Implements: [Options],
  Binds: ['setMouseOver', 'setMouseOut', 'setMouseClick'],
  
  options:
  {
    transition: Fx.Transitions.linear.easeOut,
    duration: 'short'
  },
  
  initialize: function(element, options)
  {
    // Options initialisieren
    this.setOptions(options);
    
    // Element speichern
    this.element = document.id(element);
    this.accent = this.element.getElement('div');
    this.text = this.element.getElement('span');
    this.link = this.element.getElement('a');

    // Benötigte Styles auslesen
    this.initStyles();
    
    // Benötigte Effekt Objekte erstellen
    this.initEffects();
    
    // Events initialisieren
    this.initEvents();
    
    fx.NavigationRegistry.registerItem(this);
  },
  
  initStyles: function()
  {
    // Bisherige Styles auslesen
    this.cssElementNormal = this.element.getStyles('height', 'margin');
    this.cssAccentNormal = this.accent.getStyles('height', 'margin-top');
    this.cssTextNormal = this.text.getStyles('height', 'padding-bottom');
    this.cssLinkNormal = this.link.getStyles('height', 'padding-bottom');

    // Hover Class hinzufügen für Hover Styles
    this.element.addClass('hover');

    // Hover Styles auslesen
    this.cssElementHover = this.element.getStyles('height', 'margin');
    this.cssAccentHover = this.accent.getStyles('height', 'margin-top');
    this.cssTextHover = this.text.getStyles('height', 'padding-bottom');
    this.cssLinkHover = this.link.getStyles('height', 'padding-bottom');
    
    // Hover Class wieder entfernen
    this.element.removeClass('hover');
  },
  
  initEffects: function()
  {
    this.fxElement = new Fx.Morph(this.element, {duration: this.options.duration, transition: this.options.transition});
    this.fxAccent = new Fx.Morph(this.accent, {duration: this.options.duration, transition: this.options.transition});
    this.fxText = new Fx.Morph(this.text, {duration: this.options.duration, transition: this.options.transition});
    this.fxLink = new Fx.Morph(this.link, {duration: this.options.duration, transition: this.options.transition});
  },
  
  initEvents: function()
  {
    this.link.addEvents({
      'mouseover': this.setMouseOver,
      'mouseout': this.setMouseOut,
      'click': this.setMouseClick
    });
  },
  
  cancelEffects: function()
  {
    this.fxElement.cancel();
    this.fxAccent.cancel();
    this.fxText.cancel();
    this.fxLink.cancel();
  },
  
  setMouseOver: function(e)
  {
    this.cancelEffects();
    this.fxElement.start(this.cssElementHover);
    this.fxAccent.start(this.cssAccentHover);
    this.fxText.start(this.cssTextHover);
    this.fxLink.start(this.cssLinkHover);
  },
  
  setMouseOut: function(e)
  {
    this.cancelEffects();
    this.fxElement.start(this.cssElementNormal);
    this.fxAccent.start(this.cssAccentNormal);
    this.fxText.start(this.cssTextNormal);
    this.fxLink.start(this.cssLinkNormal);
  },
  
  setMouseClick: function(e)
  {
    this.cancelEffects();
    this.fxElement.set(this.cssElementHover);
    this.fxAccent.set(this.cssAccentHover);
    this.fxText.set(this.cssTextHover);
    this.fxLink.set(this.cssLinkHover);
    
    this.link.removeEvents();
    fx.NavigationRegistry.setActiveItem(this);
  }
});

Element.implement({
  toNavigationItem: function()
  {
    new fx.NavigationItem(this);
  }
});