/*

    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: {
			smallBlock: ".zoomsmallcontent",
			largeBlock: ".zoomlargecontent",
			zoomPort: ".overlay",
			zoomPane: ".zoompane",
			//expansionSize: 30,
			//speedMultiplier: 1,
			doDoubleClick: false,
			paneRatio: 2
		}

	}

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

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

			// get zoom container
			var wrap = $(this);

			// assign variables
			var smallBlock = $(config.smallBlock, this);
			var largeBlock = $(config.largeBlock, this);
			var zoomPort = $(config.zoomPort, this);
			var zoomPane = $(config.zoomPane, this);

			var expansionSize = config.expansionSize;
			var speedMultiplier = config.speedMultiplier;

			var doDoubleClick = config.doDoubleClick;
			var paneRatio = config.paneRatio;

			// Because the largeBlock is often hidden, the width() function returns zero, take width from CSS instead  
			largeBlock
		      .data("origWidth", largeBlock.css("width"));

			// Get height and width values
			var smallHeight = smallBlock.find("img:first").height();
			var smallWidth = smallBlock.find("img:first").width();
			//todo: the following two are not being set in hs
			var largeHeight = parseInt(largeBlock.find("img:first").css("height"));
			var largeWidth = parseInt(largeBlock.find("img:first").css("width"));

			// Calculate the width and height of the zoomPane
			var calcWidth = smallWidth / 2;
			var calcHeight = smallHeight / 2;

			// Calculate an optimal expansionSize based on the width differential between the large and small images
			//expansionSize = parseInt(largeBlock.find("img:first").css("width")) / smallBlock.find("img:first").width() * 10;

			// Calculate the size ratio between the large and small images
			var masterRatio = ((largeHeight + largeWidth) / 2) / ((smallHeight + smallWidth) / 2);

			// Set the optimal plugin values
			expansionSize = masterRatio * 20;
			speedMultiplier = masterRatio;

			zoomPane
		      .data("origWidth", calcWidth)
		      .data("origHeight", calcHeight);

			setup(smallBlock, largeBlock, wrap, zoomPort, zoomPane, expansionSize, speedMultiplier);

			return this;


			// Adds plugin functionality
			function setup(smallBlock, largeBlock, wrap, zoomPort, zoomPane, expansionSize, speedMultiplier) {

				smallBlock
                    .show();

				zoomPort
                    .fadeIn();

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

				wrap
                    .css({
                    	width: "auto"
                    })
            		.hover(function() {
            			//zoomPane.fadeIn();
            		})
            		.mousemove(function(e) {

            			var x = e.pageX - smallBlock.offset().left;
            			var y = e.pageY - smallBlock.offset().top;

            			//if ((x < -expansionSize) || (x > smallBlock.width() + expansionSize) || (y < -expansionSize) || (y > smallBlock.height() + expansionSize)) {
            			//	zoomPane.fadeOut(100);
            			//}

            			var fadeBuffer = 30;
            			var marginLeft = $("img", smallBlock).css("margin-left").replace("px", "");
            			var marginTop = $("img", smallBlock).css("margin-top").replace("px", "");
            			var previewHeight = $("img", smallBlock).height() - fadeBuffer;
            			var previewWidth = $("img", smallBlock).width() + fadeBuffer;

            			//$("h3", ".highslide-html-content").html(marginTop);

            			if ((x < marginLeft) || (x > previewWidth) || (y < marginTop) || (y > previewHeight)) {
            				zoomPane.fadeOut(100);
            			}
            			else {
            				zoomPane.fadeIn(100);
            			}

            			zoomPane.css({
            				top: y - (zoomPane.data("origHeight") / paneRatio),
            				left: x - (zoomPane.data("origWidth") / paneRatio)
            			});

            			largeBlock.css({

            				left: (-(x) * speedMultiplier) + expansionSize,
            				top: (-(y) * speedMultiplier) + expansionSize

            			});
            		});

				if (doDoubleClick) {
					wrap.dblclick(function() {
						expand(smallBlock, largeBlock, wrap, zoomPort, zoomPane, expansionSize, speedMultiplier);
					});
				}

			};

			//The expand() function only gets fired on double-click
			function expand(smallBlock, largeBlock, wrap, zoomPort, zoomPane, expansionSize, speedMultiplier) {

				smallBlock
        		      .hide();

				zoomPort
        		      .hide();

				zoomPane
        		      .fadeIn()
        		      .data("origWidth", zoomPane.width())
        		      .data("origHeight", zoomPane.height())
        		      .css({
        		      	position: "static",
        		      	height: "auto",
        		      	width: "auto",
        		      	overflow: "visible"
        		      });

				wrap
        		      .css({
        		      	width: "100%"
        		      })
        		      .unbind()
        		      .dblclick(function() {
        		      	setup(smallBlock, largeBlock, wrap, zoomPort, zoomPane, expansionSize, speedMultiplier);
        		      });


				largeBlock
        		      .css({
        		      	left: 0,
        		      	top: 0,
        		      	width: largeBlock.data("origWidth")
        		      });

			};

		}

	});

})(jQuery);