/*
 * The Zoom Feature
 *
 * This object can be used to zoom in/zoom out of pictures on various details page
 * The purpose of this create a simple set up that any programmer can call
 * It will create all the neccessary HTML tables and div tags needed.
 *
 * By: Bob Walker
 * 11/27/2007
*/
var gnMaxImageHeight;
var gnMaxImageWidth;
var gnMaxThumbHeight;
var gnMaxThumbWidth;

var sFullSizeImagePath;
var sThumbImagePath;
var sSelectedPicture;
var sFeatureWindowLink;

var hypPrint;
var sPrintQueryString = new String();

var oImage;
var oDefaultImage;
var oTimer;
var nCurrentPictureID;
var bWatermarkStatus;
var sWatermarkImages;
var sUsedListingPub;
var sCurrentTradePubSite;
var sLogoName;

var bPrintMode;

//Global html elements
var gimgMain;
var gimgDefault;
var gdvOutSide;
var	gdvDrag;
var	gdvUnderHover;
var gimgCurrent;
var gdvTD;

//Image Variables
var gdZoomWidthIncrease;
var gdZoomHeightIncrease;

var gnOriginalImageWidth;
var gnOriginalImageHeight;
var gnOriginalReducedImageWidth;
var gnOriginalReducedImageHeight;

//Drag image variables
var gnImgXPosition;
var gnImgYPosition;
var gnXPosition;
var gnYPosition;

//Thumb image variables
var gnMaxThumbX;
var gnMaxThumbY;
var gdDragDivWidth;
var gdDragDivHeight;

var gdNormalWidth;

var bInitializeZoom = false;
var bZoomLoaded = false;

SetupZoom = function (params) {
	function param_default(pname, def) { if (typeof params[pname] == "undefined") { params[pname] = def; } };
	
	param_default("maxImageHeight",     424);
	param_default("maxImageWidth",      565);
	param_default("maxThumbWidth",      120);
	param_default("maxThumbHeight",     90);
	param_default("ImageSpan",			null);					
	param_default("thumbAltTagText",	null);
	param_default("FullSizeImagePath",	null);	
	param_default("ThumbImagePath",		null);
	param_default("SpecailZoomFeature",	"Special ZOOM Features");
	param_default("ResetTranslation",	"Reset");
	param_default("SelectedPicture",	null);
	param_default("PrintLink",			null);
	param_default("PrintQuerystring",	null);
	param_default("FeatureWindowLink",	null);
	param_default("PrintMode", 'false');
	param_default("WatermarkFeature", 'false');
	param_default("WatermarkImages", null);
	param_default("LogoName", null);
	param_default("UsedListingPub", null);
	param_default("CurrentTradePubSite", null);		
	
	gnMaxImageHeight = params.maxImageHeight;
	gnMaxImageWidth = params.maxImageWidth;
	gnMaxThumbHeight = params.maxThumbHeight;
	gnMaxThumbWidth = params.maxThumbWidth;

	sFullSizeImagePath = params.FullSizeImagePath;
	sThumbImagePath = params.ThumbImagePath;
	
	sSelectedPicture = params.SelectedPicture;
	sFeatureWindowLink = params.FeatureWindowLink;
	bWatermarkStatus = params.WatermarkFeature;
	sWatermarkImages = params.WatermarkImages;
	sUsedListingPub = params.UsedListingPub;
	sCurrentTradePubSite = params.CurrentTradePubSite;
	sLogoName = params.LogoName;
	
	if (params.PrintMode == 'True')
	{
		bPrintMode = true;
	}
	else
	{
		bPrintMode = false;
	}
		     	
	if (params.PrintLink != null){
		hypPrint = document.getElementById(params.PrintLink);
		sPrintQueryString = params.PrintQuerystring;
	}
	
	if (params.SelectedPicture != null && params.SelectedPicture != ''){
		//FirstImageLoad(params.SelectedPicture);
	}
};

//Function that will setup the thumbnail when it is clicked
function SetupThumbnail(nPictureID)
{
	ResizeImages(nPictureID, gnMaxThumbHeight, gnMaxThumbWidth);	
			
	if (nPictureID == sSelectedPicture)
	{
		FillFullSize(nPictureID);
	}
}

