var x, y;

function showZoomElement(elm) {
    elm.style.visibility = 'visible';
    elm.style.display = 'block';
}

function hideZoomElement(elm) {
    elm.style.visibility = 'hidden';
    elm.style.display = 'none';
}

function getXY(ev) {
    var top, left;
    if (ev) {
        x = ev.pageX;
        y = ev.pageY;
    }
    else {
        top = document.documentElement.scrollTop;
        left = document.documentElement.scrollLeft;
        x = window.event.clientX + left;
        y = window.event.clientY + top;
    }
}

function Magnify(imgW, imgH, imgZW, imgZH, divSzW, divSzH) {
    this.imgWidth = imgW;
    this.imgHeight = imgH;
    this.imgZoomWidth = imgZW;
    this.imgZoomHeight = imgZH;
    this.divSizeWidth = divSzW;
    this.divSizeHeight = divSzH;
    var cursorWidth;
    var cursorHeight;
    var scaleFactor;
    this.calculateScaleFactor();
}

Magnify.prototype.canMoveOnXAxis = function(halfCursor) {
    var imgRegularLeft = imgRegularPane.offsetLeft;
    if (x < imgRegularLeft + halfCursor)
        return -1;
    if (x > imgRegularLeft + this.imgWidth - halfCursor)
        return 1;
    return 0;
}

Magnify.prototype.canMoveOnYAxis = function(halfCursor) {
    var imgRegularTop = imgRegularPane.offsetTop;
    if (y < imgRegularTop + halfCursor)
        return -1;
    if (y > imgRegularTop + this.imgHeight - halfCursor)
        return 1;
    return 0;
}

Magnify.prototype.placeElements = function(cMovX, cMovY) {
    divOpPane1.style.left = imgRegularPane.offsetLeft + 'px';
    divOpPane4.style.left = imgRegularPane.offsetLeft + 'px';
    divOpPane1.style.width = this.imgWidth + 'px';
    divOpPane4.style.width = this.imgWidth + 'px';
    if (cMovY == -1) {
        hideZoomElement(divOpPane1);
        showZoomElement(divOpPane4);
        divOpPane4.style.top = (imgRegularPane.offsetTop + this.cursorHeight) + 'px';
        divOpPane4.style.height = (this.imgHeight - this.cursorHeight) + 'px';
    }
    else {
        divOpPane1.style.top = imgRegularPane.offsetTop + 'px';
        if (cMovY == 1) {
            hideZoomElement(divOpPane4);
            showZoomElement(divOpPane1);
            divOpPane1.style.height = (this.imgHeight - this.cursorHeight) + 'px';
        }
        else {
            showZoomElement(divOpPane1);
            showZoomElement(divOpPane4);
            divOpPane1.style.height = (parseInt(cursorPane.style.top) - parseInt(imgRegularPane.offsetTop)) + 'px';
            divOpPane4.style.top = (parseInt(cursorPane.style.top) + this.cursorHeight) + 'px';
            if ((this.imgHeight - parseInt(divOpPane1.style.height) - this.cursorHeight) > 0)
                divOpPane4.style.height = (this.imgHeight - parseInt(divOpPane1.style.height) - this.cursorHeight) + 'px';
        }
    }
    divOpPane2.style.top = cursorPane.style.top;
    divOpPane3.style.top = cursorPane.style.top;
    divOpPane2.style.height = cursorPane.style.height;
    divOpPane3.style.height = cursorPane.style.height;
    if (cMovX == -1) {
        hideZoomElement(divOpPane2);
        showZoomElement(divOpPane3);
        divOpPane3.style.left = (imgRegularPane.offsetLeft + this.cursorWidth) + 'px';
        divOpPane3.style.width = (this.imgWidth - this.cursorWidth) + 'px';
    }
    else {
        divOpPane2.style.left = imgRegularPane.offsetLeft + 'px';
        if (cMovX == 1) {
            hideZoomElement(divOpPane3);
            showZoomElement(divOpPane2);
            divOpPane2.style.width = (this.imgWidth - this.cursorWidth) + 'px';
        }
        else {
            showZoomElement(divOpPane2);
            showZoomElement(divOpPane3);
            divOpPane2.style.width = (parseInt(cursorPane.style.left) - parseInt(imgRegularPane.offsetLeft)) + 'px';
            divOpPane3.style.left = (parseInt(cursorPane.style.left) + this.cursorWidth) + 'px';
            if ((this.imgWidth - parseInt(divOpPane2.style.width) - this.cursorWidth) > 0)
                divOpPane3.style.width = (this.imgWidth - parseInt(divOpPane2.style.width) - this.cursorWidth) + 'px';
        }
    }
}

