re-adding tooltips for graphs

public/site_assets/mmcFE/js/jquery.tooltip.visualize.js

@@ -0,0 +1,106 @@
+/**
+ * --------------------------------------------------------------------
+ * Tooltip plugin for the jQuery-Plugin "Visualize"
+ * Tolltip by Iraê Carvalho, irae@irae.pro.br, http://irae.pro.br/en/
+ * Copyright (c) 2010 Iraê Carvalho
+ * Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
+ * 	
+ * Visualize plugin by Scott Jehl, scott@filamentgroup.com
+ * Copyright (c) 2009 Filament Group, http://www.filamentgroup.com
+ *
+ * --------------------------------------------------------------------
+ */
+
+(function($){
+	$.visualizePlugins.push(function visualizeTooltip(options,tableData) {
+		//configuration
+		var o = $.extend({
+			tooltip: false,
+			tooltipalign: 'auto', // also available 'left' and 'right'
+			tooltipvalign: 'top',
+			tooltipclass: 'visualize-tooltip',
+			tooltiphtml: function(data){
+				if(options.multiHover) {
+					var html='';
+					for(var i=0;i<data.point.length;i++){
+						html += '<p>'+data.point[i].value+' - '+data.point[i].yLabels[0]+'</p>';
+					}
+					return html;					
+				} else {
+					return '<p>'+data.point.value+' - '+data.point.yLabels[0]+'</p>';
+				}
+			},
+			delay:false
+		},options);
+		
+		// don't go any further if we are not to show anything
+		if(!o.tooltip) {return;}
+		
+		var self = $(this),
+			canvasContain = self.next(),
+			scroller = canvasContain.find('.visualize-scroller'),
+			scrollerW = scroller.width(),
+			tracker = canvasContain.find('.visualize-interaction-tracker');
+		
+		// IE needs background color and opacity white or the tracker stays behind the tooltip
+		tracker.css({
+			backgroundColor:'white',
+			opacity:0,
+			zIndex:100
+		});
+		
+		var tooltip = $('<div class="'+o.tooltipclass+'"/>').css({
+				position:'absolute',
+				display:'none',
+				zIndex:90
+			})
+			.insertAfter(scroller.find('canvas'));
+
+		var usescroll = true;
+		
+		if( typeof(G_vmlCanvasManager) != 'undefined' ){
+			scroller.css({'position':'absolute'});
+			tracker.css({marginTop:'-'+(o.height)+'px'});
+		}
+		
+		
+		self.bind('vizualizeOver',function visualizeTooltipOver(e,data){
+			if(data.canvasContain.get(0) != canvasContain.get(0)) {return;} // for multiple graphs originated from same table
+			if(o.multiHover) {
+				var p = data.point[0].canvasCords;
+			} else {
+				var p = data.point.canvasCords;
+			}
+			var left,right,top,clasRem,clasAd,bottom,x=Math.round(p[0]+data.tableData.zeroLocX),y=Math.round(p[1]+data.tableData.zeroLocY);
+			if(o.tooltipalign == 'left' || ( o.tooltipalign=='auto' && x-scroller.scrollLeft()<=scrollerW/2 ) ) {
+				if($.browser.msie && ($.browser.version == 7 || $.browser.version == 6) ) {usescroll=false;} else {usescroll=true;}
+				left = (x-(usescroll?scroller.scrollLeft():0))+'px';
+				right = '';
+				clasAdd="tooltipleft";
+				clasRem="tooltipright";
+			} else {
+				if($.browser.msie && $.browser.version == 7) {usescroll=false;} else {usescroll=true;}
+				left = '';
+				right = (Math.abs(x-o.width)- (o.width-(usescroll?scroller.scrollLeft():0)-scrollerW) )+'px';
+				clasAdd="tooltipright";
+				clasRem="tooltipleft";
+			}
+			
+			tooltip
+				.addClass(clasAdd)
+				.removeClass(clasRem)
+				.html(o.tooltiphtml(data))
+				.css({
+					display:'block',
+					top: y+'px',
+					left: left,
+					right: right
+				});
+		});
+		
+		self.bind('vizualizeOut',function visualizeTooltipOut(e,data){
+			tooltip.css({display:'none'});
+		});
+		
+	});
+})(jQuery);

public/site_assets/mmcFE/js/jquery.visualize.js

