var K_ZOOM_SIZE = 1.0;
var K_MAX_THUMB_WIDTH = 227;
var K_ZOOM_PREVIEW_WIDTH = 435;

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

var ImageZoom = new Class({
					   
	initialize: function(){
		this.zoomSize = K_ZOOM_SIZE; // 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.setDimensions(
			'zoomer_big_container',
			435,
			285
		);
		
		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() * (K_ZOOM_PREVIEW_WIDTH/K_MAX_THUMB_WIDTH);
				var regionHeight = (thumb_size.y/ratioY).toInt();				
				
				var bigImageCache = this.bigImage;
				new Element('div', {
					id: 'zoomer_region',
					styles: {
						'width': regionWidth,
						'height': regionHeight,
						'opacity': .7
					}
				}).injectInside('zoomer_thumb');
				
				$('zoomer_thumb').addEvent('mousemove', function(ev) {
					$('zoomer_region').setStyle('display', 'block');
					
					var box        = $('temporaryBox');
					var zoomRegion = $('zoomer_region'); 
					var bigThumb   = $('zoomer_thumb');
					var bigImage   = $('zoomer_image');					
					var pos = box.getPosition();
					var posThumb = box.getPosition('zoomer_thumb');
					
					var positionOfUserCursorOffset = regionPositionOffset = {
						x: (ev.page.x - (pos.x-posThumb.x)) - (regionWidth/2) , 
						y: (ev.page.y - (pos.y-posThumb.y)) - (regionHeight/2)
					};										
					// x - left limit
					if( positionOfUserCursorOffset.x < 0 ) {
						regionPositionOffset.x = 0;						
					}
					// x - right limit
					if( positionOfUserCursorOffset.x > (thumb_size.x - regionWidth) ) {
						regionPositionOffset.x = (thumb_size.x - regionWidth);
					}
					// y - top limit
					if( positionOfUserCursorOffset.y < 0 ) {
						regionPositionOffset.y = 0;
					}
					// y - bottom limit
					if( positionOfUserCursorOffset.y > (thumb_size.y - regionHeight) ) {
						regionPositionOffset.y = (thumb_size.y - regionHeight);
					}
					
					var calculations = {
						x : -( regionPositionOffset.x * ratioX),
						y : -( regionPositionOffset.y * ratioY)
					};
					
					var bigImgLeft = bigImage.width  - (thumb_size.x*(K_ZOOM_PREVIEW_WIDTH/K_MAX_THUMB_WIDTH));
					var bigImgTop  = bigImage.height - (thumb_size.y);
					
					var left = (-calculations.x) > bigImgLeft ? -bigImgLeft : calculations.x;
					var top  = (-calculations.y) > bigImgTop  ? -bigImgTop  : calculations.y;			
									
					setPosition('zoomer_image' , left, top);					
					setPosition('zoomer_region', regionPositionOffset.x, regionPositionOffset.y);
					
				});			
			}.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
			}
		})
	}
});