Magnify.prototype.placeCursor = function() {
    var hCurWidth = parseInt(this.cursorWidth / 2);
    var hCurHeight = parseInt(this.cursorHeight / 2);
    var canMoveX = this.canMoveOnXAxis(hCurWidth);
    var canMoveY = this.canMoveOnYAxis(hCurHeight);
    if (canMoveX == -1)
        cursorPane.style.left = imgRegularPane.offsetLeft + 'px';
    else {
        if (canMoveX == 1)
            cursorPane.style.left = (parseInt(imgRegularPane.offsetLeft) + this.imgWidth - this.cursorWidth) + 'px';
        else
            cursorPane.style.left = (x - hCurWidth) + 'px';
    }
    if (canMoveY == -1)
        cursorPane.style.top = imgRegularPane.offsetTop + 'px';
    else {
        if (canMoveY == 1)
            cursorPane.style.top = (parseInt(imgRegularPane.offsetTop) + this.imgHeight - this.cursorHeight) + 'px';
        else
            cursorPane.style.top = (y - hCurHeight) + 'px';
    }
    this.placeElements(canMoveX, canMoveY);
}

Magnify.prototype.viewArea = function() {
    var imgX = x - imgRegularPane.offsetLeft;
    var imgY = y - imgRegularPane.offsetTop;

    if (imgX >= 0 && imgX * this.scaleFactor <= this.imgZoomWidth && imgY >= 0 && imgY * this.scaleFactor <= this.imgZoomHeight) {
        this.placeCursor();
        showZoomElement(cursorPane);
        showZoomElement(divZoomPane);
        var hCurWidth = parseInt(this.cursorWidth / 2);
        var hCurHeight = parseInt(this.cursorHeight / 2);

        if (imgX < hCurWidth || imgX + hCurWidth > this.imgWidth)
            imgZoomPane.style.left = imgX < hCurWidth ? '0px' : (-this.imgZoomWidth + this.divSizeWidth) + 'px';
        else
            imgZoomPane.style.left = ((-imgX + hCurWidth) * this.scaleFactor) + 'px';

        if (imgY < hCurHeight || imgY + hCurHeight > this.imgHeight)
            imgZoomPane.style.top = imgY < hCurHeight ? '0px' : (-this.imgZoomHeight + this.divSizeHeight) + 'px';
        else
            imgZoomPane.style.top = ((-imgY + hCurHeight) * this.scaleFactor) + 'px';
    }
    else {
        hideZoomElement(cursorPane);
        hideZoomElement(divZoomPane);
        hideZoomElement(divOpPane1);
        hideZoomElement(divOpPane2);
        hideZoomElement(divOpPane3);
        hideZoomElement(divOpPane4);
    }
}

Magnify.prototype.zoomArea = function(ev) {
    getXY(ev);
    this.viewArea();
}

Magnify.prototype.calculateScaleFactor = function() {
    var imgRegularProp = this.imgWidth / this.imgHeight;
    var imgZoomProp = this.imgZoomWidth / this.imgZoomHeight;
    this.scaleFactor = this.imgZoomWidth / this.imgWidth;
    var divPropWidth = this.imgZoomWidth / this.divSizeWidth;
    var divPropHeight = this.imgZoomHeight / this.divSizeHeight;
    this.cursorWidth = parseInt(this.imgWidth / divPropWidth);
    this.cursorHeight = parseInt(this.imgHeight / divPropHeight);
    cursorPane.style.width = this.cursorWidth + 'px';
    cursorPane.style.height = this.cursorHeight + 'px';
}

function Opacity(id) {
    this.opacity = 0;
    this.style = id.style;
    this.timer = null;
}

Opacity.prototype.setOpacity = function(value) {
    if (value == 0)
        this.style.display = 'none';
    else
        this.style.display = 'block';

    this.style.opacity = (value / 100);
    this.style.MozOpacity = (value / 100);
    this.style.KhtmlOpacity = (value / 100);
    this.style.filter = "alpha(opacity=" + value + ")";
}