// FILE: zoom.js
// Declare our variables.
var prodimg;
var largeimg;
var MoveBoxHeight;
var MoveBoxWidth;
var XScale;
var YScale;
var zoomState;
var imageX;
var imageY;
var bottomX;
var bottomY;
var largeImgSrc;
var normalImgSrc;
var normalHover;
var largeimgValid;
var smallimgValid;
var initialized;
var menuOn;
var loadimg;
var imgWidth;
var imgHeight;
var bGridFocus;
var bReviewAllFlag;


// Initialize all of our values.
function ZoomLoadernew(id, largeimgurl, largeImgId, moveBoxId, zoomBoxId)
{
	// Get all of our references that we're going to be using.
    prodimg = document.getElementById(id);
    largeimg = document.getElementById(largeImgId);
    
    moveBox = document.getElementById(moveBoxId);
    zoomBox = document.getElementById(zoomBoxId);
    ifZoomBox = document.getElementById('ifZoomBox');
		
	// Statically assign the height and width to variables (I seem to be
	// having issues when extracting from the CSS).
	moveBoxHeight = 75;
	moveBoxWidth  = 75;		
	
	// Initialize the image paths.
	largeImgSrc = largeimg.src;
	normalImgSrc = prodimg.src;
	// Calculate the scaling factor.
	XScale = largeimg.width / prodimg.width;
	YScale = largeimg.height / prodimg.height;
	
	
	// Store the X, Y coordinates of the small image.
	imageX = findPosX(prodimg);
	imageY = findPosY(prodimg);
	
	// Calculate the lower right X, Y coordinates of the small image.
	bottomX = imageX + prodimg.width;
	bottomY = imageY + prodimg.height;
	
	imgWidth = bottomX - imageX;
	imgHeight = bottomY - imageY;
				
	// Initialize our flags.
	zoomState = false;
	normalHover = false;
	initialized = true;
	menuOn = false;	
}

