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'
	  }
	}).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'
	  }
	}).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+"px", 
	  left : $_left+"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
	});		
  }
});