var sPath;
var sDefaultPath;
//function that will fill the full size image
function FillFullSize(nPictureID)
{
    var arWatermarkImages = sWatermarkImages.split(",");
    document.getElementById('imgDefault').style.display = '';
    document.getElementById('dvHideImg').style.display = 'none';
    bZoomLoaded = false;

    if (bWatermarkStatus == "True") {
        var i = 0;
        for (i = 0; i < arWatermarkImages.length - 1; i++)
            if (arWatermarkImages[i] == nPictureID) {
                if (sUsedListingPub != "") {
                    sPath = "/ImageService/WatermarkedImage.aspx?img=" + arWatermarkImages[i + 1] + "&wm=" + sLogoName + "&listingPub=" + sUsedListingPub + "&usePub=true";
                    sDefaultPath = "/ImageService/WatermarkedImage.aspx?img=" + arWatermarkImages[i + 1] + "&wm=" + sLogoName + "&listingPub=" + sUsedListingPub + "&usePub=true" + "&nMaxW=" + gnMaxImageWidth + "&nMaxH=" + gnMaxImageHeight;
                } else {
                    sPath = "/ImageService/WatermarkedImage.aspx?img=" + arWatermarkImages[i + 1] + "&wm=" + sLogoName + "&listingPub=" + sCurrentTradePubSite;
                    sDefaultPath = "/ImageService/WatermarkedImage.aspx?img=" + arWatermarkImages[i + 1] + "&wm=" + sLogoName + "&listingPub=" + sCurrentTradePubSite + "&nMaxW=" + gnMaxImageWidth + "&nMaxH=" + gnMaxImageHeight;
                }
            }

    }
    else {
        //var sPath = sFullSizeImagePath + nPictureID + '.jpg';
        if (sUsedListingPub != "") {
            sPath = "/ImageService/ServeImage.aspx?img=" + nPictureID + "&listingPub=" + sUsedListingPub + "&usePub=true"; //Serve hi resolution image path. 
            sDefaultPath = "/ImageService/ServeImage.aspx?img=" + nPictureID + "&listingPub=" + sUsedListingPub + "&usePub=true" + "&nMaxW=" + gnMaxImageWidth + "&nMaxH=" + gnMaxImageHeight; //Serve absolute resolution image path. 
        } else {
            sPath = "/ImageService/ServeImage.aspx?img=" + nPictureID + "&listingPub=" + sCurrentTradePubSite;
            sDefaultPath = "/ImageService/ServeImage.aspx?img=" + nPictureID + "&listingPub=" + sCurrentTradePubSite + "&nMaxW=" + gnMaxImageWidth + "&nMaxH=" + gnMaxImageHeight;
        }

    }
	
	nCurrentPictureID = nPictureID;
    
	oDefaultImage = new Image();
	oDefaultImage.onload = DefaultImgPreLoaded;
	oDefaultImage.src = sDefaultPath;
}

function imgPreLoaded() {
	if (oImage) {
		if (oImage.width > 0 && oImage.height > 0) {
			LoadImage();
		} else {
			setTimeout("imgPreLoaded()", 50);
		}
	}
}

function DefaultImgPreLoaded() {
    if (oDefaultImage) {
        if (oDefaultImage.width > 0 && oDefaultImage.height > 0) {
            LoadDefaultImage();
        } else {
            setTimeout("DefaultImgPreLoaded()", 50);
        }
    }
}

function getBarCodeFromImgSrc(sSrc) {

    var reg = /\d{8}/;
    var sPicID = "";
	var arr = reg.exec(sSrc);
               
	if (arr) {
		sPicID = arr[0];
	}

	return sPicID;
}


///Method that will actually load the image
function LoadImage()
{
	clearInterval(oTimer);
	
	SetUpGlobalVariables();
		
	gnOriginalImageWidth = oImage.width;
	gnOriginalImageHeight = oImage.height;
		
	gimgMain.style.position = 'absolute';
	gimgMain.style.cursor = 'pointer';
	gimgMain.style.width = '';
	gimgMain.style.height = '';

	SetHeightWidth(oImage, 'imgMain', gnMaxImageWidth, gnMaxImageHeight);

	gimgMain.onload = imgMainLoaded;

	//Set the large image
	gimgMain.src = oImage.src;
	bInitializeZoom = false;
	document.getElementById('dvHideImg').style.display = '';
}

///Method that will actually load the default image
function LoadDefaultImage() {
    clearInterval(oTimer);
    SetUpGlobalVariables();

    gimgDefault.style.position = 'relative';
    gimgDefault.style.cursor = 'pointer';
    gimgDefault.style.width = '';
    gimgDefault.style.height = '';

    SetHeightWidth(oDefaultImage, 'imgDefault', gnMaxImageWidth, gnMaxImageHeight);
    gimgDefault.onload = imgDefaultLoaded;    

    //Set the large image
    gimgDefault.src = oDefaultImage.src;
        
    document.getElementById('dvOutSide').style.display = '';   
}

function imgDefaultLoaded() {
    if (gimgDefault.width > 0 && gimgDefault.height > 0) {
        ShowHideControlTable();
        gdvOutSide.style.overflow = "hidden";
        gdvOutSide.style.width = gimgDefault.width + "px";
        gdvOutSide.style.height = gimgDefault.height + "px";
        AddEventsToPicture();
        ResetControls();        
    } else {
        //This is here for IE because for some unexplicable reason it will fire off the onload event before it has actually finished loading.
        setTimeout("imgDefaultLoaded()", 50);
    }
}

function imgMainLoaded() {
    if (gimgMain.width > 0 && gimgMain.height > 0) {
        ShowHideControlTable();
        SetupPrintLink();
        SetUpImageForDrag();
        bZoomLoaded = true;
        ZoomImage(true);
    } else {
        //This is here for IE because for some unexplicable reason it will fire off the onload event before it has actually finished loading.
        setTimeout("imgMainLoaded()", 50);
    }
}