@@ -13,47 +13,30 @@
 	return $(this).each(function(){
 		//configuration
 		var o = $.extend({
-                type: 'bar',
+			type: 'bar', //also available: area, pie, line
-                //also available: area, pie, line
+			width: $(this).width(), //height of canvas - defaults to table height
-                width: $(this).width(),
+			height: $(this).height(), //height of canvas - defaults to table height
-                //height of canvas - defaults to table height
+			appendTitle: true, //table caption text is added to chart
-                height: $(this).height(),
+			title: null, //grabs from table caption if null
-                //height of canvas - defaults to table height
+			appendKey: true, //color key is added to chart
-                appendTitle: true,
-                //table caption text is added to chart
-                title: null,
-                //grabs from table caption if null
-                appendKey: true,
-                //color key is added to chart
 			colors: ['#be1e2d','#666699','#92d5ea','#ee8310','#8d10ee','#5a3b16','#26a4ed','#f45a90','#e9e744'],
-                textColors: [],
+			textColors: [], //corresponds with colors array. null/undefined items will fall back to CSS
-                //corresponds with colors array. null/undefined items will fall back to CSS
+			parseDirection: 'x', //which direction to parse the table data
-                parseDirection: 'x',
+			pieMargin: 10, //pie charts only - spacing around pie
-                //which direction to parse the table data
-                pieMargin: 10,
-                //pie charts only - spacing around pie
 			pieLabelsAsPercent: true,
 			pieLabelPos: 'inside',
-                lineWeight: 4,
+			lineWeight: 4, //for line and area - stroke weight
-                //for line and area - stroke weight
+			lineDots: false, //also available: 'single', 'double'
-                lineDots: false,
+			dotInnerColor: "#ffffff", // only used for lineDots:'double'
-                //also available: 'single', 'double'
+			lineMargin: (options.lineDots?15:0), //for line and area - spacing around lines
-                dotInnerColor: "#ffffff",
-                // only used for lineDots:'double'
-                lineMargin: (options.lineDots ? 15 : 0),
-                //for line and area - spacing around lines
 			barGroupMargin: 10,
 			chartId: '',
-                xLabelParser: null,
+			xLabelParser: null, // function to parse labels as values
-                // function to parse labels as values
+			valueParser: null, // function to parse values. must return a Number
-                valueParser: null,
-                // function to parse values. must return a Number
 			chartId: '',
 			chartClass: '',
-                barMargin: 1,
+			barMargin: 1, //space around bars in bar chart (added to both sides of bar)
-                //space around bars in bar chart (added to both sides of bar)
+			yLabelInterval: 30, //distance between y labels
-                yLabelInterval: 30,
-                //distance between y labels
 			interaction: false // only used for lineDots != false -- triggers mouseover and mouseout on original table
 		},options);
 		
@@ -85,7 +68,8 @@
 						labels[j][i] = $(this).text()
 					})
 				});
