var Magnifier = new Class({

	options: {
		selector: '.product-detail img.left',
		find: '/resized',
		replace: '/maximized'
	},
	
	initialize: function(elements, options) {
		this.setOptions(options);
		
		$$(this.options.selector).each(function(el) {
			el.busy = false;
			var imgCoords = el.getCoordinates();
			
			var wrapper = new Element('div', {
				'styles': {
					'float': 'left',
					'overflow': 'hidden',
					'margin-right': '1em',
					'margin-bottom': '1em',
					'width': imgCoords.width,
					'height': imgCoords.height
				}
			});
			wrapper.wraps(el);
			
			// Keep some values
			var ori = el.get('src');
			var preload = new Asset.image(ori.replace(this.options.find, this.options.replace), {
				'styles': {
					'position': 'absolute',
					'left': '-9999px'
				}
			});
			
			
			preload.inject(document.body);
			var destCoords;
			var dest = preload.get('src');
			
			
			el.addEvent('mouseover', function() {
				el.set('src', dest);
				destCoords = preload.getCoordinates();// refresh
			}.bind(this));
		
			el.addEvent('mouseout', function() {
				el.set('src',ori);
				el.setStyles({
					'margin-top': 0,
					'margin-left': 0
				});
			});
			
			el.addEvent('mousemove', function(evt) {
				if (! el.busy) {
					evt = new Event(evt);
					
					var evtY = evt.page.y - imgCoords.top;
					var evtX = evt.page.x - imgCoords.left;
					
					var marginTop = Math.round((evtY/imgCoords.height)*destCoords.height) - evtY;
					var marginLeft = Math.round((evtX/imgCoords.width)*destCoords.width) - evtX;
					
					if (marginTop > 0 && marginLeft > 0) {
						el.setStyle('margin-top', '-' + marginTop + 'px');
						el.setStyle('margin-left', '-' + marginLeft + 'px');
					}
				}
			});
			
		}, this);
	}
});
Magnifier.implement(new Options);

window.addEvent('domready', function() {
	var mag = new Magnifier();
});