//Method that will determine if the control table should be shown or hidden
function ShowHideControlTable()
{
	if (bPrintMode == false && document.getElementById('tblControls') != null)
	{
		document.getElementById('tblControls').width = gdNormalWidth;
		document.getElementById('tblControls').style.display = '';
	}
	else
	{
		document.getElementById('spExtraSpace').style.display = '';
	}
}

//Method that will add the current picture ID to the print querystring
function SetupPrintLink()
{
	if (hypPrint != null)
	{
		if (sPrintQueryString.indexOf("?", 0) == -1)
		{
			hypPrint.href = sPrintQueryString + "?PID=" + nCurrentPictureID;
		}
		else
		{
			hypPrint.href = sPrintQueryString + "&PID=" + nCurrentPictureID;				
		}
	}
}

//Function that will set up the main image so it can be dragged around
function SetUpImageForDrag()
{	
	gnOriginalReducedImageWidth = gimgMain.width;
	gnOriginalReducedImageHeight = gimgMain.height;
	
	gimgCurrent = document.getElementById(nCurrentPictureID);
	gdvTD = document.getElementById('tdImg' + nCurrentPictureID);
	
	//Set up the zoom increase
	DetermineZoomIncreases();
	
	//Set the div tag style
//	gdvOutSide.style.overflow = "hidden";
//	gdvOutSide.style.width = gimgMain.width + "px";
//	gdvOutSide.style.height = gimgMain.height + "px";
	
	gimgMain.style.left = 0;
	gimgMain.style.top = 0;
	
	//Add all the neccessary zoom events to the picture
	AddEventsToPicture()	
		
	//Move the image and thumbnail highlighter in place
	MoveImage(0, 0, true);
	
	//Setup the resize variables
	window.onresize = OnWindowResize;
}

//Method that will determine how much the code should zoom in on a picture
function DetermineZoomIncreases()
{
	if (gnOriginalImageWidth > gnMaxImageWidth)
	{
		gdZoomWidthIncrease = Math.floor((gnOriginalImageWidth - gimgMain.width) / 2);
		gdZoomHeightIncrease = Math.floor((gnOriginalImageHeight - gimgMain.height) / 2);
		
		if ((gdZoomWidthIncrease / gnOriginalImageWidth) < .20)
		{
			gdZoomWidthIncrease = Math.floor(.20 * gnOriginalImageWidth);
		}
		
		if ((gdZoomHeightIncrease / gnOriginalImageHeight) < .20)
		{
			gdZoomHeightIncrease = Math.floor(.20 * gnOriginalImageHeight);
		}
	}
	else
	{
		gdZoomWidthIncrease = Math.floor(.20 * gnOriginalImageWidth);
		gdZoomHeightIncrease = Math.floor(.20 * gnOriginalImageHeight);
	}
}

//Method that will add all the neccessary zoom events to the main picture
function AddEventsToPicture()
{
	if (bPrintMode == false)
	{
		//***Set the on mouse down event for the main image****
		gimgMain.onmousedown = DragImageStart;
		gimgMain.ondblclick = ImageDBLClick;
		gimgMain.onmousewheel = HandleMouseWheel;
		gimgDefault.onmousedown = DragImageStart;
		gimgDefault.ondblclick = ImageDBLClick;
		gimgDefault.onmousewheel = HandleMouseWheel;
		
		if (window.addEventListener)
		{
			//Using Mozilla, it doesn't support mouse wheel
		    gimgMain.addEventListener('DOMMouseScroll', HandleMouseWheel, false);
		    gimgDefault.addEventListener('DOMMouseScroll', HandleMouseWheel, false);
		}
		
		//Set the thumbnail size
		SetThumbnailSize();
		SetThumbInfo();	
	}
}

//Function that will open up the zoom feature information window
function OpenFeatureWindow()
{
	window.open(sFeatureWindowLink, "_blank", "height=150, width=475, status=0, scrollbars=0");
}

//Function that will remove the text "px" from the value passed to it
function RemovePX(value)
{
	var gsTempString = new String();
	var gsReturnValue;
	
	gsTempString = value;
	if (gsTempString.indexOf('px', 0) > 0)
	{
		gsReturnValue = gsTempString.replace('px', '');
	}
	else
	{
		gsReturnValue = gsTempString.replace('pt', '');
	}
	
	if (gsReturnValue != '')
	{
		gsReturnValue = Math.floor(gsReturnValue);
	}
	else
	{
		gsReturnValue = 0;
	}
	
	return gsReturnValue;
}

//Function that will open up a new window for the zoom function
function ZoomIt(sURL)
{
	window.open(sURL,"Zoom_Window",'height=370,width=370,status=no,toolbar=no,menubar=no,location=no,resizable=yes',true)
}

