var Zoom = new Class({
  smallPicture : null,
  bigPicture   : null,
  marker       : null,
  container    : null,
  w            : 0,
  h            : 0,
  position     : {},
  size         : new Array(),
  
  initialize: function(id,zoomed,w,h){
    this.smallPicture = $(id);
	
		this.size[0]  		= this.numeric(this.smallPicture.getStyle('width'));
		this.size[1]			= this.numeric(this.smallPicture.getStyle('height'));
		this.position			= this.smallPicture.getPosition();
	
		if(Browser.Engine.trident == true) {
			this.position.x = this.position.x - 2;
			this.position.y = this.position.y - 2;
		}
	
		if(w != undefined) {
			this.w = w;
		} 
	
		if(h != undefined) {
			this.h = h;
		}
	
		this.initHTML(zoomed);
  },
  
  numeric: function($_value) {
    return parseInt($_value.split('px').join(''));
  },
  
  initHTML: function(zoomed) {
		this.marker = new Element('div',{
			styles: {
				position        : 'absolute',
				left            : 0, 
				top             : 0,
        width           : this.numeric(this.smallPicture.getStyle('width'))/2,
        height          : this.numeric(this.smallPicture.getStyle('height'))/2,
				opacity         : .5,
				visibility      : 'hidden',
        backgroundColor : '#ffffff',
				zIndex					: 1600
			}
		}).inject(document.body); 
	
		this.container = new Element('div',{
			styles : {
				position        : 'absolute',
				overflow        : 'hidden',
				left            : 0, 
				top             : 0,
				opacity         : 0,
				border          : '1px solid #000000',
				background      : '#ffffff',
				zIndex					: 1500
			}
		}).inject(document.body); 
	
		this.bigPicture = new Element('img',{
			src    : zoomed,
			styles : {
				position        : 'absolute',
				left            : 0, 
				top             : 0
			}
		}).inject(this.container);
	
		this.initEvents();
  },
  
  initEvents: function() {
		var _this = this;
	
		this.smallPicture.addEvents({
			'mouseenter': function(event){
				_this.setOverlayPosition(event.page.x,event.page.y);
     
				_this.marker.setStyles({
					visibility : 'visible',
					cursor     : 'crosshair'
				});
		
				_this.container.setStyles({
					top        : _this.position.y,
					left       : _this.position.x-_this.numeric(_this.container.getStyle('width'))-10
				});
		
				_this.setContainerSize();
				_this.setMoveEvent();
		
				_this.container.setStyles({
					opacity		: 1
				});	
			}
		});
  },
  
  setContainerSize: function() {
		if(this.w == 0 || this.w > this.numeric(this.bigPicture.getStyle('width'))) {
			var $_w = this.numeric(this.bigPicture.getStyle('width'))/2;
		} else {
			var $_w = this.w;
		}
	
		if(this.h == 0 || this.h > this.numeric(this.bigPicture.getStyle('height'))) {
			var $_h = this.numeric(this.bigPicture.getStyle('height'))/2; 
		} else {
			var $_h = this.h;
		}
	
		this.container.setStyles({
			width  : $_w,
			height : $_h 
		});
  },
  
  setOverlayPosition: function(posX,posY) {
		var $_min_x = this.position.x;
		var $_max_x = this.position.x+this.size[0];
		var $_min_y = this.position.y; 
		var $_max_y = this.position.y+this.size[1];
	
		this.container.setStyles({
			top        : this.position.y,
			left       : this.position.x-this.numeric(this.container.getStyle('width'))-10
		});
			
		var $_top   = posY-(this.numeric(this.marker.getStyle('height'))/2);
		var $_left  = posX-(this.numeric(this.marker.getStyle('width'))/2);
	    
		if($_top < $_min_y) {
			$_top = $_min_y;
		}
			
		if(($_top+this.numeric(this.marker.getStyle('height'))) > $_max_y) {
			$_top = $_max_y-this.numeric(this.marker.getStyle('height'));
		}
			
		if($_left < $_min_x) {
			$_left = $_min_x;
		}
			
		if(($_left+this.numeric(this.marker.getStyle('width'))) > $_max_x) {
			$_left = $_max_x-this.numeric(this.marker.getStyle('width'));
		}
	
		var $_percent_x = (100/this.numeric(this.marker.getStyle('width')))*($_left-this.position.x);
		var $_percent_y = (100/this.numeric(this.marker.getStyle('height')))*($_top-this.position.y);
		var $_offset_x  = this.numeric(this.bigPicture.getStyle('width'))-this.numeric(this.container.getStyle('width'));
		var $_offset_y  = this.numeric(this.bigPicture.getStyle('height'))-this.numeric(this.container.getStyle('height'));
	
		this.bigPicture.setStyles({
			top  : -(($_offset_y/100)*$_percent_y)+"px",
			left : -(($_offset_x/100)*$_percent_x)+"px"
		});
	
		this.marker.setStyles({
			top  : ($_top+1)+"px", 
			left : ($_left+1)+"px"
		});
  },
  
  setMoveEvent: function() {
		var _this = this;
	
		document.addEvents({
			'mousemove': function(event){
				_this.size[0]  = _this.numeric(_this.smallPicture.getStyle('width'));
				_this.size[1]  = _this.numeric(_this.smallPicture.getStyle('height'));
				_this.position = _this.smallPicture.getPosition();
		
				_this.marker.setStyles({
					width  : (_this.numeric(_this.smallPicture.getStyle('width'))/2),
					height : (_this.numeric(_this.smallPicture.getStyle('height'))/2)
				});
		
				if(event.page.x < _this.position.x || event.page.y < _this.position.y || event.page.x > (_this.position.x+_this.numeric(_this.smallPicture.getStyle('width'))) || event.page.y > (_this.position.y+_this.numeric(_this.smallPicture.getStyle('height')))) {
					_this.kill();
				} else {
					_this.setOverlayPosition(event.page.x,event.page.y);
				}
      }
		});
  },
  
  kill: function() {
		document.removeEvents('mousemove');
			  
    this.marker.setStyles({
			visibility	: 'hidden'
		});
			
    this.container.setStyles({
			opacity			: 0
		});		
  }
});