var imageZoom = new Class({
									   
	initialize: function(fronte, retro, zoomf, zoomr){
		
		this.zoomSize = 1,5; // x2 the size of the thumbnail
		
		this.fronte	= fronte;
		this.retro	= retro;
		this.zoomf	= zoomf;
		this.zoomr	= zoomr;
		
		this.zoomer_thumb	= $('zoomer_thumb');
		
		//window.addEvent('mousemove',this.listener.bindWithEvent(this));
		
		// se visibile devo nascondere il form di invio delle mail
		//$("link").setStyle('display', 'block');
		
//		var fx = new Fx.Tween($("zoomer_big_container"), {'onComplete': function() {
//			$("zoomer_big_container").setStyle('display', 'block');
//		}});
//		fx.start('opacity', ['0.0', '1.0']);
//		$("zoomer_big_container").setStyle('display', 'block');
		this.zoomView = $("zoomer_big_container");
		this.zoomView.setStyles({
			'width'		: '250px',
			'height'	: '250px'
		});
		this.zoomView.fade('in');

		if($("zoomer_region")){
			$("zoomer_region").setStyle('display', 'block');
		}
								
		//this.thumb_image = this.thumb_url.getElement('img')) 

// 			new Asset.image(zoomf);
// 			new Asset.image(zoomr);
// 		
// 		
		this.thumbnail = new Asset.image( this.fronte, {
			onload: function(){
				this.zoomer_thumb.empty();
				this.thumbnail.inject(this.zoomer_thumb);
				this.generateZoomer( { x:this.thumbnail.width , y:this.thumbnail.height } );
			}.bindWithEvent(this)
		});	

	},
	
	generateZoomer: function( thumb_size ){

		this.setDimensions('zoomer_thumb', thumb_size.x, thumb_size.y);
		this.bigImage = new Asset.image( this.zoomf, {
			id:'zoomer_image',
			onload: function(){				
				this.bigImage.inject('zoomer_big_container');
				/* determine the proportions between the thumbnail and the zoomed image*/
				var ratioX = this.bigImage.width/thumb_size.x;
				var ratioY = this.bigImage.height/thumb_size.y;
				/* set the size of the zoomed area on thumbnail */
				var regionWidth = 80;
				var regionHeight = 80;

				var zoomer_top	= this.zoomer_thumb.getCoordinates($('main'))['top'];
				var zoomer_left	= this.zoomer_thumb.getCoordinates($('main'))['left'];
				var zoomer_bottom = this.zoomer_thumb.getCoordinates($('main'))['bottom']

				if (!$('zoomer_region'))
					this.zoomer_region = new Element('div', {
						id: 'zoomer_region',
						styles: {
							'position': 'absolute',
							'top': zoomer_top,
							'left': zoomer_left,
							'width': regionWidth,
							'height': regionHeight,
							'opacity': .7,
							//'-ms-filter': "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)", // first for IE!
							'filter': 'alpha(opacity=50)'// second!
						}
					})				
					.inject($('main'));
				
				if ($('retro') == null)
					Element('div', {
						id: 'retro',
						styles: {
							top: zoomer_bottom - 23,
							left: zoomer_left -1,
							height: "23px"
						}
					}).injectInside($('main'));
				var label = $('retro');				
				var newImageZoom	= "'" + this.retro + "', '" + this.fronte + "', '" + this.zoomr + "', '" + this.zoomf + "'";
				label.innerHTML		= '<img src="/img/turn.png" width=22 onclick="view_retro(' + newImageZoom + ');">';
				/* move the zoomed image when the zoomer region is dragged on the thumbnail */


				this.zoomer_thumb.removeEvents('mousemove');			
				if (this.zoomer_region)
					this.zoomer_region.removeEvents('mousemove');

				this.zoomer_thumb.addEvent('mousemove', function(event) {
					var event = new Event(event);

					var limit= {x:[0,(thumb_size.x)], y:[0, (thumb_size.y)]};
					
					var x = event.client.x - this.zoomer_thumb.getPosition().x;
					var x0	= ( x < 40) ? 40 : x;
					var x0	= ( x0 > (thumb_size.x - 40)) ? (thumb_size.x - 40) : x0;

					var y = event.client.y - this.zoomer_thumb.getPosition().y;
					var y0	= ( y < 40) ? 40 : y;
					var y0	= ( y0 > (thumb_size.y - 40)) ? (thumb_size.y - 40) : y0;
					
					var el = $('zoomer_big_container');
					if(x <= limit.x[1] && x>= limit.x[0] && y <= limit.y[1] && y>= limit.y[0] && el.getStyle('display') == "block") {
						
						this.setPosition('zoomer_region', (x0 - 40 + zoomer_left), (y0 - 40 + zoomer_top));
						var calcLeft = -((x0 - 40) * ratioX);
						var calcTop = -((y0 - 40) * ratioY);
						/* set a few conditions in
							case the ratio between the thumbnail and the zoomed image is a float number */
						var bigImgLeft	= this.bigImage.width - (thumb_size.x * this.zoomSize);
						var bigImgTop	= this.bigImage.height - (thumb_size.y * this.zoomSize);						
						var left = (-calcLeft) > bigImgLeft ? -bigImgLeft : calcLeft;
						var top = (-calcTop-20) > bigImgTop ? -bigImgTop : calcTop;
						/* set the position of the zoomed image according to the position of the zoomed area on thumbnail */
						this.setPosition('zoomer_image', calcLeft, calcTop);
						
						
					}
					
				}.bindWithEvent(this));
				
				if (this.zoomer_region)
					this.zoomer_region.cloneEvents(this.zoomer_thumb, 'mousemove');

			}.bind(this)
		});		

	},
	
	setDimensions: function(element, width, height){
		$(element).setStyles({
			'width'		: width,
			'height'	: height
		});
	},
	
	setPosition: function(element,left,top) {
		if ($(element)) {
			$(element).setStyles({
				'left': left,
				'top':top
			});
		}
	}
	
})