//Function that will set an images height and width
function SetHeightWidth(iImg, ID, dMaxWidth, dMaxHeight)
{
	var dWidth;
	var dHeight;
	var dMultiplier;
	
	if (iImg != null)
	{
		//Get the initial height and width
		dWidth = iImg.width;
		dHeight = iImg.height;
		
		SetMainImageHeightWidth(ID, dMaxWidth, dMaxHeight, dWidth, dHeight);
	}	
}

//Method that will set the page image object's height and width
function SetMainImageHeightWidth(ID, dMaxWidth, dMaxHeight, dWidth, dHeight){
	var dMultiplier;
	
	//loop until the height and width are less than the accepted values
	do
	{
		if (dHeight > dMaxHeight)
		{
			//The image is too tall
			dMultiplier = (dMaxHeight / dHeight);
			dHeight = dMaxHeight;
			dWidth = (dWidth * dMultiplier);
		}
		else if	(dWidth > dMaxWidth)
		{
			//The image is too wide
			dMultiplier = (dMaxWidth / dWidth);
			dWidth = dMaxWidth;
			dHeight = (dHeight * dMultiplier);
		}
	}
	while (dHeight > dMaxHeight || dWidth > dMaxWidth);
	
	if (dWidth > 1 && dHeight > 1){
		//Set the image's height and width
		document.getElementById(ID).height = dHeight;
		document.getElementById(ID).width = dWidth;
		
		gdNormalWidth = dWidth;
	}	
	else{
		gdNormalWidth = dMaxWidth;
	}
	
}

//Function that will reset the thumb nails height and width
function ResizeImages(id, dMaxThumbHeight, dMaxThumbWidth)
{
	var sSearchFor;
	var iImg = document.getElementById(id);

	if (iImg != null)
	{	
		//Look for the word "thumb" in the string	
		sSearchFor = new String(iImg.src);
		if (sSearchFor.indexOf("thumb", 0) > -1)
		{
			SetHeightWidth(iImg, id, dMaxThumbWidth, dMaxThumbHeight);
		}
	}
}

//Function that will get the users current x mouse coordinate
function GetX(e)
{
	return window.event? event.clientX : e.clientX? e.clientX: "";
}

//Function that will get the users current y mouse coordinate
function GetY(e)
{
	return window.event? event.clientY : e.clientY? e.clientY: "";
}

