(function (window, document) {
    var ImgView = function (targetDom, options,listTargetDom) {
        // 判断是用函数创建的还是用new创建的。这样我们就可以通过MaskShare("dom") 或 new MaskShare("dom")来使用这个插件了  
        if (!(this instanceof ImgView)) return new ImgView(targetDom, options,listTargetDom);
        // 参数
        this.options = this.extend({
            dataList: [],//[{src:"",isSelected:false}]
            currentSrc: ""
        }, options);
        // 获取dom
        this.targetDom = document.getElementById(targetDom);
        this.listTargetDom = document.getElementById(listTargetDom);
		if(this.options.dataList.length>0)
		{
			this.options.currentSrc=this.options.dataList[0].AttachLocationPath;
		}
        var html = "<div id='imgViewContent' class='img-view-content' draggable>" +
            "<img id='dialogImg' class='dialog-img' src=''></div>";
		var listHtml="<div id='imgs-container'>"
		for(var i=0;i<this.options.dataList.length;i++)
		{
			if(this.options.dataList[i].isCheck){
				listHtml+="<div id='smallImgBox' class='swiper-box' data-id='3'>"+
					"<img class='smallImg' style='border:3px solid red' src='"+this.options.dataList[i].AttachLocationPath+"' />"+
					"</div>";

			}else{
				listHtml+="<div id='smallImgBox' class='swiper-box' data-id='3'>"+
					"<img class='smallImg' src='"+this.options.dataList[i].AttachLocationPath+"' />"+
					"</div>";
			}
		}
		listHtml+="</div>";
		this.listTargetDom.innerHTML=listHtml;
        this.targetDom.innerHTML = html;
        this.btnClose = document.getElementById("closeDialog");
        this.btnRotate = document.getElementById("rotateDialog");
        this.btnPrev = document.getElementById("prevDialog");
        this.btnNext = document.getElementById("nextDialog");
        //this.imgViewDiv = document.getElementById("imgViewDiv");
        this.imgViewContent = document.getElementById("imgViewContent");
        this.dialogImg = document.getElementById("dialogImg");
		this.imgIdx=document.getElementById("imgIdx")
		this.imgCount=document.getElementById("imgCount")
		this.imgListContainer=document.getElementById("imgs-container")
        this.num = 0;
        this.winWidth = 0;
        this.winHeight = 0;
        this.startX = 0, this.startY = 0, this.x = 0, this.y = 0;
        this.index = 1;
		this.ScrollVal=0;
		var wsImpl = window.WebSocket || window.MozWebSocket;
		this.Socket=new wsImpl('ws://localhost:7080/');
		
		
        this.event();
    }
    ImgView.prototype = {
        init: function (options) {
			this.options.dataList=options;
			
			if(this.options.dataList.length>0)
			{
				this.options.currentSrc=this.options.dataList[0].AttachLocationPath;
			}
			var html = "<div id='imgViewContent' class='img-view-content' draggable>" +
						"<img id='dialogImg' class='dialog-img' src=''></div>";
			var listHtml="<div id='imgs-container'>"
			for(var i=0;i<this.options.dataList.length;i++)
			{
				if(this.options.dataList[i].isCheck){
					listHtml+="<div id='smallImgBox' class='swiper-box' data-id='3'>"+
					"<img class='smallImg' style='border:3px solid red' src='"+this.options.dataList[i].AttachLocationPath+"' />"+
					"</div>";

				}else{
					listHtml+="<div id='smallImgBox' class='swiper-box' data-id='3'>"+
					"<img class='smallImg' src='"+this.options.dataList[i].AttachLocationPath+"' />"+
					"</div>";
				}
			}
			listHtml+="</div>";
			this.listTargetDom.innerHTML=listHtml;
			this.imgIdx=document.getElementById("imgIdx")
			this.imgCount=document.getElementById("imgCount")
			this.imgListContainer=document.getElementById("imgs-container")
        this.event();
        },
        extend: function (obj, obj2) {
            for (var k in obj2) {
                obj[k] = obj2[k];
            }
            return obj;
        },
        event: function () {
            var _this = this;
            _this.thisSrc = _this.options.currentSrc;
            //var dataList = _this.options.dataList;
            //var index = dataList.indexOf(_this.thisSrc);
            _this.checkImg(_this.options.currentSrc);
            // // 关闭
            // _this.btnClose.addEventListener("click", function () {
            //     _this.close(_this);
            // });
            // 旋转
            // _this.btnRotate.addEventListener("click", function () {
            //     _this.rotate(_this);
            // });
            // // 上一张
            // _this.btnPrev.addEventListener("click", function () {
            //     _this.prev(_this);
            // });
            // // 下一张
            // _this.btnNext.addEventListener("click", function () {
            //     _this.next(_this);
            // });
            // 鼠标按下
            _this.imgViewContent.addEventListener("mousedown", function (event) {
                _this.mousedown(_this, event);
            });
            // 滚轮事件 chrome & ie
            _this.imgViewContent.addEventListener("mousewheel", function (event) {
                _this.mousewheel(_this, event);
            });
            // 滚轮事件 firefox
            _this.imgViewContent.addEventListener("DOMMouseScroll", function (event) {
                _this.mousewheel(_this, event);
            });
			var smallImgDom = document.getElementsByClassName("smallImg");
			for(var i=0;i<smallImgDom.length;i++)
			{
				smallImgDom[i].addEventListener("mouseover",function(event){
					_this.setSrc(_this,this.src);
					//this.style.border="1px solid rgb(250,0,255)"
				})
				smallImgDom[i].addEventListener("click",function(event){					
					var imgObj=_this.options.dataList.find(item=>new RegExp(item.FJMC + '$').test(this.src));
					imgObj.isCheck=!imgObj.isCheck;
					if(imgObj.isCheck)
					{
						this.style.border="3px solid red"
					}else
					{
						this.style.border="0px solid red"
					}
					_this.Socket.send(JSON.stringify(imgObj))
				})
			}
        },
        // 滚轮事件
        mousewheel: function (_this, event) {
            event.preventDefault();
            var delta = (event.wheelDelta && (event.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
                (event.detail != 0 && (event.detail > 0 ? -1 : 1));
            if (delta > 0) {
                // 向上滚
                _this.index = _this.index + 0.5;
                if (_this.index > 4) {
                    _this.index = 4;
                }

            } else if (delta < 0) {
                // 向下滚
                _this.index = _this.index - 0.5;
                if (_this.index < 0.5) {
                    _this.index = 0.5;
                }
            }
            _this.imgViewContent.style.marginLeft = _this.imgMarginLeft - ((_this.index - 1) * _this.imgWidth) / 2 + "px";
            _this.imgViewContent.style.marginTop = _this.imgMarginTop - ((_this.index - 1) * _this.imgHeight) / 2 + "px";
            event.target.style.width = _this.imgWidth * _this.index + "px";
            event.target.style.height = _this.imgHeight * _this.index + "px";
        },
		zoom:function(_this,t){
			if(t>0)
			{
                _this.index = _this.index + 0.5;
                if (_this.index > 4) {
                    _this.index = 4;
                }
			}else if(t==0){
				_this.index=1;
			}else if(t<0)
			{
                _this.index = _this.index - 0.5;
                if (_this.index < 0.5) {
                    _this.index = 0.5;
                }
			}
            _this.imgViewContent.style.marginLeft = _this.imgMarginLeft - ((_this.index - 1) * _this.imgWidth) / 2 + "px";
            _this.imgViewContent.style.marginTop = _this.imgMarginTop - ((_this.index - 1) * _this.imgHeight) / 2 + "px";
            _this.dialogImg.style.width = _this.imgWidth * _this.index + "px";
            _this.dialogImg.style.height = _this.imgHeight * _this.index + "px";
		},
        // 鼠标按下事件(拖拽用)
        mousedown: function (_this, event) {
            event.preventDefault();
            var imgWidth = _this.imgWidth * _this.index;
            var imgHeight = _this.imgHeight * _this.index;
            var rotateNum = _this.num * 90;
            // 根据旋转的角度不同，坐标也不一样
            if (rotateNum % 90 == 0 && rotateNum % 180 != 0 && rotateNum % 270 != 0 && rotateNum % 360 != 0) {
                _this.startX = (imgWidth - imgHeight) / 2 + imgHeight - event.offsetY;
                _this.startY = event.offsetX - (imgWidth - imgHeight) / 2;
            } else if (rotateNum % 180 == 0 && rotateNum % 360 != 0) {
                _this.startX = imgWidth - event.offsetX;
                _this.startY = imgHeight - event.offsetY;
            } else if (rotateNum % 270 == 0 && rotateNum % 360 != 0) {
                _this.startX = (imgWidth - imgHeight) / 2 + event.offsetY;
                _this.startY = imgWidth - event.offsetX - (imgWidth - imgHeight) / 2;
            } else {
                _this.startX = event.offsetX;
                _this.startY = event.offsetY;
            }
            document.addEventListener('mousemove', mousemove);
            document.addEventListener('mouseup', mouseup);
            // 拖拽
            function mousemove(event) {
                _this.y = event.clientY - _this.startY - 10;
                _this.x = event.clientX - _this.startX - 10;
                _this.imgViewContent.style.marginTop = "" + _this.y + "px";
                _this.imgViewContent.style.marginLeft = "" + _this.x + "px";
                _this.imgViewContent.style.transition = "margin 0s";
            };
            // 鼠标放开
            function mouseup() {
                document.removeEventListener('mousemove', mousemove);
                document.removeEventListener('mouseup', mouseup);
                _this.imgViewContent.style.transition = "all 0.6s";
            }
        },
        // 关闭
        close: function (_this) {
            var imgViewDiv = document.getElementById("imgViewDiv");
            imgViewDiv.setAttribute("class", "img-view-dialog closing");
            setTimeout(function () {
                imgViewDiv.setAttribute("class", "img-view-dialog");
                imgViewDiv.style.display = "none";
                _this.num = 0;
            }, 400);
        },
        // 旋转
        rotate: function (_this, angle) {
            _this.num += angle;
            _this.imgViewContent.style.transform = "rotate(" + _this.num + "deg) scale(1, 1)";
        },
        // 适合屏幕
        full: function (_this) {
            _this.dialogImg.style.cssText = "width:" + _this.winWidth + "px; height:" + _this.winHeight + "px;";
            _this.imgViewContent.style.cssText = "margin-top:" + 0 + "px; margin-left:" + 0 + "px";
        },
         // 上一张
        prev: function (_this) {
            var thisSrc = _this.dialogImg.src;
            var dataList = _this.options.dataList;
			var imgObj=_this.options.dataList.find(item=>new RegExp(item.FJMC + '$').test(thisSrc));
            var index = dataList.indexOf(imgObj);
            if (index > 0 && index <= (dataList.length - 1)) {
                index = index - 1;
                _this.checkImg(dataList[index].AttachLocationPath, index);
            }
        },
         // 上一张
        next: function (_this) {
            var thisSrc = _this.dialogImg.src;
            var dataList = _this.options.dataList;
			var imgObj=_this.options.dataList.find(item=>new RegExp(item.FJMC + '$').test(thisSrc));
            var index = dataList.indexOf(imgObj);
            if (index >= 0 && index < (dataList.length - 1)) {
                index = index + 1;
                _this.checkImg(dataList[index].AttachLocationPath, index);
            }
        },
         // 上一张
        setSelected: function (_this,fjmc,state) {
            var thisSrc = fjmc;
            var smallImgDom = document.getElementsByClassName("smallImg");
			for(var i=0;i<smallImgDom.length;i++)
			{
				if(new RegExp(thisSrc + '$').test(smallImgDom[i].src)){
					if(state)
					{
						smallImgDom[i].style.border="3px solid red"
					}else
					{
						smallImgDom[i].style.border="0px solid red"
					}
				}
			}
        },
		// 全选
        SelecteAll: function (_this) 
		{
            var smallImgDom = document.getElementsByClassName("smallImg");
			var selectcount=0;
			var Selected=0;
			for(var i=0;i<smallImgDom.length;i++)
			{
				if(smallImgDom[i].style.border=="3px solid red")
				{
					selectcount++;
				}
			}
			for(var i=0;i<smallImgDom.length;i++)
			{
				if(selectcount!=smallImgDom.length)
				{
					smallImgDom[i].style.border="3px solid red"
					Selected=1;
				}else
				{
					smallImgDom[i].style.border="0px solid red"
					Selected=0;
				}
			}
			for(var i=0;i<this.options.dataList.length;i++)
			{
				this.options.dataList[i].isCheck = Selected == 1
			}
			_this.Socket.send("SelecteAll:"+Selected)
        },
		//全屏查看
		FullScreen: function (_this) 
		{
			var thisSrc = _this.dialogImg.src;
			var imgObj=_this.options.dataList.find(item=>new RegExp(item.FJMC + '$').test(thisSrc));
			 if(_this.Socket.readyState==1){
				_this.Socket.send("FullScreen:"+JSON.stringify(imgObj))
			 }
        },
         // 上一张
        setScroll: function (_this,a) {
			var _w=(_this.options.dataList.length*68)+(_this.options.dataList.length*8);
			_this.imgListContainer.style.width=_w+"px";
			if(_w<_this.winWidth){
				_this.imgListContainer.style.left="0px";
			}else
			{
				var _c=_w-_this.winWidth;
				var _cn=_c/76;
					if(a>0&&_c>_this.ScrollVal){
						_this.ScrollVal+=_w/_this.options.dataList.length;
						_this.imgListContainer.style.left=_this.ScrollVal*-1+"px";
					}else if(a<0)
					{
						_this.ScrollVal-=_w/_this.options.dataList.length;
						if(_this.ScrollVal<0)
							_this.ScrollVal=0
					}
						_this.imgListContainer.style.left=_this.ScrollVal*-1+"px";
			}
			//alert(_this.imgListContainer);
            //var thisSrc = _this.dialogImg.src;
            //var dataList = _this.options.dataList;
            //var index = dataList.indexOf(thisSrc);
            //if (index >= 0 && index < (dataList.length - 1)) {
            //    index = index + 1;
            //    _this.checkImg(dataList[index], index);
            //}
        },
        // 下一张
        setSrc: function (_this, src) {
            // var dialogImg = document.getElementById("dialogImg");
            // var thisSrc = dialogImg.attributes[2].value;
            // if (thisSrc.indexOf("width:") != -1 || thisSrc.indexOf("height:") != -1) {
            //     thisSrc = dialogImg.attributes[3].value;
            // }
            // var dataList = _this.options.dataList;
            // var index = dataList.indexOf(thisSrc);
            // if (index >= 0 && index < (dataList.length - 1)) {
            //     index = index + 1;
            //     _this.checkImg(dataList[index]);
            // }
            _this.checkImg(src);
        },
        // 点击图片
        checkImg: function (thisSrc) {
            var _this = this;
            _this.index = 1;
            _this.num = 0;
            _this.dialogImg.style.transform = "";
            _this.imgViewContent.setAttribute("class", "img-view-content");
            _this.getWindowWH();
            /* if (index == 0) {
                _this.btnPrev.style.display = "none";
            } else if (index == (dataList.length - 1)) {
                _this.btnNext.style.display = "none";
            } else {
                _this.btnPrev.style.display = "block";
                _this.btnNext.style.display = "block";
            } */
            var image = new Image();
            image.src = thisSrc;
            var width = _this.winWidth;//image.width;
            var height = _this.winHeight;//image.height;
            // var ww = 860;
            // var wh = _this.winHeight - 20;
            // if (width < ww && height < wh) {
            //     width = width;
            //     height = height;
            // } else {
            //     var scale_x = width / ww;
            //     var scale_y = height / wh;
            //     if (scale_x > scale_y) {
            //         var width = ww;
            //         var height = parseInt(height / scale_x);
            //     } else {
            //         var width = parseInt(width / scale_y);
            //         var height = wh;
            //     }
            // }
            _this.imgWidth = width;
            _this.imgHeight = height;
            var left = 0;//(_this.winWidth - width) / 2;
            var top = 0;//(_this.winHeight - height) / 2;
            _this.imgMarginLeft = left;
            _this.imgMarginTop = top;
            _this.imgViewContent.style.cssText = "margin-top:" + top + "px; margin-left:" + left + "px";
            _this.dialogImg.style.cssText = "width:" + width + "px; height:" + height + "px;";
            _this.dialogImg.setAttribute("src", thisSrc);
            _this.imgViewContent.setAttribute("class", "img-view-content loadingImg");
            //setTimeout(function () {
            //_this.dialogImg.setAttribute("src", thisSrc);
            //_this.imgViewContent.setAttribute("class", "img-view-content loadingImg");
            //}, 600);
			
            var thisSrc = _this.dialogImg.src;
            var dataList = _this.options.dataList;
			var imgObj=_this.options.dataList.find(item=>new RegExp(item.FJMC + '$').test(thisSrc));
            var index = dataList.indexOf(imgObj);
			_this.imgIdx.innerText=index+1;
			_this.imgCount.innerText=dataList.length;
			if(_this.Socket.readyState==1){
				_this.Socket.send("Next:"+JSON.stringify(imgObj))
			}
        },
        // 获取浏览器宽高
        getWindowWH: function () {
            var _this = this;
            if (window.innerWidth)
                _this.winWidth = window.innerWidth;
            else if ((document.body) && (document.body.clientWidth))
                _this.winWidth = document.body.clientWidth;
            // 获取窗口高度
            if (window.innerHeight)
                _this.winHeight = window.innerHeight;
            else if ((document.body) && (document.body.clientHeight))
                _this.winHeight = document.body.clientHeight-74;
            // 通过深入 Document 内部对 body 进行检测，获取窗口大小
            if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
                _this.winHeight = document.documentElement.clientHeight-74;
                _this.winWidth = document.documentElement.clientWidth;
            }
        }
    }
    window.ImgView = ImgView;
}(window, document));