function getXOffset(e) {
    if (typeof e.offsetX != 'undefined'){
        return e.offsetX;
    }else if (typeof e.layerX != 'undefined'){
        return e.layerX;
    }else if (typeof e.pageX != 'undefined'){
        return e.pageX - e.target.offsetLeft;
    }
}

function getYOffset(e) {
    if (typeof e.offsetY != 'undefined'){
        return e.offsetY;
    }else if (typeof e.layerY != 'undefined'){
        return e.layerY;
    }else if (typeof e.pageY != 'undefined'){
        return e.pageY - e.target.offsetTop;
    }
}

function displayOffsets(e) {
    var x, y;
    var tg = (window.event) ? e.srcElement : e.target;
    e = (e) ? e : window.event;

    if(tg.id == 'mainTranImage'){
        var ia = getPageCoords(getElementObject('imageLocation'));
        x = getXOffset(e);
        y = getYOffset(e);

        var aix = x;
        var aiy = y;

        if(aix < 60){
            document.getElementById('zoomImageBoundary').style.marginLeft = ((-1 * (60 * 5)) + (60 * 5)) + "px";
        }else if(aix > 340){
            document.getElementById('zoomImageBoundary').style.marginLeft = ((-1 * (340 * 5)) + (60 * 5)) + "px";
        }else{
            document.getElementById('zoomImageBoundary').style.marginLeft = ((-1 * (aix * 5)) + (60 * 5)) + "px";
        }

        if((aiy) < 40){
            document.getElementById('zoomImageBoundary').style.marginTop = ((-1 * (40 * 5)) + (40 * 5)) + "px";
        }else if((aiy) > 360){
            document.getElementById('zoomImageBoundary').style.marginTop = ((-1 * (360 * 5)) + (40 * 5)) + "px";
        }else{
            document.getElementById('zoomImageBoundary').style.marginTop = ((-1 * (aiy * 5)) + (40 * 5)) + "px";
        }
    }
    /*
    }else if(tg.id == 'isel'){
        x = getXOffset(e);
        y = getYOffset(e);

        var ic = getPageCoords(getElementObject('isel'));
        var ia = getPageCoords(getElementObject('mainTranImage'));
        var aiy = ic.y - ia.y + y;
        var aix = ic.x - ia.x + x;

        if(aix < 60){
            document.getElementById('zoomImageBoundary').style.marginLeft = ((-1 * (60 * 5)) + (60 * 5)) + "px";
            document.getElementById('isel').style.marginLeft = 0 + "px";
        }else if(aix > 340){
            document.getElementById('zoomImageBoundary').style.marginLeft = ((-1 * (340 * 5)) + (60 * 5)) + "px";
            document.getElementById('isel').style.marginLeft = 280 + "px";
        }else{
            document.getElementById('zoomImageBoundary').style.marginLeft = ((-1 * (aix * 5)) + (60 * 5)) + "px";
            document.getElementById('isel').style.marginLeft = (aix - 60) + "px";
        }

        if((aiy) < 40){
            document.getElementById('zoomImageBoundary').style.marginTop = ((-1 * (40 * 5)) + (40 * 5)) + "px";
            document.getElementById('isel').style.marginTop = 0 + "px";
        }else if((aiy) > 360){
            document.getElementById('zoomImageBoundary').style.marginTop = ((-1 * (360 * 5)) + (40 * 5)) + "px";
            document.getElementById('isel').style.marginTop = 320 + "px";
        }else{
            document.getElementById('zoomImageBoundary').style.marginTop = ((-1 * (aiy * 5)) + (40 * 5)) + "px";
            document.getElementById('isel').style.marginTop = (aiy - 40) + "px";
        }
    }
    */
}
/*
function getPageCoords(element){
    var coords = { x: 0, y: 0};
    while(element){
        coords.x += element.offsetLeft;
        coords.y += element.offsetTop;
        element = element.offsetParent;
    }
    return coords;
}
*/
function getPageCoords(obj) {
        var coords = {x: 0, y: 0};
	if (obj.offsetParent) {
            do {
                coords.x += obj.offsetLeft;
                coords.y += obj.offsetTop;
            } while (obj = obj.offsetParent);
        }

	return coords;
}

function getElementObject(elementId){
    if(document.all)
        return document.all[elementId];
    else if (document.getElementById)
        return document.getElementById(elementId);
    else
        return null;
}