// JavaScript Document
/***** Set image params *****/
var siHeight = 460; // small image height
var siWidth = 460; // small image width
var liHeight = 1840; // large image height
var liWidth = 1840; // large image width
var largeImgScale = 4 //The ratio of the large image compared to the smaller image
/***** end of image params *****/

var imgTop;
var imgLeft;
var liRightLimit;
var liBottomLimit;
var boxRightLimit;
var boxBottomLimit;
var mouseLeft;
var mouseTop;
var viewBoxObj;
var imgBig;
var smImgObj;
var buHeight;
var buWidth;

var IE = document.all?true:false;
var isViewBox = false;
var isMoveable = false;
var isNewPage = true;
var prevCW = null;
function setViewBox(e) {
	if(!isViewBox) {
    //This sections gets the mouse position on the smaller image
    if (smImgObj.offsetParent) {
      imgLeft = smImgObj.offsetLeft
      imgTop = smImgObj.offsetTop
      while (smImgObj = smImgObj.offsetParent) {
        imgLeft += smImgObj.offsetLeft
        imgTop += smImgObj.offsetTop
      }
    }
    else {
      imgTop = smImgObj.offsetTop;
      imgLeft = smImgObj.offsetLeft;      
    }
  
    if (IE) { // grab the x-y pos.s if browser is IE
      mX = event.clientX + document.documentElement.scrollLeft;
      mY = event.clientY + document.documentElement.scrollTop;
    } else {  // grab the x-y pos.s if browser is NS
      mX = e.pageX;
      mY = e.pageY;
    }
    mX = mX - imgLeft;
    mY = mY - imgTop;
    if(IE) {
      mX = mX - 3;
      mY = mY - 3;
    }
    // end mouse position
    
    //set view box so it can be dragged on initial mouse down
    setMoveable(true);

    //center mouse on view box
    mouseLeft = mX-37;
    mouseTop = mY-57;

    //get view box obj
    viewBoxObj = document.getElementById('viewBox');

    //set left and right side limit for view box
    boxRightLimit = (siWidth - 77);
    if(mouseLeft > boxRightLimit) viewBoxObj.style.left = boxRightLimit + "px";
    else if(mouseLeft < 0) viewBoxObj.style.left = "0px";
    else viewBoxObj.style.left = mouseLeft+"px";

    //set top and bottom limit for view box
    boxBottomLimit = (siHeight - 117);
    if(mouseTop > boxBottomLimit) viewBoxObj.style.top = boxBottomLimit + "px";
    else if(mouseTop < 0) viewBoxObj.style.top = "0px";
    else viewBoxObj.style.top = mouseTop+"px";
    
    //activate view box
    viewBoxObj.style.visibility = "visible";
    isViewBox = true;
    
    //set zoom view on large image
    imgBig.style.visibility = "visible";
    mY = (mY * largeImgScale) - 220;
    mX = (mX * largeImgScale) - 145;

    //set left and right side limit for large image
    liRightLimit = liWidth - 300;
    if(mX < 0) mX = 0;
    else if(mX > liRightLimit) mX = liRightLimit;
    
    //set top and bottom side limit for large image
    liBottomLimit = liHeight - 465;
    if(mY < 0) mY = 0;
    else if(mY > liBottomLimit) mY = liBottomLimit;
    
    imgBig.style.backgroundPosition = "-"+mX+"px -"+mY+"px";
    imgBig.style.visibility = "visible";
  }
}

function setMoveable(bool) {
	isMoveable = bool;
}
var testDiv;
var iMove = 0;
function dragViewBox(e) {
iMove++;
  if(testDiv == null) testDiv = document.getElementById("test_div");

	if(isMoveable) {
    if (IE) { // grab the x-y pos.s if browser is IE
      mX = event.clientX + document.documentElement.scrollLeft;
      mY = event.clientY + document.documentElement.scrollTop;
    } else {  // grab the x-y pos.s if browser is NS
      mX = e.pageX;
      mY = e.pageY;
    }

    var currCW = document.documentElement.clientWidth;
    if(smImgObj == null) smImgObj = document.getElementById('imgSmall');
    if(parseInt(currCW) != parseInt(prevCW)) {
      if (smImgObj.offsetParent) {
        imgLeft = smImgObj.offsetLeft
        imgTop = smImgObj.offsetTop
        while (smImgObj = smImgObj.offsetParent) {
          imgLeft += smImgObj.offsetLeft
          imgTop += smImgObj.offsetTop
        }
      }
      else {
        imgTop = smImgObj.offsetTop;
        imgLeft = smImgObj.offsetLeft;      
      }
    }
    prevCW = currCW;

    mX = mX - imgLeft;
    mY = mY - imgTop;
    if(IE) {
      mX = mX - 3;
      mY = mY - 3;
    }
    // end mouse position
    if(isViewBox) {
      //center mouse on view box
      mouseLeft = mX-37;
      mouseTop = mY-57;
      
      //show view box
      viewBoxObj.style.visibility = "visible";
      //set left and right side limit for view box
      if(mouseLeft > boxRightLimit) viewBoxObj.style.left = boxRightLimit + "px";
      else if(mouseLeft < 0) viewBoxObj.style.left = "0px";
      else viewBoxObj.style.left = mouseLeft+"px";
  
      //set top and bottom limit for view box
      if(mouseTop > boxBottomLimit) viewBoxObj.style.top = boxBottomLimit + "px";
      else if(mouseTop < 0) viewBoxObj.style.top = "0px";
      else viewBoxObj.style.top = mouseTop+"px";
      
      //set zoom view on large image
      imgBig.style.visibility = "visible";
      mY = (mY * largeImgScale) - 220;
      mX = (mX * largeImgScale) - 145;
      
      //set left and right side limit for large image
      if(mX < 0) mX = 0;
      else if(mX > liRightLimit) mX = liRightLimit;
      
      //set top and bottom side limit for large image
      if(mY < 0) mY = 0;
      else if(mY > liBottomLimit) mY = liBottomLimit;

      imgBig.style.backgroundPosition = "-"+mX+"px -"+mY+"px";
    } 	
  }
}

function hideViewBox() {
  viewBoxObj.style.visibility = "hidden";

  imgBig.style.visibility = "visible";
  imgBig.style.backgroundPosition = buWidth+"px "+buHeight+"px";
}

function showTestData(data) {
	document.getElementById('testdata').innerHTML = data;
}

function init(buH, buW) {
  smImgObj = document.getElementById('imgSmall');
  smImgObj.onmousemove = dragViewBox;
  smImgObj.onmouseout = hideViewBox;
  smImgObj.onmouseover = setViewBox;
  imgBig = document.getElementById('imgBig');
  buHeight = buH;
  buWidth = buW;
  imgBig.style.backgroundPosition = buWidth+"px "+buHeight+"px";
}