var ImageZoom = new Class({
	
	Implements: [Options],
	
	options: {
		xoffset: 0,
		yoffset: 0
	},
	
						   
	initialize: function(options){
		this.setOptions(options);
		this.zoomSize = 1.25; // x2 the size of the thumbnail
		this.thumb_url = $('zoomer_thumb').getElement('a');
		this.thumb_image = this.thumb_url.getElement('img');
		
		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.setDimensions('zoomer_big_container',thumb_size.x*this.zoomSize,thumb_size.y*this.zoomSize);
		
		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 = 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,
						'opacity': .4,
						'left':this.options.xoffset,
						'top':this.options.yoffset
					}
				}).injectInside('zoomer_thumb');
				this.setPosition('zoomer_image',this.options.xoffset*-5,this.options.yoffset*-5);
				$('zoomer_region').addEvents({
				    'mouseover': function(){
				        $('zoomer_big_container').tween('opacity', '1');
				    },
				    'mouseout': function(){
				        $('zoomer_big_container').tween('opacity', '0');
				    }
				});
				/* 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)]},
					beforeStart: function(el){
						
					}.bind(this),
					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 bigImgLeft = this.bigImage.width;
						var bigImgTop = this.bigImage.height;
						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)
				});
			}.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(){
		// new ImageZoom();
});