Merge remote-tracking branch 'origin/OpenOLAT_12.5' into OpenOLAT_13.2

src/main/java/org/olat/ims/qti21/resultexport/_content/qti21results.html

@@ -12,6 +12,7 @@
 	<script type="text/javascript" src='../../../js/jquery/qti/jquery.graphicGap.js'></script>
 	<script type="text/javascript" src='../../../js/jquery/qti/jquery.graphicOrder.js'></script>
 	<script type="text/javascript" src='../../../js/jquery/qti/jquery.hotspot.js'></script>
+	<script type="text/javascript" src='../../../js/jquery/qti/jquery.hotspot.responsive.js'></script>
 	<script type="text/javascript" src='../../../js/jquery/qti/jquery.match.js'></script>
 	<script type="text/javascript" src='../../../js/jquery/qti/jquery.match_dnd.js'></script>
 	<script type="text/javascript" src='../../../js/jquery/qti/jquery.order.js'></script>

src/main/java/org/olat/ims/qti21/ui/_content/assessment_results.html

@@ -562,10 +562,12 @@
 <script type="text/javascript">
 /* <![CDATA[ */ 
 	// execute after radial score rendering
-	setTimeout(function() {
-		window.focus();
-		window.print();
-	},110);
+	jQuery(function() {
+		setTimeout(function() {
+			window.focus();
+			window.print();
+		},1500);
+	});
 /* ]]> */
 </script>
 #end

src/main/java/org/olat/ims/qti21/ui/components/_content/hotspotInteraction.html

@@ -14,8 +14,8 @@
 	<div class="o_error badResponse">$r.translate("error.as.directed")</div>
 	#end
 	
-	<div id="${qtiContainerId}" #if($r.isFalse($isResponsive)) style="width:${interaction.object.width}px; height:${interaction.object.height}px" #end>
-		<img id="${qtiContainerId}_img" #if($r.isTrue($isResponsive)) class="o_hotspot_responsive" #end width="${interaction.object.width}" height="${interaction.object.height}" src="${r.convertLinkFull($interaction.object.data)}" usemap="#${qtiContainerId}_map"></img>
+	<div id="${qtiContainerId}" class="o_oo_hotcontainer" #if($r.isFalse($isResponsive)) style="width:${interaction.object.width}px; height:${interaction.object.height}px" #end>
+		<img id="${qtiContainerId}_img" #if($r.isTrue($isResponsive)) class="o_hotspot_responsive" #else width="${interaction.object.width}" height="${interaction.object.height}" #end src="${r.convertLinkFull($interaction.object.data)}" usemap="#${qtiContainerId}_map"></img>
 		<map name="${qtiContainerId}_map">
 		#foreach($hotspotChoice in $interaction.getHotspotChoices())
             <!-- Match group, label -->

src/main/java/org/olat/ims/qti21/ui/statistics/QTI21AssessmentItemStatisticsController.java

