/*
图片局部放大浏览
*/

function getEventObject(W3CEvent) {//事件标准化函数
    return W3CEvent || window.event;
}
function getPointerPosition(e) {//兼容浏览器的鼠标x,y获得函数
    e = e || getEventObject(e);
    var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
    var y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));

    return { 'x': x, 'y': y };
}
function setOpacity(elem, level) {//兼容浏览器设置透明值
    if (elem.filters) {
        elem.style.filter = 'alpha(opacity=' + level * 100 + ')';
    } else {
        elem.style.opacity = level;
    }
}
function css(elem, prop) {	//css设置函数,可以方便设置css值,并且兼容设置透明值
    for (var i in prop) {
        if (i == 'opacity') {
            setOpacity(elem, prop[i]);
        } else {
            elem.style[i] = prop[i];
        }
    }
    return elem;
}

function getOffsetLeft(o) {
    var left = 0;
    var offsetParent = o;
    while (offsetParent != null && offsetParent != document.body) {
        left += offsetParent.offsetLeft;
        offsetParent = offsetParent.offsetParent;
    }
    return left;
}

function getOffsetTop(o) {
    var top = 0;
    var offsetParent = o;
    while (offsetParent != null && offsetParent != document.body) {
        top += offsetParent.offsetTop;
        offsetParent = offsetParent.offsetParent;
    }
    return top;
}

var magnifier = {
    m: null,

    init: function (magni) {
        var m = this.m = magni || {
            cont: null, //装载原始图像的div
            img: null, //放大的图像
            mag: null, //放大框
            bind: true, //是否绑定事件
            scale: 3	//比例值,设置的值越大放大越大,但是这里有个问题就是如果不可以整除时,会产生些很小的白边,目前不知道如何解决
        }


        var imgBorder = m.cont.getElementsByTagName('a')[0];
        var imgViewObj = imgBorder.getElementsByTagName('img')[0];

        imgBorder.style.display = "inline-block";
        imgBorder.style.overflow = "hidden";
        imgBorder.style.position = "relative";
        if (! +[1, ]) {
            //imgBorder.style.float = "left";
            imgBorder.style.width = imgViewObj.clientWidth;
            imgBorder.style.height = imgViewObj.clientHeight;
            imgViewObj.style.position = "absolute";
            imgViewObj.style.top = 0;
            imgViewObj.style.left = 0;
            imgBorder.style.marginTop = imgViewObj.style.marginTop;
            imgBorder.style.marginLeft = imgViewObj.style.marginLeft;
            imgViewObj.style.margin = 0;
        }

        if (document.getElementById("mag") == undefined || document.getElementById("mag") == null) {
            var element = document.createElement("div");
            element.id = "mag"; //插入属性
            element.style.border = "1px solid #000";
            element.style.display = "none";
            element.style.overflow = "hidden";
            element.style.zIndex = "100";
            element.innerHTML = "<img id=\"magnifierImg\" />"
            document.body.appendChild(element);

            element = document.createElement("span");
            element.id = "Browser"; //插入属性
            element.style.display = "none";
            element.style.border = "1px solid #ff0000";
            element.style.zIndex = "100";
            element.style.position = "absolute";
            element.style.background = "#fff";
            imgBorder.appendChild(element);
        }

        m.img = document.getElementById('magnifierImg');
        m.mag = document.getElementById('mag');

        var imgPreloader = new Image();
        imgPreloader.onload = function () {
            imgPreloader.onload = null;
            css(m.img, {
                'position': 'absolute',
                'width': (imgBorder.clientWidth * m.scale) + 'px'			//原始图像的宽*比例值	
                //'height': (m.cont.clientHeight * m.scale) + 'px'				//原始图像的高*比例值
            })

            css(m.mag, {
                'display': 'none',
                'width': '390px',
                'height': '390px',
                'position': 'absolute',
                'left': getOffsetLeft(m.cont) + m.cont.offsetWidth + 10 + 'px', //放大框的位置为原始图像的右方远10px
                'top': getOffsetTop(m.cont) + 'px',
                'background': "#fff"
            })


            var borderWid = m.cont.getElementsByTagName('span')[0].offsetWidth - m.cont.getElementsByTagName('span')[0].clientWidth; 	//获取border的宽

            css(m.cont.getElementsByTagName('span')[0], {			//m.cont.getElementsByTagName('span')[0]为浏览框
                'display': 'none', 							//开始设置为不可见
                'width': '50px', 		//原始图片的宽/比例值 - border的宽度
                'height': '40px', //原始图片的高/比例值 - border的宽度
                'opacity': 0.5//设置透明度
            })

            m.img.src = magnifierImg; //让原始图像的值给予放大图像
            imgBorder.style.cursor = 'crosshair';

            if (m.bind) {
                imgBorder.onmouseover = magnifier.start;
            }
        }
        imgPreloader.src = magnifierImg;
    },

    start: function (e) {

        if (document.all) {//只在IE下执行,主要避免IE6的select无法覆盖
            magnifier.createIframe(magnifier.m.img);
        }
        document.getElementById("Browser").style.display = "inline-block";
        document.getElementById("mag").style.display = "";
        this.onmousemove = magnifier.move; //this指向m.cont
        this.onmouseout = magnifier.end;
    },

    move: function (e) {
        var pos = getPointerPosition(e); 	//事件标准化

        this.getElementsByTagName('span')[0].style.display = '';

        css(this.getElementsByTagName('span')[0], {
            'top': Math.min(Math.max(pos.y - this.offsetTop - parseInt(this.getElementsByTagName('span')[0].style.height) / 2, 0), this.clientHeight - this.getElementsByTagName('span')[0].offsetHeight) + 'px',
            'left': Math.min(Math.max(pos.x - this.offsetLeft - parseInt(this.getElementsByTagName('span')[0].style.width) / 2, 0), this.clientWidth - this.getElementsByTagName('span')[0].offsetWidth) + 'px'			//left=鼠标x - this.offsetLeft - 浏览框宽/2,Math.max和Math.min让浏览框不会超出图像
        })

        magnifier.m.mag.style.display = '';

        css(magnifier.m.img, {
            'top': -(parseInt(this.getElementsByTagName('span')[0].style.top) * magnifier.m.scale) + 'px',
            'left': -(parseInt(this.getElementsByTagName('span')[0].style.left) * magnifier.m.scale) + 'px'
        })

    },

    end: function (e) {
        this.getElementsByTagName('span')[0].style.display = 'none';
        magnifier.removeIframe(magnifier.m.img); 	//销毁iframe

        magnifier.m.mag.style.display = 'none';

    },

    createIframe: function (elem) {
        var layer = document.createElement('iframe');
        layer.tabIndex = '-1';
        layer.src = '/frame.htm';
        elem.parentNode.appendChild(layer);
        layer.style.border = "none";
        layer.style.width = elem.offsetWidth + 'px';
        layer.style.height = elem.offsetHeight + 'px';
    },

    removeIframe: function (elem) {
        var layers = elem.parentNode.getElementsByTagName('iframe');
        while (layers.length > 0) {
            layers[0].parentNode.removeChild(layers[0]);
        }
    }
}
window.onload = function () {
    if (typeof (DisabledMagnifier) == 'undefined') {
        if (document.firstChild.nodeValue == null
    || (document.firstChild.nodeValue.toLowerCase().indexOf('transitional.') != -1)) {
            magnifier.init({
                cont: document.getElementById('divPic'),
                scale: 3,
                bind: true
            });
        }
    }
}