/*
                     __                      ___                           __                    
         __         /\ \__                  /\_ \                         /\ \     __            
 __  __ /\_\   _ __ \ \ ,_\  __  __     __  \//\ \       __       __      \_\ \   /\_\     ___   
/\ \/\ \\/\ \ /\`'__\\ \ \/ /\ \/\ \  /'__`\  \ \ \    /'_ `\   /'__`\    /'_` \  \/\ \   / __`\ 
\ \ \_/ |\ \ \\ \ \/  \ \ \_\ \ \_\ \/\ \L\.\_ \_\ \_ /\ \L\ \ /\ \L\.\_ /\ \L\ \  \ \ \ /\ \L\ \
 \ \___/  \ \_\\ \_\   \ \__\\ \____/\ \__/.\_\/\____\\ \____ \\ \__/.\_\\ \___,_\ _\ \ \\ \____/
  \/__/    \/_/ \/_/    \/__/ \/___/  \/__/\/_/\/____/ \/___L\ \\/__/\/_/ \/__,_ //\ \_\ \\/___/ 
                                                         /\____/                  \ \____/       
                                                         \_/__/                    \/___/        
Script : moozoommenu.js
09/2007 - christopher wait aka virtualgadjo / chris at virtual-gadjo dot com
revue et corrigée 12/2007 pour mootools 1.2

Options:
- imgClass : ...
- imgOffString : la chaine de caractères qui repère les images off | Image AUS, bestehend aus Dateiname und "_off" und Dateierweiterung, z.B. "bild_off.gif" 
- immOnString : la chaîne de caractères qui repère les images on   | Image AN,  bestehend aus Dateiname und "_on"  und Dateierweiterung, z.B. "bild_on.gif"
- zoomlevel: Standardwert - wenn in der HTML kein anderer Wert angegeben ist
- textLinkClass: la class attribuée aux liens textes associés à chaque image s'il y en a 
  | die Klasse die dem Text in dem Tag <a href="">Text</> zugeordnet wird, falls einer vorhanden ist.
- effectDuration: ...
- towardTop: de 0 à 1, 0 le bas de l'image ne bouge pas, 1 le haut de l'image ne bouge pas, 0.5 le déplacement est centré sur l'image
  | von 0 bis 1, 0 = das Bild wird nach unten vergrößert. 1 = das Bild wird nach oben vergrößert. Bei 0.5 wird der Fixpunkt des Bildes in die Mitte gesetzt

IMPORTANT : penser à préciser les attributs height et width des images,
IE s'en passe sans problème, pas Firefox qui faute de les trouver dans le source
les met par défaut à 0 !!

WICHTIG: daran denken, die Attribute height und width der Bilder anzugeben, IE kann darauf ohne Probleme verzichten, 
nicht Firefox, wenn er keine Quelle findet, wird sie abgerundet und liegt bei 0
Have swing
*/