@@ -123,6 +123,7 @@ public class QTI21AssessmentItemStatisticsController extends BasicController {
 		itemBodyCtrl = new QTI21ItemBodyController(ureq, getWindowControl(), itemRef, resolvedAssessmentItem, resourceResult);
 		listenTo(itemBodyCtrl);
 		mainVC.put("question", itemBodyCtrl.getInitialComponent());
+		mainVC.contextPut("questionComponentId", itemBodyCtrl.getInteractionsComponentId());
 		mapperUri = itemBodyCtrl.getMapperUri();
 		
 		putInitialPanel(mainVC);

src/main/java/org/olat/ims/qti21/ui/statistics/QTI21ItemBodyController.java

@@ -67,6 +67,8 @@ public class QTI21ItemBodyController extends FormBasicController {
 	private final ItemSessionController itemSessionController;
 	private final ResolvedAssessmentItem resolvedAssessmentItem;
 	
+	private ItemBodyResultFormItem questionItem;
+	
 	@Autowired
 	private QTI21Service qtiService;
 	
@@ -92,10 +94,14 @@ public class QTI21ItemBodyController extends FormBasicController {
 	public String getMapperUri() {
 		return mapperUri;
 	}
+	
+	public String getInteractionsComponentId() {
+		return questionItem.getComponent().getDispatchID();
+	}
 
 	@Override
 	protected void initForm(FormItemContainer formLayout, Controller listener, UserRequest ureq) {
-		ItemBodyResultFormItem questionItem = new ItemBodyResultFormItem("question", resolvedAssessmentItem);
+		questionItem = new ItemBodyResultFormItem("question", resolvedAssessmentItem);
 		questionItem.setItemSessionState(itemSessionController.getItemSessionState());
 		questionItem.setCandidateSessionContext(new TerminatedStaticCandidateSessionContext(new InMemoryAssessmentTestSession()));
 		questionItem.setResourceLocator(inputResourceLocator);

src/main/java/org/olat/ims/qti21/ui/statistics/_content/print.html

@@ -10,6 +10,11 @@
 <script type='text/javascript'>
 /* <![CDATA[ */
     ## Execute deferred. Gives browser the time to finish the page rendering first before executing the print dialog. 
-	jQuery(function() {window.print();});
+	jQuery(function() {
+		setTimeout(function() {
+			window.focus();
+			window.print();
+		},1500);
+	});
 /* ]]> */
 </script>
\ No newline at end of file

src/main/java/org/olat/ims/qti21/ui/statistics/_content/statistics_item.html

+<div id="o_c$questionComponentId">
 #if($r.available("filter"))
 <div class="o_button_group o_button_group_right">
 	$r.render("filter")
@@ -53,3 +54,4 @@
 		$r.render($interactionId)
 	#end
 </div>
+</div>
\ No newline at end of file

src/main/webapp/static/js/jquery/maphilight/jquery.maphilight.js

 (function($) {
-	var has_VML, has_canvas, create_canvas_for, add_shape_to, clear_canvas, shape_from_area,
+	var create_canvas_for, add_shape_to, clear_canvas, shape_from_area,
 		canvas_style, hex_to_decimal, css3color, is_image_loaded, options_from_area;
 
-	has_canvas = !!document.createElement('canvas').getContext;
-
-	// VML: more complex
-	has_VML = (function() {
-		var a = document.createElement('div');
-		a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
-		var b = a.firstChild;
-		b.style.behavior = "url(#default#VML)";
-		return b ? typeof b.adj == "object": true;
-	})();
-
-	if(!(has_canvas || has_VML)) {
-		$.fn.maphilight = function() { return this; };
-		return;
-	}
+	hex_to_decimal = function(hex) {
+		return Math.max(0, Math.min(parseInt(hex, 16), 255));
+	};
 	
-	if(has_canvas) {
-		hex_to_decimal = function(hex) {
-			return Math.max(0, Math.min(parseInt(hex, 16), 255));
-		};
-		css3color = function(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+')';
-		};
-		create_canvas_for = function(img) {
-			var c = $('<canvas style="width:'+$(img).width()+'px;height:'+$(img).height()+'px;"></canvas>').get(0);
-			c.getContext("2d").clearRect(0, 0, $(img).width(), $(img).height());
-			return c;
-		};
-		var draw_shape = function(context, shape, coords, x_shift, y_shift) {
-			x_shift = x_shift || 0;
-			y_shift = y_shift || 0;
-			
-			context.beginPath();
-			if(shape == 'rect') {
-				// x, y, width, height
-				context.rect(coords[0] + x_shift, coords[1] + y_shift, coords[2] - coords[0], coords[3] - coords[1]);
-			} else if(shape == 'poly') {
-				context.moveTo(coords[0] + x_shift, coords[1] + y_shift);
-				for(i=2; i < coords.length; i+=2) {
-					context.lineTo(coords[i] + x_shift, coords[i+1] + y_shift);
-				}
-			} else if(shape == 'circ') {
-				// x, y, radius, startAngle, endAngle, anticlockwise
-				context.arc(coords[0] + x_shift, coords[1] + y_shift, coords[2], 0, Math.PI * 2, false);
+	css3color = function(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+')';
+	};
+	
+	create_canvas_for = function(img) {
+		var c = $('<canvas style="width:'+$(img).width()+'px;height:'+$(img).height()+'px;"></canvas>').get(0);
+		c.getContext("2d").clearRect(0, 0, $(img).width(), $(img).height());
+		return c;
+	};
+	
+	var draw_shape = function(context, shape, coords, x_shift, y_shift) {
+		x_shift = x_shift || 0;
+		y_shift = y_shift || 0;
+		
+		context.beginPath();
+		if(shape == 'rect') {
+			// x, y, width, height
+			context.rect(coords[0] + x_shift, coords[1] + y_shift, coords[2] - coords[0], coords[3] - coords[1]);
+		} else if(shape == 'poly') {
+			context.moveTo(coords[0] + x_shift, coords[1] + y_shift);
+			for(i=2; i < coords.length; i+=2) {
+				context.lineTo(coords[i] + x_shift, coords[i+1] + y_shift);
 			}
-			context.closePath();
+		} else if(shape == 'circ') {
+			// x, y, radius, startAngle, endAngle, anticlockwise
+			context.arc(coords[0] + x_shift, coords[1] + y_shift, coords[2], 0, Math.PI * 2, false);
 		}
-		add_shape_to = function(canvas, shape, coords, options, name) {
-			var i, context = canvas.getContext('2d');
-			
-			// Because I don't want to worry about setting things back to a base state
-			
-			// Shadow has to happen first, since it's on the bottom, and it does some clip /
-			// fill operations which would interfere with what comes next.
-			if(options.shadow) {
-				context.save();
-				if(options.shadowPosition == "inside") {
-					// Cause the following stroke to only apply to the inside of the path
-					draw_shape(context, shape, coords);
-					context.clip();
-				}
-				
-				// Redraw the shape shifted off the canvas massively so we can cast a shadow
-				// onto the canvas without having to worry about the stroke or fill (which
-				// cannot have 0 opacity or width, since they're what cast the shadow).
-				var x_shift = canvas.width * 100;
-				var y_shift = canvas.height * 100;
-				draw_shape(context, shape, coords, x_shift, y_shift);
-				
-				context.shadowOffsetX = options.shadowX - x_shift;
-				context.shadowOffsetY = options.shadowY - y_shift;
-				context.shadowBlur = options.shadowRadius;
-				context.shadowColor = css3color(options.shadowColor, options.shadowOpacity);
-				
-				// Now, work out where to cast the shadow from! It looks better if it's cast
-				// from a fill when it's an outside shadow or a stroke when it's an interior
-				// shadow. Allow the user to override this if they need to.
-				var shadowFrom = options.shadowFrom;
-				if (!shadowFrom) {
-					if (options.shadowPosition == 'outside') {
-						shadowFrom = 'fill';
-					} else {
-						shadowFrom = 'stroke';
-					}
-				}
-				if (shadowFrom == 'stroke') {
-					context.strokeStyle = "rgba(0,0,0,1)";
-					context.stroke();
-				} else if (shadowFrom == 'fill') {
-					context.fillStyle = "rgba(0,0,0,1)";
-					context.fill();
-				}
-				context.restore();
-				
-				// and now we clean up
-				if(options.shadowPosition == "outside") {
-					context.save();
-					// Clear out the center
-					draw_shape(context, shape, coords);
-					context.globalCompositeOperation = "destination-out";
-					context.fillStyle = "rgba(0,0,0,1);";
-					context.fill();
-					context.restore();
-				}
+		context.closePath();
+	}
+	add_shape_to = function(canvas, shape, coords, options, name) {
+		var context = canvas.getContext('2d');
+		
+		// Because I don't want to worry about setting things back to a base state
+		
+		// Shadow has to happen first, since it's on the bottom, and it does some clip /
+		// fill operations which would interfere with what comes next.
+		if(options.shadow) {
+			context.save();
+			if(options.shadowPosition == "inside") {
+				// Cause the following stroke to only apply to the inside of the path
+				draw_shape(context, shape, coords);
+				context.clip();
 			}
 			
-			context.save();
+			// Redraw the shape shifted off the canvas massively so we can cast a shadow
+			// onto the canvas without having to worry about the stroke or fill (which
+			// cannot have 0 opacity or width, since they're what cast the shadow).
+			var x_shift = canvas.width * 100;
+			var y_shift = canvas.height * 100;
+			draw_shape(context, shape, coords, x_shift, y_shift);
 			
-			draw_shape(context, shape, coords);
+			context.shadowOffsetX = options.shadowX - x_shift;
+			context.shadowOffsetY = options.shadowY - y_shift;
+			context.shadowBlur = options.shadowRadius;
+			context.shadowColor = css3color(options.shadowColor, options.shadowOpacity);
 			
-			// fill has to come after shadow, otherwise the shadow will be drawn over the fill,
-			// which mostly looks weird when the shadow has a high opacity
-			if(options.fill) {
-				context.fillStyle = css3color(options.fillColor, options.fillOpacity);
-				context.fill();
+			// Now, work out where to cast the shadow from! It looks better if it's cast
+			// from a fill when it's an outside shadow or a stroke when it's an interior
+			// shadow. Allow the user to override this if they need to.
+			var shadowFrom = options.shadowFrom;
+			if (!shadowFrom) {
+				if (options.shadowPosition == 'outside') {
+					shadowFrom = 'fill';
+				} else {
+					shadowFrom = 'stroke';
+				}
 			}
-			// Likewise, stroke has to come at the very end, or it'll wind up under bits of the
-			// shadow or the shadow-background if it's present.
-			if(options.stroke) {
-				context.strokeStyle = css3color(options.strokeColor, options.strokeOpacity);
-				context.lineWidth = options.strokeWidth;
+			if (shadowFrom == 'stroke') {
+				context.strokeStyle = "rgba(0,0,0,1)";
 				context.stroke();
+			} else if (shadowFrom == 'fill') {
+				context.fillStyle = "rgba(0,0,0,1)";
+				context.fill();
 			}
-			
 			context.restore();
 			
-			if(options.fade) {
-				$(canvas).css('opacity', 0).animate({opacity: 1}, 100);
-			}
-		};
-		clear_canvas = function(canvas) {
-			canvas.getContext('2d').clearRect(0, 0, canvas.width,canvas.height);
-		};
-	} else {   // ie executes this code
-		create_canvas_for = function(img) {
-			return $('<var style="zoom:1;overflow:hidden;display:block;width:'+img.width+'px;height:'+img.height+'px;"></var>').get(0);
-		};
-		add_shape_to = function(canvas, shape, coords, options, name) {
-			var fill, stroke, opacity, e;
-			for (var i in coords) { coords[i] = parseInt(coords[i], 10); }
-			fill = '<v:fill color="#'+options.fillColor+'" opacity="'+(options.fill ? options.fillOpacity : 0)+'" />';
-			stroke = (options.stroke ? 'strokeweight="'+options.strokeWidth+'" stroked="t" strokecolor="#'+options.strokeColor+'"' : 'stroked="f"');
-			opacity = '<v:stroke opacity="'+options.strokeOpacity+'"/>';
-			if(shape == 'rect') {
-				e = $('<v:rect name="'+name+'" filled="t" '+stroke+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+coords[0]+'px;top:'+coords[1]+'px;width:'+(coords[2] - coords[0])+'px;height:'+(coords[3] - coords[1])+'px;"></v:rect>');
-			} else if(shape == 'poly') {
-				e = $('<v:shape name="'+name+'" filled="t" '+stroke+' coordorigin="0,0" coordsize="'+canvas.width+','+canvas.height+'" path="m '+coords[0]+','+coords[1]+' l '+coords.join(',')+' x e" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:0px;left:0px;width:'+canvas.width+'px;height:'+canvas.height+'px;"></v:shape>');
-			} else if(shape == 'circ') {
-				e = $('<v:oval name="'+name+'" filled="t" '+stroke+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+(coords[0] - coords[2])+'px;top:'+(coords[1] - coords[2])+'px;width:'+(coords[2]*2)+'px;height:'+(coords[2]*2)+'px;"></v:oval>');
+			// and now we clean up
+			if(options.shadowPosition == "outside") {
+				context.save();
+				// Clear out the center
+				draw_shape(context, shape, coords);
+				context.globalCompositeOperation = "destination-out";
+				context.fillStyle = "rgba(0,0,0,1);";
+				context.fill();
+				context.restore();
 			}
-			e.get(0).innerHTML = fill+opacity;
-			$(canvas).append(e);
-		};
-		clear_canvas = function(canvas) {
-			// jquery1.8 + ie7 
-			var $html = $("<div>" + canvas.innerHTML + "</div>");
-			$html.children('[name=highlighted]').remove();
-			canvas.innerHTML = $html.html();
-		};
-	}
+		}
+		
+		context.save();
+		
+		draw_shape(context, shape, coords);
+		
+		// fill has to come after shadow, otherwise the shadow will be drawn over the fill,
+		// which mostly looks weird when the shadow has a high opacity
+		if(options.fill) {
+			context.fillStyle = css3color(options.fillColor, options.fillOpacity);
+			context.fill();
+		}
+		// Likewise, stroke has to come at the very end, or it'll wind up under bits of the
+		// shadow or the shadow-background if it's present.
+		if(options.stroke) {
+			context.strokeStyle = css3color(options.strokeColor, options.strokeOpacity);
+			context.lineWidth = options.strokeWidth;
+			context.stroke();
+		}
+		
+		context.restore();
+		
+		if(options.fade) {
+			$(canvas).css('opacity', 0).animate({opacity: 1}, 100);
+		}
+	};
+	clear_canvas = function(canvas) {
+		canvas.getContext('2d').clearRect(0, 0, canvas.width,canvas.height);
+	};
 	
 	shape_from_area = function(area) {
 		var i, coords = area.getAttribute('coords').split(',');
@@ -188,28 +147,13 @@
 		border: 0
 	};
 	
-	var ie_hax_done = false;
 	$.fn.maphilight = function(opts) {
 		opts = $.extend({}, $.fn.maphilight.defaults, opts);
 		
-		if(!has_canvas && !ie_hax_done) {
-			$(window).ready(function() {
-				document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
-				var style = document.createStyleSheet();
-				var shapes = ['shape','rect', 'oval', 'circ', 'fill', 'stroke', 'imagedata', 'group','textbox'];
-				$.each(shapes,
-					function() {
-						style.addRule('v\\:' + this, "behavior: url(#default#VML); antialias:true");
-					}
-				);
-			});
-			ie_hax_done = true;
-		}
-		
 		return this.each(function() {
 			var img, wrap, options, map, canvas, canvas_always, mouseover, highlighted_shape, usemap;
 			img = $(this);
-
+			
 			if(!is_image_loaded(this)) {
 				// If the image isn't fully loaded, this won't work right.  Try again later.
 				return window.setTimeout(function() {
@@ -241,16 +185,19 @@
 				wrapper.remove();
 				$(map).unbind('.maphilight').find('area[coords]').unbind('.maphilight');
 			}
+			
+			var imgWidth = $(img).width(),
+				imgHeight = $(img).height();
 
 			wrap = $('<div></div>').css({
 				display:'block',
 				"background-image":'url("'+this.src+'")',
-				"background-size": this.width + 'px ' + this.height + 'px',
+				"background-size": imgWidth + 'px ' + imgHeight + 'px',
 				position:'relative',
 				padding:0,
 				width:this.width,
 				height:this.height
-				});
+			});
 			
 			try {// try again
 				var imageSrc = this.src;
@@ -260,7 +207,7 @@
 			} catch(e) {
 				if(window.console) console.log(e);
 			}
-			
+
 			if(options.wrapClass) {
 				if(options.wrapClass === true) {
 					wrap.addClass($(this).attr('class'));
@@ -269,13 +216,12 @@
 				}
 			}
 			img.before(wrap).css('opacity', 0).css(canvas_style).remove();
-			if(has_VML) { img.css('filter', 'Alpha(opacity=0)'); }
 			wrap.append(img);
 			
 			canvas = create_canvas_for(this);
 			$(canvas).css(canvas_style);
-			canvas.height = this.height;
-			canvas.width = this.width;
+			canvas.height = imgHeight;
+			canvas.width = imgWidth;
 			
 			mouseover = function(e) {
 				var shape, area_options;
@@ -306,10 +252,6 @@
 							}
 						});
 					}
-					// workaround for IE7, IE8 not rendering the final rectangle in a group
-					if(!has_canvas) {
-						$(canvas).append('<v:rect></v:rect>');
-					}
 				}
 			}
 
@@ -319,14 +261,11 @@
 				if(canvas_always) {
 					clear_canvas(canvas_always);
 				}
-				if(!has_canvas) {
-					$(canvas).empty();
-				}
 				$(map).find('area[coords]').each(function() {
 					var shape, area_options;
 					area_options = options_from_area(this, options);
 					if(area_options.alwaysOn) {
-						if(!canvas_always && has_canvas) {
+						if(!canvas_always) {
 							canvas_always = create_canvas_for(img[0]);
 							$(canvas_always).css(canvas_style);
 							canvas_always.width = img[0].width;
@@ -335,11 +274,7 @@
 						}
 						area_options.fade = area_options.alwaysOnFade; // alwaysOn shouldn't fade in initially
 						shape = shape_from_area(this);
-						if (has_canvas) {
-							add_shape_to(canvas_always, shape[0], shape[1], area_options, "");
-						} else {
-							add_shape_to(canvas, shape[0], shape[1], area_options, "");
-						}
+						add_shape_to(canvas_always, shape[0], shape[1], area_options, "");
 					}
 				});
 			});

src/main/webapp/static/js/jquery/qti/jquery.hotspot.responsive.js

@@ -18,63 +18,102 @@
 		}, options );
 
 		var $img = this;
+		var loaded = null;
+		var windowWidth = 0;
 
 		var rwdImageMap = function() {
 			$img.each(function() {
 				if (typeof($(this).attr('usemap')) == 'undefined')
 					return;
 
-				var that = this,
-					$that = $(that);
-
-				// Since WebKit doesn't know the height until after the image has loaded, perform everything in an onload copy
-				$('<img />').on('load', function() {
-					var attrW = 'width',
-						attrH = 'height',
-						w = $that.attr(attrW),
-						h = $that.attr(attrH);
-
-					if (!w || !h) {
-						var temp = new Image();
-						temp.src = $that.attr('src');
-						if (!w)
-							w = temp.width;
-						if (!h)
-							h = temp.height;
-					}
-
-					var wPercent = $that.width()/100,
-						hPercent = $that.height()/100,
-						map = $that.attr('usemap').replace('#', ''),
-						c = 'coords';
-
-					$('map[name="' + map + '"]').find('area').each(function() {
+				var recalculateMap = function(that, $that) {
+					// Since WebKit doesn't know the height until after the image has loaded, perform everything in an onload copy
+					$('<img />').on('load', function() {
+						var attrW = 'width',
+							attrH = 'height';
+						
 						var $this = $(this);
-						if (!$this.data(c))
-							$this.data(c, $this.attr(c));
-
-						var coords = $this.data(c).split(','),
-							coordsPercent = new Array(coords.length);
-
-						for (var i = 0; i < coordsPercent.length; ++i) {
-							if (i % 2 === 0)
-								coordsPercent[i] = parseInt(((coords[i]/w)*100)*wPercent);
-							else
-								coordsPercent[i] = parseInt(((coords[i]/h)*100)*hPercent);
+						if (!$that.data(attrW)) // size are backuped
+							$that.data(attrW, $that.attr(attrW));
+						if (!$that.data(attrH)) // size are backuped
+							$that.data(attrH, $that.attr(attrH));
+						
+						var w = $that.data(attrW),
+							h = $that.data(attrH);
+	
+						if (!w || !h) {
+							var temp = new Image();
+							temp.src = $that.attr('src');
+							if (!w) {
+								w = temp.width;
+								$that.data(attrW, h);
+							}
+							if (!h) {
+								h = temp.height;
+								$that.data(attrH, h);
+							}
+						}
+	
+						var containerWidth = $that.closest(".o_oo_hotcontainer").width();
+						
+						var tw = $that.width(),
+							th = $that.height();
+						if(containerWidth < w) {
+							var ratio = h / w;
+							tw = containerWidth;
+							th = ((containerWidth * ratio)|0);
+							$that.width(tw);
+							$that.height(th);
 						}
-						$this.attr(c, coordsPercent.toString());
-					});
-					
-					$that.maphilight({
-						fillColor:  settings.fillColor,
-						fillOpacity: settings.fillOpacity,
-						strokeColor: settings.strokeColor,
-						strokeOpacity: settings.strokeOpacity,
-						strokeWidth: 3,
-						alwaysOn: true
-					});
 					
-				}).attr('src', $that.attr('src'));
+						var wPercent = tw/100,
+							hPercent = th/100,
+							map = $that.attr('usemap').replace('#', ''),
+							c = 'coords';
+	
+						$('map[name="' + map + '"]').find('area').each(function() {
+							var $this = $(this);
+							if (!$this.data(c)) // coords are backuped
+								$this.data(c, $this.attr(c));
+							
+							var coords = $this.data(c).split(','),
+								coordsPercent = new Array(coords.length);
+	
+							for (var i = 0; i < coordsPercent.length; ++i) {
+								if (i % 2 === 0)
+									coordsPercent[i] = parseInt(((coords[i]/w)*100)*wPercent);
+								else
+									coordsPercent[i] = parseInt(((coords[i]/h)*100)*hPercent);
+							}
+							$this.attr(c, coordsPercent.toString());
+						});
+						
+						loaded = true;
+						
+						$that.maphilight({
+							fillColor:  settings.fillColor,
+							fillOpacity: settings.fillOpacity,
+							strokeColor: settings.strokeColor,
+							strokeOpacity: settings.strokeOpacity,
+							strokeWidth: 3,
+							alwaysOn: true
+						});
+						
+					}).attr('src', $that.attr('src'));
+				};
+				
+				var that = this,
+					$that = $(that);
+				
+				if(loaded) {
+					if(windowWidth != window.innerWidth) {
+						recalculateMap(that, $that);
+						windowWidth = window.innerWidth;
+					}
+				} else {
+					windowWidth = window.innerWidth;
+					recalculateMap(that, $that);
+				}
 			});
 		};
 		$(window).resize(rwdImageMap).trigger('resize');