/* ZoomInBox:  Gets called when the mouse is moved*/
function ZoomInBox(e)
{ 
//    if(!bGridFocus)
//        SetReviewGridFocus();
	// e gives access to the event in all browsers.
	if (!e) var e = window.event;
		
	// Grab the position of the mouse.
	var mouseX = getMouseX(e);
	var mouseY = getMouseY(e);	
	
	// Recalculate the scaling factor.
	if (initialized) {
		XScale = largeimg.width / prodimg.width;
		//XScale = XScale + 1;
		YScale = largeimg.height / prodimg.height;
		//YScale = YScale + 1;
	}
			
	// Set the location of the "Out of Stock" dialog box.
	//if (initialized) {		
	//	hoverText.style.left = imageX + ((bottomX - imageX) / 2) - 50;
	//	hoverText.style.top = imageY + ((bottomY - imageY) / 2) - 20;
	//}
		
	// Check if the mouse is inside the image.
	CheckMouse(mouseX, mouseY);
//////		
	// If the large image has changed, make sure that the path is updated.
	if (initialized) {
		if (largeImgSrc != largeimg.src)		
			largeimg.src = largeImgSrc;
	}	
	
	// If the small image has changed, make sure that the path is updated.
	if (initialized) {
		if (normalImgSrc != prodimg.src && !normalHover)
			prodimg.src = normalImgSrc;	
	}
	
	// To reduce overhead, check if we even need to do any processing.
	if (zoomState == true) 
	{			
		// Make sure that our scaling factor is a valid number.
		if (isNaN(XScale))
		{                                                           
			XScale = largeimg.width / prodimg.width;
		}
		if (isNaN(YScale))
		{
			YScale = largeimg.height / prodimg.height;
		}
		
		// Determine if the cursor box is near the edge of the image.
		// Calculate the X, Y coordinates of the cursor box (upper, and
		// lower).
		var cursorBoxUpX = mouseX - moveBoxWidth / 2;
		var cursorBoxUpY = mouseY - moveBoxHeight / 2;
		var cursorBoxBottomX = mouseX + moveBoxWidth / 2;
		var cursorBoxBottomY = mouseY + moveBoxHeight / 2;		
		var relativeY;
		var relativeX;
		
    	// Check the calculated coordinates to those of the image.
		// We need to check the X and Y separately, so they can change
		// independent of each other.
		// Check X.
		if (cursorBoxUpX >= imageX && cursorBoxUpX <= bottomX &&
			cursorBoxBottomX >= imageX && cursorBoxBottomX <=
			bottomX)
		{	 
			moveBox.style.left = mouseX - moveBoxWidth / 2;
			
			// Assign the relative coordinates, for translation
			// to the large image.
			relativeX = cursorBoxUpX - imageX;
		}
		else if (cursorBoxUpX < imageX) 
		{
            if(cursorBoxUpX < imageX - moveBoxWidth / 4)
                moveBox.style.left = imageX - moveBoxWidth / 4
            else
            {
			    moveBox.style.left = mouseX - moveBoxWidth / 2;
			    relativeX = cursorBoxUpX - imageX;
			}
		}
		else if (cursorBoxBottomX > bottomX) 
		{
		    if(cursorBoxBottomX > bottomX + moveBoxWidth / 4)
		        moveBox.style.left = bottomX - 3 * moveBoxWidth / 4;
		    else
		    {
    			moveBox.style.left = mouseX - moveBoxWidth / 2;
			    relativeX = imgWidth - (bottomX - cursorBoxUpX);
			}
		}
		
		// Check Y.
		if (cursorBoxUpY >= imageY && cursorBoxUpY <= bottomY &&
			cursorBoxBottomY >= imageY && cursorBoxBottomY <=
			bottomY)
		{	
			moveBox.style.top = mouseY - moveBoxHeight / 2;
			
			// Assign the relative coordinates, for translation
			// to the large image.
			relativeY = cursorBoxUpY - imageY; 
		}
		else if (cursorBoxUpY < imageY) 
		{
            if(cursorBoxUpY < imageY - moveBoxHeight / 4)
                moveBox.style.top = imageY - moveBoxHeight / 4;
            else
            {
    			moveBox.style.top = mouseY - moveBoxHeight / 2;
			    relativeY = cursorBoxUpY - imageY;
			 }
		}
		else if (cursorBoxBottomY > bottomY) 
		{
		    if(cursorBoxBottomY > bottomY + moveBoxHeight / 4)
		        moveBox.style.top = bottomY - 3 * moveBoxWidth /4;
		    else
		    {
			    moveBox.style.top = mouseY - moveBoxHeight / 2;
			    relativeY = imgHeight - (bottomY - cursorBoxUpY);//bottomY - imageY - moveBoxHeight;
			}
		}
	
		// Adjust the size of the zoom box, based on our scaling factor,
		// and the size of the cursor box.
		 //zoomBox.style.height = moveBoxHeight * YScale;
		 //zoomBox.style.width = moveBoxWidth * XScale;
	     zoomBox.style.height = 330;
		 zoomBox.style.width  = 400;
	
		// Adjust the location of the zoom box, based on the small
		// image.
		var zoomBoxTop = imageY;
		var zoomBoxLeft = imageX + prodimg.width + 11;
		zoomBox.style.top = zoomBoxTop;
		zoomBox.style.left = zoomBoxLeft;
		
		ifZoomBox.frameElement.style.width = zoomBox.style.width;
		ifZoomBox.frameElement.style.height = zoomBox.style.height;
		ifZoomBox.frameElement.style.top = zoomBox.style.top;
		ifZoomBox.frameElement.style.left = zoomBox.style.left;
		ifZoomBox.frameElement.style.visibility = "visible";
		
	
		// The coordinates for the large image are calculated based on
		// the offset of the cursor box within the small image.
		var largeimgTop = relativeY * (YScale/1.2) * -1; 
		var largeimgLeft = relativeX * (XScale/2) * -1;
		
		// These tests are here so that IE and Gecko browsers behave the
		// same when NaN is encountered.
		if (largeimgTop)
			largeimg.style.top = largeimgTop;
			
		if (largeimgLeft)
			largeimg.style.left = largeimgLeft;
		
		// Make the zoom box layers visible, and render the zoom box
		// itself.
		largeimg.style.visibility="visible";
		moveBox.style.visibility = "visible";
		zoomBox.style.visibility = "visible";
	}
	
	// Hide the zoom box layers.
	if (zoomState == false)
	{	
		if (initialized) {
			largeimg.style.visibility = "hidden";
			moveBox.style.visibility = "hidden";
			zoomBox.style.visibility = "hidden";
		    ifZoomBox.frameElement.style.visibility = "hidden";			
		}
	}
}

// This function checks the coordinates of the mouse, and sets the zoomState
// flag if it is within the small image, and clears the flag if it is outside
// it.
function CheckMouse(currX, currY)
{	
		// We're within the image boundaries.
		if (currX >= imageX && currX <= bottomX &&
			currY >= imageY && currY <= bottomY && !menuOn
			&& XScale > 1 && YScale > 1)
			zoomState = true;
		else
			zoomState = false;	
}

// These two functions find the X, Y coordinates of the supplied object, in our
// case it is the coordinates of the small image.  Written by James Robinson.
function findPosX(obj)
{
	var curleft = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
		curleft += obj.x;
	return curleft;
}

function findPosY(obj)
{
	var curtop = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
		curtop += obj.y;
	return curtop;
}

// These two functions ensure compatibility with various browsers.
function getMouseX(evt)
{
	if (evt.pageX)
		return evt.pageX;
	else if (evt.clientX)
		return evt.clientX + (document.documentElement.scrollLeft ? 
		document.documentElement.scrollLeft : document.body.scrollLeft);
	else
		return null;
}

