// ------------------------------------------------------------------------------------
 // MooLoupe.js Mike GILBLAS - le 11/02/2010
 // ------------------------------------------------------------------------------------
 // Effet de loupe sur une image, avec un cadre en fondu.
 // ------------------------------------------------------------------------------------
 // Usage : (elt est un element img)
 //
 // new MooLoupe(elt, { options });
 // ------------------------------------------------------------------------------------
 // Options :
 // - height: hauteur de la zone affichée,
 // - width: Largeur de la zone affichée,
 // - iniTop: Position initial haut de l'image dans la zone affichée (margin-top),
 // - iniTop: Position initial gauche de l'image dans la zone affichée (margin-left),
 // - zoom: Valeur du zoom lorsque la souris est sur la zone affichée
 // ------------------------------------------------------------------------------------
 // Variables à définir : Chemin vers le script (utilisé pour l'image)
 var repScript = 'mooLoupe/';

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

 // Options
 options: {
 height: false,
 width: false,
 iniTop: 0,
 iniLeft: 0,
 zoom: 2.5
 },

 // Constructeur
 initialize: function(element, options) {
 this.setOptions(options);
 if (element.get('tag') != 'img') alert('MooLoupe : Paramètre element erroné (tag != img).');
 else {
 
 if(!this.options.width) {
  this.options.width = element.getSize().x;
 }
 
 if(!this.options.height) {
  this.options.height = element.getSize().y;
 }
 
 //console.log(this.options)
 
 // Init propriétés
 this.encours = false;
 this.imgPhoto = element;
 this.iniWidth = element.getSize().x;
 this.iniHeight = element.getSize().y;

 // console.log(this)
 this.wrapr = element.getParent('a');
 
 this.wraprW = this.wrapr.getSize().x;
 this.wraprH = this.wrapr.getSize().y;  

 this.elClassOrigin = element.get('class');
 this.elIdOrigin = element.get('id');
 element.set('class', 'null');
 element.setStyles({'width': this.iniWidth, 'height':this.iniHeigh});

 // Init des élements
 /*
 this.imgFader = new Element('img', { src: repScript + 'cadre_fondu.png',
 styles: { position: 'absolute', left: 0, top: 0, width: this.options.width, height: this.options.height }
 width: this.options.width, height: this.options.height
 }); */
 this.divContent = new Element('span', {
 styles: { display:'block', position: 'relative', width: this.wraprW, height: this.wraprH, overflow: 'hidden', margin:'0 auto', 'cursor' : 'url(/graphics/magnify.cur), -moz-zoom-in' }
 }).inject(element, 'before').adopt(this.imgPhoto); //, this.imgFader
 this.imgPhoto.setStyles({ marginTop: this.options.iniTop, marginLeft: this.options.iniLeft });

 // Déplacement de la souris sur le div : modif margins de l'image
 this.divContent.addEvent('mousemove', function(e) {
 if (!this.encours) {
 
 var posx = (e.page.x - this.divContent.getPosition().x);
 var posy = (e.page.y - this.divContent.getPosition().y);
 var coefx = (this.options.width * this.options.zoom - this.divContent.getSize().x) / this.divContent.getSize().x   
 var coefy = (this.options.height * this.options.zoom - this.divContent.getSize().y) / this.divContent.getSize().y 
 
 this.imgPhoto.setStyles({ 
    marginLeft: - posx * coefx,
    marginTop: - posy * coefy 
  });
 }
 }.bind(this));

 // Entrée de la souris dans le div : zoom
 this.divContent.addEvent('mouseenter', function(e) {
 this.encours = true;
 var finWidth = this.iniWidth * this.options.zoom;
 var finHeight = this.iniHeight * this.options.zoom;
 
 var posx = (e.page.x - this.divContent.getPosition().x);
 var posy = (e.page.y - this.divContent.getPosition().y);
 var coefx = (finWidth - this.divContent.getSize().x) / this.divContent.getSize().x   
 var coefy = (finHeight - this.divContent.getSize().y) / this.divContent.getSize().y 
 
 
 
 this.imgPhoto.get('morph', { duration: 200, transition: 'sine:out' }).start(
 { width: finWidth, height: finHeight, marginLeft: -(posx * coefx), marginTop: -(posy * coefy) }
 ).chain(function() { this.encours = false; }.bind(this));
 }.bind(this));

 // Sortie de la souris dans le div : restauration taille / position origine
 this.divContent.addEvent('mouseleave', function(e) {
 this.encours = true;
 this.imgPhoto.get('morph').start({ width: this.iniWidth, height: this.iniHeight,
 marginTop: this.options.iniTop, marginLeft: this.options.iniLeft }).chain(function() { this.encours = false; }.bind(this));
 }.bind(this));
 }
 },
 
  destroy: function() {
   
    var copyel = this.imgPhoto.clone(); 
    var qq = this.divContent.getParent();
    this.divContent.dispose();
    copyel.set('style', '');  
    copyel.set('class', this.elClassOrigin);
    copyel.set('id', this.elIdOrigin);    
    qq.adopt(copyel);
    
  }
 });