/*	copyright www.laRouteDuNet.fr 2007

    loupe au survol d'image(s)

	ATTENTION: nécessite prototype.js
*/

if(typeof Prototype == 'undefined')
  throw("zoom.js requires prototype.js library");

var AutoZoom = Class.create();
AutoZoom.prototype = {
    //affiche une loupe au survol des images avec className="zoom"
    //exemple <img class="zoom" src="url" />
    initialize: function() {
        Event.observe(window, 'load', this.load.bind(this), false);
    },
    load: function() {
        var imgs=document.images;
        for (var x=0, n=imgs.length;x<n;x++) {
            if (Element.hasClassName(imgs[x], 'zoom'))
                new Zoom(imgs[x]);
        }
    }
}
var AutoZoom=new AutoZoom();

var Zoom = Class.create();
Zoom.prototype = {
    //affiche une loupe au survol d'une image
    initialize: function(img) {
        //img= un objet image ou un ID
        this.img=$(img);
        this.loupe=document.createElement('div');
        document.body.appendChild(this.loupe);
        this.cache=new Image();
        this.cache.src=this.img.src;
        this.loupe.style.position='absolute';
        this.loupe.style.top='0px';
        this.loupe.style.left='-9999px';
        this.loupe.style.border='ridge 2px';
        this.loupe.style.background='black url('+this.cache.src+') no-repeat';

        Event.observe(this.img, 'mousemove', this.over.bindAsEventListener(this), false);
        Event.observe(this.img, 'mouseout', this.out.bindAsEventListener(this), false);
    },
    over: function(e) {
        var ratio=-this.cache.width/this.img.width;
        if (ratio>=-1) return;
        var pos=Position.page(this.img);
        var scroll=Position.realOffset(document.body);
        var winWidth=document.body.clientWidth;
        var winHeight=document.body.clientHeight;
        var loupeWidth=winWidth*0.25;
        if (loupeWidth>300) loupeWidth=300;
        var loupeHeight=loupeWidth*9/14;
        this.loupe.style.width=loupeWidth+'px';
        this.loupe.style.height=loupeHeight+'px';
        var x=Event.pointerX(e);
        var y=Event.pointerY(e);
        var imgX=x-pos[0]-scroll[0];
        var imgY=y-pos[1]-scroll[1];
        var loupeLeft=x-this.loupe.offsetWidth/2;
        if (loupeLeft<scroll[0]) loupeLeft=scroll[0];
        if (loupeLeft+this.loupe.offsetWidth>winWidth+scroll[0]) loupeLeft=winWidth+scroll[0]-this.loupe.offsetWidth;
        var loupeTop=y+16;
        if (loupeTop+this.loupe.offsetHeight>winHeight+scroll[1]) {
            loupeTop=y-16-this.loupe.offsetHeight;
            if (loupeTop<0) loupeTop=y+16;
        }
        this.loupe.style.left=loupeLeft+'px';
        this.loupe.style.top=loupeTop+'px';
        this.loupe.style.backgroundPosition=(imgX*ratio+this.loupe.offsetWidth/2)+'px '+(imgY*ratio+this.loupe.offsetHeight/2)+'px';
    },
    out: function(e) {
        this.loupe.style.top='-9999px';                
        this.loupe.style.left='-9999px';                
    }
}