diff -r 04e73ddebfa7 -r 68e91efc5a58 src/js/widgets/arrowWidget.js
--- a/src/js/widgets/arrowWidget.js	Mon Jan 02 12:14:35 2012 +0100
+++ b/src/js/widgets/arrowWidget.js	Mon Jan 02 12:41:13 2012 +0100
@@ -32,23 +32,29 @@
 
     var duration = +this._serializer.currentMedia().meta["dc:duration"] / 1000;
     var middle_time = (begin + end) / 2;
-    var percents = Math.floor((middle_time / duration) * 100);
+    var percents = middle_time / duration;
 
     // we need to apply a fix because the arrow has a certain length
     // it's half the length of the arrow (27 / 2). We need to convert
     // it in percents though.
     var totalWidth = this.selector.width();
-    var correction = ((27 / 2) / totalWidth) * 100;
-    var corrected_percents = percents - correction;
-
+    var pixels = percents * totalWidth;
+    var correction = (27 / 2);
+    var corrected_pixels = pixels - correction;
+    
+    /* make sure that the arrow is aligned with the pattern
+       of the widget under it */
+    if (corrected_pixels % 3 != 0)
+      corrected_pixels -= (corrected_pixels % 3 - 1);
+    
     /* don't move out of the screen */
-    if (corrected_percents <= 0)
-      corrected_percents = 0;
-
-    if (corrected_percents <= 5) {
+    if (corrected_pixels <= 0)
+      corrected_pixels = 0;
+    
+    if (corrected_pixels <= 15) {
       var left_edge_img_templ = IriSP.templToHTML("url('{{img_dir}}/left_edge_arrow.png')"); 
       this.selector.children(".Ldt-arrowWidget").css("background-image", left_edge_img_templ); 
-    } else if (corrected_percents >= 95) {
+    } else if (corrected_pixels >= totalWidth - 25) {
       var right_edge_img_templ = IriSP.templToHTML("url('{{img_dir}}/right_edge_arrow.png')"); 
       this.selector.children(".Ldt-arrowWidget").css("background-image", right_edge_img_templ);
     } else {
@@ -56,7 +62,7 @@
       this.selector.children(".Ldt-arrowWidget").css("background-image", img_templ);
     }
     
-    this.selector.children(".Ldt-arrowWidget").animate({"left" : corrected_percents + "%"});
+    this.selector.children(".Ldt-arrowWidget").animate({"left" : corrected_pixels + "px"});
 
     this._oldAnnotation = currentAnnotation;
   }