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 = 3.41;        //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 = jQuery('#zoomedview').width();
        var h = jQuery('#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);
        document.getElementById('unzoomedimage').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;
        }
    }
}