-                    } else {
+			}
+			else {
 				self.find('tbody tr').each(function(i){
 					$(this).find('th').each(function(j) {
 						if(!labels[i]) {
@@ -105,9 +89,7 @@
 				dataGroups[i] = {};
 				dataGroups[i].points = [];
 				dataGroups[i].color = colors[i];
-                    if (textColors[i]) {
+				if(textColors[i]){ dataGroups[i].textColor = textColors[i]; }
-                        dataGroups[i].textColor = textColors[i];
-                    }
 				$(tr).find('td').each(function(j,td){
 					dataGroups[i].points.push( {
 						value: fnParse($(td).text()),
@@ -122,9 +104,7 @@
 				dataGroups[i] = {};
 				dataGroups[i].points = [];
 				dataGroups[i].color = colors[i];
-                    if (textColors[i]) {
+				if(textColors[i]){ dataGroups[i].textColor = textColors[i]; }
-                        dataGroups[i].textColor = textColors[i];
-                    }
 				self.find('tbody tr').each(function(j){
 					dataGroups[i].points.push( {
 						value:  $(this).find('td').eq(i).text()*1,
@@ -214,13 +194,11 @@
 		var yLabels = tableData.yLabels = [];
 
 		var numLabels = Math.floor((o.height - 2*o.lineMargin) / 30);
-
 		var loopInterval = tableData.totalYRange / numLabels; //fix provided from lab
 		loopInterval = Math.round(parseFloat(loopInterval)/5)*5;
 		loopInterval = Math.max(loopInterval, 1);
-
 		// var start = 
-            for (var j = Math.round(parseInt(tableData.bottomValue) / 5) * 5; j <= tableData.topValue - loopInterval; j += loopInterval) {
+		for(var j=Math.round(parseInt(tableData.bottomValue)/5)*5; j<=tableData.topValue+loopInterval; j+=loopInterval){
 			yLabels.push(j); 
 		}
 		if(yLabels[yLabels.length-1] > tableData.topValue+loopInterval) {
@@ -241,9 +219,7 @@
 			});
 		});
 		
-            try {
+		try{console.log(tableData);}catch(e){}
-                console.log(tableData);
-            } catch (e) {}
 		
 		var charts = {};
 		
@@ -263,24 +239,25 @@
 				if(drawHtml) {
 					canvasContain.addClass('visualize-pie');
 
-                        if (o.pieLabelPos == 'outside') {
+					if(o.pieLabelPos == 'outside'){ canvasContain.addClass('visualize-pie-outside'); }	
-                            canvasContain.addClass('visualize-pie-outside');
-                        }
 
-                        var toRad = function (integer) {
+					var toRad = function(integer){ return (Math.PI/180)*integer; };
-                                return (Math.PI / 180) * integer;
+					var labels = $('<ul class="visualize-labels"></ul>')
-                            };
+						.insertAfter(canvas);
-                        var labels = $('<ul class="visualize-labels"></ul>').insertAfter(canvas);
 				}
 
 
 				//draw the pie pieces
 				$.each(dataGroups, function(i,row){
 					var fraction = row.groupTotal / dataSum;
-                        if (fraction <= 0 || isNaN(fraction)) return;
+                    if (fraction <= 0 || isNaN(fraction))
+                        return;
 					ctx.beginPath();
 					ctx.moveTo(centerx, centery);
-                        ctx.arc(centerx, centery, radius, counter * Math.PI * 2 - Math.PI * 0.5, (counter + fraction) * Math.PI * 2 - Math.PI * 0.5, false);
+					ctx.arc(centerx, centery, radius, 
+						counter * Math.PI * 2 - Math.PI * 0.5,
+						(counter + fraction) * Math.PI * 2 - Math.PI * 0.5,
+		                false);
 			        ctx.lineTo(centerx, centery);
 			        ctx.closePath();
 			        ctx.fillStyle = dataGroups[i].color;
@@ -304,16 +281,20 @@
 
 				        if(percentage){
 				        	var labelval = (o.pieLabelsAsPercent) ? percentage + '%' : row.groupTotal;
-                                var labeltext = $('<span class="visualize-label">' + labelval + '</span>').css(leftRight, 0).css(topBottom, 0);
+					        var labeltext = $('<span class="visualize-label">' + labelval +'</span>')
-                                if (labeltext) var label = $('<li class="visualize-label-pos"></li>').appendTo(labels).css({
+					        	.css(leftRight, 0)
-                                    left: labelx,
+					        	.css(topBottom, 0);
-                                    top: labely
+					        	if(labeltext)
-                                }).append(labeltext);
+				        var label = $('<li class="visualize-label-pos"></li>')
-                                labeltext.css('font-size', radius / 8).css('margin-' + leftRight, -labeltext.width() / 2).css('margin-' + topBottom, -labeltext.outerHeight() / 2);
+				       			.appendTo(labels)
+				        		.css({left: labelx, top: labely})
+				        		.append(labeltext);	
+				        labeltext
+				        	.css('font-size', radius / 8)
+				        	.css('margin-'+leftRight, -labeltext.width()/2)
+				        	.css('margin-'+topBottom, -labeltext.outerHeight()/2);
 
-                                if (dataGroups[i].textColor) {
+				        if(dataGroups[i].textColor){ labeltext.css('color', dataGroups[i].textColor); }
-                                    labeltext.css('color', dataGroups[i].textColor);
-                                }
 
 				        }
 					}
@@ -341,27 +322,29 @@
 
 				setup: function(area){
 
-                        if (area) {
+					if(area){ canvasContain.addClass('visualize-area'); }
-                            canvasContain.addClass('visualize-area');
+					else{ canvasContain.addClass('visualize-line'); }
-                        } else {
-                            canvasContain.addClass('visualize-line');
-                        }
 
 					//write X labels
-                        var xlabelsUL = $('<ul class="visualize-labels-x"></ul>').width(canvas.width()).height(canvas.height()).insertBefore(canvas);
+					var xlabelsUL = $('<ul class="visualize-labels-x"></ul>')
+						.width(canvas.width())
+						.height(canvas.height())
+						.insertBefore(canvas);
 
 					if(!o.customXLabels) {
 						xInterval = (canvas.width() - 2*o.lineMargin) / (xLabels.length -1);
 						$.each(xLabels, function(i){ 
-                                var thisLi = $('<li><span>' + this + '</span></li>').prepend('<span class="line" />').css('left', o.lineMargin + xInterval * i).appendTo(xlabelsUL);
+							var thisLi = $('<li><span>'+this+'</span></li>')
+								.prepend('<span class="line" />')
+								.css('left', o.lineMargin + xInterval * i)
+								.appendTo(xlabelsUL);						
 							var label = thisLi.find('span:not(.line)');
 							var leftOffset = label.width()/-2;
-                                if (i == 0) {
+							if(i == 0){ leftOffset = 0; }
-                                    leftOffset = -20;
+							else if(i== xLabels.length-1){ leftOffset = -label.width(); }
-                                } else if (i == xLabels.length - 1) {
+							label
-                                    leftOffset = -label.width() + 20;
+								.css('margin-left', leftOffset)
-                                }
+								.addClass('label');
-                                label.css('margin-left', leftOffset).addClass('label');
 						});
 					} else {
 						o.customXLabels(tableData,xlabelsUL);
@@ -369,7 +352,9 @@
 
 					//write Y labels
 					var liBottom = (canvas.height() - 2*o.lineMargin) / (yLabels.length-1);
-                        var ylabelsUL = $('<ul class="visualize-labels-y"></ul>').width(canvas.width()).height(canvas.height())
+					var ylabelsUL = $('<ul class="visualize-labels-y"></ul>')
+						.width(canvas.width())
+						.height(canvas.height())
 						// .css('margin-top',-o.lineMargin)
 						.insertBefore(scroller);
 
@@ -379,7 +364,8 @@
 						if(posB >= o.height-1 || posB < 0) {
 							return;
 						}
-                            var thisLi = $('<li><span>' + value + '</span></li>').css('bottom', posB);
+						var thisLi = $('<li><span>'+value+'</span></li>')
+							.css('bottom', posB);
 						if(Math.abs(posB) < o.height-1) {
 							thisLi.prepend('<span class="line"  />');
 						}
@@ -388,13 +374,12 @@
 						var label = thisLi.find('span:not(.line)');
 						var topOffset = label.height()/-2;
 						if(!o.lineMargin) {
-                                if (i == 0) {
+							if(i == 0){ topOffset = -label.height(); }
-                                    topOffset = -label.height();
+							else if(i== yLabels.length-1){ topOffset = 0; }
-                                } else if (i == yLabels.length - 1) {
-                                    topOffset = 0;
 						}
-                            }
+						label
-                            label.css('margin-top', topOffset).addClass('label');
+							.css('margin-top', topOffset)
+							.addClass('label');
 					});
 					
 					//start from the bottom left
@@ -429,12 +414,7 @@
 						});
 					});
 					// fire custom event so we can enable rich interaction
-                        self.trigger('vizualizeBeforeDraw', {
+					self.trigger('vizualizeBeforeDraw',{options:o,table:self,canvasContain:canvasContain,tableData:tableData});
-                            options: o,
-                            table: self,
-                            canvasContain: canvasContain,
-                            tableData: tableData
-                        });
 					// draw lines and areas
 					$.each(dataGroups,function(h){
 						// Draw lines
@@ -453,16 +433,16 @@
 						// Draw fills
 						if(area){
 							var integer = this.points[this.points.length-1].canvasCords[0];
-                                if (isFinite(integer)) ctx.lineTo(integer, 0);
+							if (isFinite(integer))
+								ctx.lineTo(integer,0);
 							ctx.lineTo(o.lineMargin,0);
 							ctx.closePath();
 							ctx.fillStyle = this.color;
 							ctx.globalAlpha = .3;
 							ctx.fill();
 							ctx.globalAlpha = 1.0;
-                            } else {
-                                ctx.closePath();
 						}
+						else {ctx.closePath();}
 					});
 					// draw points
 					if(o.lineDots) {
@@ -516,10 +496,17 @@
 
 					var xInterval = canvas.width() / (bottomLabels.length - (horizontal ? 1 : 0));
 
-                        var xlabelsUL = $('<ul class="visualize-labels-x"></ul>').width(canvas.width()).height(canvas.height()).insertBefore(canvas);
+					var xlabelsUL = $('<ul class="visualize-labels-x"></ul>')
+						.width(canvas.width())
+						.height(canvas.height())
+						.insertBefore(canvas);
 
 					$.each(bottomLabels, function(i){
-                            var thisLi = $('<li><span class="label">' + this + '</span></li>').prepend('<span class="line" />').css('left', xInterval * i).width(xInterval).appendTo(xlabelsUL);
+						var thisLi = $('<li><span class="label">'+this+'</span></li>')
+							.prepend('<span class="line" />')
+							.css('left', xInterval * i)
+							.width(xInterval)
+							.appendTo(xlabelsUL);
 
 						if (horizontal)	{
 							var label = thisLi.find('span.label');
@@ -534,7 +521,10 @@
 					var leftLabels = horizontal ? xLabels : yLabels;
 					var liBottom = canvas.height() / (leftLabels.length - (horizontal ? 0 : 1));
 
-                        var ylabelsUL = $('<ul class="visualize-labels-y"></ul>').width(canvas.width()).height(canvas.height()).insertBefore(canvas);
+					var ylabelsUL = $('<ul class="visualize-labels-y"></ul>')
+						.width(canvas.width())
+						.height(canvas.height())
+						.insertBefore(canvas);
 
 					$.each(leftLabels, function(i){
 						var thisLi = $('<li><span>'+this+'</span></li>').prependTo(ylabelsUL);
@@ -557,10 +547,7 @@
 								'max-height': liBottom + 1,
 								'vertical-align': 'middle'
 							});
-                                thisLi.css({
+							thisLi.css({'top': liBottom * i, 'min-height': liBottom});
-                                    'top': liBottom * i,
-                                    'min-height': liBottom
-                                });
 
 							var r = label[0].getClientRects()[0];
 							if (r.bottom - r.top == liBottom) {
@@ -573,7 +560,8 @@
 								 * so we use r.bottom - r.top rather than r.height.)
 								 */
 								label.css('line-height', parseInt(liBottom) + 'px');
-                                } else {
+							}
+							else {
 								/*
 								 * If there is more than one line of text, then we shouldn't
 								 * touch the line height, but we should make sure the text
@@ -581,7 +569,8 @@
 								 */
 								label.css("overflow", "hidden");
 							}
-                            } else {
+						}
+						else {
 							thisLi.css('bottom', liBottom * i).prepend('<span class="line" />');
 							label.css('margin-top', -label.height() / 2)
 						}
@@ -593,18 +582,21 @@
 
 				draw: function() {
 					// Draw bars
+
 					if (horizontal) {
 						// for horizontal, keep the same code, but rotate everything 90 degrees
 						// clockwise.
 						ctx.rotate(Math.PI / 2);
-                        } else {
+					}
+					else {
 						// for vertical, translate to the top left corner.
 						ctx.translate(0, zeroLocY);
 					}
 
 					// Don't attempt to draw anything if all the values are zero,
 					// otherwise we will get weird exceptions from the canvas methods.
-                        if (totalYRange <= 0) return;
+					if (totalYRange <= 0)
+						return;
 
 					var yScale = (horizontal ? canvas.width() : canvas.height()) / totalYRange;
 					var barWidth = horizontal ? (canvas.height() / xLabels.length) : (canvas.width() / (bottomLabels.length));
@@ -623,6 +615,7 @@
 							if (points[i].value != 0) {
 								var xVal = (integer-o.barGroupMargin)+(h*linewidth)+linewidth/2;
 								xVal += o.barGroupMargin*2;
+
 								ctx.moveTo(xVal, 0);
 								ctx.lineTo(xVal, Math.round(-points[i].value*yScale));
 	                        }
@@ -640,7 +633,8 @@
 	
 		//create new canvas, set w&h attrs (not inline styles)
 		var canvasNode = document.createElement("canvas"); 
-            var canvas = $(canvasNode).attr({
+		var canvas = $(canvasNode)
+			.attr({
 				'height': o.height,
 				'width': o.width
 			});
@@ -649,13 +643,18 @@
 		var title = o.title || self.find('caption').text();
 		
 		//create canvas wrapper div, set inline w&h, append
-            var canvasContain = (container || $('<div ' + (o.chartId ? 'id="' + o.chartId + '" ' : '') + 'class="visualize ' + o.chartClass + '" role="img" aria-label="Chart representing data from the table: ' + title + '" />')).height(o.height).width(o.width);
+		var canvasContain = (container || $('<div '+(o.chartId?'id="'+o.chartId+'" ':'')+'class="visualize '+o.chartClass+'" role="img" aria-label="Chart representing data from the table: '+ title +'" />'))
+			.height(o.height)
+			.width(o.width);
 		
-            var scroller = $('<div class="visualize-scroller"></div>').appendTo(canvasContain).append(canvas);
+		var scroller = $('<div class="visualize-scroller"></div>')
+			.appendTo(canvasContain)
+			.append(canvas);
 
 		//title/key container
 		if(o.appendTitle || o.appendKey){
-                var infoContain = $('<div class="visualize-info"></div>').appendTo(canvasContain);
+			var infoContain = $('<div class="visualize-info"></div>')
+				.appendTo(canvasContain);
 		}
 		
 		//append title
@@ -668,7 +667,8 @@
 		if(o.appendKey){
 			var newKey = $('<ul class="visualize-key"></ul>');
 			$.each(yAllLabels, function(i,label){
-                    $('<li><span class="visualize-key-color" style="background: ' + dataGroups[i].color + '"></span><span class="visualize-key-label">' + label + '</span></li>').appendTo(newKey);
+				$('<li><span class="visualize-key-color" style="background: '+dataGroups[i].color+'"></span><span class="visualize-key-label">'+ label +'</span></li>')
+					.appendTo(newKey);
 			});
 			newKey.appendTo(infoContain);
 		};		
@@ -678,12 +678,14 @@
 			// sets the canvas to track interaction
 			// IE needs one div on top of the canvas since the VML shapes prevent mousemove from triggering correctly.
 			// Pie charts needs tracker because labels goes on top of the canvas and also messes up with mousemove
-                var tracker = $('<div class="visualize-interaction-tracker"/>').css({
+			var tracker = $('<div class="visualize-interaction-tracker"/>')
+				.css({
 					'height': o.height + 'px',
 					'width': o.width + 'px',
 					'position':'relative',
 					'z-index': 200
-                }).insertAfter(canvas);
+				})
+				.insertAfter(canvas);
 
 			var triggerInteraction = function(overOut,data) {
 				var data = $.extend({
@@ -693,9 +695,7 @@
 				self.trigger('vizualize'+overOut,data);
 			};
 
-                var over = false,
+			var over=false, last=false, started=false;
-                    last = false,
-                    started = false;
 			tracker.mousemove(function(e){
 				var x,y,x1,y1,data,dist,i,current,selector,zLabel,elem,color,minDist,found,ev=e.originalEvent;
 
@@ -721,9 +721,7 @@
 					y = found.canvasCords[1] + (o.type=="pie"?0:zeroLocY);
 					found = [found];
 					$.each(charts[o.type].interactionPoints,function(i,current){
-                            if (current == found[0]) {
+						if(current == found[0]) {return;}
-                                return;
-                            }
 						x1 = current.canvasCords[0] + zeroLocX;
 						y1 = current.canvasCords[1] + zeroLocY;
 						dist = Math.sqrt( (x1 - x)*(x1 - x) + (y1 - y)*(y1 - y) );
@@ -737,19 +735,13 @@
 				if(over != last) {
 					if(over) {
 						if(last) {
-                                triggerInteraction('Out', {
+							triggerInteraction('Out',{point:last});
-                                    point: last
-                                });
 						}
-                            triggerInteraction('Over', {
+						triggerInteraction('Over',{point:over});
-                                point: over
-                            });
 						last = over;
 					}
 					if(last && !over) {
-                            triggerInteraction('Out', {
+						triggerInteraction('Out',{point:last});
-                                point: last
-                            });
 						last=false;
 					}
 					started=true;
@@ -765,13 +757,8 @@
 		}
 		
 		//append new canvas to page
-            if (!container) {
+		if(!container){canvasContain.insertAfter(this); }
-                canvasContain.insertAfter(this);
+		if( typeof(G_vmlCanvasManager) != 'undefined' ){ G_vmlCanvasManager.init(); G_vmlCanvasManager.initElement(canvas[0]); }	
-            }
-            if (typeof (G_vmlCanvasManager) != 'undefined') {
-                G_vmlCanvasManager.init();
-                G_vmlCanvasManager.initElement(canvas[0]);
-            }
 		
 		//set up the drawing board
 		var ctx = canvas[0].getContext('2d');
@@ -804,3 +791,5 @@
 $.visualizePlugins = [];
 
 })(jQuery);
+
+