/*!
 * SVG Map
 * @version v1.0.2
 * @author  Rocky(rockyuse@163.com)
 * @date    2014-01-16
 *
 * (c) 2012-2013 Rocky, http://sucaijiayuan.com
 * This is licensed under the GNU LGPL, version 2.1 or later.
 * For details, see: http://creativecommons.org/licenses/LGPL/2.1/
 */
var windowPC = 'windows'
function browserRedirect() {  
	var sUserAgent = navigator.userAgent.toLowerCase();  
	var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";  
	var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";  
	var bIsMidp = sUserAgent.match(/midp/i) == "midp";  
	var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";  
	var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";  
	var bIsAndroid = sUserAgent.match(/android/i) == "android";  
	var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";  
	var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";  
	if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) ){
		windowPC = 'windows'
	} else {
		windowPC = 'pc'
	}
	console.log(windowPC, 999)
}  
browserRedirect();
;!function (win, $, undefined) {
	var SVGMap = (function () {
		function SVGMap(dom, options) {
			this.dom = dom;
			this.setOptions(options);
			this.render();
		}
		SVGMap.prototype.options = {
			mapName: 'china',
			mapWidth: 450,
			mapHeight: 400,
			stateColorList: ['2770B5', '606060', '5AABDA', '1C8DFF', '70B3DD', 'C6E1F4', 'EDF2F6'],
			stateDataAttr: ['stateInitColor', 'stateHoverColor', 'stateSelectedColor', 'baifenbi'],
			stateDataType: 'json',
			stateSettingsXmlPath: '',
			stateData: {},

			strokeWidth: 1,
			strokeColor: '000000',

			stateInitColor: '606060',
			stateHoverColor: 'cc2239',
			stateSelectedColor: 'cc2239',
			stateDisabledColor: 'eeeeee',

			showTip: true,
			stateTipWidth: 175,
			stateTipHeight: 68,
			stateTipX: 0,
			stateTipY: -10,
			stateTipHtml: function (stateData, obj) {
				return obj.name;
			},

			hoverCallback: function (stateData, obj) {},
			clickCallback: function (stateData, obj) {},
			external: false,
			dataMap: {},
			wordMap: {},
			languageHtml: 'cn'
		};

		SVGMap.prototype.setOptions = function (options) {
			if (options == null) {
				options = null;
			}
			this.options = $.extend({}, this.options, options);
			return this;
		};

		SVGMap.prototype.scaleRaphael = function (container, width, height) {
			var wrapper = document.getElementById(container);
			if (!wrapper.style.position) wrapper.style.position = "relative";
			wrapper.style.width = width + "px";
			wrapper.style.height = height + "px";
			wrapper.style.overflow = "hidden";
			var nestedWrapper;
			if (Raphael.type == "VML") {
				wrapper.innerHTML = "<rvml:group style='position : absolute; width: 1000px; height: 1000px; top: 0px; left: 0px' coordsize='1000,1000' class='rvml' id='vmlgroup_" + container + "'><\/rvml:group>";
				nestedWrapper = document.getElementById("vmlgroup_" + container);
			} else {
				wrapper.innerHTML = '<div class="svggroup"></div>';
				nestedWrapper = wrapper.getElementsByClassName("svggroup")[0];
			}
			var paper = new Raphael(nestedWrapper, width, height);
			var vmlDiv;
			if (Raphael.type == "SVG") {
				paper.canvas.setAttribute("viewBox", "0 0 " + width + " " + height);
				// paper.image('xinjiang.svg', 187, 141, 70, 100)
			} else {
				vmlDiv = wrapper.getElementsByTagName("div")[0];
			}
			paper.changeSize = function (w, h, center, clipping) {
				clipping = !clipping;
				var ratioW = w / width;
				var ratioH = h / height;
				var scale = ratioW < ratioH ? ratioW : ratioH;
				var newHeight = parseInt(height * scale);
				var newWidth = parseInt(width * scale);
				if (Raphael.type == "VML") {
					var txt = document.getElementsByTagName("textpath");
					for (var i in txt) {
						var curr = txt[i];
						if (curr.style) {
							if (!curr._fontSize) {
								var mod = curr.style.font.split("px");
								curr._fontSize = parseInt(mod[0]);
								curr._font = mod[1];
							}
							curr.style.font = curr._fontSize * scale + "px" + curr._font;
						}
					}
					var newSize;
					if (newWidth < newHeight) {
						newSize = newWidth * 1000 / width;
					} else {
						newSize = newHeight * 1000 / height;
					}
					newSize = parseInt(newSize);
					nestedWrapper.style.width = newSize + "px";
					nestedWrapper.style.height = newSize + "px";
					if (clipping) {
						nestedWrapper.style.left = parseInt((w - newWidth) / 2) + "px";
						nestedWrapper.style.top = parseInt((h - newHeight) / 2) + "px";
					}
					vmlDiv.style.overflow = "visible";
				}
				if (clipping) {
					newWidth = w;
					newHeight = h;
				}
				wrapper.style.width = newWidth + "px";
				wrapper.style.height = newHeight + "px";
				paper.setSize(newWidth, newHeight);
				if (center) {
					wrapper.style.position = "absolute";
					wrapper.style.left = parseInt((w - newWidth) / 2) + "px";
					wrapper.style.top = parseInt((h - newHeight) / 2) + "px";
				}
			};
			paper.scaleAll = function (amount) {
				paper.changeSize(width * amount, height * amount);
			};
			paper.changeSize(width, height);
			paper.w = width;
			paper.h = height;
			return paper;
		};

		SVGMap.prototype.render = function () {
			var opt = this.options,
				_self = this.dom,
				mapName = opt.mapName,
				mapConfig = eval(mapName + 'MapConfig');

			var stateData = {};

			if (opt.stateDataType == 'xml') {
				var mapSettings = opt.stateSettingsXmlPath;
				$.ajax({
					type: 'GET',
					url: mapSettings,
					async: false,
					dataType: $.browser.msie ? 'text' : 'xml',
					success: function (data) {
						var xml;
						if ($.browser.msie) {
							xml = new ActiveXObject('Microsoft.XMLDOM');
							xml.async = false;
							xml.loadXML(data);
						} else {
							xml = data;
						}
						var $xml = $(xml);
						$xml.find('stateData').each(function (i) {
							var $node = $(this),
								stateName = $node.attr('stateName');

							stateData[stateName] = {};
							// var attrs = $node[0].attributes;
							// alert(attrs);
							// for(var i in attrs){
							//     stateData[stateName][attrs[i].name] = attrs[i].value;
							// }
							for (var i = 0, len = opt.stateDataAttr.length; i < len; i++) {
								stateData[stateName][opt.stateDataAttr[i]] = $node.attr(opt.stateDataAttr[i]);
							}
						});
					}
				});
			} else {
				stateData = opt.stateData;
			};

			var offsetXY = function (e) {
					var mouseX, mouseY, tipWidth = $('.stateTip').outerWidth(),
						tipHeight = $('.stateTip').outerHeight();
					if (e && e.pageX) {
						mouseX = e.pageX;
						mouseY = e.pageY;
					} else {
						mouseX = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
						mouseY = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
					}
					mouseX = (mouseX - tipWidth / 2 + opt.stateTipX < 0 ? 0 : mouseX - tipWidth / 2 + opt.stateTipX) + 80;
					mouseY = mouseY - tipHeight + opt.stateTipY < 0 ? mouseY - opt.stateTipY : mouseY - tipHeight + opt.stateTipY;
					return [mouseX, mouseY];
				};

			var current, reTimer;
			var r = this.scaleRaphael(_self.attr('id'), mapConfig.width, mapConfig.height), attributes = {
					fill: '#' + opt.stateInitColor,
					cursor: 'none',
					stroke: '#' + opt.strokeColor,
					'stroke-width': opt.strokeWidth,
					'stroke-linejoin': 'round'
				};
			var stateColor = {};

			for (var state in mapConfig.coordinate) {
				var thisStateData = stateData[state],
					initColor = '#' + (thisStateData && opt.stateColorList[thisStateData.stateInitColor] || opt.stateInitColor),
					hoverColor = '#' + (thisStateData && thisStateData.stateHoverColor || opt.stateHoverColor),
					selectedColor = '#' + (thisStateData && thisStateData.stateSelectedColor || opt.stateSelectedColor),
					disabledColor = '#' + (thisStateData && thisStateData.stateDisabledColor || opt.stateDisabledColor);

				stateColor[state] = {};

				stateColor[state].initColor = initColor;
				stateColor[state].hoverColor = hoverColor;
				stateColor[state].selectedColor = selectedColor;

				var obj = {};
				if (windowPC === 'windows') { 
					obj = r.image('/image/map/' + state + '.png');
				} else {
					obj = r.image('/image/web/map/' + state + '.png');
				}
				attributes.id = state;
				attributes.x = mapConfig['coordinate'][state][2];
				attributes.y = mapConfig['coordinate'][state][3];
				attributes.width = mapConfig['coordinate'][state][0];
				attributes.height = mapConfig['coordinate'][state][1];

				obj.x = mapConfig['coordinate'][state][2];
				obj.y = mapConfig['coordinate'][state][3];
				obj.imgWidth = mapConfig['coordinate'][state][0];
				obj.imgHeight = mapConfig['coordinate'][state][1];
				obj.id = state;
				if (opt.languageHtml === 'cn') {
					obj.name = opt.dataMap[state][0];
					obj.telPhone = opt.dataMap[state][1];
				} else if (opt.languageHtml === 'en') {
					obj.name = opt.wordMap[state][0];
					obj.telPhone = opt.wordMap[state][1];
				}
				obj.attr(attributes);

				if (opt.external) {
					opt.external[obj.id] = obj;
				}
				if (state === 'beijing') {
					console.log(123456, obj)
					obj.attr({
						href: '/image/map/' + state + '-1.png',
						src: '/image/map/' + state + '-1.png'
					});
					if (obj != current) {
						obj.animate({
							fill: stateColor[state].initColor
						}, 250);
					}
					if (opt.showTip) {
						clearTimeout(reTimer);
						if ($('.stateTip1').length == 0) {
							$('.footer-bottom-right #ChinaMap .svggroup').append('<div class="stateTip1"></div');
						}
						$('.stateTip1').html(opt.stateTipHtml(stateData, obj));
						$('.stateTip1').css({
							width: 'auto',
							height: opt.stateTipHeight || 'auto',
							left: windowPC === 'windows' ? 260 : 222,
							top: windowPC === 'windows' ? 74 : 54
						}).show();
					}
				} else if (state === 'China') {
					console.log(666, obj)
					obj.attr({
						href: '/image/map/' + state + '-1.png',
						src: '/image/map/' + state + '-1.png'
					});
					if (obj != current) {
						obj.animate({
							fill: stateColor[state].initColor
						}, 250);
					}
					if (opt.showTip) {
						// clearTimeout(reTimer);
						// if ($('.stateTip1').length == 0) {
						// 	$('.footer-bottom-right #WorldMap .svggroup').append('<div class="stateTip1 words-stateTip1"></div');
						// 	// $(document.body).append('<div class="stateTip1 words-stateTip1" id="words-stateTip2"></div');
						// }
						// var outer = document.getElementById('outer');
						// // getBoundingClientRect()
						// $('.stateTip1').html(opt.stateTipHtml(stateData, obj));
						// $('.stateTip1').css({
						// 	width: 300,
						// 	height: opt.stateTipHeight || 'auto',
						// 	left: windowPC === 'windows' ? 176 : 248,
						// 	top: windowPC === 'windows' ? 62 : 77
						// }).show();
					}
				}
				// if (opt.languageHtml !== 'en' && windowPC !== 'windows') {
					if (stateData[state] && stateData[state].diabled) {
						obj.attr({
							fill: disabledColor,
							cursor: 'default'
						});
					} else {
						console.log(obj)
						obj.attr({
							// fill: initColor
							// id: state
						});

						if (windowPC === 'windows') {
							
							obj.hover(function (e) {
								console.log(e, this)
								$('.stateTip1').hide()
								let aaaa = obj.attrs
								if (this != current) {
									// e.path[0].href = this.id + '-1.svg';
									this.attr({
										href: '/image/map/' + this.id + '-1.png',
										src: '/image/map/' + this.id + '-1.png'
									});
									this.animate({
										fill: stateColor[this.id].hoverColor
									}, 250);
								}
								if (opt.mapName === 'china') {
									if (opt.showTip) {
										if (this.id === '1') {
											$('.stateTip').remove();
											clearTimeout(reTimer);
											if ($('.stateTip1').length == 0) {
												$('.footer-bottom-right').append('<div class="stateTip1 words-stateTip1"></div');
											}
											$('.stateTip1').html(opt.stateTipHtml(stateData, this));
											$('.stateTip1').css({
												width: 300,
												height: opt.stateTipHeight || 'auto',
												left: windowPC === 'windows' ? 176 : 248,
												top: windowPC === 'windows' ? 62 : -9
											}).show();
										} else {
											clearTimeout(reTimer);
											if ($('.stateTip').length == 0) {
												$(document.body).append('<div class="stateTip"></div');
											}
											$('.stateTip').html(opt.stateTipHtml(stateData, this));
											var _offsetXY = new offsetXY(e);
											$('.stateTip').css({
												width: opt.stateTipWidth || 'auto',
												height: opt.stateTipHeight || 'auto',
												left: _offsetXY[0],
												top: _offsetXY[1]
											}).show();
										}
									}
								}
							});
							obj.mouseout(function () {
								console.log(123456)
								this.attr({
									href: '/image/map/' + this.id + '.png',
									src: '/image/map/' + this.id + '.png'
								});
								if (this != current) {
									this.animate({
										fill: stateColor[this.id].initColor
									}, 250);
								}
								// $('.stateTip').hide();
								if (opt.mapName === 'china') {
									if (opt.showTip) {
										if (this.id === '1') {
											reTimer = setTimeout(function () {
												$('.stateTip1').remove();
											}, 100);
										} else {
											reTimer = setTimeout(function () {
												$('.stateTip').remove();
											}, 100);
										}
									}
								}
							});

							obj.mouseup(function (e) {
								console.log(999)
								if (current) {
									current.animate({
										fill: stateColor[current.id].initColor
									}, 250);
								}

								this.animate({
									fill: stateColor[this.id].selectedColor
								}, 250);

								current = this;
								opt.clickCallback(stateData, this);
							});
							if (opt.mapName === 'china') {
								document.body.onmousemove = function (e) {
									var _offsetXY = new offsetXY(e);
									if (this.id === '1') {
										$('.stateTip1').css({
											left: _offsetXY[0],
											top: _offsetXY[1]
										});
									} else {
										$('.stateTip').css({
											left: _offsetXY[0],
											top: _offsetXY[1]
										});
									}
								};
							}
						} else {
							if (opt.languageHtml === 'cn') {
								$(".svggroup svg").on("click", "a", function (){
									console.log(1234561351351)
									return false;
								})
								var mapThis;
								// 鎵嬫満绔墜鎸囨寜涓嬩簨浠
								obj.click(function(e) {
									console.log(e, 11111)
									// e.stopPropagation();
									console.log(mapThis, this, current);
									// return false;
									if (mapThis) {
										console.log(111111111);
										mapThis.attr({
											href: '/image/web/map/' + mapThis.id + '.png',
											src: '/image/web/map/' + mapThis.id + '.png'
										});
										mapThis.animate({
											fill: stateColor[mapThis.id].initColor
										}, 250);
										reTimer = setTimeout(function () {
											$('.stateTip').remove();
										}, 100);
										opt.clickCallback(stateData, mapThis);
									}
									mapThis = this;
									if (this != current) {
										console.log(3333333333);
										this.attr({
											href: '/image/web/map/' + this.id + '-1.png',
											src: '/image/web/map/' + this.id + '-1.png'
										});
										this.animate({
											fill: stateColor[this.id].hoverColor
										}, 250);
									}
									if (this.id !== 'beijing') {
										if (opt.showTip) {
											clearTimeout(reTimer);
											if ($('.stateTip').length == 0) {
												$(document.body).append('<div class="stateTip"></div');
											}
											$('.stateTip').html(opt.stateTipHtml(stateData, this));
											var _offsetXY = new offsetXY(e);
											$('.stateTip').css({
												// height: opt.stateTipHeight || 'auto',
												// left: _offsetXY[0]-30,
												// top: _offsetXY[1]+10
													left: _offsetXY[0]-40,
													top: _offsetXY[1]+10
											}).show();
										}
									}

									opt.clickCallback(stateData, this);
									// return false;
								});
								document.body.onmousemove = function (e) {
									// let im = e
									// var _offsetXY = new offsetXY(e);
									// $('.stateTip').css({
									// 	left: _offsetXY[0]-30,
									// 	top: _offsetXY[1]+10
									// });
								};
							}
						}
					}
				// }
				r.changeSize(opt.mapWidth, opt.mapHeight, false, false);
			}
			
		}
		return SVGMap;
	})();

	$.fn.SVGMap = function (opts) {
		var $this = $(this),
			data = $this.data();

		if (data.SVGMap) {
			delete data.SVGMap;
		}
		if (opts !== false) {
			data.SVGMap = new SVGMap($this, opts);
		}
		return data.SVGMap;
	};
}(window, jQuery);


bind(document,"touchmove",function(ev){
	ev.preventDefault();
})

function bind(shi, ev, fn) { 
	if (shi.addEventListener) {
		shi.addEventListener(ev, fn, false);
	} else {
		// shi.attachEvent('on' + ev, function() {
		// 	fn.call(shi);
		// });
	}
}