diff --git a/airtime_mvc/application/layouts/scripts/layout.phtml b/airtime_mvc/application/layouts/scripts/layout.phtml
index 8a37a403f..b4836b324 100644
--- a/airtime_mvc/application/layouts/scripts/layout.phtml
+++ b/airtime_mvc/application/layouts/scripts/layout.phtml
@@ -57,6 +57,14 @@
 <script id="tmpl-pl-fades" type="text/template">
 <div class="waveform-fades">
   <div class="playlist-tracks"></div>
+  <div>
+    <span class="btn_play ui-state-default">Play</span>
+    <span class="btn_stop ui-state-default">Stop</span>
+  </div>
+  <div>
+    <span class="btn_select ui-state-default" data-state="select">Select</span>
+    <span class="btn_shift ui-state-default" data-state="shift">Shift</span>
+  </div>
 </div>
 </script>
 </body>
diff --git a/airtime_mvc/public/js/airtime/library/spl.js b/airtime_mvc/public/js/airtime/library/spl.js
index f4ceaff24..adb5dd3a4 100644
--- a/airtime_mvc/public/js/airtime/library/spl.js
+++ b/airtime_mvc/public/js/airtime/library/spl.js
@@ -1064,10 +1064,6 @@ var AIRTIME = (function(AIRTIME){
 	mod.showFadesWaveform = function(e) {
 		var $el = $(e.target),
 			$parent = $el.parent(),
-			trackEditor = new TrackEditor(),
-			audioControls = new AudioControls(),
-			trackElem,
-			config,
 			$html = $($("#tmpl-pl-fades").html()),
 			tracks = [
 			    {
@@ -1078,8 +1074,6 @@ var AIRTIME = (function(AIRTIME){
 				}
 			];
 		
-		//$el.replaceWith(html);
-		
 		$html.dialog({
             modal: true,
             title: "Fade Editor",
@@ -1090,38 +1084,34 @@ var AIRTIME = (function(AIRTIME){
             buttons: [
                 //{text: "Submit", click: function() {doSomething()}},
                 {text: "Cancel", click: function() {$(this).dialog("close");}}
-            ]
-        });
-		
-		config = new Config({
-			resolution: 15000,
-			state: "shift",
-	        mono: true,
-	        waveHeight: 80,
-	        container: $html[0],
-	        UITheme: "jQueryUI"
-	    });
-		
-		var playlistEditor = new PlaylistEditor();
-	    playlistEditor.setConfig(config);
-	    playlistEditor.init(tracks);
+            ],
+            open: function (event, ui) {
+            	
+            	var config = new Config({
+        			resolution: 15000,
+        			state: "shift",
+        	        mono: true,
+        	        waveHeight: 80,
+        	        container: $html[0],
+        	        UITheme: "jQueryUI"
+        	    });
+        		
+        		var playlistEditor = new PlaylistEditor();
+        	    playlistEditor.setConfig(config);
+        	    playlistEditor.init(tracks);
+            }
+        });		
 	};
 	
 	mod.showCuesWaveform = function(e) {
 		var $el = $(e.target),
 			$parent = $el.parent(),
 			uri = $parent.data("uri"),
-			trackEditor = new TrackEditor(),
-			audioControls = new AudioControls(),
-			trackElem,
-			config,
 			$html = $($("#tmpl-pl-cues").html()),
 			tracks = [{
 				src: uri
 			}];
 		
-		//$el.replaceWith(html);
-		
 		$html.dialog({
             modal: true,
             title: "Cue Editor",
@@ -1132,20 +1122,22 @@ var AIRTIME = (function(AIRTIME){
             buttons: [
                 //{text: "Submit", click: function() {doSomething()}},
                 {text: "Cancel", click: function() {$(this).dialog("close");}}
-            ]
-        });
-		
-		config = new Config({
-			resolution: 15000,
-	        mono: true,
-	        waveHeight: 80,
-	        container: $html[0],
-	        UITheme: "jQueryUI"
-	    });
-		
-		var playlistEditor = new PlaylistEditor();
-	    playlistEditor.setConfig(config);
-	    playlistEditor.init(tracks);
+            ],
+            open: function (event, ui) {
+            	
+            	var config = new Config({
+        			resolution: 15000,
+        	        mono: true,
+        	        waveHeight: 80,
+        	        container: $html[0],
+        	        UITheme: "jQueryUI"
+        	    });
+        		
+        		var playlistEditor = new PlaylistEditor();
+        	    playlistEditor.setConfig(config);
+        	    playlistEditor.init(tracks);	
+            }
+        });	
 	};
 	
 	mod.init = function() {
diff --git a/airtime_mvc/public/js/waveformplaylist/controls.js b/airtime_mvc/public/js/waveformplaylist/controls.js
index 0a19a0968..6fa468b35 100644
--- a/airtime_mvc/public/js/waveformplaylist/controls.js
+++ b/airtime_mvc/public/js/waveformplaylist/controls.js
@@ -202,10 +202,10 @@ AudioControls.prototype.init = function(config) {
     container = this.config.getContainer();
     state = this.config.getState();
 
-    tmpBtn = document.getElementById("btn_"+state);
+    tmpBtn = document.getElementsByClassName("btn_"+state)[0];
 
     if (tmpBtn) {
-        tmpBtn.className = this.classes["btn-state-active"];
+        this.activateButton(tmpBtn);
     }
 
     for (className in events) {
@@ -388,18 +388,27 @@ AudioControls.prototype.stopAudio = function() {
     this.fire('stopaudio', this);
 };
 
-AudioControls.prototype.setButtonState = function(el, classname) {
-    el && el.className = this.classes[classname];
+AudioControls.prototype.activateButton = function(el) {
+    if (el) {
+        el.classList.remove(this.classes["disabled"]);
+        el.classList.add(this.classes["active"]);
+    }
+};
+
+AudioControls.prototype.disableButton = function(el) {
+    if (el) {
+        el.classList.add(this.classes["disabled"]);
+        el.classList.remove(this.classes["active"]);
+    }
 };
 
 AudioControls.prototype.changeState = function(e) {
     var el = e.currentTarget,
+        prevEl = el.parentElement.getElementsByClassName('active')[0],
         state = el.dataset.state;
 
-    this.el.getElementsByClassName('active')[0].className = classes["btn-state-default"];
-
-    this.setButtonState("btn-state-default");
-    this.setButtonState(el, "btn-state-active");
+    this.disableButton(prevEl);
+    this.activateButton(el);
 
     this.config.setState(state);
     this.fire('changestate', this);