var mooZoomMenu = new Class({
  
  Implements: [Events, Options],
  
  options: {
    imgClass	: 'zoommenu',
    imgOffString	: '_off',
    imgOnString	: '_on',
    zoomlevel	: 3,
    textLinkClass	: 'txtlink',
    effectDuration	: 600,
    towardTop	: 1
  },
    
  initialize: function(options) {
    
    this.setOptions(options);
    
    this.txtmenu		= [];
    this.menu		= [];
    this.menuimg		= [];
    this.formerabs		= [];
    this.formerord		= [];
    this.largeur		= [];
    this.hauteur		= [];
    this.effect		= [];
    this.linkEffect		= [];
    this.preload		= new Asset.images([]);
    
    $$('img').each(function(el){

      if (el.getProperty('class').contains(this.options.imgClass)) {		// Werte eines jeden Images der zutreffenden Klasse abfragen
      
        this.absi		= el.getPosition().x;		// Variablen mit den image-Werten bestücken
        this.ord		= el.getPosition().y;
        this.imgWidth	= el.getCoordinates().width;
        this.imgHeight	= el.getCoordinates().height;
        this.newLink	= el.getParent().clone().inject(document.body, 'top');
        
        this.formerabs.push(this.absi);
        this.formerord.push(this.ord);
        this.largeur.push(this.imgWidth);
        this.hauteur.push(this.imgHeight);
        
        this.newLink.setStyles({			// CSS-Werte zuweisen
          'position'	: 'absolute',
          'top'		: this.ord,
          'left'		: this.absi,
          'z-index'		: 50
        });
        
        this.newImg		= this.newLink.getChildren()[0];
        this.zoomLink	= new Fx.Morph(this.newLink, {duration: this.options.effectDuration, link: 'cancel'});
        this.zoomEffect	= new Fx.Morph(this.newImg, {duration: this.options.effectDuration, link: 'cancel'});
        this.newImgSrc	= this.newImg.getProperty('src').replace(this.options.imgOffString.toString(), this.options.imgOnString);
  
        this.menu.push(this.newLink);
        this.menuimg.push(this.newImg);
        this.effect.push(this.zoomEffect);
        this.linkEffect.push(this.zoomLink);
        this.preload.push(this.newImgSrc);
        
        el.setStyle('visibility', 'hidden');
      }
    
    }.bind(this));

    $$('a').each(function(lien) {
      if (lien.getProperty('class').contains(this.options.textLinkClass)) {
        this.txtmenu.include(lien);
      }
    }.bind(this));
    
    //et c'est parti...            und das ist gegangen...
    $$(this.menu).each(function(elem, j){
        
      elem.addEvents({
        'mouseenter': function(){
          this.getCoordonnees(j);
          this.zoomIn(j);
        }.bind(this),
          
        'mouseleave': function(){
          this.zoomOut(j);
        }.bind(this)
      });
        
    }.bind(this));
    
    //en cas de lien txt associés           im Falle Verbindung txt verknüpfen
    if (this.txtmenu != []){
      
      $$(this.txtmenu).each(function(ele, j){
        ele.addEvents({
          'mouseenter': function(){
            this.getCoordonnees(j);  
            this.zoomIn(j);
          }.bind(this),
          
          'mouseleave': function(){
            this.zoomOut(j);
          }.bind(this)
        });
      }.bind(this));
    }
    
  },
  
  getCoordonnees: function(j){
    
    this.formerSrc		= this.menuimg[j].getProperty('src');
    this.newsrc		= this.formerSrc.replace(this.options.imgOffString, this.options.imgOnString);    
    this.departx		= this.formerabs[j];
    this.departy		= this.formerord[j];
    this.formerWidth	= this.largeur[j]; 
    this.formerHeight	= this.hauteur[j];				
    this.imgZoomWidth	= this.formerWidth * this.options.zoomlevel;
    this.imgZoomHeight	= this.formerHeight * this.options.zoomlevel;
    this.zoomabs		= this.departx - ( (this.imgZoomWidth - this.formerWidth) / 2 ).toInt();
    this.zoomord		= this.departy - ( (this.imgZoomHeight - this.formerHeight) * this.options.towardTop );
  },
  
  zoomIn: function(j){
    
    this.menu[j].setStyle('z-index', 1000);
    
    this.menuimg[j].setProperties({
      'src'		: this.newsrc,
      'width'		: this.formerWidth,
      'height'		: this.formerHeight
    });
    
    this.linkEffect[j].start({
      'left'		: [this.departx, this.zoomabs],
      'top'		: [this.departy, this.zoomord],
      'width'		: [this.formerWidth, this.imgZoomWidth],
      'height'		: [this.formerHeight, this.imgZoomHeight]
    });
    
    this.effect[j].start({
      'width'		: [this.formerWidth, this.imgZoomWidth],
      'height'		: [this.formerHeight, this.imgZoomHeight]
    });
  },
  
  zoomOut: function(j){
    
    this.menu[j].setStyle('z-index', 50);
    
    this.linkEffect[j].start({
      'left'		: this.departx,
      'top'		: this.departy,
      'width'		: this.formerWidth,
      'height'		: this.formerHeight
    });
    
    this.effect[j].start({
      'width'		: this.formerWidth,
      'height'		: this.formerHeight
    });
    
    this.menuimg[j].setProperty('src', this.formerSrc);
  }

});