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

	// Options
	options: {
		height: 200, 
		width: 700,
		iniTop: -128,
		iniLeft: 0,
		zoom: 2
	},
	
	// Constructeur
	initialize: function(element, options) {
		this.setOptions(options);
		if (element.get('tag') != 'img') alert('MooLoupe : Paramètre element erroné (tag != img).');
		else {
			this.encours = false;
			this.imgPhoto = element;
			this.iniWidth = element.getSize().x;
			this.iniHeight = element.getSize().y;
			this.imgFader = new Element('img', { src: 'mooLoupe/cadre_fondu.png', 
				styles: { position: 'absolute', left: 0, top: 0, width: this.options.width, height: this.options.height }
			});
			this.divContent = new Element('div', { 
				styles: { position: 'relative', width: this.options.width, height: this.options.height, overflow: 'hidden' } 
			}).inject(element, 'before').adopt(this.imgPhoto, this.imgFader);
			this.imgPhoto.setStyles({ marginTop: this.options.iniTop, marginLeft: this.options.iniLeft });

			this.divContent.addEvent('mousemove', function(e) {
				if (!this.encours) {
					var coefx = (e.client.x - this.divContent.getPosition().x) / this.options.width;
					var coefy = (e.client.y - this.divContent.getPosition().y) / this.options.height;
					this.imgPhoto.setStyles({ marginLeft: -(this.imgPhoto.getSize().x-this.options.width) * coefx, 
										  	  marginTop: -(this.imgPhoto.getSize().y-this.options.height) * coefy });
				}
			}.bind(this));
			this.divContent.addEvent('mouseenter', function(e) {
				this.encours = true;
				var finWidth = this.iniWidth * this.options.zoom;
				var finHeight = this.iniHeight * this.options.zoom;
				var coefx = (e.client.x - this.divContent.getPosition().x) / this.options.width;
				var coefy = (e.client.y - this.divContent.getPosition().y) / this.options.height;
				this.imgPhoto.get('morph', { duration: 200, transition: 'sine:out' }).start(
									{ width: finWidth, height: finHeight, marginLeft: -(finWidth-this.options.width) * coefx, 
									  marginTop: -(finHeight-this.options.height) * coefy }).chain(function() { this.encours = false; }.bind(this));
			}.bind(this));
			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));
		}
	}
});