function chiudi() {
	var zoomView = $("zoomer_big_container");

	var fx = new Fx.Tween(zoomView, {
		'duration': 'short',
		'onComplete': function(el) {
			el.setStyles({
				'width'		: '0px',
				'height'	: '0px'
			});
		}
	});
	fx.start('opacity', ['1.0', '0.0']);
// 	console.log(this)
// 	this.zoomView.fade('out');
// 	this.zoomView.setStyle({
// 		'width'		: '0px',
// 		'height'	: '0px'
// 	});

	$$('#zoomer_region, #zoomer_image, #retro').destroy();

	$('zoomer_thumb').empty();
	var a = new Element('a', {href: '#'}).inject($('zoomer_thumb'));
	new Element('img', { src: this.fronte }).addClass('fronte').inject(a);
	new Element('img', { src: this.retro }).addClass('retro').inject(a);
}
	
	
function view_retro(r, f, zr, zf) {
	var fx = new Fx.Tween($('zoomer_big_container'), {
		'duration': 'short',
		'onComplete': function() {
			$("zoomer_image").destroy(); 
			zoomActive = new imageZoom(r, f, zr, zf);
		}
	});
	fx.start('opacity', ['1.0', '0.0']);
}

	
function zoomWindow() {
	$("zoomer_thumb").set('html', '<a href="#"><img width="500" class="fronte" src="' + zoomf + '" onclick="chiudiZoomWindow();"><img width="500" class="retro" src="' + zoomr + '" onclick="chiudiZoomWindow();" /></a>');
	$("zoomer_thumb").setStyle('width', '500px');
}

	
function chiudiZoomWindow() {
	$("zoomer_thumb").set('html', '<a href="#"><img class="fronte" src="' + fronte + '" onclick="zoomWindow();"><img class="retro" src="' + retro + '" onclick="zoomWindow();" /></a>');
	$("zoomer_thumb").setStyle('width', '211px');
}
	
function annulla() {	
	$("hidden_form").setStyle('display', 'none');
	$("link").setStyle('display', 'block');
};