var ImageZoom = new Class({
	initialize: function(){
		this.zoomSize = 0.8; // x2 the size of the thumbnail
		this.padding=-0.36;	 // коэффициент отступа для зоны движении квадратика

		this.thumb_url = $('zoomer_thumb').getElement('span');
		this.thumb_image = this.thumb_url.getElement('img');
		//alert(this.thumb_url);
		this.thumbnail = new Asset.image( this.thumb_image.get('src'),{
			onload: function(){
				$('zoomer_thumb').empty();
				this.thumbnail.inject('zoomer_thumb');
				this.generateZoomer( new Hash({ x:this.thumbnail.width , y:this.thumbnail.height }) );
			}.bind(this)
		});
	},
	generateZoomer: function( thumb_size ){
		this.setDimensions('zoomer_thumb',thumb_size.x,thumb_size.y);
		this.bigImage = new Asset.image( this.thumb_url.get('href'), {
			id:'zoomer_image',
			onload: function(){
				/* 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 = (thumb_size.x/ratioX).toInt()*this.zoomSize;
				var regionHeight = (thumb_size.y/ratioY).toInt()*this.zoomSize;
				new Element('div', {
					id: 'zoomer_region',
					styles: {
						'width': regionWidth,
						'height': regionHeight,
						'left':(thumb_size.x-regionWidth)/2,
						'top':(thumb_size.y-regionHeight)/2
					}
				}).injectInside('zoomer_thumb');

				this.bigImage.injectInside('zoomer_region');
				this.setPosition('zoomer_image',(thumb_size.x-regionWidth),(thumb_size.y-regionHeight));
				changeStyle();
				/* move the zoomed image when the zoomer region is dragged on the thumbnail */
				new Drag('zoomer_region', {
					modifiers: {x: 'left', y: 'top'},
					limit: {x:[regionWidth*this.padding,(thumb_size.x - regionWidth*(1+this.padding))], y:[regionHeight*this.padding, (thumb_size.y-regionHeight*(1+this.padding))]},
					// движение по исходной картинке перемещает большую
					onDrag: function(el){
						/* get the zoomed position on thumbnail */
						var pos = el.getPosition('zoomer_thumb');
						/* calculate where the zoomed image should be positioned */
						var calcLeft = -(pos.x*ratioX);
						var calcTop = -(pos.y*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) > bigImgTop ? -bigImgTop : calcTop;
						//var left=calcLeft;
						//var top=calcTop;
						if((-calcLeft) > bigImgLeft){calcLeft-=regionWidth/3;}
						if((-calcTop) > bigImgTop){calcTop-=regionHeight/3;}
						//alert(left+' '+top);
						left=calcLeft-regionWidth/2;
						top=calcTop-regionHeight/2;
						/* set the position of the zoomed image according to the position of the zoomed area on thumbnail */
						this.setPosition('zoomer_image',left,top);
					}.bind(this)
				});
			}.bind(this)
		});
	},
	setDimensions: function(element,width,height){
		$(element).setStyles({
			'width':width,
			'height':height
		});
	},

	setPosition: function(element,left,top){
		$(element).set({
			styles:{
				'left': left,
				'top':top
			}
		})
	}
})

function initZoom(){
	window.addEvent('domready', function(){
		new ImageZoom();
	});
}


function changeStyle(){
	var el=document.getElementById('zoomer_region');
	//alert(el.className);
	if(!el){setTimeout('changeStyle()',100);}
	else{
		if(!el.className || el.className=="zoomer_region"){el.className="hidden";}
		else{el.className="zoomer_region";}
	}
}