$.fn.oriolaZoom = function() {
	$(this).each( function() {
		var a = $(this);
		var img_small = a.find('img');
		var d = {
			// params
			 duration_in: 800
			,duration_out: 500
			// other vars
			// Next 2 lines changed by next 2 to make it work on IE9
			//,small_x: img_small.position().left
			//,small_y: img_small.position().top
			,small_x: img_small.offset().left - $(this).offset().left
			,small_y: img_small.offset().top - $(this).offset().top
			// end of IE9 fixing
			,small_src: img_small.attr('src')
			,large_src: a.attr('href')
			,small_width: img_small.width()
			,small_height: img_small.height()
		};
		a.addClass('OriolaZoom');
		var rel = a.attr('rel');
		if(rel.match(/\b\d+x\d+$/)) {
			rel = rel.replace(/.*\b(\d+x\d+)$/, '$1');
			rel = rel.split('x');
			d.large_width = rel[0];
			d.large_height = rel[1];
		} else {
			d.large_width = d.small_width;
			d.large_height = d.small_height;
		}
		d.drag_x1 = a.width() - d.large_width; 
		d.drag_x2 = 0; 
		d.drag_y1 = a.height() - d.large_height;
		d.drag_y2 = 0;
		$(this).data('d', d);
		a.attr('href', 'javascript:void(0)');
		img_small.css({ position: 'absolute', left: d.small_x, top: d.small_y } );
		img_small.addClass('Small');
		a.click( function(e) {
			// provisional
			// /provisional
			var a = $(this);
			var img_small = a.find('img.Small');
			var img_large = a.find('img.Large');
			var d = $(this).data('d');

			if(img_large.length == 0 && $(e.target).hasClass('Small'))  {
				var large_x = mouse_x
				// mouse relative to small image
				var mouse_x = e.pageX - img_small.offset().left;
				var mouse_y = e.pageY - img_small.offset().top;  
				var large_x = a.width() / 2 - mouse_x * d.large_width / d.small_width;
				var large_y = a.height() / 2 - mouse_y * d.large_height / d.small_height;
				if(large_x < d.drag_x1) large_x = d.drag_x1;
				else if(large_x > d.drag_x2) large_x = d.drag_x2;
				if(large_y < d.drag_y1) large_y = d.drag_y1;
				else if(large_y > d.drag_y2) large_y = d.drag_y2;

				img_small.animate(
					 { width: d.large_width, height: d.large_height, left: large_x, top: large_y }
					,{ ease: 'linear', duration: d.duration_in, complete: function(){
						//$(this).attr('src', $(this).parent().data('large_src'));
						var a = $(this).parent();
						var d = a.data('d');
						a.append('<img class="Large" />');
						var img_large = a.find('img.Large');
						var span_zoomout = a.find('a.ZoomOut');
						img_large.css({ position: 'absolute', left: $(this).position().left, top: $(this).position().top });
						img_large.attr('src', d.large_src);
						img_large.draggable({ containment: [a.offset().left + d.drag_x1, a.offset().top + d.drag_y1, a.offset().left + d.drag_x2, a.offset().top + d.drag_y2]});
						a.append('<span class="ZoomOut">X</span>');
						a.addClass('Dragging');
					}}
				); 
			} else if($(e.target).hasClass('ZoomOut')) {
				img_small.css({ left: img_large.position().left, top: img_large.position().top });
				img_large.remove();
				var span_zoomout = a.find('span.ZoomOut');
				span_zoomout.remove();
				a.removeClass('Dragging');
				img_small.animate(
					 { width: d.small_width, height: d.small_height, left: d.small_x, top: d.small_y }
					,{ ease: 'linear', duration: d.duration_out }
				); 
			}
		});
	});
}