/* Zoom
------------------------------*/
var ProductZoom = {
    faultImageUrl   : "/assets/en/catalogue/missing/large.jpg",
	windowWidth		: 400,	// Size of zoom window
	windowHeight	: 400,
	viewportWidth	: 48,	// Size of viewport
	viewportHeight	: 48,
	productImg		: null,
	viewport		: null,
	zoomWindow		: null,
	zoomWindowImg	: null,
	message         : null,
	sTop			: 0,
	sLeft			: 0,
	sBottom			: 0,
	sRight			: 0,
	active			: false,
	init : function() {
	    var product = document.getElementById('product-info');
		this.smallImg = document.getElementById("main-product-image");

		if (!this.smallImg && this.smallImg.parentNode.nodeName.toLowerCase() !== 'a') { return; }

		this.productImg	= document.getElementById("drag-area");

		this.zoomWindow	= document.createElement("div");
		this.zoomWindow.style.display = 'none';
		this.zoomWindow.id = "product-zoom";

		this.zoomWindowImg = document.createElement("img");
		this.zoomWindow.appendChild(this.zoomWindowImg);
		product.appendChild(this.zoomWindow);

        this.message = document.getElementById('magnify');

		// Load up the image using the anchor object
		this.load(this.smallImg.parentNode);

		if (!this.viewport) {
			this.viewport = document.createElement("div");
			this.viewport.style.display = 'none';
			this.viewport.id = "viewport";
			document.body.appendChild(this.viewport);
		}

		this.productImg.onmousemove		= this.showZoom;
		this.productImg.onmouseout		= this.hideZoom;

		this.viewport.onmousemove		= this.showZoom;
		this.viewport.onmouseout		= this.hideZoom;	

		this.zoomWindow.style.width		= this.windowWidth + "px";
		this.zoomWindow.style.height	= this.windowHeight + "px";

		this.viewport.style.width		= this.viewportWidth + "px";
		this.viewport.style.height		= this.viewportWidth + "px";
		
		// Remove the alt text to stop it breaking the effect
		this.smallImg.alt = '';

		// Small image positions
		this.sTop		= this.getTop(this.smallImg);
		this.sLeft	= this.getLeft(this.smallImg);
		this.sBottom	= this.sTop + this.smallImg.height;
		this.sRight		= this.sLeft + this.smallImg.width;
		//Debug.w('Top = ' + this.sTop + ' | Left = ' + this.sLeft);
		
		/*
		** Bind to the window resize event, as the coordinates
		** gathered will be invalid if the user changes sizes.
		*/
		var self = this;
		var redo = function()  {
				self.sTop		= self.getTop(self.smallImg);
				self.sLeft		= self.getLeft(self.smallImg);
				self.sBottom	= self.sTop + self.smallImg.height;
				self.sRight		= self.sLeft + self.smallImg.width;		

				Debug.w('Top = ' + self.sTop + ' | Left = ' + self.sLeft);
			};
        Core.Dom.Event.add(window, 'resize', redo );
        Core.Dom.Event.add(this.smallImg, 'load', redo );
	},
	load : function(e) {
		ProductZoom.active = true;
		if (this.zoomWindowImg) {
			// May use Ajax to determine if large image exists
			this.zoomWindowImg.onerror = function() {
				this.src = ProductZoom.faultImageUrl;
				ProductZoom.active = false;
				ProductZoom.hideZoom(null);
			};
			this.zoomWindowImg.onload = function() {
			    // BEWARE: we only want to enable if the error image isn't the cause
			    //         of the load event.
			    var i = this.src.length - ProductZoom.faultImageUrl.length;
			    var endsWith = this.src.substring( i < 0 ? 0:i );
			    ProductZoom.active = true && (endsWith != ProductZoom.faultImageUrl);
                
                if( i = ProductZoom.message ) {
                    i.style.visibility = (ProductZoom.active)?'visible':'hidden';
                }
                if( i = document.getElementById('drag-area') ) {
                    if( !ProductZoom.active )   i.removeAttribute('href');
                }
			};

			if (typeof(e) == "object") {
				this.zoomWindowImg.src	= e.href.replace("medium", "large");
				this.zoomWindowImg.alt	= e.title;
			} else {
				this.zoomWindowImg.src	= e.replace("medium", "large");
			}
		}
	},
	showZoom : function(event) {
		var PZ = ProductZoom;
		if (!PZ.active) { return; }

		var e;
		if( e = document.getElementById("product-datasheet") ) 
		    e.style.visibility = 'hidden';
		if( e = document.getElementById("featured-products") )
		    e.style.visibility = 'hidden';

		// Set the scale
		var scaleX	= PZ.zoomWindowImg.width / PZ.smallImg.width;
		var scaleY	= PZ.zoomWindowImg.height / PZ.smallImg.height;	

		// Get object detection mouse coords
		var mouseX = (event && event.pageX)? event.pageX : (window.event.clientX + document.documentElement.scrollLeft);
		var mouseY = (event && event.pageY)? event.pageY : (window.event.clientY + document.documentElement.scrollTop);

		// Calculate offset
		var offsetWindowX	= Math.floor(PZ.windowWidth / scaleX);
		var offsetX			= Math.floor(offsetWindowX / 2);
		var offsetWindowY	= Math.floor(PZ.windowHeight / scaleY);
		var offsetY			= Math.floor(offsetWindowY / 2);

		// Stop and exit zoom if mouse is out of bounds of the small image
		if (mouseX < PZ.sLeft || mouseX > PZ.sRight || mouseY < PZ.sTop || mouseY > PZ.sBottom) {
			PZ.viewport.style.display	= 'none';
			PZ.zoomWindow.style.display = 'none';
			return;
		}
	
		// Set zoom container scroll sizes to position image
		PZ.zoomWindow.style.display = 'block';
		PZ.zoomWindow.scrollLeft	= scaleX * (mouseX - offsetX - PZ.sLeft);
		PZ.zoomWindow.scrollTop		= scaleY * (mouseY - offsetY - PZ.sTop);
		
		//Debug.w('Scroll Top = ' + (scaleY * (mouseY - offsetY - PZ.sTop)) + ' | Scroll Left = ' + (scaleX * (mouseX - offsetX - PZ.sLeft)));

		// Mootools set CSS styles
		PZ.viewport.style.top		= mouseY - (PZ.viewportWidth / 2) + 'px';
		PZ.viewport.style.left		= mouseX - (PZ.viewportHeight / 2) + 'px';
		PZ.viewport.style.display	= 'block';
	},
	hideZoom : function(event) {
		ProductZoom.viewport.style.display		= 'none';
		ProductZoom.zoomWindow.style.display	= 'none';
		
		var e;
		if( e = document.getElementById("product-datasheet") ) 
		    e.style.visibility = 'visible';
		if( e = document.getElementById("featured-products") )
		    e.style.visibility = 'visible';		
	},
	getTop : function(e) {
			var curtop = 0;
			if (e.offsetParent) {
				while (e.offsetParent) {
					curtop += e.offsetTop
					e = e.offsetParent;
				}
			} else if (e.y) {
				curtop += e.y;
				}
			return curtop;
	},
	getLeft : function(e) {
		var curleft = 0;
		if (e.offsetParent) {
			while (e.offsetParent) {
				curleft += e.offsetLeft
				e = e.offsetParent;
			}
		} else if (e.x) {
			curleft += e.x;
			}
		return curleft;
	}
};