--- a/src/css/LdtPlayer.css	Mon Feb 13 12:54:10 2012 +0100
+++ b/src/css/LdtPlayer.css	Mon Feb 13 13:32:34 2012 +0100
@@ -164,12 +164,20 @@
 }
 
 .Ldt-CtrlPlay {
-  background:url('imgs/play_sprite.png') no-repeat transparent ;
+
   background-position: 0 0;
   width: 59px;
   height: 25px;
 }
 
+.Ldt-CtrlPlay-PlayState {
+  background:url('imgs/play_sprite.png') no-repeat transparent ;
+}
+
+.Ldt-CtrlPlay-PauseState {
+  background:url('imgs/pause_sprite.png') no-repeat transparent ;
+}
+
 .Ldt-CtrlPlay:hover {
   background-position: 0 -25px;
 }
@@ -253,7 +261,6 @@
 }
 
 .Ldt-CtrlSound {
-  background:url('imgs/sound_sprite.png') no-repeat scroll 0 0 transparent ;
   width: 33px;
   height: 25px;
   border-right: 1px solid #b6b8b8;
@@ -261,6 +268,14 @@
   border-left: none;
 }
 
+.Ldt-CtrlSound-SoundState {
+  background:url('imgs/sound_sprite.png') no-repeat scroll 0 0 transparent ;
+}
+
+.Ldt-CtrlSound-MuteState {
+  background:url('imgs/mute_sprite.png') no-repeat scroll 0 0 transparent ;
+}
+
 .Ldt-CtrlSound:hover {
   background-position: 0 -25px;
 }

--- a/src/js/widgets/playerWidget.js	Mon Feb 13 12:54:10 2012 +0100
+++ b/src/js/widgets/playerWidget.js	Mon Feb 13 13:32:34 2012 +0100
@@ -85,21 +85,13 @@
 IriSP.PlayerWidget.prototype.playButtonUpdater = function() {
   var status = this._Popcorn.media.paused;
   
-  if ( status == true ){        
+  if ( status == true ){
+    /* the background sprite is changed by adding/removing the correct classes */
     this.selector.find(".Ldt-CtrlPlay").attr("title", "Play");
-   
-    // we use templToHTML because it has some predefined
-    // vars like where to get the images
-    var templ = IriSP.templToHTML("url({{img_dir}}/play_sprite.png)");
-    this.selector.find(".Ldt-CtrlPlay").css("background-image", templ);
-
+    this.selector.find(".Ldt-CtrlPlay").removeClass("Ldt-CtrlPlay-PauseState").addClass("Ldt-CtrlPlay-PlayState");
   } else {
     this.selector.find(".Ldt-CtrlPlay").attr("title", "Pause");
-
-    // we use templToHTML because it has some predefined
-    // vars like where to get the images
-    var templ = IriSP.templToHTML("url({{img_dir}}/pause_sprite.png)");
-    this.selector.find(".Ldt-CtrlPlay").css("background-image", templ);
+    this.selector.find(".Ldt-CtrlPlay").removeClass("Ldt-CtrlPlay-PlayState").addClass("Ldt-CtrlPlay-PauseState");
   }  
 
   return;
@@ -129,19 +121,10 @@
   
   if ( status == true ){        
     this.selector.find(".Ldt-CtrlSound").attr("title", "Unmute");
-   
-    // we use templToHTML because it has some predefined
-    // vars like where to get the images
-    var templ = IriSP.templToHTML("url({{img_dir}}/sound_sprite.png)");
-    this.selector.find(".Ldt-CtrlSound").css("background-image", templ);
-
+    this.selector.find(".Ldt-CtrlSound").removeClass("Ldt-CtrlSound-MuteState").addClass("Ldt-CtrlSound-SoundState");    
   } else {
     this.selector.find(".Ldt-CtrlSound").attr("title", "Mute");
-
-    // we use templToHTML because it has some predefined
-    // vars like where to get the images
-    var templ = IriSP.templToHTML("url({{img_dir}}/mute_sprite.png)");
-    this.selector.find(".Ldt-CtrlSound").css("background-image", templ);
+    this.selector.find(".Ldt-CtrlSound").removeClass("Ldt-CtrlSound-SoundState").addClass("Ldt-CtrlSound-MuteState");
   }  
 
   return;

--- a/src/templates/player.html	Mon Feb 13 12:54:10 2012 +0100
+++ b/src/templates/player.html	Mon Feb 13 13:32:34 2012 +0100
@@ -1,7 +1,7 @@
 {{! template for the radio player }}
 <div class='Ldt-controler demo'>
 	<div class='Ldt-LeftPlayerControls'>
-    <div class='Ldt-button Ldt-CtrlPlay' title='Play/Pause'></div>
+    <div class='Ldt-button Ldt-CtrlPlay Ldt-CtrlPlay-PlayState' title='Play/Pause'></div>
 		<div class='Ldt-button Ldt-CtrlAnnotate' title='Annotate'></div>
     <div class='Ldt-button Ldt-CtrlSearch' title='Search'></div>
     <div class='LdtSearch'>
@@ -15,6 +15,6 @@
       <div class='Ldt-TimeSeparator'>/</div>
       <div class='Ldt-TotalTime' title='Total time'>00:00</div>
     </div>
-		<div class='Ldt-button Ldt-CtrlSound' title='Mute/Unmute'></div>
+		<div class='Ldt-button Ldt-CtrlSound Ldt-CtrlSound-MuteState' title='Mute/Unmute'></div>
 	</div>
 </div>