var context;
var canvas;
(function($){
  $.fn.extend({	  			
	jMap: function(options){
	  	defaults = {
				fillColor: 'FFFFFF',
				fillOpacity: 0.7
		};	  
	  	options = $.extend({}, defaults, options);
	  	function hex_to_decimal (hex) {return Math.max(0, Math.min(parseInt(hex, 16), 255));}	   	
	  	
	  	function css3color (color, opacity) {	  
	  			return 'rgba('+hex_to_decimal(color.substr(0,2))+','+hex_to_decimal(color.substr(2,2))+','+hex_to_decimal(color.substr(4,2))+','+opacity+')';
	  		}
		return this.each(function(){
	  		$("img[usemap]", this).each(function(){
	  			var img = $(this);	  			  			
	  			var map_name = $(this).attr("usemap").split("#")[1];
	  			var canvas = null;
	  			canvas = $("<canvas>").get(0);
	  			
	  			canvas.width = img.width();
	  			canvas.height = img.height();	  				  		
	  			
	  			$(canvas).css({
  					position: 'absolute',
  					left:0, 
  					top:0
  				});
	  			  				
	  			wrap = $('<div>').css({background:'url('+this.src+')',position:'relative', padding:0,width:this.width,height:this.height});
	  			img.before(wrap).css('opacity', 0).css({position: 'absolute'}).remove();			    			   
			    wrap.append(img);
			    img.before(canvas);
	  			
	  			if ($.browser.msie){
	  				G_vmlCanvasManager.initElement(canvas);
	  			}	  				  				  				
	  			context = canvas.getContext("2d");	  				
	  			context.clearRect(0, 0, canvas.width, canvas.height);
			    
			    
	  			$("map[name=" + map_name + "] area").each(function(){	  				
	  				var shape = $(this).attr("shape").toLowerCase();
	  				var coords = $(this).attr("coords").split(',');
	  			  				
	  				var meta = $.extend({}, options, $(this).metadata());
	  				for (i=0; i < coords.length; i++) { 
	  					coords[i] = parseInt(coords[i]); 
	  				}
	  				context.beginPath();
	  				switch(shape){
	  					case "rect":{
	  						context.rect(coords[0], coords[1], coords[2] - coords[0], coords[3] - coords[1]);
	  						break;
	  					}
	  					case "poly":{
	  						context.moveTo(coords[0], coords[1]);
	  						for(i=2; i < coords.length; i+=2) {
	  							context.lineTo(coords[i], coords[i+1]);	  							
	  						}
	  						break;
	  					}	  		
	  					case "circle":{
	  						context.arc(coords[0], coords[1], coords[2], 0, Math.PI * 2, false);
	  						break;
	  					}	  					
	  				}
	  				context.closePath();
	  				context.fillStyle = css3color(meta.fillColor, meta.fillOpacity);
	  				context.fill();
	  			});
	  		});
	  	});
	}
  })
})(jQuery);