--- a/src/js/widgets/polemicWidget.js	Fri Nov 04 12:40:30 2011 +0100
+++ b/src/js/widgets/polemicWidget.js	Fri Nov 04 16:08:25 2011 +0100
@@ -31,6 +31,7 @@
 	this.PaperSlider;
 	this.heightOfChart;
 	this.tweets  = new Array();
+  this.svgElements = new Array();
   
 	// Make and define the Raphael area
 	this.paper = Raphael(document.getElementById(this._id), config.width, config.height);
@@ -267,6 +268,8 @@
                   }
                   
 									var e = this.paper.rect(x, y, frameSize - margin, TweetHeight /* height */).attr({stroke:"#00","stroke-width":0.1,  fill: colors[j]});	
+                  this.svgElements.push(e);
+                  
 									addEheight += TweetHeight;
 									
                   e.time= frames[i].mytweetsID[k].timeframe;
@@ -293,17 +296,17 @@
 				}
 
 			}		
-			// DRAW UI :: resize border and bgd
-			var heightOfChart 	= (this.yMax-(this.height- this.yMax));
-			var PaperBackground = this.paper.rect(0, this.yMax, this.width,heightOfChart).attr({fill:"#fff","stroke-width":0.1,opacity: 0.1});	
-			var PaperBorder 	= this.paper.rect(0, this.yMax,this.width,1).attr({fill:"#fff",stroke: "none",opacity: 1});	
+			// DRAW UI :: resize border and bgd			
+			this.paperBackground = this.paper.rect(0, this.yMax, this.width, this.heightmax).attr({fill:"#F8F8F8","stroke-width":0.1,opacity: 1});	
+			// var PaperBorder 	= this.paper.rect(0, this.yMax,this.width,1).attr({fill:"#fff",stroke: "none",opacity: 1});	
 	
       this.paperSlider 	= this.paper.rect(0, this.yMax, 0, this.heightmax).attr({fill:"#D4D5D5", stroke: "none", opacity: 1});				
 			// decalage 
 			tweetSelection = this.paper.rect(-100,-100,5,5).attr({fill:"#fff",stroke: "none",opacity: 1});	
-				
+			
+      
 			this.paperSlider.toBack();
-			PaperBackground.toBack();
+			this.paperBackground.toBack();
 		}
     
     this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater));

--- a/unittests/tests/polemicWidget.js	Fri Nov 04 12:40:30 2011 +0100
+++ b/unittests/tests/polemicWidget.js	Fri Nov 04 16:08:25 2011 +0100
@@ -46,6 +46,34 @@
     
     widget.draw();    
     equal(IriSP.jQuery("#widget-div").length, 1, "test if the div has been added correctly");        
-    equal(IriSP.jQuery("#PolemicDiv").children().length, 1, "test if children have been added correctly");
+    equal(IriSP.jQuery("#PolemicDiv svg").length, 1, "test if svg div has been added correctly");
+    
+    // select the second element of the svg. the second because the first is a rect which serves
+    // as a background.
+    var paperSlider = IriSP.jQuery("#PolemicDiv svg :nth-child(2)");
+    // querying svg with jquery is quite the piece of cake.
+    equal(paperSlider.attr("x").baseVal.value, 0, "test if the slider has been created correctly");            
   });
+  
+  test("test widget interactions", function() {
+  
+    /* We can't test interactions because of raphael */
+    // var tooltip = new IriSP.TooltipWidget(this.Popcorn, this.config.requires[0], this.ser);
+    // var widget = new IriSP.PolemicWidget(this.Popcorn, this.config, this.ser);
+    
+    // widget.TooltipWidget = tooltip;
+    // widget.draw();
+    
+    // var spy_callback = this.spy();    
+    // this.Popcorn.listen("timeupdate", spy_callback);
+    
+    // var random = Math.round(Math.random() * widget.svgElements.length) + 1;
+    // var e = widget.svgElements[random].node;
+    // IriSP.jQuery(e).click();
+    
+    // ok(spy_callback.called, "the currenttime was changed");  
+    
+  });
+  
+  
 }; 
\ No newline at end of file