// zoom-related global variables
var bigWidth, //width of the zoom image
	smallWidth, // width of zoomed image
	bigHeight, // height of the zoom image
	bigX = 0, // zoom image x position
	bigY = 0; // zoom image y position

//ratio between the small and big images of the product
var zoomRatio = 0.35;

//Used to define a custom area where the zooming functionality can occur.
var productImageMarginTop = 30,
    productImageMarginSides = 35,
	productImageMarginBottom = 40;

var zoomWindowBoxWidth = 0,
	zoomWindowBoxHeight = 0,
	smallHeight,
	bigBoxWidth,
	bigBoxHeight,
	factorY,
	factorX,
	easing = 0.5,
	zoomInterval = 0,
	mouseX = 0,
	mouseY = 0,
	animating = false,
	delay = 0,
	hideInterval,
	zoomImageShown = false,
	isZoomOn = false,
	isIE6 = (navigator.appVersion.indexOf("MSIE 6") != -1) ? true : false ;

function initPage() {

	$("body").mousemove(function(e){
		mouseX = e.pageX;
		mouseY = e.pageY;
	});

/*
	smallWidth = 230;
	smallHeight = 345;
	smallWidth = 160;
	smallHeight = 323;
	smallWidth = 250;
	smallHeight = 400;
	smallWidth = 175;
	smallHeight = 140;
	smallWidth = 350;
	smallHeight = 200;*/
	//smallWidth = 350;
//	smallHeight = 232;
	smallWidth = document.getElementById('medium-image').offsetWidth;
	smallHeight = document.getElementById('medium-image').offsetHeight;

	bigBoxWidth = document.getElementById('zoom-box').offsetWidth;
	bigBoxHeight = document.getElementById('zoom-box').offsetHeight;

	document.getElementById('medium-image-container').onclick = showBig;

	//bigWidth = document.getElementById('zoom-image').offsetWidth;
	//bigHeight = document.getElementById('zoom-image').offsetHeight;

	//Set the height and width of the box which shows where you are
	//zooming on the original normal sized product image. This box
	//should be same size in relation to the normal product image
	//as the zoom-box is to the extra large sized product image.
	/*
	zoomWindowBoxWidth = (zoomRatio * bigBoxWidth);
	zoomWindowBoxHeight = (zoomRatio * bigBoxHeight);
	zoomWindowBoxWidth = 175;
	zoomWindowBoxHeight = 140;
	zoomWindowBoxWidth = 190;
	zoomWindowBoxHeight = 120;
	zoomWindowBoxWidth = (zoomRatio * bigBoxWidth);
	zoomWindowBoxHeight = (zoomRatio * bigBoxHeight);
	zoomWindowBoxWidth = 60;
	zoomWindowBoxHeight = 36;
	*/
	zoomWindowBoxWidth = 30;
	zoomWindowBoxHeight = 30;
	document.getElementById('zoomWindowBox').style.width = zoomWindowBoxWidth + 'px';
	document.getElementById('zoomWindowBox').style.height = zoomWindowBoxHeight + 'px';

}

//show zoom image
function showBig() {
	largeImageShown = true;
    clearIntrv();
	$("#zoom-box").css("visibility","visible");
	$("#zoom-image").css("visibility","visible");
	$("#zoomWindowBox").css("visibility","visible");
	zoomInterval = setInterval(animateBigImage, 10);
    isZoomOn = true;
    document.body.style.cursor="crosshair";
}

function loadBig(imgUrl, zoomImgUrl, zoomImgWidth, zoomImgHeight) {
	if(imgUrl != null && imgUrl != undefined && imgUrl.toString().length > 0 && zoomImgUrl != null && zoomImgUrl != undefined && zoomImgUrl.toString().length > 0)
	{
		initPage();
		document.getElementById("medium-image").src = imgUrl;
		loadZoomImage(zoomImgUrl, zoomImgWidth, zoomImgHeight);
	}
}

