var Zoomer = new Class({
	initialize: function(big)
	{
	
//		this.thumb = $(thumb);
//		this.thumbImage = this.thumb.getElement('img');
		this.big = $(big);
		this.bigImage = this.big.getElement('img');

		this.contain = this.big.getSize();

		this.newWidth = this.contain.x;
		this.newHeight = this.contain.y;
		this.newLeft=0;
		this.newTop=0;

		this.bigWidth = this.bigImage.getSize().x;
		this.bigHeight = this.bigImage.getSize().y;
		
//		this.regionWidth = this.thumbImage.getSize().x.toFloat();
//		this.regionHeight = this.thumbImage.getSize().y.toFloat();

/*		this.region = new Element('div', {
			id: 'zoomer_region',
			styles: {
				'width': this.regionWidth,
				'height': this.regionHeight,
				'opacity': .7,
				'background': '#666666',
				'border': 'none',
				'position': 'absolute',
				'top': 0,
				'left': 0,
				'cursor': 'move'
			}
		});*/
//		this.region.injectInside(thumb);

		this.bigMorph = new Fx.Morph(this.bigImage, {duration: 'short', transition: Fx.Transitions.Sine.easeOut});
//		this.regionMorph = new Fx.Morph(this.region, {duration: 'short', transition: Fx.Transitions.Sine.easeOut});
		
		this.zoomX = this.contain.x / this.bigWidth;  
		this.zoomY = this.contain.y / this.bigHeight;
	
		this.zoomLimitXMin = this.zoomX;
		this.zoomLimitXMax = 1;
		this.zoomLimitYMin = this.zoomY;
		this.zoomLimitYMax = 1;
		
		this.bigImage.style.width=parseInt(this.contain.x)+'px';
		this.bigImage.style.height=parseInt(this.contain.y)+'px';
		
		// Le drag
		this.drag = new Drag(this.bigImage, {
			modifiers: {x: 'left', y: 'top'},
			grid:1,
			limit: {x:[0,0],y:[0,0]}
		});	

		
		//ancien	
//		this.drag = new Drag(this.region, {
//			modifiers: {x: 'left', y: 'top'},
//			grid:1,
//			limit: {x:[0,(this.thumbImage.getSize().x - this.regionWidth)], y:[0, (this.thumbImage.getSize().y - this.regionHeight)]},
//			onDrag: this.moveBig.bind(this)
//		});	
		
		
	},

	zoom: function (zoomX, zoomY)
	{
		var ratioX = zoomX / this.zoomX;
		var ratioY = zoomY / this.zoomY;		
		
		// On agrandit l'image
		this.newWidth = this.bigWidth * zoomX;
		this.newHeight = this.bigHeight * zoomY;
		
		var pos = this.bigImage.getPosition(this.big);
//		console.log(pos);
		this.newLeft=parseInt(pos.x*ratioX+(this.contain.x/2*(1-ratioX)) );
		this.newTop=parseInt(pos.y*ratioY+(this.contain.y/2*(1-ratioY)) );
//		alert(pos.x+' -> '+this.newLeft);
		
		// Corrections de la position (notemment pour le dézoom)
		this.newLeft = Math.min(0, this.newLeft);
		this.newTop = Math.min(0, this.newTop);
		this.newLeft = Math.max(- this.newWidth + this.contain.x, this.newLeft);
		this.newTop = Math.max(- this.newHeight + this.contain.y, this.newLeft);
		
		// On recentre l'image
		this.bigMorph.start({
			'width': this.newWidth,
			'height': this.newHeight,
			'left': this.newLeft,
			'top': this.newTop
		});
		
		// On replace correctement le carré dans le thumbnail
//		this.moveBig();
		
		// On change la zone de drag & drop
//		this.regionWidth = (this.regionWidth / ratioX).toFloat();
//		this.regionHeight = (this.regionHeight / ratioY).toFloat();
//		this.regionMorph.start({
//			'width': this.regionWidth,
//			'height': this.regionHeight
//		});
		
		
		
		// On modifie l'étendu du drag
		this.drag.options.limit = {x:[this.contain.x-this.newWidth,0], y:[this.contain.y-this.newHeight,0]};
		if (this.newWidth-this.contain.x>5 || this.newHeight-this.contain.y>5) {
			this.bigImage.setStyle('cursor','move');
			if ($('fit-screen')) $('fit-screen').style.display='';
		}else {
			this.bigImage.setStyle('cursor','default');
			if ($('fit-screen')) $('fit-screen').style.display='none';
		}
//		this.drag.options.limit = {x:[0,(this.thumbImage.getSize().x - this.regionWidth)], y:[0, (this.thumbImage.getSize().y - this.regionHeight)]};
		
		// On met à jour le zoom
		this.zoomX = zoomX;
		this.zoomY = zoomY;
		
//		this.bigMorph.resume();
		
		return true;
	},
	
	zoomIn: function (ratio)
	{
		return this.zoom(Math.min(this.zoomX *(1+ratio/10), this.zoomLimitXMax), Math.min(this.zoomY  *(1+ratio/10), this.zoomLimitYMax));
	},
	
	zoomOut: function (ratio)
	{
		return this.zoom(Math.max(this.zoomX  *(1-ratio/10), this.zoomLimitXMin), Math.max(this.zoomY *(1-ratio/10), this.zoomLimitYMin));
	},
	
	reInit: function ()
	{
		return this.zoom(this.zoomLimitXMin, this.zoomLimitYMin);
	}
});