var zoomAspectRatio=0;   //width:height ratio of picture, zero indicates not intialized
    var zoomInsetRatio=0.75; //percentage zoom thumbnail is inset from bottom left of picture
    var zoomFactor=4.08;        //Amount by which picture is magnified
    var zoomPositionCheckMillis = 100;  //Interval to check the mouse for in/out of zoom bounds.
    var zoomMouseOutCountTimes = 2; //number of times the mouse must be found 'out of bounds' before zoom cancelled

    // Determine browser and version.
    function Browser() {

      var ua, s, i;

      this.isIE    = false;
      this.isNS    = false;
      this.version = null;

      ua = navigator.userAgent;

      s = "MSIE";
      if ((i = ua.indexOf(s)) >= 0) {
        this.isIE = true;
        this.version = parseFloat(ua.substr(i + s.length));
        return;
      }

      s = "Netscape6/";
      if ((i = ua.indexOf(s)) >= 0) {
        this.isNS = true;
        this.version = parseFloat(ua.substr(i + s.length));
        return;
      }

      // Treat any other "Gecko" browser as NS 6.1.

      s = "Gecko";
      if ((i = ua.indexOf(s)) >= 0) {
        this.isNS = true;
        this.version = 6.1;
        return;
      }
    }

    function getAbsolutePosition(element) {
        var r = { x: element.offsetLeft, y: element.offsetTop };
        if (element.offsetParent) {
            var tmp = getAbsolutePosition(element.offsetParent);
            r.x += tmp.x;
            r.y += tmp.y;
        }
        return r;
    };

    var browser = new Browser();
    var dragObj = new Object();
    var mouseX, mouseY;
    var checkMouseIntID =0;
    dragObj.zIndex = 0;    
    
    function dragStart(event){
        var el;
        
        dragObj.elNode = document.getElementById('dragboxdiv');

        // Get cursor position with respect to the page.
        if (browser.isIE) {
            mouseX = window.event.clientX + document.documentElement.scrollLeft
              + document.body.scrollLeft;
            mouseY = window.event.clientY + document.documentElement.scrollTop
              + document.body.scrollTop;
        }
        if (browser.isNS) {
            mouseX = event.clientX + window.scrollX;
            mouseY = event.clientY + window.scrollY;
        }

        // Save starting positions of cursor and element.
        dragObj.cursorStartX = mouseX;
        dragObj.cursorStartY = mouseY;
        dragObj.elStartLeft  = dragObj.elNode.offsetLeft ;
        dragObj.elStartTop   = dragObj.elNode.offsetTop;

        if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
        if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;

        // Update element's z-index.
        dragObj.elNode.style.zIndex = 9999;

        // Capture mousemove and mouseup events on the page.
        if (browser.isIE) {
            document.attachEvent("onmousemove", dragGo);
            //document.attachEvent("onmouseout",   dragStop);
            window.event.cancelBubble = true;
            window.event.returnValue = false;
        }
        if (browser.isNS) {
            document.addEventListener("mousemove", dragGo,   true);
            //document.addEventListener("mouseout",   dragStop, true);
            event.preventDefault();
        }

        dragObj.elNode.className = 'zoom_box_mousedown';
        checkMouseIntID = setInterval(checkMouse, zoomPositionCheckMillis);      
      
    }
    
    function dragGo(event) {

      // Get cursor position with respect to the page.
      
        if (browser.isIE) {
            mouseX = window.event.clientX + document.documentElement.scrollLeft
              + document.body.scrollLeft;
            mouseY = window.event.clientY + document.documentElement.scrollTop
              + document.body.scrollTop;
            }
        if (browser.isNS) {
            mouseX = event.clientX + window.scrollX;
            mouseY = event.clientY + window.scrollY;
        }
       
        //figure out where the drag image should go in relation to the mouse:
        var unZoomedImgEl = document.getElementById('unzoomedimage');
        var r = getAbsolutePosition(unZoomedImgEl);
        var relX = mouseX - r.x;
        var relY = mouseY - r.y;
        //modify relative positions by half of box size so mouse pointer appears centered
        relX += dragObj.elNode.offsetWidth / 2 ;
        relY -= dragObj.elNode.offsetHeight / 2 ;
        
        //set the position
        dragObj.elNode.style.left = relX + "px";
        dragObj.elNode.style.top  = relY + "px";

        if (browser.isIE) {
            window.event.cancelBubble = true;
            window.event.returnValue = false;
        }
        if (browser.isNS){
            event.preventDefault();
        }
        
        //enforce positioning limits
        elImage = document.getElementById('unzoomedimage');
        
        if (dragObj.elNode.offsetLeft < elImage.offsetLeft) {
            dragObj.elNode.style.left = elImage.offsetLeft + 'px';
        }
        if (dragObj.elNode.offsetTop < elImage.offsetTop)  {
            dragObj.elNode.style.top = elImage.offsetTop + 'px';
        }
        if ( (dragObj.elNode.offsetLeft + dragObj.elNode.offsetWidth) > (elImage.offsetLeft + elImage.offsetWidth) ) {
            dragObj.elNode.style.left = elImage.offsetLeft + elImage.offsetWidth - dragObj.elNode.offsetWidth + "px"; 
        }
        if ( (dragObj.elNode.offsetTop + dragObj.elNode.offsetHeight) > (elImage.offsetTop + elImage.offsetHeight) ) {
            dragObj.elNode.style.top = elImage.offsetTop + elImage.offsetHeight - dragObj.elNode.offsetHeight + "px"; 
        }  
        
        updateZoomedImage(dragObj.elNode);
        
    }
    
    function updateZoomedImage(draggedEL){
        //update the zoomed image  
        var elImage = document.getElementById('unzoomedimage');
        var elZoomImg = document.getElementById('zoomedimage');
        
        var diffX = (draggedEL.offsetLeft - elImage.offsetLeft) * zoomFactor ;
        var diffY = (draggedEL.offsetTop - elImage.offsetTop) * zoomFactor ;
        	 
        //reposition
        elZoomImg.style.marginLeft = 0 - diffX + "px";
        elZoomImg.style.marginTop = 0 - diffY + "px";
    }

    function dragStop(event) {
      // Stop capturing mousemove and mouseup events.

      if (browser.isIE) {
        document.detachEvent("onmousemove", dragGo);
        //document.detachEvent("onmouseup",   dragStop);
      }
      if (browser.isNS) {
        document.removeEventListener("mousemove", dragGo,   true);
        //document.removeEventListener("mouseup",   dragStop, true);
      }  
    }  
        
	function doTestZoom() {
	
		var zoomedImgEl = document.getElementById('zoomedimage');
		if(zoomedImgEl.width < 2000 && zoomedImgEl.height < 1300) {
			testZoom = false;
		}
		else {
			testZoom = true;
		}
	}
		
    function initZoomFeature(event){
        var unZoomedImgEl = document.getElementById('unzoomedimage');
        var zoomedImgEl = document.getElementById('zoomedimage');
        
        if (zoomAspectRatio==0){
     
            //initialize zoom feature, calculating zoom sizes based on relative image sizes and view areas
            zoomAspectRatio = zoomedImgEl.width/zoomedImgEl.height;
            var newW = unZoomedImgEl.width * zoomFactor; 
            var newH = newW  / zoomAspectRatio;
            //zoomedImgEl.style.width = newW + "px";
            //zoomedImgEl.style.height = newH + "px";
			
            var dragBoxEl = document.getElementById('dragboxdiv');
            var zoomViewEl = document.getElementById('zoomedview');
            var boxAspectRatio = zoomViewEl.offsetWidth  / zoomViewEl.offsetHeight;
            dragBoxEl.style.width = (zoomViewEl.offsetWidth / zoomFactor) + "px";
            dragBoxEl.style.height = (zoomViewEl.offsetWidth / zoomFactor) / boxAspectRatio + "px"; //make it the same proportions as the zoom view

			dragBoxEl.style.top = unZoomedImgEl.offsetTop + unZoomedImgEl.offsetHeight - ((zoomInsetRatio + 1) * (zoomViewEl.offsetWidth / zoomFactor) / boxAspectRatio) + "px"; 
            dragBoxEl.style.left = ((zoomInsetRatio + 1) * (zoomViewEl.offsetWidth / zoomFactor) / boxAspectRatio) + "px"; 
            dragBoxEl.style.cursor = 'move';
            dragBoxEl.style.zIndex = '9999';
            dragBoxEl.style.display=""; 
            updateZoomedImage(dragBoxEl);
        } 
    }
    
    var mouseOutCount = 0;   
    var lastMouseInTime = new Date();
    
    function checkMouse() {
        //check for mouse in/out of range
        if (lastMouseInTime == null) {
            lastMouseInTime = new Date();
        }
        
        var unZoomedImgEl = document.getElementById('unzoomedimage');
        if (unZoomedImgEl) {
            var absPos = getAbsolutePosition(unZoomedImgEl);
            
            if ( mouseX  < absPos.x || mouseY < absPos.y || mouseX > absPos.x + unZoomedImgEl.offsetWidth || mouseY > absPos.y + unZoomedImgEl.offsetHeight ) {
                //we're out of range
                mouseOutCount++;
                if (mouseOutCount>= zoomMouseOutCountTimes ){
                    //mouse has been out of area for mouseOutCount * zoomPositionCheckMillis, so unzoom.
                    clearInterval(checkMouseIntID);
                    queryUnZoom(null);
                }
            }
            else {
                //mouse is in range, clear counter
                mouseOutCount=0;
            }   
        }     
    }