(function($) {
var create_canvas_for, add_shape_to, add_CSS_Sprite_to, shape_from_area, href_from_area, drawing, canvas_style, is_image_loaded;

create_canvas_for = function(img) {
	var c = Raphael('canvas', img.width, img.height);
	return c;};

add_CSS_Sprite_to = function(area, canvas, shape, coords, options) {
	if(options.rollover === true){
	var sprite = $('<div>').addClass(options.classSprites).css(
	{
	'background': 'url('+options.rollImage+') -'+coords[0]+'px -'+coords[1]+'px no-repeat',
	//'background-color': '#FFF',
	//'background-repeat': 'no-repeat',
	//'opacity': options.spritesMin,
	'position':'absolute',
	'width':coords[2] - coords[0],
	'height':coords[3] - coords[1],
	'top': coords[1],
	'left': coords[0]});
	//if($.browser.msie) { sprite.css('filter', 'Alpha(opacity='+(options.spritesMin*100)+')	'); }
	var ahref = href_from_area(area);
	sprite.addClass(ahref);
	$('#canvas').prepend(sprite);
	sprite.fadeTo(0,options.spritesMin);
	}
};

add_shape_to = function(canvas, shape, coords, options) {
	var i, context = canvas;//.getContext('2d');
	var border = options.strokeWidth;
	if(shape == 'rect') {
		drawing = context.rect(coords[0]-border, coords[1]-border, coords[2] - coords[0]+2*border, coords[3] - coords[1]+2,options.rounded);
	} else if(shape == 'poly') {
		context.path().moveTo(coords[0], coords[1]);
		for(i=2; i < coords.length; i+=2) {
			context.path().lineTo(coords[i], coords[i+1]);
		}
		context.path().andClose();
	} else if(shape == 'circ') {
		context.circle(coords[0], coords[1], coords[2]);
	}
	if(options.fill) {
		drawing.attr("fill", options.fillColor);
		drawing.attr("fill-opacity", options.fillOpacity);
	}
	if(options.stroke) {
		drawing.attr({stroke: options.strokeColor, 
					 'stroke-opacity': options.strokeOpacity, 
					 'stroke-width': options.strokeWidth
					 });
	}

	
	if(options.fade) {
		drawing.attr({opacity: options.strokeFadOpacity});
		drawing.animate({opacity: options.strokeOpacity},500);
	}
};

shape_from_area = function(area) {
var i, coords = area.getAttribute('coords').split(',');
for (i=0; i < coords.length; i++) { coords[i] = parseFloat(coords[i]); }
return [area.getAttribute('shape').toLowerCase().substr(0,4), coords];
};

href_from_area = function(area){
return area.getAttribute('href').split('.')[0];	
};

is_image_loaded = function(img) {
if(!img.complete) { return false; } // IE
if(typeof img.naturalWidth != "undefined" && img.naturalWidth === 0) { return false; } // Others
return true;
};

canvas_style = {
position: 'absolute',
left: 0,
top: 0,
padding: 0,
border: 0
};

$.fn.imgmap = function(opts) {
opts = $.extend({}, $.fn.imgmap.defaults, opts);

return this.each(function() {
	var img, wrap, options, map, canvas, allHigh, mover, mout;
	img = $(this);
	if(!is_image_loaded(this)) { return window.setTimeout(function() { img.imgmap(); }, 200); }
	options = $.metadata ? $.extend({}, opts, img.metadata()) : opts;
		
	map = $('map[name="'+img.attr('usemap').substr(1)+'"]');
	if(!(img.is('img') && img.attr('usemap') && map.size() > 0 && !img.hasClass('imgmaped'))) { return; }
	
    wrap = $('#canvas').css({ display:'block',background:'url('+this.src+')',position:'relative',padding:0,width:this.width,height:this.height});

	img.before(wrap).css('opacity', 0.3).css(canvas_style).remove();
	//$('#origImage').css('opacity', 0).css(canvas_style).remove();
	
	if($.browser.msie) { img.css('filter', 'Alpha(opacity=0.3)'); }
	wrap.append(img);
	

	canvas = create_canvas_for(this);
	
	allHigh = function(){
		var tmpOpacity = options.strokeOpacity;
		options.strokeOpacity = options.strokeFadOpacity;
		$(map).find('area[coords]').each( function(){
			var shape = shape_from_area(this);
			add_CSS_Sprite_to(this, canvas, shape[0], shape[1], $.metadata ? $.extend({}, options, $(this).metadata()) : options);
				add_shape_to(canvas, shape[0], shape[1], $.metadata ? $.extend({}, options, $(this).metadata()) : options);});
		options.strokeOpacity = tmpOpacity;
	};
		
	mover = function(e) {
		//e.preventDefault();
		var ahref = href_from_area(this);
		$('.'+ahref).stop().fadeTo(250,options.spritesMax);
		var shape = shape_from_area(this);
		add_shape_to(canvas, shape[0], shape[1], $.metadata ? $.extend({}, options, $(this).metadata()) : options);	
	};
	
	mout = function(e){
		var ahref = href_from_area(this);
		$('.'+ahref).stop().fadeTo(250,options.spritesMin);
		drawing.remove();
	};
		
	if(options.alwaysOn) {allHigh();}
	
	$(map).find('area[coords]').mouseover(mover).mouseout(mout);
});
};
$.fn.imgmap.defaults = {
fill: true,
fillColor: '#FFFFFF',
fillOpacity: 0.1,
rounded: 0,
stroke: true,
strokeColor: '#00ff00',
strokeOpacity: 1,
strokeWidth: 1,
fade: true,
strokeFadOpacity: 0.1,
alwaysOn: true,
rollover: false,
rollImage: '',
classSprites: 'sprites',
spritesMin: 0.3,
spritesMax: 0.99
};
})(jQuery);