set up fade buttons with some style. simple javascript to highlight the active choice for either editing fades or cues.

application/layouts/scripts/library.phtml

@@ -14,7 +14,7 @@
 <div id="library_quick_search"><?php echo $this->layout()->quick_search ?></div>
 <div id="library_content"><?php echo $this->layout()->library ?></div>
 
-<div id="side_playlist"><?php echo $this->layout()->spl ?></div>
+<div id="side_playlist" class="ui-widget-content"><?php echo $this->layout()->spl ?></div>
  
 </body>
 </html>

application/views/scripts/playlist/sidebarcontent.phtml

@@ -1,6 +1,9 @@
-<li class="spl_row" id="spl_<?php echo $this->partialCounter-1 ?>">
+<li class="ui-state-default" id="spl_<?php echo $this->partialCounter-1 ?>">
     <span class="spl_title"><?php echo $this->CcFiles['track_title'] ?></span>
     <span class="spl_playlength"><?php echo $this->cliplength ?></span>
 	<span class="ui-icon ui-icon-close"></span>
 	<span class="spl_artist"><?php echo $this->CcFiles['artist_name'] ?></span>
+	<?php if($this->partialCounter-1 > 0): ?>
+	<div id="fade_<?php echo $this->partialCounter-1 ?>" class="spl_fade_control ui-state-default ui-corner-all">Fade</div>
+	<?php endif; ?>
 </li>

public/css/playlist_builder.css

@@ -2,7 +2,7 @@
 	width: 500px;
 }
 
-#side_playlist div, #side_playlist span, #side_playlist ul, #side_playlist li {
+#side_playlist, #side_playlist div, #side_playlist span, #side_playlist ul, #side_playlist li {
 	float: left;
 }
 
@@ -18,3 +18,30 @@
 	height: 100px;
 }
 
+#spl_sortable {
+	list-style: none;
+	padding:0;
+}
+
+.spl_title {
+	display: inline-block;
+	width: 325px;
+}
+
+.spl_playlength {
+	display: inline-block;
+	width: 150px;
+}
+
+.spl_artist {
+	font-size: 90%;
+	width: 300px;
+}
+
+.spl_fade_control {
+	position: relative;
+	margin-top: -30px;
+	margin-left: -50px;
+	z-index: 2;
+}
+

public/js/airtime/library/spl.js

@@ -2,6 +2,26 @@
 //Side Playlist Functions
 //--------------------------------------------------------------------------------------------------------------------------------
 
+function highlightActive(el) {
+	$("#spl_sortable")
+		.find(".ui-state-active")
+		.removeClass("ui-state-active");
+
+	$(el).addClass("ui-state-active");
+}
+
+function openFadeEditor(event) {
+	event.stopPropagation();
+
+	highlightActive(this);
+}
+
+function openCueEditor(event) {
+	event.stopPropagation();
+
+	highlightActive(this);
+}
+
 function setSPLContent(json) {
 	
 	if(json.message) {  
@@ -17,6 +37,8 @@ function setSPLContent(json) {
 		.append(json.html);	
 
 	$(".ui-icon-close").click(deleteSPLItem);
+	$(".spl_fade_control").click(openFadeEditor);
+	$("#spl_sortable li").click(openCueEditor);
 }
 
 function addSPLItem(event, ui){
@@ -36,9 +58,11 @@ function addSPLItem(event, ui){
 	$.post(url, setSPLContent);
 }
 
-function deleteSPLItem(){
+function deleteSPLItem(event){
 	var url, pos;
 
+	event.stopPropagation();
+
 	pos = $(this).parent().attr("id").split("_").pop();
 
 	url = '/Playlist/delete-item/format/json';
@@ -67,6 +91,10 @@ function noOpenPL(json) {
 	$("#side_playlist")
 		.empty()
 		.append(json.html);
+
+	$("#spl_new")
+		.button()
+		.click(newSPL);
 }
 
 function closeSPL() {
@@ -86,6 +114,7 @@ function newSPL() {
 		var submit;
 
 		submit = $('<span>Submit</span>')
+			.button()
 			.click(function(){
 				var url, data;
 
@@ -130,10 +159,21 @@ function setUpSPL() {
 	$("#spl_sortable").sortable();
     $("#spl_sortable" ).bind( "sortstop", moveSPLItem);
 	$("#spl_remove_selected").click(deleteSPLItem);
-	$("#spl_new").click(newSPL);
-	$("#spl_close").click(closeSPL);
-	$("#spl_delete").click(deleteSPL);
+	$("#spl_new")
+		.button()
+		.click(newSPL);
+
+	$("#spl_close")
+		.button()
+		.click(closeSPL);
+
+	$("#spl_delete")
+		.button()
+		.click(deleteSPL);
+
 	$(".ui-icon-close").click(deleteSPLItem);
+	$(".spl_fade_control").click(openFadeEditor);
+	$("#spl_sortable li").click(openCueEditor);
 
 	$("#spl_sortable").droppable();
 	$("#spl_sortable" ).bind( "drop", addSPLItem);