(function () {

    var magnifier = function (ele, obj) {

        this.ele = ele;//原始图片盒子
        this.elewidth = this.ele.offsetwidth;//原始图片盒子宽度
        this.eleheight = this.ele.offsetheight;//原始图片盒子高度
        this.url = '';//放大图片url
        this.masklayerwidth = obj.masklayerwidth || obj.masklayerheight || 180;//遮罩宽度
        this.masklayerheight = obj.masklayerheight || obj.masklayerwidth || 180;//遮罩高度
        this.backgroundscalex = this.elewidth / this.masklayerwidth;//放大后图片与原始图片的放大比例(x)
        this.backgroundscaley = this.eleheight / this.masklayerheight;//放大后图片与原始图片的放大比例(y)
        this.scalex = obj.scale ? obj.scale[0] || obj.scale[1] : this.backgroundscalex;//放大图片盒子与遮罩的放大比例(x)
        this.scaley = obj.scale ? obj.scale[1] || obj.scale[0] : this.backgroundscaley;//放大图片盒子与遮罩的放大比例(y)

        this.init();
    };

    magnifier.prototype = {

        constructor: magnifier,
        init: function () {
            this.ele.style.backgroundsize = '100% 100%';//设置原始图片大小为100%
        },
        createrelativebox: function () {
            //遮罩
            this.masklayer = document.createelement('div');
            this.masklayer.style.csstext = 'position: absolute;border: 1px solid #ccc;background: rgba(255, 255, 255, .7);cursor: move;' +
                'width:' + this.masklayerwidth + 'px;height:' + this.masklayerheight + 'px;'
            this.ele.appendchild(this.masklayer);
            //放大图片盒子
            this.asidebox = document.createelement('div');
            this.asidebox.style.csstext = 'position:absolute;left:105%;top:50%;border:2px solid #ccc;transform:translatey(-50%);' +
                'width:' + this.masklayerwidth * this.scalex + 'px;height:' + this.masklayerheight * this.scaley + 'px;' +
                'background-image:url(' + this.url + ');background-repeat:no-repeat;background-size:' + this.backgroundscalex * 100 + '% ' + this.backgroundscaley * 100 + '%';
            this.ele.appendchild(this.asidebox);
        },
        calcposition: function (e) {
            var left = e.pagex - this.ele.offsetleft - this.masklayerwidth / 2,
                top = e.pagey - this.ele.offsettop - this.masklayerheight / 2;
            if (left < 0) {
                left = 0;
            } else if (left > this.elewidth - this.masklayerwidth) {
                left = this.elewidth - this.masklayerwidth;
            };
            if (top < 0) {
                top = 0;
            } else if (top > this.eleheight - this.masklayerheight) {
                top = this.eleheight - this.masklayerheight;
            };
            this.masklayer.style.left = left + 'px';
            this.masklayer.style.top = top + 'px';
            this.asidebox.style.backgroundposition = left * -this.scalex + 'px ' + top * -this.scaley + 'px';
        }
    };
    window.magnifier = magnifier;
}());

window.addeventlistener('load', function () {

    (function () {

        var smallimgul = document.queryselector('ul.small-img-ul'),
            phonedispaly = document.queryselector('a.phone-display');
        
        var i = 0, flag = true;


        // var imgarr = {
        //     'big': [
        //         '/uploads/202008/5f28d7beb1eea.jpg',
        //         '/uploads/202008/5f2b68bc3f946.jpg',
        //         '/uploads/202008/5f2b68bc5c009.jpg',
        //     ],
        //     'small': [
        //         '/uploads/202008/5f28d7beb1eea.jpg',
        //         '/uploads/202008/5f2b68bc3f946.jpg',
        //         '/uploads/202008/5f2b68bc5c009.jpg',
        //         ]
        // };
        // var imgarr = {
        //     'big': [
        //         'image/p1.png',
        //         'image/p2.png',
        //         'image/p3.png',
        //         'image/p4.png',
        //         'image/p5.png',
        //         'image/p6.png'
        //     ],
        //     'small': [
        //         'image/small-p1.png',
        //         'image/small-p2.png',
        //         'image/small-p3.png',
        //         'image/small-p4.png',
        //         'image/small-p5.png',
        //         'image/small-p6.png'
        //     ]
        // };

        //插入小图片
        // var arr = [];
        // imgarr['small'].foreach(function (ele) {
        //     arr.push('<li class=\'img\' style=\'background-image:url(' + ele + ')\'></li>')
        // });
        // smallimgul.innerhtml = arr.join('');


        var imglist = smallimgul.children,
            smallimgwidth = imglist[0].offsetwidth + 10;

        smallimgul.style.width = imglist.length * smallimgwidth + 'px';

        //获取索引
        function getindex(item) {
            return array.prototype.indexof.call(imglist, item);
        };

        //初始化展示的大图和小图以及相关样式
        initimg();
        function initimg() {
            array.prototype.foreach.call(imglist, function (ele, index) {
                ele.classname = 'img';
            });
            imglist[i].classname += ' active';
            phonedispaly.style.backgroundimage = 'url(' + imgarr['big'][i] + ')';
        };

        //鼠标移入事件
        smallimgul.addeventlistener('mouseover', function (e) {
            i = getindex(e.target);
            initimg();
        });


        
        var magnifier = new magnifier(phonedispaly, {
            masklayerwidth: 180,
            masklayerheight: 240,
            scale: [2]
        });

        function moveeffect(e) {
            if (flag) {
                magnifier.url = imgarr['big'][i];
                magnifier.createrelativebox();
                flag = false;
            };
            magnifier.calcposition(e);
        };

        phonedispaly.addeventlistener('mouseenter', function () {
            this.addeventlistener('mousemove', moveeffect, false);
            this.addeventlistener('mouseleave', function () {
                this.removeeventlistener('mousemove', moveeffect);
                this.innerhtml = '';
                flag = true;
            }, false);
        }, false);

        
        //左右按钮点击
        var btnleft = document.queryselector('.btn-left'),
            btnright = document.queryselector('.btn-right');

        var overnum = (parsefloat(window.getcomputedstyle(smallimgul, null)['width']) - parsefloat(window.getcomputedstyle(smallimgul.parentnode, null)['width'])) / smallimgwidth;

        var record = 0;
        btnleft.addeventlistener('click', function () {
            record--;
            if (record < 0) {
                record = 0;
                return;
            };
            smallimgul.style.left = parsefloat(window.getcomputedstyle(smallimgul, null)['left']) + smallimgwidth + 'px';
        }, false);

        btnright.addeventlistener('click', function () {
            record++;
            if (record > overnum) {
                record = overnum;
                return;
            };
            smallimgul.style.left = parsefloat(window.getcomputedstyle(smallimgul, null)['left']) - smallimgwidth + 'px';
        }, false);

    })();


});