/*

	AnythingZoomer
	a jQuery Plugin
	
	by: Chris Coyier
	http://css-tricks
	
	Version: 1.0
	
	Note: You can do whatever the heck you want with this.

*/

(function($) {

	$.anythingZoomer = {

		defaults: {
			smallArea:       '.zoom-small',   // the normal image
			largeArea:       '.zoom-large',   // the large image
			zoomPort:        '.zoom-overlay', // the overlay containing the mover
			mover:           '.zoom-mover',   // the enlarge area
			
			speedMultiplierX: 1.5,
			speedMultiplierY: 1.5
		}

	}

	$.fn.extend({
		anythingZoomer:function(config) {

			var config = $.extend({}, $.anythingZoomer.defaults, config);

			var wrap = $(this);

			$(wrap).each(function(index, item) {

				var smallArea = $(item).find(config.smallArea+':first');
				var largeArea = $(item).find(config.largeArea+':first');
				var zoomPort  = $(item).find(config.zoomPort+':first');
				var mover     = $(item).find(config.mover+':first');
	
				var speedMultiplierX = config.speedMultiplierX;
				var speedMultiplierY = config.speedMultiplierY;
	
				mover
				.data("origWidth", mover.width())
				.data("origHeight", mover.height());
	
				// Because the largeArea is often hidden, the width() function returns zero, take width from CSS instead
				largeArea
				.data("origWidth", largeArea.css("width"));
	
				setup(smallArea, largeArea, wrap, zoomPort, mover, speedMultiplierX,  speedMultiplierY);
			});

			function setup(smallArea, largeArea, wrap, zoomPort, mover, speedMultiplierX,  speedMultiplierY) {

				smallArea
				.show()
				.hover(function(){
					mover.fadeIn('slow');
				});
				

				zoomPort
				.fadeIn();

				mover
				.css({
					width: mover.data("origWidth"),
					height: mover.data("origHeight"),
					overflow: "hidden",
					position: "absolute"
				})

				wrap
				.css({
					width: "auto"
				})
				.mousemove(function(e){
					if (smallArea.is(':visible')) {
						var x = e.pageX - smallArea.offset().left;
						var y = e.pageY - smallArea.offset().top;
	
						if ( (x < 0) || 
								 (x > smallArea.width()) || 
								 (y < 0) || 
								 (y > smallArea.height()) ) {
							mover.fadeOut('slow');
							//mover.hide();
						}
	
						mover.css({
							top: y - (mover.height()/2),
							left: x - (mover.width()/2)
						});
	
						largeArea.css({
							left: (-(e.pageX - smallArea.offset().left)*speedMultiplierX),
							top: (-(e.pageY - smallArea.offset().top)*speedMultiplierY)
						});
					}
				});
			};

			return this;
		}
	});
})(jQuery);