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=5.2;        //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;

        heightFix = 0;
        if (browser.isIE) {
            heightFix = 29;
        }
        	 
        	 
        //reposition
        elZoomImg.style.marginLeft = 0 - diffX + "px"; //0 - diffX - 12 + "px";
        elZoomImg.style.marginTop = 0 - diffY + heightFix + "px"; //0 - diffY - 5 + "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){
            zoomFactor = zoomedImgEl.width / unZoomedImgEl.width;
            
            //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;
			
            var dragBoxEl = document.getElementById('dragboxdiv');
            var zoomViewEl = document.getElementById('zoomedview');
            var boxAspectRatio = zoomViewEl.offsetWidth  / zoomViewEl.offsetHeight;
            zoomDiv = document.getElementById('zoomed_view');

            var w = $('#zoomedview').width();
            var h = $('#zoomedview').height();

            dragBoxEl.style.width = w / zoomFactor + "px";
            dragBoxEl.style.height = h / zoomFactor + "px";
            
			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 mainImage = document.getElementById('mainImage');
			mainImage.style.cursor = 'move';
        } 
    }
    
    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;
            }   
        }     
    }