var ImageZoom = new Class({

	initialize: function(){
	
	    if ($('zoomer_thumb') != null)
	    {
		    this.zoomSize = 3; // x2 the size of the thumbnail
		    this.thumb_url = $('zoomer_thumb').getElement('a');
		    this.thumb_image = this.thumb_url.getElement('img');
    		
		    thumbX = this.thumb_image.getSize().x;
		    thumbY = this.thumb_image.getSize().y;
		    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:thumbX , y:thumbY}) );
			    }.bind(this)
		    });		
		}
	},
	
	generateZoomer: function( thumb_size ){
		this.setDimensions('zoomer_thumb',thumb_size.x,thumb_size.y);
		bigX = thumb_size.x*this.zoomSize;
		bigY = thumb_size.y*this.zoomSize;
		this.setDimensions('zoomer_big_container',bigX,bigY);
		
		this.bigImage = new Asset.image( this.thumb_url.get('href'), {
			id:'zoomer_image',
			onload: function(){				
				this.bigImage.inject('zoomer_big_container');
				/* determine the proportions between the thumbnail and the zoomed image*/
				var ratioX = bigX/thumb_size.x;
				var ratioY = bigY/thumb_size.y;
				
				/* set the size of the zoomed area on thumbnail */
				var regionWidth = (thumb_size.x/ratioX).toInt();
				var regionHeight = (thumb_size.y/ratioY).toInt();	
				new Element('div', {
					id: 'zoomer_region',
					styles: {
						'width': regionWidth,
						'height': regionHeight,
						'left': thumb_size.x / 2 - (regionWidth/2),
						'top': thumb_size.y / 2 - (regionHeight/2),
						'opacity': .5
					}
				}).injectInside('zoomer_thumb');
				
				
				/* move the zoomed image when the zoomer region is dragged on the thumbnail */
				new Drag('zoomer_region', {
					modifiers: {x: 'left', y: 'top'},
					grid:1,
					limit: {x:[0,(thumb_size.x - regionWidth)], y:[0, (thumb_size.y-regionHeight)]},
					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 = bigX - (thumb_size.x);
						var bigImgTop = bigY - (thumb_size.y);						
						var left = (-calcLeft) > bigImgLeft ? -bigImgLeft : calcLeft;
						var top = (-calcTop) > bigImgTop ? -bigImgTop : calcTop;
						/* 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)
				});	
				
				// center the big image
				this.setPosition('zoomer_image',-((bigX / 2)- (thumb_size.x/2)), -((bigY / 2)- (thumb_size.y/2)));					
				
				/* drag directly on the zoomed image. Also updates the zoomed region on the thumbnail */				
				this.DragBig = new Drag('zoomer_image',{
					modifiers: {x:'left',y:'top'},
					grid:1,
					onDrag: function(elem){
						var pos = elem.getPosition('zoomer_big_container');
						var left = pos.x;
						var top = pos.y;
						
						/* if the zoomed image is dragged outside boundaries, set the correct position */
						if(	pos.x>0 || pos.y>0 || -pos.x > (bigX - thumb_size.x) || -pos.y > (bigY - thumb_size.y))
						{			
							if(pos.x > 0) {left = 0; }
							if(pos.y > 0) {top = 0;}
							if ( -pos.x > (bigX - thumb_size.x)) {left = -1*(bigX-(thumb_size.x)); }
							if( -pos.y > (bigY - thumb_size.y) ) {top = -1*(bigY-(thumb_size.y));  }
							
							this.setPosition('zoomer_image',left,top);					
						};
						/* moves the zoomed region on thumbnail according to the position of the zoomed image */
						this.setPosition('zoomer_region',-(left/ratioX),-(top/ratioY));						
					}.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
			}
		})
	}
})

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