/* 2007 by Markus Inger */
var blobfx = new Class(
{
  // Optionen Implementieren
  Implements : [Options],
  
  // Default Optionen setzen
  options :
  {
    'id'         : 'blobme',
    'startclass' : 'active',
    'duration'   : 300,
    'mastertag'  : 'li',
    'oversizex'  : 15,
    'oversizey'  : 15,
    'oversize2x' : 0,
    'oversize2y' : 0,    
    'blobcolor'  : '#f00',
    'opacity'    : 1
  },
  
  // blob element
  blob : false,
  
  // blobsettings
  blobsettings :
  {
    start  : false,
    fx     : false
  },
  
  // init
  initialize: function(options)
  {
    // optionen ?bernehmen
    this.setOptions(options);
    
    // div wrapper relative
    $(this.options.id).setStyles({'position':'relative'});
    
    // blob element erstellen
    this.createBlob();
    
    // fx morph init
    this.blobsettings.fx  = new Fx.Morph($(this.blob), {
      duration   : this.options.duration,
      transition : Fx.Transitions.Sine.easeInOut,
      link       : 'cancel' 
    });
                       
    // default / start element 
    var elements = $$('#'+this.options.id+' .'+this.options.startclass);
    var element = elements[0];    
    this.blobsettings.start = element;
               
    // mouseenter an alle menupunkte
    $$('#'+this.options.id+' '+this.options.mastertag).each(function(element){ 
      element.addEvent('mouseover', this.moveBlob.bind(this) );
      element.setStyles({'position':'relative','z-index':10});
    }.bind(this));

    // mouseleave auf UL
    $(this.options.id).addEvent('mouseleave', this.leaveBlob.bind(this) );
       $('main').addEvent('mouseenter', this.leaveBlob.bind(this) );
    // start animation
    this.moveBlob({ 'target':element });    
  },
  
  // blob element erstellen
  createBlob: function()
  {
    this.blob = new Element('div', {
      'class'        : 'blob',
      'styles'       : {
        'background-color' : this.options.blobcolor,
        'position'         : 'absolute',
        'left'             : 0,
        'top'              : 0,
        'width'            : 0,
        'height'           : 0,
        'opacity'          : this.options.opacity,
        'z-index'          : 5  
      }
    });
    
    // element einf?gen
    this.blob.inject($(this.options.id),'bottom');        
  },

  // blob bewegen
  moveBlob: function(element)
  {
    var el = $(element.target);
    
    // wir wollen nur LI tags also gehen wir solange zur?ck bis wir es haben
    if ( el.get('tag') != this.options.mastertag )
      el = el.getParent('li');
      
    // position des aktuellen li elements bestimmen
    var pos  = el.getPosition($(this.options.id));
    
    // animation starten
    this.blobsettings.fx.start({
        'left'   : pos.x - this.options.oversizex ,
        'width'  : el.offsetWidth + (this.options.oversizex*2),        
        'top'    : pos.y - this.options.oversizey ,
        'height' : el.offsetHeight + (this.options.oversizey*2)
    }).chain(function(){
      // 2. schritt der animation
      this.blobsettings.fx.start({
        'left'   : pos.x - this.options.oversize2x ,
        'width'  : el.offsetWidth + (this.options.oversize2x*2),        
        'top'    : pos.y - this.options.oversize2y ,
        'height' : el.offsetHeight + (this.options.oversize2y*2)
      });
    }.bind(this));
 
  },
  
  // wenn wir das UL verlassen bewegen wir den blob wieder an die start position
  leaveBlob: function()
  {
    this.moveBlob({ 'target':this.blobsettings.start});
  }
});