Jquery plugin that will breathe new life into the Html tag <map>

scheme.js

;(function($)
	{
	var	jqPluginName = 'scheme',
		Init = function(element, options)
			{
			var	config = $.extend(true, {}, $.fn[jqPluginName].defaults, options),
				self = this,
				cats_counter = [],
				create_cav = function()
					{
					var canvas = $('<canvas width="'+self.img.width()+
						'" height="'+self.img.height()+
						'" class="canv_'+config.rep_sel+
						'">')
						.css({
							position: "absolute",
							display: "none",
							top: "0px",
							left: "0px",
							});
					self.canv_sel = '.'+config.rep_sel+' .canv_'+config.rep_sel;
					if(canvas[0].getContext)
						{
						canvas.insertAfter('.'+config.rep_sel+' img');
						return canvas[0].getContext('2d');
						}
					return;
					},
				get_coord = function(input)
				        {
					var	coords=[[],],
						j=0,
						array = input.attr('coords').toString().replace('"', "").split(','),
						max = array.length/2;
					for (var cord in array)
						{
						coords[j][(cord%2)*1]=+array[cord];
						if (cord%2*1 && coords.length != max)
						        coords[++j]=[];
						}
					return coords;
					},
				show_cav = function(index)
					{
					var coords = self.poly_list[index];
					self.cav.lineWidth = 1;
					self.cav.beginPath();
					self.cav.moveTo(coords[0][0], coords[0][1]);
					for (var point in coords) if (point!=0)
						self.cav.lineTo(coords[point][0], coords[point][1]);
					self.cav.lineTo(coords[0][0], coords[0][1]);
					self.cav.fillStyle = 'rgba(255, 255, 255, .5)';
					self.cav.strokeStyle = 'rgba(200, 200, 255, .5)';
					self.cav.closePath();
					self.cav.fill();
					$(self.canv_sel).fadeIn(200);
					},
				find_cats = function(str)
					{
					var out=0;
					$(config.cats_selector).each(function()
						{
						if($(this).text() == str)
							{
							out = this;
							return false;
							}
						});
					return out;
					},
				fill_canv = function()
				        {
					self.cav.clearRect (0, 0,  1000, 1000);
					self.poly_list={};
					self.map.find('area').each(function()
						{
						var area = $(this);
						if(find_cats(area.attr('alt')))
						        self.poly_list[area.index()] = (get_coord(area));
						});
					for (var poly in self.poly_list)
						{
						self.cav.save();
						self.cav.beginPath();
						self.cav.moveTo(self.poly_list[poly][0][0], self.poly_list[poly][0][1]);
						for (var point in self.poly_list[poly]) if (point!=0)
							self.cav.lineTo(self.poly_list[poly][point][0], self.poly_list[poly][point][1]);
						self.cav.lineTo(self.poly_list[poly][0][0], self.poly_list[poly][0][1]);
						self.cav.closePath();
						self.cav.clip();
						self.cav.drawImage(self.img[0], 0, 0);
						self.cav.restore();
						}
					$(self.canv_sel).css("display", "");
					};
			config.context = element;
			self.img = config.context.find(config.img_selector)
			self.img.one('load', function()
				{
				config.offset = self.img.offset();
				self.img
					.css("opacity", ".2")
					.wrap('<div class="'+config.rep_sel+'" />');
				self.map = $(self.img.attr("usemap"));
				var areas = self.map.find('area');
		
				if (areas.length)
					{
					self.cav = create_cav();
					if (self.cav)
						{
						var	closer =  $('<img class="'+config.top_img+'" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" usemap="#'+self.map.attr('id')+'" />')
							.css({
							position: "absolute",
							top: "0px",
							left: "0px",
							bottom: "0px",
							right: "0px",
							width: "100%",
							height:"100%"
							});
						self.img.attr("usemap", "");
						$('.'+config.rep_sel)
							.css({
							"display": "inline-block",
							"position": "relative"
							});
						self.img.add(closer).appendTo('.'+config.rep_sel);
			                        fill_canv();
						areas
							.unbind()
							.click(function(e)
								{
								e.preventDefault();
								var str = $(this).attr("alt");
								config.click_function
									.call(this, e, config, $(find_cats(str)).closest(config.row));
								})
							.hover(function(e)
								{
								var	str = $(this).attr("alt"),
									cat = find_cats(str);
								if (cat)
									{
									config.cat_info(config, $(this), $(cat));
									show_cav($(this).index());
									}
								},function(e)
								{
								$('#'+config.popup_sel).remove();
								$(self.canv_sel).css("display", "none");
								fill_canv();
								});
						}
					}
				}).each(function()
					{
					if(this.complete)
						$(this).load();
					});
			config.context.data(jqPluginName, this);
			};
        $.fn[jqPluginName] = function(options)
		{
		return this.each(function()
			{
			var _this = $(this);
			if (!_this.data(jqPluginName))
				new Init(_this, options);
			});
		};
        $.fn[jqPluginName].defaults =
		{
		dic:	{
			price: 'Цена',
			pod: "(нажмите для заказа)",
			nullbil: "нет билетов"
			},
		row: 'tr',
		input: '.keep',
		in_stock: '.in_stock',
		price: '.price',
		rep_sel: 'canv_cheme',
		img_selector: 'img',
		cats_selector: '.cat-sel .title span',
		ne_url: '/static/img/ne.gif',
		top_img: 'top_img',
		popup_sel: 'a_list',
		click_function: function(e, config, row){
			row.find(config.input).focus();
			},
		cat_info: function(config, area, title)
			{
			var	category = area.attr("alt"),
				price = title
						.closest(config.row)
						.find(config.price)
						.text(),
				div = $("<div id='"+config.popup_sel+"' />")
						.html(category+' </br> '+config.dic.price+": <strong>"+price+"</strong>")
						.appendTo(config.context.find('.'+config.rep_sel))
						.fadeIn(200);
			area.on('mousemove', function(e)
				{
				div.css({
					top: e.pageY - config.offset.top + 4,
					left: e.pageX - config.offset.left + 4,
					});
				})
			}
		}
	})(jQuery);