--- a/src/css/LdtPlayer.css	Mon Feb 13 13:32:34 2012 +0100
+++ b/src/css/LdtPlayer.css	Mon Feb 13 15:06:17 2012 +0100
@@ -299,7 +299,7 @@
 /* Arrow Widget */
 .Ldt-arrowWidget {
   position: relative;
-  background:url('imgs/arrow.png') no-repeat scroll 0 0 transparent ;
+
   height:16px;
   width:27px;
   margin-bottom: -3px;
@@ -307,6 +307,18 @@
   left: 0%;
 }
 
+.Ldt-arrowLeftEdge {
+  background:url('imgs/left_edge_arrow.png') no-repeat scroll 0 0 transparent ;
+}
+
+.Ldt-arrowCenter {
+  background:url('imgs/arrow.png') no-repeat scroll 0 0 transparent ;
+}
+
+.Ldt-arrowRightEdge {
+  background:url('imgs/right_edge_arrow.png') no-repeat scroll 0 0 transparent ;
+}
+
 .cleaner {
   clear:both;
 }

--- a/src/js/widgets/arrowWidget.js	Mon Feb 13 13:32:34 2012 +0100
+++ b/src/js/widgets/arrowWidget.js	Mon Feb 13 15:06:17 2012 +0100
@@ -64,15 +64,15 @@
     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); 
+    if (corrected_pixels <= 15) {      
+      this.selector.children(".Ldt-arrowWidget").removeClass("Ldt-arrowLeftEdge Ldt-arrowCenter Ldt-arrowRightEdge")
+                                                .addClass("Ldt-arrowLeftEdge"); 
     } 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);
+           this.selector.children(".Ldt-arrowWidget").removeClass("Ldt-arrowLeftEdge Ldt-arrowCenter Ldt-arrowRightEdge")
+                                                .addClass("Ldt-arrowRightEdge"); 
     } else {
-      var img_templ = IriSP.templToHTML("url('{{img_dir}}/arrow.png')"); 
-      this.selector.children(".Ldt-arrowWidget").css("background-image", img_templ);
+      this.selector.children(".Ldt-arrowWidget").removeClass("Ldt-arrowLeftEdge Ldt-arrowCenter Ldt-arrowRightEdge")
+                                                .addClass("Ldt-arrowCenter"); 
     }
     
     this.selector.children(".Ldt-arrowWidget").animate({"left" : corrected_pixels + "px"});

--- a/src/templates/arrowWidget.html	Mon Feb 13 13:32:34 2012 +0100
+++ b/src/templates/arrowWidget.html	Mon Feb 13 15:06:17 2012 +0100
@@ -1,2 +1,2 @@
-<div class='Ldt-arrowWidget'>
+<div class='Ldt-arrowWidget Ldt-arrowLeftEdge'>
 </div>