function getMouseY(evt)
{
	if (evt.pageY)
		return evt.pageY;
	else if (evt.clientY)
		return evt.clientY + (document.documentElement.scrollTop ? 
		document.documentElement.scrollTop : document.body.scrollTop);
	else return null;
}

function RetriveSplChars(pString)
{
    while(pString.indexOf('$$$') != -1)
        pString = pString.replace("$$$","'")
    while(pString.indexOf('###') != -1)
        pString = pString.replace("###"," ")
    return pString
}
function ExpandCollapseReview(idReviewDesc,collapseText,expandText)
{
    var objRevDesc = document.getElementById(idReviewDesc);
    var ecOuterHtml;
    var objSrc = event.srcElement
    if(objSrc != null && objSrc != undefined && objSrc.innerText.indexOf("(+)") != -1)
    {
        objSrc.innerText = objSrc.innerText.replace("(+)","(-)");
        objRevDesc.innerHTML = RetriveSplChars(expandText) + objSrc.outerHTML;
    }
    else
    {
        objSrc.innerText = objSrc.innerText.replace("(-)","(+)");    
        objRevDesc.innerHTML = RetriveSplChars(collapseText) + objSrc.outerHTML;
    }
}
function SetReviewGridFocus()
{
    if(bGridFocus != true)
    {
        var objFocus = document.all['ctl00_Body_dlReviews'];
        if(objFocus != null && objFocus != undefined)
        {
            window.scroll(0,500);        
            objFocus.focus();
            bGridFocus = true;
        }
    }
 }
 function ChangeMainImage(idImgMain,idImgBig,urlMainImg,urlBigImage)
 {
    var objImgMain = document.getElementById(idImgMain);
    var objImgBig = document.getElementById(idImgBig);    
    objImgMain.src = urlMainImg;
    normalImgSrc = urlMainImg;
    objImgBig.src = urlBigImage;
    largeImgSrc = urlBigImage;
 }
function ExpandCollapse_Old(event)
{
var evtTree,tblClientId
if(window.event) evtTree=window.event.srcElement
else evtTree = evt.target
if(evtTree.id.indexOf("ibtnPlusMinus")!=-1) tblClientId=evtTree.id.replace("ibtnPlusMinus","tblCategoryThumbNails")
else return true
var tblCategoryThumbNails = document.getElementById(tblClientId)	
if(evtTree.src.indexOf("plus.gif") == -1)
{
    evtTree.src=evtTree.src.substring(0,evtTree.src.indexOf("minus.gif"))+"plus.gif"
    tblCategoryThumbNails.style.display ="none"
}
else
{
    evtTree.src=evtTree.src.substring(0,evtTree.src.indexOf("plus.gif"))+"minus.gif"
    tblCategoryThumbNails.style.display=""
}
return false
}

function ExpandCollapse(event)
{
var evtTree,tblClientId,srcClientId
if(window.event) evtTree=window.event.srcElement
else evtTree = event.target
if(evtTree.id.indexOf("ibtnPlusMinus")!=-1) tblClientId=evtTree.id.replace("ibtnPlusMinus","tblCategoryThumbNails")
else if(evtTree.id.indexOf("lblEntityOrGroupName")!=-1) tblClientId=evtTree.id.replace("lblEntityOrGroupName","tblCategoryThumbNails")
else return true
var tblCategoryThumbNails = document.getElementById(tblClientId)	
var imageSrcId = document.getElementById(evtTree.id.replace("lblEntityOrGroupName","ibtnPlusMinus"));

if(evtTree.src != undefined)
{
    if(evtTree.src.indexOf("plus.gif") == -1)
    {
        evtTree.src=evtTree.src.substring(0,evtTree.src.indexOf("minus.gif"))+"plus.gif"
        tblCategoryThumbNails.style.display ="none"
    }
    else
    {
        evtTree.src=evtTree.src.substring(0,evtTree.src.indexOf("plus.gif"))+"minus.gif"
        tblCategoryThumbNails.style.display=""
    }
}
else
{
    if((evtTree.src == undefined) && (tblCategoryThumbNails.style.display == ""))
    {
        tblCategoryThumbNails.style.display ="none"
        imageSrcId.src = "images/plus.gif"
    }
    else if((evtTree.src == undefined) && (tblCategoryThumbNails.style.display ="none"))
    {
        tblCategoryThumbNails.style.display =""
        imageSrcId.src = "images/minus.gif"
    }
}
return false
}

function ApplyTopMenuStyle(idTopMenu)
{
    var objTopMenu = document.getElementById(idTopMenu + '_Data')
    objTopMenu.style.display = "none"
}
function CheckNumeric(e)
{
	var kc
	if(window.Event)
		kc=e.which
	else
		kc=window.event.keyCode
	if((kc>48)&&(kc<=57) || kc==8)
		return true
	else
		return false
}