/*!
 * svg map
 * @version v1.0.2
 * @author  rocky(rockyuse@163.com)
 * @date    2014-01-16
 *
 * (c) 2012-2013 rocky, http://rockydo.com
 * this is licensed under the gnu lgpl, version 2.1 or later.
 * for details, see: http://creativecommons.org/licenses/lgpl/2.1/
 */

;!function (win, $, undefined) {
	var svgmap = (function () {
		function svgmap(dom, options) {
			this.dom = dom;
			this.setoptions(options);
			this.render();
		}
		svgmap.prototype.options = {
			mapname: 'china',
			mapwidth: 500,
			mapheight: 400,
			statecolorlist: ['d4d4d4', 'd58f59', '5aabda', '1c8dff', '70b3dd', 'c6e1f4', 'edf2f6'],
			statedataattr: ['stateinitcolor', 'statehovercolor', 'stateselectedcolor', 'baifenbi'],
			statedatatype: 'json',
			statesettingsxmlpath: '',
			statedata: {},

			strokewidth: 1,
			strokecolor: '111',

			stateinitcolor: 'fff',
			statehovercolor: 'c80303',
			stateselectedcolor: 'c80303',
			statedisabledcolor: 'eeeeee',

			showtip: true,
			//statetipwidth: 300,
			//statetipheight: 50,
			statetipx: 0,
			statetipy: -10,
			statetiphtml: function (statedata, obj) {
				return obj.name;
			},
			hovercallback: function (statedata, obj) {},
			clickcallback: function (statedata, obj) {},
			external: false
		};

		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);
				
			} 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;
					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: 'pointer',
					stroke: '#' + opt.strokecolor,
					'stroke-width': opt.strokewidth,
					'stroke-linejoin': 'round'
				};

			var statecolor = {};
			var label = {};
			

			for (var state in mapconfig.shapes) {
				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 = r.path(mapconfig['shapes'][state]);
				obj.id = state;
				obj.name = mapconfig['names'][state];
				obj.attr(attributes);

				if (opt.external) {
					opt.external[obj.id] = obj;
				}

				if (statedata[state] && statedata[state].diabled) {
					obj.attr({
						fill: disabledcolor,
						cursor: 'default'
					});
				} else {
					obj.attr({
						fill: initcolor
					});

					obj.hover(function (e) {
						if(opt.statetiphtml(statedata, this) != ''){
						if (this != current) {
							this.animate({
								fill: statecolor[this.id].hovercolor
							}, 250);
						}
						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({
								width: opt.statetipwidth || 'auto',
								height: opt.statetipheight || 'auto',
								left: _offsetxy[0],
								top: _offsetxy[1]
							}).show();
						}
						}

						opt.hovercallback(statedata, this);
					});

					obj.mouseout(function () {
						if (this != current) {
							this.animate({
								fill: statecolor[this.id].initcolor
							}, 250);
						}
						// $('.statetip').hide();
						if (opt.showtip) {
							retimer = settimeout(function () {
								$('.statetip').remove();
							}, 100);
						}
					});

					obj.mouseup(function (e) {
						if (current) {
							current.animate({
								fill: statecolor[current.id].initcolor
							}, 250);
						}

						this.animate({
							//fill: statecolor[this.id].selectedcolor
						}, 250);

						current = this;
						opt.clickcallback(statedata, this);
					});
				}
				r.changesize(opt.mapwidth, opt.mapheight, false, false);
			}
			document.body.onmousemove = function (e) {
				var _offsetxy = new offsetxy(e);
				$('.statetip').css({
					left: _offsetxy[0],
					top: _offsetxy[1]
				});
			};
		}
		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);