/**
 *    图片放大镜
 */
;(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.magMain.children[1]) {
				return;
			} else {
				_is.oMD = document.createElement('div');
				_is.oMD.className = "magnifier-drag";
				_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 = 'magnifier-pop';
				_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 = 'mag-target-img';
				_is.oMI.style.cssText = 'width:' + _is.mW * 2 + 'px;height:' + _is.mH * 2 + 'px;';
				_html1 = '<img style="width:100%;height:100%;" src="' + _is.mImgSrc + '">';
				_is.oMI.innerHTML = _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 {
				_is.magMain.removeChild(_is.oMD);
				_is.magWrap.removeChild(_is.oMP);
			}
		},
		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("spec-left-btn", _is.magWrap)[0],
				oRBtn = Get.byClass("spec-right-btn", _is.magWrap)[0],
				oLiW = this.specUl.getElementsByTagName('li')[0].offsetWidth + 5,
				_len = _is.specItem.length,
				n = 0,
				l = null,
				r = null;
			
			function TabFn(event) {
				
				try {
					//选中tab图片，关闭视频
					if (myPlayer) {
						myPlayer.pause();
						$("#magnifier-wrap .icon-play-circle").show();
						$("#magnifier-wrap .video-js").hide();
					}
				} catch (e) {
				
				}
				
				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 = 'ns-border-color-gray';
					
					_oSpImg = target.getElementsByTagName('img')[0];
					_oISrc = _oSpImg.getAttribute('data-lsrc');
					_oMaxSrc = _oSpImg.getAttribute('data-maxSrc');
					
					//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, "mouseover", TabFn);
			
			function moveFn(event) {
				var target = EventUtil.getTarget(event);
				
				if (target.className.indexOf("spec-right-btn") > -1) {
					r = ++n;
					if (r > _len - 5)
						Element.removeClass(target, "ns-text-color-gray ns-bg-color-gray");
					
					if (r > _len - 4) {
						
						n = _len - 4;
						return false;
					} else {
						
						_is.buttur(_is.specUl, {left: -(r * oLiW)});
						Element.addClass(oLBtn, "ns-text-color-gray ns-bg-color-gray");
					}
				}
				
				if (target.className.indexOf("spec-left-btn") > -1) {
					l = --n;
					if (l < 1)
						Element.removeClass(target, "ns-text-color-gray ns-bg-color-gray");
					
					if (l < 0) {
						
						n = 0;
						return false;
					} else {
						
						_is.buttur(_is.specUl, {left: -(l * oLiW)});
						Element.addClass(oRBtn, "ns-text-color-gray ns-bg-color-gray");
					}
				}
			}
			
			if (_len > 4) {
				
				Element.addClass(oRBtn, "ns-text-color-gray ns-bg-color-gray");
				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("magnifier-wrap");
	
}