function iecompattest()
{
	return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

//Function that will set up the global variables
function SetUpGlobalVariables()
{
    gimgMain = document.getElementById('imgMain');
    gimgDefault = document.getElementById('imgDefault');
	gdvOutSide = document.getElementById('dvOutSide');
	gdvDrag = document.getElementById('dvHover');
	gdvUnderHover = document.getElementById('dvUnderHover');
}

//Function that will determine if the light or regular control images should be shown
function CheckControls()
{
	var nXPos = RemovePX(gimgMain.style.left);
	var nYPos = RemovePX(gimgMain.style.top);
	var nXEndPos = Math.abs(nXPos) + gnOriginalReducedImageWidth;
	var nYEndPos = Math.abs(nYPos) + gnOriginalReducedImageHeight;

	//Check the left/right controls
	TurnOnOffControls((nXPos == 0), 'btnLeft', 'btnLeftLight');
	TurnOnOffControls((nXEndPos >= (gimgMain.width - 1)), 'btnRight', 'btnRightLight');
	
	//Check the up/down controls
	TurnOnOffControls((nYPos == 0), 'btnUp', 'btnUpLight');
	TurnOnOffControls((nYEndPos >= (gimgMain.height - 1)), 'btnDown', 'btnDownLight');
	
	//Check the zoom in/out controls
	TurnOnOffControls(((gimgMain.width + gdZoomWidthIncrease) >= (2 * gnOriginalImageWidth)), 'btnZoomIn', 'btnZoomInLight');
	TurnOnOffControls((gimgMain.width <= gnOriginalReducedImageWidth), 'btnZoomOut', 'btnZoomOutLight');
}

function ResetControls() {
    TurnOnOffControls(true, 'btnLeft', 'btnLeftLight');
    TurnOnOffControls(true, 'btnRight', 'btnRightLight');

    //Check the up/down controls
    TurnOnOffControls(true, 'btnUp', 'btnUpLight');
    TurnOnOffControls(true, 'btnDown', 'btnDownLight');

    //Check the zoom in/out controls
    TurnOnOffControls(false, 'btnZoomIn', 'btnZoomInLight');
    TurnOnOffControls(true, 'btnZoomOut', 'btnZoomOutLight');

}

//Method that will determine if the control should be turned on or off
function TurnOnOffControls(bTurnOff, sNormalControlID, sLightControlID)
{
	if (bTurnOff == true)
	{
		document.getElementById(sNormalControlID).style.display = 'none';
		document.getElementById(sLightControlID).style.display = '';
	}
	else
	{
		document.getElementById(sNormalControlID).style.display = '';
		document.getElementById(sLightControlID).style.display = 'none';
	}	
}

//Function that will set the thumb information
function SetThumbInfo()
{
	//Set the div tag so it appears underneath the thumbnail highlighter
    gdvUnderHover.style.left = getOffsetLeft(gdvTD) + gimgCurrent.offsetLeft + "px";
    gdvUnderHover.style.top = getOffsetTop(gdvTD) + gimgCurrent.offsetTop + "px";
    gdvUnderHover.style.height = gimgCurrent.height + "px";
    gdvUnderHover.style.width = gimgCurrent.width + "px";
	gdvUnderHover.onmousedown = UnderHoverClick;
	
	//Set the max x and y coordinates the thumbnail can be
	gnMaxThumbX = getOffsetLeft(gdvTD);
	gnMaxThumbY = getOffsetTop(gdvTD);
		
	gnMaxThumbX = gnMaxThumbX + gimgCurrent.width + gimgCurrent.offsetLeft;
	gnMaxThumbY = gnMaxThumbY + gimgCurrent.height + gimgCurrent.offsetTop;
}

//Function that will fire when the window is resized
function OnWindowResize(e)
{
	SetThumbInfo();
	var dXPos = RemovePX(gimgMain.style.left);
	var dYPos = RemovePX(gimgMain.style.top);
	
	CheckMoveImage(dXPos, dYPos);	
}

//Function that will reload the image when the user clicks the zoom buttons
function SetThumbnailSize()
{
    var imgWidth;
    var imgHeight;

    //If the zoom image isn't loaded use the default picture settings. 
    if (bZoomLoaded == false) {
        gimgCurrent = document.getElementById(nCurrentPictureID);
        gnOriginalReducedImageHeight = gimgDefault.height;
        gnOriginalReducedImageWidth = gimgDefault.width;
        imgWidth = gimgDefault.width;
        imgHeight = gimgDefault.height;
        gdvTD = document.getElementById('tdImg' + nCurrentPictureID);
                
        //Move the image and thumbnail highlighter in place
        ChangeThumbDiv(RemovePX(gimgDefault.style.left), RemovePX(gimgDefault.style.top));

        //Setup the resize variables
        window.onresize = OnWindowResize;
        
    } else {
        imgWidth = gimgMain.width;
        imgHeight = gimgMain.height;
    }

	//set the highlight div's height and width
    gdvDrag.style.height = (gimgCurrent.height) * (gnOriginalReducedImageWidth / imgWidth) + "px";
    gdvDrag.style.width = (gimgCurrent.width) * (gnOriginalReducedImageHeight / imgHeight) + "px";
	
	gdDragDivWidth = RemovePX(gdvDrag.style.width);
	gdDragDivHeight = RemovePX(gdvDrag.style.height);
}
//---------------------------------------------------------------------------------------------
//End Image Manipulation functions

//Main Image Drag Functions
//---------------------------------------------------------------------------------------------

//Function that will fire when the user clicks on the image
function DragImageStart(e)
{	
	//Determine where on the image the initial x/y position is
	gnImgXPosition = RemovePX(gimgMain.style.left);
	gnImgYPosition = RemovePX(gimgMain.style.top);
	
	//Set wher ethe user initially clicked
	gnXPosition = GetX(e);
	gnYPosition = GetY(e);		

	//Set up the div tags mouse move event, mouse up event, and mouse out events
	gimgMain.onmousemove = DragImage;
	gimgMain.onmouseup = ClearDragImage;
	document.onmouseup = ClearDragImage;
		
	return false;		
}

//Function that will clear out the drag images events
function ClearDragImage(e)
{
	//Clear out all the drag events
	gimgMain.onmousemove = new Function("return false;");
	gimgMain.onmouseout = new Function("return false;");
	gimgMain.onmouseup = new Function("return false;");
	document.onmouseup = new Function("return false;");
	
	return false;
}

//Function that will fire when the user is dragging around the image
function DragImage(e)
{	
	var nXPos;
	var nYPos;
	var nMouseX;
	var nMouseY;
		
	//Get the user's X, Y mouse coordinates
	nMouseX = GetX(e);
	nMouseY = GetY(e);
	
	//Get how far the mouse has moved from the initial click point
	nMouseX = gnXPosition - nMouseX;
	nMouseY = gnYPosition - nMouseY;
	
	//Set the new x/y position
	nXPos = 1 - (nMouseX - gnImgXPosition);
	nYPos = 1 - (nMouseY - gnImgYPosition);
	
	//move the image
	CheckMoveImage(nXPos, nYPos);
	
	return false;	
}

//Function that will fire when the main image is double-clicked
function ImageDBLClick(e)
{
	var nMidX;
	var nMidY;
	var nXPos;
	var nYPos;
	var nCurrentX;
	var nCurrentY;
	var nNewX;
	var nNewY;
	var nScreenY;
	
	var sUserAgent = new String();
	
	sUserAgent = window.navigator.userAgent;
	sUserAgent = sUserAgent.toLowerCase();
	
	//Get the current X/Y Position of the image
	nCurrentX =	RemovePX(gimgMain.style.left);
	nCurrentY = RemovePX(gimgMain.style.top);
	
	//Determine where the user clicked
	nMidX = window.event? event.x : e.pageX? e.pageX: "";
	nMidY = window.event? event.y : e.pageY? e.pageY: "";
	
	if (sUserAgent.indexOf('msie') == -1)
	{
		//The user is using a non MSIE browser - Determine where on the picture the user clicked
		nMidX = nMidX - (gdvOutSide.offsetLeft);	
		nMidY = nMidY - (gdvOutSide.offsetTop);	
	}
	
	//Determine where the new mid point should be
	nXPos = nCurrentX - nMidX;
	nYPos = nCurrentY - nMidY;
		
	//Determine the X/Y Coords
	nNewX = (nXPos + (gnOriginalReducedImageWidth / 2));
	nNewY = (nYPos + (gnOriginalReducedImageHeight / 2));

	gimgMain.style.left = nNewX + "px";
	gimgMain.style.top = nNewY + "px";
		
	ZoomImage(true);
	
	return false;
}

//function that will handle when the mouse wheel is moved up or down
function HandleMouseWheel(e)
{
	var nDelta = window.event? event.wheelDelta : e.wheelDelta? e.wheelDelta: "";
	var bMozilla;
	
	if (nDelta == '')
	{
		//The user is using mozilla
		nDelta = e.detail;
		bMozilla = true;
	}
	else
	{
		bMozilla = false;
	}
		
	if (nDelta > 0 && bMozilla == false || nDelta < 0 && bMozilla == true)
	{
		ZoomImage(true);
	}
	else
	{
		ZoomImage(false);
	}
	
	if (bMozilla == true)
	{
		//Prevent the page from scrolling
		e.preventDefault();
	}
	return false;
}

//Function that will determine what the coordinates for the box needs to be for a zoom
function ZoomImage(bZoomImage)
{
    if (bInitializeZoom != true) {
        if (bZoomLoaded == false) {
            if (bZoomImage == true) {
                bInitializeZoom = true;
                oImage = new Image();
                oImage.onload = imgPreLoaded;
                oImage.src = sPath;
            }       
        } else {

            var dXPos = RemovePX(gimgMain.style.left);
            var dYPos = RemovePX(gimgMain.style.top);
            var dXMid = (Math.abs(dXPos) + (gnOriginalReducedImageWidth / 2));
            var dYMid = (Math.abs(dYPos) + (gnOriginalReducedImageHeight / 2));
            var dXPer = (dXMid / gimgMain.width);
            var dYPer = (dYMid / gimgMain.height);

            if (bZoomImage == true) {
                if ((gimgMain.width + gdZoomWidthIncrease) <= (2 * gnOriginalImageWidth)) {

                    document.getElementById('imgDefault').style.display = 'none';
                    dXPos = dXPos - Math.ceil(dXPer * gdZoomWidthIncrease);
                    dYPos = dYPos - Math.ceil(dYPer * gdZoomHeightIncrease);
                    gimgMain.width = gimgMain.width + gdZoomWidthIncrease;
                    gimgMain.height = gimgMain.height + gdZoomHeightIncrease;
                }
            }
            else {
                if ((gimgMain.width - gdZoomWidthIncrease) == (gnOriginalReducedImageWidth)) {
                    document.getElementById('imgDefault').style.display = '';
                    dXPos = dXPos + Math.ceil(dXPer * gdZoomWidthIncrease);
                    dYPos = dYPos + Math.ceil(dYPer * gdZoomHeightIncrease);
                    gimgMain.width = gimgMain.width - gdZoomWidthIncrease;
                    gimgMain.height = gimgMain.height - gdZoomHeightIncrease;

                }
                else if ((gimgMain.width - gdZoomWidthIncrease) > (gnOriginalReducedImageWidth)) {
                    //Zooming out 
                    dXPos = dXPos + Math.ceil(dXPer * gdZoomWidthIncrease);
                    dYPos = dYPos + Math.ceil(dYPer * gdZoomHeightIncrease);
                    gimgMain.width = gimgMain.width - gdZoomWidthIncrease;
                    gimgMain.height = gimgMain.height - gdZoomHeightIncrease;
                }
                else {
                    //This should never happen.  If it does then reset the image
                    document.getElementById('imgDefault').style.display = '';
                    dXPos = 0;
                    dYPos = 0;
                    gimgMain.width = gnOriginalReducedImageWidth;
                    gimgMain.height = gnOriginalReducedImageHeight;
                }
            }

            SetThumbnailSize();

            CheckMoveImage(dXPos, dYPos);

        }
    }
		
	return false;
}

//Function that will make an image go left or right
function MoveX(bLeft)
{	
	var nXPos;
		
	if (bLeft == true)
	{
		//The user wants the image to go left
		nXPos = RemovePX(gimgMain.style.left) + (50 * (gimgMain.width / gnOriginalImageWidth));
	}
	else
	{
		//The user wants the image to go right
		nXPos = RemovePX(gimgMain.style.left) - (50 * (gimgMain.width / gnOriginalImageWidth));
	}		
	
	CheckMoveImage(nXPos, null);
	
	return false;	
}

//Function that will make the image go up or down
function MoveY(bUp)
{
	var nYPos;
	
	if (bUp == true)
	{
		//The user wants the image to go up
		nYPos = RemovePX(gimgMain.style.top) + (50 * (gimgMain.height / gnOriginalImageHeight));
	}
	else
	{
		//The user wants the image to do down
		nYPos = RemovePX(gimgMain.style.top) - (50 * (gimgMain.height / gnOriginalImageHeight));
	}
	
	CheckMoveImage(null, nYPos);
	
	return false;
}

//Function that will check the values before moving the image
function CheckMoveImage(nXPos, nYPos)
{	
	if (nXPos != null)
	{
		//X cannot be greater than zero
		if (nXPos > 0)
		{
			nXPos = 0;
		}
		
		//Make sure the end point isn't off of the image
		if ((Math.abs(nXPos) + gnOriginalReducedImageWidth) >  gimgMain.width)
		{
			nXPos = 0 - (gimgMain.width - gnOriginalReducedImageWidth)
		}		
	}
	
	if (nYPos != null)
	{
		//Y cannot be greater than zero
		if (nYPos > 0)
		{
			nYPos = 0;
		}
		
		//Make sure the end point isn't off of the image
		if ((Math.abs(nYPos) + gnOriginalReducedImageHeight) >  gimgMain.height)
		{
			nYPos = 0 - (gimgMain.height - gnOriginalReducedImageHeight)
		}
	}
	
	//Move the image
	MoveImage(nXPos, nYPos, true)
		
	return false;
}

//Function that will actually move the image
function MoveImage(nXPos, nYPos, bMoveThumb)
{	
	//Check if the code should move horizontally		
	if (nXPos != null)
	{
		if (nXPos <= 0)
		{
		    gimgMain.style.left = nXPos + "px";
		}
	}
	
	//Check if the code should move vertically
	if (nYPos != null)
	{
		if (nYPos <= 0)
		{
		    gimgMain.style.top = nYPos + "px";
		}
	}
	
	//Move the thumbnail zoom around
	if (bMoveThumb == true && bPrintMode == false)
	{
		ChangeThumbDiv(RemovePX(gimgMain.style.left), RemovePX(gimgMain.style.top));
	}
	
	CheckControls();
	
	return false;
}

//Function that will reset everything and set the image back to the initial start
function ResetImage()
{
    document.getElementById('imgDefault').style.display = '';
	gimgMain.width = gnOriginalReducedImageWidth;
	gimgMain.height = gnOriginalReducedImageHeight;
	
	SetThumbnailSize();
	
	CheckMoveImage(0, 0, true);
	
	return false;
}

//-----------------------------------------------------------------------------------------
//End Main Image Drag Functions

//Thumb Drag Functions
//-----------------------------------------------------------------------------------------

//function that will fire when the user clicks on the drag div
function DragThumbStart()
{						
	gdvDrag.onmousemove = DragThumb;
	gdvDrag.onmouseup = ClearThumbDiv;
	gdvDrag.onmouseout = ClearThumbDiv;
	
	gimgCurrent.onmousemove = DragThumb;
	gimgCurrent.onmouseup = ClearThumbDiv;
	gimgCurrent.onmouseout = ClearThumbDiv;
	
	return false;
}

//Function that will clear out the thumb div events
function ClearThumbDiv(e)
{
	gdvDrag.onmousemove = new Function("return false;");
	gimgCurrent.onmousemove = new Function("return false;");
	
	return false;
}

//Function that will fire when the user is dragging around the thumb image
function DragThumb(e)
{	
	var nXPos;
	var nYPos;
	var dsocleft=document.all? iecompattest().scrollLeft : pageXOffset
	var dsoctop=document.all? iecompattest().scrollTop : pageYOffset
	
	//Get the user's X,Y coordinates
	nXPos = GetX(e);
	nYPos = GetY(e);
	
	nXPos = dsocleft + nXPos;
	nYPos = dsoctop + nYPos;

	DragClickThumbMove(nXPos,nYPos);
	
	return false;
}

//Function that will allow the user to drag the thumb div highlighter around
function DragClickThumbMove(nTestX, nTestY)
{
	var nBigX;
	var nBigY;
	var dPerXPos;
	var dPerYPos;
	var nXPos;
	var nYPos;
	
	//Get the box coordinates
	nXPos = nTestX - (gdDragDivWidth / 2);
	nYPos =	nTestY - (gdDragDivHeight / 2);
	
	if (nXPos < (getOffsetLeft(gdvTD) + gimgCurrent.offsetLeft))
	{
		nXPos = getOffsetLeft(gdvTD) + gimgCurrent.offsetLeft;
	}
	
	if (nYPos < getOffsetTop(gdvTD) + gimgCurrent.offsetTop)
	{
		nYPos = getOffsetTop(gdvTD) + gimgCurrent.offsetTop;
	}
	
	if ((nXPos + gdDragDivWidth) >= gnMaxThumbX)
	{	
		nXPos = gnMaxThumbX - gdDragDivWidth;			
	}
	
	if ((nYPos + gdDragDivHeight) > gnMaxThumbY)
	{
		nYPos = gnMaxThumbY - gdDragDivHeight;
	}
	
	//Get the fraction value of where the highlight box occurs on the image
	dPerXPos = (nXPos - (getOffsetLeft(gdvTD) + gimgCurrent.offsetLeft)) / gimgCurrent.width;
	dPerYPos = (nYPos - (getOffsetTop(gdvTD) + gimgCurrent.offsetTop)) / gimgCurrent.height;
	
	//Get the main image's X/Y coordinates
	if (dPerXPos == 0)
	{
		nBigX = 0;
	}
	else
	{
		nBigX = 1 - Math.ceil(dPerXPos * gimgMain.width);
	}
	
	if (dPerYPos == 0)
	{
		nBigY = 0;	
	}
	else
	{
		nBigY = 1 - Math.ceil(dPerYPos * gimgMain.height);
	}
	
	//Move the main image
	MoveImage(nBigX, nBigY, false);
	//Move the thumb around
	MoveThumbDiv(nXPos, nYPos);
	
	return false;
}

//Function that will handle the thumbdiv 
function ChangeThumbDiv(nXPos, nYPos)
{
	var dTopLeft;
	var dTopRight;

    //If the zoom image is loaded then use its height/width. 
	if (bZoomLoaded == true) {
	    //Get the percentage of where the on the thumb the div box left right coordinates should be
	    dTopLeft = Math.abs(nXPos / gimgMain.width);
	    dTopRight = Math.abs(nYPos / gimgMain.height);
	} else {
	    //Get the percentage of where the on the thumb the div box left right coordinates should be
	    dTopLeft = Math.abs(nXPos / gimgDefault.width);
	    dTopRight = Math.abs(nYPos / gimgDefault.height);
	}
	
	
	nXPos = Math.ceil((getOffsetLeft(gdvTD) + (dTopLeft * gimgCurrent.width)) + gimgCurrent.offsetLeft);
	nYPos = Math.ceil((getOffsetTop(gdvTD) + (dTopRight * gimgCurrent.height)) + gimgCurrent.offsetTop);
	
	MoveThumbDiv(nXPos, nYPos);
	
	return false;
}

function iterateProperties(obj) {
	var sText = "";
	var newWin
	
	for (var i in obj) {
		sText = sText + i + " = " + obj[i] + "\r\n";
	}
	
	newWin = window.open('','CODE','height=500, width=800');
	newWin.document.write('<FORM NAME="PTEXT"><TEXTAREA NAME="SRC" style="width:750px;height:450px;"></TEXTAREA></FORM>');
	newWin.document.PTEXT.SRC.value = sText;
}

// The getOffsetTop and getOffsetLeft functions are here because the Chrome and Safari browsers did not return
// the expected (correct) offsetLeft and offsetTop property values for gdvTD (thumbnail image table cell). All
// these do are tabulate the offsets through all of the parents. These functions return the correct values in
// IE, Firefox, Chrome, and Safari.
function getOffsetTop(obj) {
	var curtop = 0;
	
	if (obj.offsetParent) {
		do {
			curtop += obj.offsetTop;
		} while (obj = obj.offsetParent);
	}
	
	return curtop;
}

function getOffsetLeft(obj) {
	var curleft = 0;
	
	if (obj.offsetParent) {
		do {
			curleft += obj.offsetLeft;
		} while (obj = obj.offsetParent);
	}
	
	return curleft;
}

//function that will fire when the under hover item has been clicked
function UnderHoverClick(e)
{	
	var nMouseX;
	var nMouseY;
	
	var dsocleft=document.all? iecompattest().scrollLeft : pageXOffset
	var dsoctop=document.all? iecompattest().scrollTop : pageYOffset
		
	//Get the user's X,Y coordinates
	nMouseX = GetX(e);
	nMouseY = GetY(e);
	
	nMouseX = dsocleft + nMouseX;
	nMouseY = dsoctop + nMouseY;
	
	DragClickThumbMove(nMouseX, nMouseY);
	
	return false;
}

//Function that will actually move the thumb div around
function MoveThumbDiv(nTopX, nTopY)
{
	if (nTopX != null)
	{
		if (nTopX >= getOffsetLeft(gdvTD))
		{
		    gdvDrag.style.left = nTopX + "px";
		}
	}
	
	if (nTopY != null)
	{
		if (nTopY >= getOffsetTop(gdvTD))
		{
		    gdvDrag.style.top = nTopY + "px";
		}
	}
	
	return false;
}

//------------------------------------------------------------------------------------------
//End Thumb Drag Functions