(function () {
    var EventUtil, Get, Element;
    EventUtil = {
        addHandler: function (ele, type, handler) {
            if (ele.addEventListener) {
                ele.addEventListener(type, handler, false)
            } else if (ele.attachEvent) {
                ele.attachEvent("on" + type, handler)
            } else {
                ele["on" + type] = handler;
            }
        },
        removeHandler: function (element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.detachEvent) {
                element.detachEvent("on" + type, handler);
            } else {
                element["on" + type] = null;
            }
        },
        getEvent: function (event) {
            return event ? event : window.event;
        },
        getTarget: function (event) {
            return event.target || event.srcElement;
        },
        preventDefault: function (event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
        stopPropagation: function (event) {
            if (event.stopPropagation) {
                event.stopPropagation();
            } else {
                event.cancelBubble = true;
            }
        }
    };

    Get = {
        byId: function (id) {
            return typeof id === "string" ? document.getElementById(id) : id
        },
        byClass: function (sClass, oParent) {
            var aClass = [];
            var reClass = new RegExp("(^| )" + sClass + "( |$)");
            var aElem = this.byTagName("*", oParent);
            for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
            return aClass
        },
        byTagName: function (elem, obj) {
            return (obj || document).getElementsByTagName(elem)
        }
    };

    Element = {
        hasClass: function (obj, name) {
            return (' ' + obj.className + ' ').indexOf(' ' + name + ' ') > -1 ? true : false;
        },
        addClass: function (obj, name) {
            if (this.hasClass(obj, name)) return;
            obj.className += ' ' + name;
        },
        removeClass: function (obj, name) {
            obj.className = obj.className.replace(new RegExp('(^|\\s)' + name + '(?:\\s|$)'), '$1').replace(/\s{1,}/g, ' ');
        }
    }

    function MagnifierF() {
        this.init.apply(this, arguments);
    }

    MagnifierF.prototype = {
        init: function (id) {
            var _is = this;
            this.magWrap = Get.byId(id);
            this.magMain = this.magWrap.children[0];
            this.mW = this.magMain.offsetWidth;
            this.mH = this.magMain.offsetHeight;
            this.magImg = this.magMain.getElementsByTagName('img')[0];
            this.mImgSrc = this.magImg.getAttribute('data-src');

            this.specBox = Get.byClass("spec-items", this.magWrap)[0];
            this.specUl = this.specBox.getElementsByTagName('ul')[0];
            this.specItem = this.specBox.getElementsByTagName('li');


            _is.specFn();
            _is.setEventFn().dragEvent();



        },
        setEleFn: function () {
            var _is = this,
                _html1 = "",
                oFrag = document.createDocumentFragment(),
                oFrag2 = document.createDocumentFragment();

            if(_is.magImg.getAttribute('data-type') == 'video') {
                return false;
            }

            if (_is.magMain.children[1]) {
                return;
            } else {
                _is.oMD = document.createElement('div');
                _is.oMD.className = "MagnifierDrag";
                _is.oMD.style.cssText = 'width:' + _is.mW / 2 + 'px;height:' + _is.mH / 2 + 'px;';
                _is.oMD.innerHTML = "&nbsp;";

                _is.oMP = document.createElement('div');
                _is.oMP.className = 'MagnifierPop';
                _is.oMP.style.cssText = 'width:' + _is.mW + 'px;height:' + _is.mH + 'px;right:' + (-_is.mW - 10) + 'px;';

                _is.oMI = document.createElement('div');
                _is.oMI.className = 'MagnifierImg';
                _is.oMI.style.cssText = 'width:' + _is.mW * 2 + 'px;height:' + _is.mH * 2 + 'px;font-size:0;text-align: center;line-height:'+ _is.mH * 2+'px';
                // _html1 = '<img style="max-width:100%; max-height:100%;" src="' + _is.mImgSrc + '">'
                // _is.oMI.innerHTML = _html1;
                var _html1 = document.createElement('img');
                _html1.src = _is.mImgSrc;
                _html1.style.display = 'inline-block';
                _html1.style.verticalAlign = 'middle';

                var IMg_height = _html1.height;
                var IMg_width = _html1.width;
                if(IMg_height>IMg_width){
                    _html1.style.height = '100%';
                    _html1.style.width = 'auto';
                } else if(IMg_height == IMg_width) {
                    _html1.style.height = '100%';
                    _html1.style.width = '100%';
                } else {
                    _html1.style.height = 'auto';
                    _html1.style.width = '100%';
                }
                _is.oMI.appendChild(_html1);

                _is.oMP.appendChild(_is.oMI)

                oFrag.appendChild(_is.oMD);
                oFrag2.appendChild(_is.oMP);

                _is.magMain.appendChild(oFrag);
                _is.magWrap.appendChild(oFrag2);

            }
        },
        removeFn: function (event) {
            var _is = this;
            var target = EventUtil.getTarget(event);

            if (target.nodeName == "IMG") {
                return;
            } else {
                try {
                    _is.magMain.removeChild(_is.oMD);
                    _is.magWrap.removeChild(_is.oMP);
                }
                catch(err) {
                    // 无效
                }
            }
        },
        setMousemoveFn: function (event) {
            var _is = this,

                _WinScrLeft = document.documentElement.scrollLeft || document.body.scrollLeft,
                _WinScrTop = document.documentElement.scrollTop || document.body.scrollTop;

            _x = event.clientX + _WinScrLeft -
                (_is.magWrap.getBoundingClientRect().left + _WinScrLeft) - _is.oMD.offsetWidth / 2;

            _y = event.clientY + _WinScrTop -
                (_is.magMain.getBoundingClientRect().top + _WinScrTop) - _is.oMD.offsetHeight / 2;

            _l = _is.magMain.offsetWidth - _is.oMD.offsetWidth;
            _t = _is.magMain.offsetHeight - _is.oMD.offsetHeight;

            _l2 = - (_is.oMI.offsetWidth - _is.magMain.offsetWidth);
            _t2 = - (_is.oMI.offsetHeight - _is.magMain.offsetHeight);

            if (_x < 0) {
                _x = 0;
            }
            else if (_x > _l) {
                _x = _l;
            }

            if (_y < 0) {
                _y = 0;
            }
            else if (_y > _t) {
                _y = _t;
            }


            _is.oMD.style.left = _x + "px";
            _is.oMD.style.top = _y + "px";


            _bigx = _x / _l;
            _bigy = _y / _t;


            _is.oMI.style.left = _bigx * _l2 + "px";
            _is.oMI.style.top = _bigy * _t2 + "px";
        },
        setEventFn: function () {
            var _is = this,
                _x = 0,
                _y = 0,
                _l = 0,
                _t = 0,
                _bigx = 0,
                _bigy = 0,
                _l2 = 0,
                _t2 = 0;

            function handleEvent(event) {
                events = EventUtil.getEvent(event);
                switch (event.type) {
                    case "mouseover":
                        _is.setEleFn();
                        break;
                    case "mousemove":
                        if (_is.oMD) {
                            _is.setMousemoveFn(event);
                        }
                        break;
                    case "mouseout":
                        _is.removeFn(event);
                        break;
                }

            }
            return {
                dragEvent: function () {

                    EventUtil.addHandler(_is.magMain, "mouseover", handleEvent);
                    EventUtil.addHandler(_is.magMain, "mousemove", handleEvent);
                    EventUtil.addHandler(_is.magMain, "mouseout", handleEvent);
                }
            }

        },
        specFn: function () {
            var _is = this, _oSpImg, _oISrc, _oMaxSrc,
                oLBtn = Get.byClass("spe_leftBtn", _is.magWrap)[0],
                oRBtn = Get.byClass("spe_rightBtn", _is.magWrap)[0],
                oLiW = this.specUl.getElementsByTagName('li')[0].offsetWidth + 5,
                _len = _is.specItem.length,
                n = 0,
                l = null,
                r = null;

            function TabFn(event) {
                var target = EventUtil.getTarget(event),
                    i = 0;

                if (target.nodeName != "UL") {

                    if (target.nodeName == "IMG") {
                        target = target.parentNode;
                    }
                    for (; i < _len; i++) {
                        _is.specItem[i].className = '';
                    }
                    target.className = 'on';

                    _oSpImg = target.getElementsByTagName('img')[0];
                    _oISrc = _oSpImg.getAttribute('data-lsrc');
                    _oMaxSrc = _oSpImg.getAttribute('data-maxSrc');

                    // 添加视频标识
                    var _oIType = _oSpImg.getAttribute('data-type')?_oSpImg.getAttribute('data-type'):'';
                    _is.magImg.setAttribute('data-type', _oIType);
                    // 视频切换操作
                    _is.magMain.style.display = 'block';
                    var playVideo = document.getElementById('playVideo');
                    if(playVideo){
                        playVideo.style.display = 'none';
                    }
                    if(_oIType == 'video'){
                        $(_is.magMain).addClass('video');
                        // 视频加载一次
                        if(playVideo && playVideo.children.length>0){
                            _is.magMain.style.display = 'none';
                            playVideo.style.display = 'block';
                        }
                    } else {
                        $(_is.magMain).removeClass('video');
                        if(playVideo && playVideo.children.length>0){
                            videoiFrame.contentWindow.cyberplayerPause();
                        }
                    }
                    // 每次视频将重载
                    // if(playVideo.children.length>0){
                    //     playVideo.removeChild(playVideo.children[0]);
                    // }

                    //data-lsrc data-maxSrc
                    _is.magImg.setAttribute('src', _oISrc);
                    //_is.mImgSrc = _oMaxSrc;
                    _is.magImg.setAttribute('data-src', _oMaxSrc);
                    _is.mImgSrc = _is.magImg.getAttribute('data-src');
                }

            }
            EventUtil.addHandler(_is.specUl, "click", TabFn);

            function moveFn(event) {
                var target = EventUtil.getTarget(event);

                if (target.className.indexOf("spe_rightBtn") > -1) {
                    r = ++n;
                    if (r > _len - 5)
                        Element.removeClass(target, "on");

                    if (r > _len - 4) {

                        n = _len - 4;
                        return false;
                    } else {

                        _is.buttur(_is.specUl, { left: -(r * oLiW) });
                        Element.addClass(oLBtn, "on");
                    }
                }
                if (target.className.indexOf("spe_leftBtn") > -1) {
                    l = --n;
                    if (l < 1)
                        Element.removeClass(target, "on");

                    if (l < 0) {

                        n = 0;
                        return false;
                    } else {

                        _is.buttur(_is.specUl, { left: -(l * oLiW) });
                        Element.addClass(oRBtn, "on");
                    }
                }
            }

            if (_len > 4) {

                Element.addClass(oRBtn, "on");
                EventUtil.addHandler(_is.magWrap, "click", moveFn);
            }



        },
        buttur: function (ele, obj) {
            window.clearTimeout(ele.timer);
            var _this = this,
                end = null;
            for (direc in obj) {
                var direc1 = direc.toLowerCase(),
                    strOffset = "offset" + direc1.substr(0, 1).toUpperCase() + direc1.substring(1).toLowerCase(),
                    target = obj[direc],
                    nSpeed = (target - ele[strOffset]) / 8;

                nSpeed = nSpeed >= 0 ? Math.ceil(nSpeed) : Math.floor(nSpeed);
                ele.style[direc1] = ele[strOffset] + nSpeed + "px";
                end += nSpeed;
            }
            if (end)
                if (typeof fnCallback == "function") {
                    fnCallback.call(ele);
                } else {

                    ele.timer = window.setTimeout(function () {
                        _this.buttur(ele, obj)
                    }, 20);

                }
            }
    }
    window['MagnifierF'] = function (id) {
        return new MagnifierF(id);
    }
})();
window.onload = function () {
    MagnifierF("MagnifierWrap2");
}