var illZoom = {
	DEBUG: false,

	effectPending: false,
	imageRatio: null,
	largeWidth: null,
	largeHeight: null,
	targetPos: null,
	widthPad: null,
	heightPad: null,
	zoomActive: false,
	outsideBoxCount: 0,
	windowMouseMoveObserver: null,
	imgThumbBoxMouseOverObserver: null,
	isQuickView: false,
	imgThumbBoxWidth: null,
	imgThumbBoxHeight: null,
	zoomIndicatorWidth: null,
	zoomIndicatorHeight: null,
	zoomIndicator: null,
	zoomIndThumbImg: null,
	zoomBox: null,
	zoomImage: null,
	zoomImagePreloader: null,
	isSafari2: null,
	hideQtySelector: null,

	initZoom: function() {
		// Browser testing
		var safariSearchIndex = navigator.userAgent.indexOf("Safari");

		if (safariSearchIndex > -1) {
			var safariVersion = parseFloat(navigator.userAgent.substring(safariSearchIndex + "Safari".length + 1));

			if (safariVersion < 500 && safariVersion > 0) {
				this.isSafari2 = true;
			}
		} else {
			this.isSafari2 = false;
		}
		// Init Variables;
		this.effectPending = false;
		this.imageRatio = null;
		this.largeWidth = null;
		this.largeHeight = null;
		this.targetPos = null;
		this.widthPad = null;
		this.heightPad = null;
		this.zoomImage = null;
		this.zoomImagePreloader = null;
		this.zoomActive = false;
		this.outsideBoxCount = 0;
		this.windowMouseMoveObserver = null;
		this.imgThumbBoxWidth = null;
		this.imgThumbBoxHeight = null;
		this.zoomIndicatorWidth = null;
		this.zoomIndicatorHeight = null;
		this.hideQtySelector = null;

		this.zoomBox = $('zoomBox');

		/* Start: Experimental new stuff */
		this.zoomImagePreloader = document.createElement("img");
		this.zoomImage = document.createElement("img");
		this.zoomImage.style.position = "absolute";

		var zoomImagePreloaderContainer = document.createElement("div");
		zoomImagePreloaderContainer.style.overflow = "hidden";
		zoomImagePreloaderContainer.style.height = "0px";
		zoomImagePreloaderContainer.style.width = "0px";
		zoomImagePreloaderContainer.appendChild(this.zoomImagePreloader);
		document.body.appendChild(zoomImagePreloaderContainer);

		this.zoomBox.appendChild(this.zoomImage);

		this.targetPos = this.findPos($('imgThumbBox'));
		this.zoomBox.style.backgroundImage = "url('/sfModalBoxPlugin/css/spinner.gif')";

		this.widthPad = this.zoomBox.getDimensions().width / 2;
		this.heightPad = this.zoomBox.getDimensions().height / 2;

		this.zoomImagePreloader.src = $('imgThumbBox').name;

		// Properly Size the parent div
		$('imgThumbBox').parentNode.style.width = $('imgThumbBox').getDimensions().width + "px";
		$('imgThumbBox').parentNode.style.height = $('imgThumbBox').getDimensions().height + "px";

		this.zoomBox.style.left = this.targetPos[0] + $('imgThumbBox').getDimensions().width + parseInt(this.zoomBox.style.left) + "px";
		this.zoomBox.style.top = this.targetPos[1] + parseInt(this.zoomBox.style.top) + "px";

		// Add the zoomTintLayer
		var zoomTintLayer = document.createElement("div");
		zoomTintLayer.id = "zoomTintLayer";
		zoomTintLayer.style.position = "absolute";
		zoomTintLayer.style.background = "#000";
		zoomTintLayer.style.width = $('imgThumbBox').getDimensions().width + "px";
		zoomTintLayer.style.height = $('imgThumbBox').getDimensions().height + "px";
		zoomTintLayer.style.zIndex = 1001;

		this.imgThumbBoxMouseOverObserver = this.startZoom.bindAsEventListener(this);

		Event.observe(zoomTintLayer,
                      'mouseover',
                      this.imgThumbBoxMouseOverObserver);

		// Add the zoomIndicator
		this.zoomIndicator = document.createElement("div");
		this.zoomIndicator.id = "zoomIndicator";
		this.zoomIndicator.style.position = "absolute";
		this.zoomIndicator.style.overflow = "hidden";

		this.zoomIndThumbImg = document.createElement("img");
		this.zoomIndThumbImg.id = "zoomIndThumbImg";
		this.zoomIndThumbImg.src = $('imgThumbBox').src;
		this.zoomIndThumbImg.width = $('imgThumbBox').width;
		this.zoomIndThumbImg.height = $('imgThumbBox').height;
		this.zoomIndThumbImg.style.position = "absolute";
		// For IE
		this.zoomIndThumbImg.galleryimg = "no";

		this.zoomIndicator.appendChild(this.zoomIndThumbImg);

		zoomTintLayer.appendChild(this.zoomIndicator);

		//document.body.appendChild(zoomTintLayer);
		$('thumbBox').appendChild(zoomTintLayer);

		// For IE
		$('zoomTintLayer').setOpacity(0);

		// Wait for full size image to finish loading before calculating ratios
		Event.observe(this.zoomImagePreloader,
                      'load',
                      function() { illZoom.calculateRatios(); });

		if (this.DEBUG) {
			this.createDebugBox();
		}
	},

	/*
	* Once the large image has loaded calculate ratio between the images.
	*/
	calculateRatios: function() {
		this.zoomImage.src = this.zoomImagePreloader.src;
		this.largeWidth = this.zoomImagePreloader.width;
		this.largeHeight = this.zoomImagePreloader.height;

		this.imageRatio = this.largeWidth / $('imgThumbBox').getDimensions().width;

		var zoomIndW = $('imgThumbBox').getDimensions().width * (this.zoomBox.getDimensions().width / this.largeWidth) + "px";
		var zoomIndH = $('imgThumbBox').getDimensions().height * (this.zoomBox.getDimensions().height / this.largeHeight) + "px";

		this.zoomIndicator.style.width = zoomIndW;
		this.zoomIndicator.style.height = zoomIndH;

		// Avoid uncessary recalculation
		this.imgThumbBoxWidth = $('imgThumbBox').getDimensions().width;
		this.imgThumbBoxHeight = $('imgThumbBox').getDimensions().height;
		this.zoomIndicatorWidth = $('zoomIndicator').getDimensions().width;
		this.zoomIndicatorHeight = $('zoomIndicator').getDimensions().height;
	},

	refreshImage: function() {
		this.zoomImagePreloader.src = $('imgThumbBox').name;
		this.zoomIndThumbImg.src = $('imgThumbBox').src;
	},

	startZoom: function(event) {
		this.targetPos = this.findPos($('imgThumbBox'));

		if (this.DEBUG) {
			$('debugBox').update(
                                "Target X: " + this.targetPos[0] + "<br/>" +
                                "Target Y: " + this.targetPos[1] + "<br/>" +
                                "Element scrolltop: " + document.documentElement.scrollTop + "<br/>" +
                                "Body scrolltop: " + document.body.scrollTop + "<br/>" +
                                "ZoomHeight: " + this.zoomBox.getDimensions().width
                            );
		}

		if (!this.effectPending && !this.zoomBox.visible()) {
			$('zoomTintLayer').setOpacity(0.3);

			//effectPending = true;
			//new Effect.BlindRight('zoomBox', {duration: 0.2, fps: 100, afterFinish: function() { effectPending = false;}});

			if (null == this.hideQtySelector) {
				this.hideQtySelector = false;
			}

			if (this.hideQtySelector) {
				$('qtySelector').hide();
			}

			this.zoomBox.show();
			this.moveZoom(event);

			this.windowMouseMoveObserver = this.moveZoom.bindAsEventListener(this);

			Event.observe(document,
                          'mousemove',
                          this.windowMouseMoveObserver);

			Event.stopObserving('zoomTintLayer',
                                'mouseover',
                                this.imgThumbBoxMouseOverObserver);
		}
	},

	endZoom: function() {
		if (!this.effectPending && this.zoomBox.visible() && !this.zoomActive) {
			Event.stopObserving(document,
                                'mousemove',
                                this.windowMouseMoveObserver);

			// Make sure the modal window has not been closed
			if (!this.isQuickView || $('thumbBox')) {
				this.effectPending = true;


				new Effect.Fade('zoomBox',
                                { duration: 0.2,
                                	fps: 50,
                                	afterFinish: function() {
                                		illZoom.effectPending = false;

                                		if (illZoom.hideQtySelector) {
                                			$('qtySelector').show();
                                		}

                                		Event.observe('zoomTintLayer',
                                                   'mouseover',
                                                   illZoom.imgThumbBoxMouseOverObserver);
                                	}
                                }
                               );
				//this.zoomBox.hide();

				$('zoomTintLayer').setOpacity(0);
			}

			this.outsideBoxCount = 0;
		}
	},

	moveZoom: function(event) {
		var targX = this.targetPos[0] - (document.documentElement.scrollLeft + document.body.scrollLeft);

		if (this.isQuickView) {
			var targY = this.targetPos[1];
		} else {
			var targY = this.targetPos[1] - (document.documentElement.scrollTop + document.body.scrollTop);
		}

		if (this.isSafari2) {
			targY += document.body.scrollTop;
		}

		var desX = event.clientX - targX;
		var desY = event.clientY - targY;

		if (desX >= 0 && desX <= this.imgThumbBoxWidth &&
           desY >= 0 && desY <= this.imgThumbBoxHeight) {

			this.outsideBoxCount = 0;

			desX = desX * this.imageRatio;
			desY = desY * this.imageRatio;

			if (desX < this.widthPad) {
				desX = this.widthPad;
			} else if (desX > (this.largeWidth - this.widthPad)) {
				desX = this.largeWidth - this.widthPad;
			}

			if (desY < this.heightPad) {
				desY = this.heightPad;
			} else if (desY > (this.largeHeight - this.heightPad)) {
				desY = this.largeHeight - this.heightPad;
			}

			var bgX = (0 - desX) + this.widthPad;
			var bgY = (0 - desY) + this.heightPad;

			if (this.DEBUG) {
				$('debugBox').update(
    	                            "Target X: " + targX + "<br/>" +
    	                            "Target Y: " + targY + "<br/>" +
    	                            "Client X: " + event.clientX + "<br/>" +
    	                            "Client Y: " + event.clientY + "<br/>" +
                                    "Desired X: " + desX + "<br/>" +
                                    "Desired Y: " + desY + "<br/>" +
                                    "Background X: " + bgX + "<br/>" +
                                    "Background Y: " + bgY + "<br/>" +
                                    "Imageratio: " + this.imageRatio + "<br/>" +
                                    "Element scrolltop: " + document.documentElement.scrollTop + "<br/>" +
                                    "Body scrolltop: " + document.body.scrollTop + "<br/>" +
    	                            "ZoomHeight: " + this.zoomBox.getDimensions().width
    	                        );
			}

			this.zoomImage.style.left = bgX + "px";
			this.zoomImage.style.top = bgY + "px";

			//Move the zoom indicator with the cursor
			var zoomIndY = (event.clientY - targY) - this.zoomIndicatorHeight / 2;
			var zoomIndX = (event.clientX - targX) - this.zoomIndicatorWidth / 2;

			if (zoomIndY >= -1) {
				if (zoomIndY > this.imgThumbBoxHeight - this.zoomIndicatorHeight) {
					zoomIndY = this.imgThumbBoxHeight - this.zoomIndicatorHeight;
				}
			} else {
				zoomIndY = -1;
			}

			if (zoomIndX >= -1) {
				if (zoomIndX > this.imgThumbBoxWidth - this.zoomIndicatorWidth) {
					zoomIndX = this.imgThumbBoxWidth - this.zoomIndicatorWidth;
				}
			} else {
				zoomIndX = -1;
			}

			this.zoomIndicator.style.top = zoomIndY + "px";
			this.zoomIndicator.style.left = zoomIndX + "px";

			this.zoomIndThumbImg.style.top = (-zoomIndY - 1) + "px";
			this.zoomIndThumbImg.style.left = (-zoomIndX - 1) + "px";
		} else {
			this.outsideBoxCount++;

			if (this.outsideBoxCount > 10) {
				this.endZoom();
			}
		}
	},

	findPos: function(obj) {
		var curleft = curtop = 0;
		if (obj.offsetParent) {
			curleft = obj.offsetLeft;
			curtop = obj.offsetTop;
			while (obj = obj.offsetParent) {
				curleft += obj.offsetLeft;
				curtop += obj.offsetTop;
			}
		}
		return [curleft, curtop];
	},

	createDebugBox: function() {
		var debugBox = document.createElement("div");
		debugBox.id = "debugBox";
		document.body.appendChild(debugBox);
	}
}