var zoomAreas = new Array();

var zoomElement = null;
var zoomContainer = null;
var mouseOffset = null;

function getPosition(obj) {
    var left = 0;
    var top = 0;

    if (obj.offsetParent) {

        left += obj.offsetLeft;
        top += obj.offsetTop;

        while (obj = obj.offsetParent) {
            if (parseInt(obj.style.left)) {
                left -= parseInt(obj.style.left);
                top -= parseInt(obj.style.top);
            }
        }
    }
    return { x: left, y: top };
}
function getMouseOffset(target, ev) {
    ev = ev || window.event;

    var docPos = getPosition(target);
    var mousePos = mouseCoords(ev);

    return { x: mousePos.x - docPos.x, y: mousePos.y - docPos.y };
}

function getCanvasWidth() {
    return document.body.offsetWidth || window.innerWidth;
}

function getCanvasHeight() {
    return document.body.offsetHeight || window.innerHeight;
}

function mouseCoords(ev) {
    if (ev.pageX || ev.pageY) {
        return { x: ev.pageX, y: ev.pageY };
    }
    return {
        x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        y: ev.clientY + document.body.scrollTop - document.body.clientTop
    };
}

function mouseMove(ev) {
    ev = ev || window.event;
    var mousePos = mouseCoords(ev);
    var targWidth, targHeight, targPos;
    var browseWidth, browseHeight;

    browseWidth = getCanvasWidth();
    browseHeight = getCanvasHeight();

    if (zoomElement) {
        if (zoomContainer) {
            targWidth = parseInt(zoomContainer.offsetWidth);
            targHeight = parseInt(zoomContainer.offsetHeight);
            if (((mousePos.y - mouseOffset.y) < 0)
		    && ((mousePos.y - mouseOffset.y + zoomElement.height) > (targHeight))) {
                zoomElement.style.top = (mousePos.y - mouseOffset.y) + 'px';
            }
            if (((mousePos.x - mouseOffset.x) < 0)
		    && ((mousePos.x - mouseOffset.x + zoomElement.width) > (targWidth))) {
                zoomElement.style.left = (mousePos.x - mouseOffset.x) + 'px';
            }
        }
        else {
            zoomElement = null;
        }
        return false;
    }
}

function mouseUp() {
    zoomElement = null;
}
function mouseDown(ev) {
    zoomElement = this;
    zoomElement.style.position = "absolute";
    mouseOffset = getMouseOffset(this, ev);
    return false;
}
function EnableZoom(id, containerId, imageId, hidImageSrc, thumbId, hidThumbSrc,linkToDisableId) {

    var imageSrc = document.getElementById(hidImageSrc).value;
    var thumbSrc = document.getElementById(hidThumbSrc).value;
    var area = { Id: id,
    ContainerId: containerId,
    ImageId: imageId,
    HidImageSrc: hidImageSrc,
    ImageSrc: imageSrc,
    ThumbId: thumbId, 
    HidThumbSrc : hidThumbSrc,
    ThumbSrc: thumbSrc,
    LinkToDisableId : linkToDisableId,
    LinkToDisableUrl : "",
    LinkToDisableTarget: ""};
    zoomAreas[id] = area;

    var image = new Image();
    image.src = area.ImageSrc; ;

    var divZoom = document.getElementById(area.ContainerId);
    var imgZoom = document.getElementById(area.ImageId);
    var imgThumb = document.getElementById(area.ThumbId);

    var linkToDisable = document.getElementById(area.LinkToDisableId);
    area.LinkToDisableUrl = linkToDisable.href;
    area.LinkToDisableTarget = linkToDisable.target;
    linkToDisable.href = "#";
    linkToDisable.target = "_self";
    imgZoom.src = image.src;


    document.onmousemove = mouseMove;
    document.onmouseup = mouseUp;

    zoomContainer = divZoom;
    zoomContainer.style.position = "relative";
    zoomContainer.style.overflow = "hidden";
    zoomContainer.style.display = "block";
   
    imgThumb.style.display = "none";

    imgZoom.onmousedown = mouseDown;

    imgZoom.style.position = "absolute";
    imgZoom.style.display = "block";
    imgZoom.style.top = "0px";
    imgZoom.style.left = "0px";

    var prefix = GetControlPrefix(area.ImageId);
    var lnkZoom = document.getElementById(prefix + "lnkZoom");
    lnkZoom.href = "javascript:DisableZoom('" + area.Id + "')";
    
    var imgZoom = document.getElementById(prefix + "imgZoom");
    imgZoom.src = "./images/zoomminus.gif";
}

function DisableZoom(id) {
    var area = zoomAreas[id];
    if (area) {
        mouseUp();
        //var divZoom = document.getElementById(area.ContainerId);
        //divZoom.style.position = "";
        
        var imgZoom = document.getElementById(area.ImageId);
        var imgThumb = document.getElementById(area.ThumbId);
        var divZoom = document.getElementById(area.ContainerId);
        imgZoom.style.display = "none";
        imgThumb.style.display = "block";
        divZoom.style.display = "none";

        var prefix = GetControlPrefix(area.ImageId);
        var lnkZoom = document.getElementById(prefix + "lnkZoom");
        lnkZoom.href = "javascript:EnableZoom('" + area.Id + "','" + area.ContainerId + "','" + area.ImageId + "','" + area.HidImageSrc + "','" + area.ThumbId + "','" + area.HidThumbSrc + "','" + area.LinkToDisableId +"');";

        var imgZoom = document.getElementById(prefix + "imgZoom");
        imgZoom.src = "./images/zoomplus.gif";

        var linkToDisable = document.getElementById(area.LinkToDisableId);
        linkToDisable.href = area.LinkToDisableUrl;
        linkToDisable.target = area.LinkToDisableTarget;

        zoomAreas[id] = null;
    }
}

function SelectImage(sender,parentId) {
    try {
        var prefix = GetControlPrefix(sender.id);
        var hidImagePath = document.getElementById(prefix + "hidImagePath");
        var hidMediumPath = document.getElementById(prefix + "hidMediumPath");
        var hidThumbPath = document.getElementById(prefix + "hidThumbPath");
        
        var parentPrefix = GetControlPrefix(parentId);
        var hidImageUrl = document.getElementById(parentPrefix + "hidImageUrl");
        var hidImageMediumUrl = document.getElementById(parentPrefix + "hidImageMediumUrl");
        var hidImageThumbUrl = document.getElementById(parentPrefix + "hidImageThumbUrl");
        
        DisableZoom(1);
        hidImageUrl.value = hidImagePath.value;
        hidImageMediumUrl.value = hidMediumPath.value;
        hidImageThumbUrl.value = hidThumbPath.value;

        var imgCategory = document.getElementById(parentPrefix + "imgCategory");
        imgCategory.src = hidImageMediumUrl.value;

        var lnkZoom = document.getElementById(parentPrefix + "lnkZoom");
        if ((hidImageUrl.value != null) && (hidImageUrl.value.length > 0)) {
            lnkZoom.style.visibility = "visible";
        }
        else {
            lnkZoom.style.visibility = "hidden";
        }
        
    }
    catch (er) {
        alert("Error on SelectImage:"+er.description)
    }
}