var Magnifier = new Class({
	
	options: {
		bigImageSrc: Class.empty,
		thumbContainer: 'MagnifierThumbContainer',
		thumbWidth: 100,
		thumbHeight: 100 
	},
	
	initialize: function (el, options) {
		this.setOptions(options);
		this.el = el;
		
		// stop link follow
		this.el.getParent().addEvent('click', function(e) {
			var e = new Event(e).stop();
		});
		
		if ( ! this.options.bigImageSrc) {
			var bigImageSrc = el.get('rel');
			if ( ! bigImageSrc) {
				return false;
			}
			this.options.bigImageSrc = bigImageSrc;
		}
		
		this.createThumb();
	}, 
	
	createThumb: function () {
		this.bigImage = new Asset.image(this.options.bigImageSrc, {
			onload: function () {
				var thumb = this.bigImage.inject(this.options.thumbContainer);
				thumb.set('id', 'MagnifierThumb');         
				$(this.options.thumbContainer).setStyles({ 
					width: this.options.thumbWidth,            
					height: this.options.thumbHeight           
				});
				this.createOverlay(this.bigImage);
			}.bind(this)
		});
	},
	
	createOverlay: function () {
		var image = this.el;
		var bigImage = this.bigImage;
		var pos = image.getPosition();
		pos.y += image.getStyle("border-top").toInt();
		pos.x += image.getStyle("border-left").toInt();
		
		var xRatio = image.width/this.bigImage.width;
		var yRatio = image.height/this.bigImage.height;
		var overlayWidth = xRatio * this.options.thumbWidth;
		var overlayHeight = yRatio * this.options.thumbHeight;
		
		var overlay = new Element('div', {
			id: 'MagnifierOverlay', 
			styles: {
				width: overlayWidth,
				height: overlayHeight,
				opacity: 0.6,
				top: pos.y,
				left: pos.x
			},
			events: {
				mousemove: function(e) {
					e = new Event(e, image);
					
					var overlayTop = e.page.y - (overlayHeight)/2;
					var overlayLeft = e.page.x - (overlayWidth)/2;
					
					// overlay position
					if (overlayTop < pos.y) {
						overlayTop = pos.y;
					}
					else if (overlayTop > (image.height - overlayHeight) + pos.y) {
						overlayTop = (image.height - overlayHeight) + pos.y;
					}
					
					if (overlayLeft < pos.x) {
						overlayLeft = pos.x;
					}
					else if (overlayLeft > (image.width - overlayWidth) + pos.x) {
						overlayLeft = (image.width - overlayWidth) + pos.x;
					}
					
					this.setStyles({
						top: overlayTop,
						left: overlayLeft
					});
					
					// bigImage position
					var bigImageTop = -((overlayTop - pos.y)/yRatio);
					var bigImageLeft = -((overlayLeft - pos.x)/xRatio);
					
					$('MagnifierThumb').setStyles({
						top: bigImageTop,
						left: bigImageLeft
					});
				}
			}
		}).inject('MagnifierContainer');
		
		this.el.addEvent('mouseover', function (e) {
			e = new Event(e);
			
			var imagePos = this.getPosition();
			imagePos.x += this.getStyle("border-left").toInt();
			imagePos.y += this.getStyle("border-top").toInt();
			
			var t, l;
			
			if (e.page.y < imagePos.y + (overlayHeight)/2) {
				t = imagePos.y;
			}
			else if (e.page.y > (imagePos.y + image.height) - (overlayHeight)/2) {
				t = (imagePos.y + image.height) - overlayHeight;
			}
			else {
				t = e.page.y - (overlayHeight)/2;
			}
			if (e.page.x < imagePos.x + (overlayWidth)/2) {
				l = imagePos.x;
			}
			else if (e.page.x > (imagePos.x + image.width) - (overlayWidth)/2) {
				l = (imagePos.x + image.width) - overlayWidth;
			}
			else {
				l = e.page.x - (overlayWidth)/2;
			}
			
			overlay.setStyles({
				top: t,
				left: l
			});
			
		});
		this.el.addEvent('click', function(e) { e.stop(); });
	},
	
	reset: function(high, normal) {
		// reset image locations
		this.el.set('src', normal);
		this.options.bigImageSrc = high;
		
		// remove current images
		$('MagnifierThumbContainer').empty();
		$('MagnifierOverlay').destroy();
		
		// and away we go...
		this.createThumb();
	}
	
});
Magnifier.implement(new Options);