function loadZoomImage(zoomImgUrl, zoomImgWidth, zoomImgHeight) {
	window.bigWidth = zoomImgWidth;
	window.bigHeight = zoomImgHeight;
    var zImg = document.getElementById("zoom-image");
    zImg.width = zoomImgWidth;
    zImg.height = zoomImgHeight;
    zImg.src = zoomImgUrl;
}
function clearIntrv() { clearTimeout(hideInterval); }
function hideBig() { hideInterval = setTimeout("hideDelay()", 250); }

function hideDelay() {
	if (isZoomOn) {
	
		document.body.style.cursor="default";
        $("#zoom-box").css("visibility","hidden");
		$("#zoom-image").css("visibility","hidden");
		$("#zoomWindowBox").css("visibility","hidden");
		$("#product-details h1 a").css("visibility","visible");
		if(isIE6) $(".top-line").css("margin-top","-2px");
		clearInterval (zoomInterval);
        isZoomOn = false;
	}
}
//zoom function
function animateBigImage() {
	var xPos =  mouseX,
		yPos =  mouseY,
		bigXPos = $('#zoom-image').offset().left,
		bigYPos = $('#zoom-image').offset().top;
		

	//X and Y coordinates of the normal sized product image
	//from the page corner
	var largeXOffset = $('#medium-image').offset().left,
		largeYOffset = $('#medium-image').offset().top;

    var mediumImageWidth = document.getElementById('medium-image').offsetWidth,
    	mediumImageHeight = document.getElementById('medium-image').offsetHeight;

    /*
     * Work out if the cursor is within some custom bounds of the product image. If it is, then
     * stop animating.
     */
    if(xPos < (largeXOffset - productImageMarginSides) ||
       xPos > (largeXOffset + mediumImageWidth + productImageMarginSides) ||
       yPos < (largeYOffset - productImageMarginTop) ||
       yPos > (largeYOffset + mediumImageHeight + productImageMarginBottom))
    {
        hideBig();
        return;
    }

	if (bigWidth < 350) initPage();
	
	factorX = (bigWidth - bigBoxWidth)/(smallWidth);
	factorY = (bigHeight - bigBoxHeight)/(smallHeight);

	var targetX = 0 - (factorX * (xPos-largeXOffset)),
		targetY = 0 - (factorY * (yPos-largeYOffset));

	targetX = Math.round(targetX);
	targetY = Math.round(targetY);

	bigX +=  ((targetX-bigX)*easing);
	bigY +=  ((targetY-bigY)*easing);
	bigY = Math.round(bigY);
	bigX = Math.round(bigX);

	document.getElementById("zoom-image").style.left  = bigX + 'px';
	document.getElementById("zoom-image").style.top = bigY + 'px';



	/*
	//X and Y coordinates of the zoom box from the page corner
	var bigBoxXOffset = $('#zoom-box').offset().left,
		bigBoxYOffset = $('#zoom-box').offset().top;

	//X and Y coordinates of the extra large product image from the page corner
	var zoomImageXOffset = $('#zoom-image').offset().left,
		zoomImageYOffset = $('#zoom-image').offset().top;
	//Work out where zoom-box is in relation to the extra large zoom image.
	//Apply the zoom ratio to work out where our small box which shows where
	//you are zooming should be located in relation to the normal sized product image
	var windowBoxXOffset = (bigBoxXOffset - zoomImageXOffset) * zoomRatio,
		windowBoxYOffset = (bigBoxYOffset - zoomImageYOffset) * zoomRatio;

	//Add the X and Y coordinates  of the normal sized image to get the X and Y
	//coordinates for the small box in relation to the page corner.
	windowBoxXOffset += largeXOffset;
	windowBoxYOffset += largeYOffset;

	//Make sure our X and Y coordinates are integers.
	windowBoxXOffset = Math.round(windowBoxXOffset);
	windowBoxYOffset = Math.round(windowBoxYOffset);
	
	//Set the coordinates for the small box which shows where
	//you are zooming
	var smallPosX = windowBoxXOffset;
	var smallPosY = windowBoxYOffset;
	*/
	var smallPosX = xPos - zoomWindowBoxWidth/2;
	var smallPosY = yPos - zoomWindowBoxHeight/2;
	
	document.getElementById('zoomWindowBox').style.left  = smallPosX + 'px';
	document.getElementById('zoomWindowBox').style.top  = smallPosY  + 'px';
}