CC-3174: showbuilder/library refactoring

adding new context menu files, playlist is working except for editing fades.

airtime_mvc/application/controllers/PlaylistController.php

@@ -165,15 +165,18 @@ class PlaylistController extends Zend_Controller_Action
         $ids = $this->_getParam('ids');
         $ids = (!is_array($ids)) ? array($ids) : $ids;
     	$afterItem = $this->_getParam('afterItem', null);
-    	//$afterItem =  (!is_numeric($afterItem)) ? null : intval($afterItem);
+    	$addType = $this->_getParam('type', 'after');
+
+    	Logging::log("type is ".$addType);
 
         try {
             $pl = $this->getPlaylist();
-            $pl->addAudioClips($ids, $afterItem);
+            $pl->addAudioClips($ids, $afterItem, $addType);
         }
         catch (PlaylistNotFoundException $e) {
-            Logging::log("Playlist {$pl_id} not found");
+            Logging::log("Playlist not found");
             $this->changePlaylist(null);
+            $this->createFullResponse(null);
         }
         catch (Exception $e) {
             Logging::log("{$e->getFile()}");
@@ -189,15 +192,15 @@ class PlaylistController extends Zend_Controller_Action
         $ids = $this->_getParam('ids');
         $ids = (!is_array($ids)) ? array($ids) : $ids;
         $afterItem = $this->_getParam('afterItem', null);
-        //$afterItem =  (!is_numeric($afterItem)) ? null : intval($afterItem);
 
         try {
             $pl = $this->getPlaylist();
             $pl->moveAudioClips($ids, $afterItem);
         }
         catch (PlaylistNotFoundException $e) {
-            Logging::log("Playlist {$pl_id} not found");
+            Logging::log("Playlist not found");
             $this->changePlaylist(null);
+            $this->createFullResponse(null);
         }
         catch (Exception $e) {
             Logging::log("{$e->getFile()}");
@@ -218,8 +221,9 @@ class PlaylistController extends Zend_Controller_Action
             $pl->delAudioClips($ids);
         }
         catch (PlaylistNotFoundException $e) {
-            Logging::log("Playlist {$pl_id} not found");
+            Logging::log("Playlist not found");
             $this->changePlaylist(null);
+            $this->createFullResponse(null);
         }
         catch (Exception $e) {
             Logging::log("{$e->getFile()}");
@@ -232,17 +236,13 @@ class PlaylistController extends Zend_Controller_Action
 
     public function setCueAction()
     {
-		$pos = $this->_getParam('pos');
-		$pl = $this->getPlaylist();
-        if ($pl === false){
-            $this->view->playlist_error = true;
-            return false;
-        }
-
+		$id = $this->_getParam('id');
 		$cueIn = $this->_getParam('cueIn', null);
 		$cueOut = $this->_getParam('cueOut', null);
 
-		$response = $pl->changeClipLength($pos, $cueIn, $cueOut);
+        try {
+            $pl = $this->getPlaylist();
+            $response = $pl->changeClipLength($id, $cueIn, $cueOut);
 
             $this->view->response = $response;
 
@@ -250,6 +250,17 @@ class PlaylistController extends Zend_Controller_Action
                 $this->createUpdateResponse($pl);
             }
         }
+        catch (PlaylistNotFoundException $e) {
+            Logging::log("Playlist not found");
+            $this->changePlaylist(null);
+            $this->createFullResponse(null);
+        }
+        catch (Exception $e) {
+            Logging::log("{$e->getFile()}");
+            Logging::log("{$e->getLine()}");
+            Logging::log("{$e->getMessage()}");
+        }
+    }
 
     public function setFadeAction()
     {

airtime_mvc/application/models/Playlist.php

@@ -209,8 +209,10 @@ class Application_Model_Playlist {
      *     an array of audioclips to add to the playlist
      * @param int|null $p_afterItem
      *     item which to add the new items after in the playlist, null if added to the end.
+     * @param string (before|after) $addAfter
+     *      whether to add the clips before or after the selected item.
      */
-    public function addAudioClips($p_items, $p_afterItem=NULL)
+    public function addAudioClips($p_items, $p_afterItem=NULL, $addType = 'after')
     {
         $this->con->beginTransaction();
         $contentsToUpdate = array();
@@ -221,11 +223,14 @@ class Application_Model_Playlist {
                 Logging::log("Finding playlist content item {$p_afterItem}");
 
                 $afterItem = CcPlaylistcontentsQuery::create()->findPK($p_afterItem);
-                $pos = $afterItem->getDbPosition() + 1;
+
+                $index = $afterItem->getDbPosition();
+                Logging::log("index is {$index}");
+                $pos = ($addType == 'after') ? $index + 1 : $index;
 
                 $contentsToUpdate = CcPlaylistcontentsQuery::create()
                     ->filterByDbPlaylistId($this->id)
-                    ->filterByDbPosition($pos-1, Criteria::GREATER_THAN)
+                    ->filterByDbPosition($pos, Criteria::GREATER_EQUAL)
                     ->orderByDbPosition()
                     ->find($this->con);
 
@@ -234,8 +239,9 @@ class Application_Model_Playlist {
             }
             else {
 
-                $pos = $this->getSize();
-                Logging::log("Adding to end of playlist");
+                $pos = ($addType == 'after') ? $this->getSize() : 0;
+
+                Logging::log("Adding to playlist");
                 Logging::log("at position {$pos}");
             }
 
@@ -449,22 +455,6 @@ class Application_Model_Playlist {
         return array("fadeIn"=>$fadeIn, "fadeOut"=>$fadeOut);
     }
 
-	public function getCueInfo($pos) {
-
-		$row = CcPlaylistcontentsQuery::create()
-            ->joinWith(CcFilesPeer::OM_CLASS)
-            ->filterByDbPlaylistId($this->id)
-            ->filterByDbPosition($pos)
-            ->findOne();
-
-        $file = $row->getCcFiles();
-        $origLength = $file->getDbLength();
-        $cueIn = $row->getDBCuein();
-        $cueOut = $row->getDbCueout();
-
-		return array($cueIn, $cueOut, $origLength);
-	}
-
     /**
      * Change cueIn/cueOut values for playlist element
      *
@@ -476,7 +466,7 @@ class Application_Model_Playlist {
      * 		new value in ss.ssssss or extent format
      * @return boolean or pear error object
      */
-    public function changeClipLength($pos, $cueIn, $cueOut)
+    public function changeClipLength($id, $cueIn, $cueOut)
     {
         $errArray= array();
 		$con = Propel::getConnection(CcPlaylistPeer::DATABASE_NAME);
@@ -486,17 +476,16 @@ class Application_Model_Playlist {
             return $errArray;
         }
 
-        if(is_null($pos) || $pos < 0 || $pos >= $this->getNextPos()) {
-            $errArray["error"]="Invalid position.";
-            return $errArray;
-        }
-
         $row = CcPlaylistcontentsQuery::create()
             ->joinWith(CcFilesPeer::OM_CLASS)
-            ->filterByDbPlaylistId($this->id)
-            ->filterByDbPosition($pos)
+            ->filterByPrimaryKey($id)
             ->findOne();
 
+        if (is_null($row)) {
+            $errArray["error"]="Playlist item does not exist!.";
+            return $errArray;
+        }
+
         $oldCueIn = $row->getDBCuein();
         $oldCueOut = $row->getDbCueout();
         $fadeIn = $row->getDbFadein();

airtime_mvc/application/views/scripts/playlist/set-cue.phtml

@@ -1,11 +1,11 @@
 <dl id="spl_cue_editor" class="inline-list">
     <dt>Cue In:</dt>
-    <dd id="spl_cue_in_<?php echo $this->pos; ?>" class="spl_cue_in">
+    <dd id="spl_cue_in_<?php echo $this->id; ?>" class="spl_cue_in">
         <span contenteditable="true" class="spl_text_input"><?php echo $this->cueIn; ?></span>
     </dd>
     <dd class="edit-error"></dd>
     <dt>Cue Out:</dt>
-    <dd id="spl_cue_out_<?php echo $this->pos; ?>" class="spl_cue_out">
+    <dd id="spl_cue_out_<?php echo $this->id; ?>" class="spl_cue_out">
         <span contenteditable="true" class="spl_text_input"><?php echo $this->cueOut; ?></span>
     </dd>
     <dd class="edit-error"></dd>

airtime_mvc/application/views/scripts/playlist/update.phtml

@@ -30,7 +30,7 @@ if (count($items)) : ?>
 
         <div id="cues_<?php echo $i ?>" class="cue-edit clearfix" style="display: none">
             <?php echo $this->partial('playlist/set-cue.phtml', array(
-                'pos' => $i,
+                'id' => $item["id"],
                 'cueIn' => $item['cuein'],
                 'cueOut' => $item['cueout'],
                 'origLength' => $item["CcFiles"]['length'])); ?>

airtime_mvc/public/css/contextmenu/jquery.contextMenu.css

@@ -0,0 +1,134 @@
+/*
+ * jQuery contextMenu - Plugin for simple contextMenu handling
+ *
+ * Version: 1.5.2
+ *
+ * Authors: Rodney Rehm, Addy Osmani (patches for FF)
+ * Web: http://medialize.github.com/jQuery-contextMenu/
+ *
+ * Licensed under
+ *   MIT License http://www.opensource.org/licenses/mit-license
+ *   GPL v3 http://opensource.org/licenses/GPL-3.0
+ *
+ */
+
+.context-menu-list {
+    margin:0; 
+    padding:0;
+    
+    min-width: 120px;
+    max-width: 250px;
+    display: inline-block;
+    position: absolute;
+    list-style-type: none;
+    
+    border: 1px solid #DDD;
+    background: #EEE;
+    
+    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+       -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+        -ms-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+         -o-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+    
+    font-family: Verdana, Arial, Helvetica, sans-serif;
+    font-size: 11px;
+}
+
+.context-menu-item {
+    padding: 2px 2px 2px 24px;
+    background-color: #EEE;
+    position: relative;
+    -moz-user-select: -moz-none;
+}
+
+.context-menu-separator {
+    padding-bottom:0;
+    border-bottom: 1px solid #DDD;
+}
+
+.context-menu-item > label {
+    -moz-user-select: text;
+}
+
+.context-menu-item.hover {
+    cursor: pointer;
+    background-color: #39F;
+}
+
+.context-menu-item.disabled {
+    color: #666;
+}
+
+.context-menu-input.hover,
+.context-menu-item.disabled.hover {
+    cursor: default;
+    background-color: #EEE;
+}
+
+.context-menu-submenu:after {
+    content: ">";
+    color: #666;
+    position: absolute;
+    top: 0;
+    right: 3px;
+    z-index: 1;
+}
+
+/* icons
+    #protip:
+    In case you want to use sprites for icons (which I would suggest you do) have a look at
+    http://css-tricks.com/13224-pseudo-spriting/ to get an idea of how to implement 
+    .context-menu-item.icon:before {}
+ */
+.context-menu-item.icon { min-height: 18px; background-repeat: no-repeat; background-position: 4px 2px; }
+.context-menu-item.icon-edit { background-image: url(images/page_white_edit.png); }
+.context-menu-item.icon-cut { background-image: url(images/cut.png); }
+.context-menu-item.icon-copy { background-image: url(images/page_white_copy.png); }
+.context-menu-item.icon-paste { background-image: url(images/page_white_paste.png); }
+.context-menu-item.icon-delete { background-image: url(images/page_white_delete.png); }
+.context-menu-item.icon-quit { background-image: url(images/door.png); }
+
+/* vertically align inside labels */
+.context-menu-input > label > * { vertical-align: top; }
+
+/* position checkboxes and radios as icons */
+.context-menu-input > label > input[type="checkbox"],
+.context-menu-input > label > input[type="radio"] {
+    margin-left: -17px;
+}
+.context-menu-input > label > span {
+    margin-left: 5px;
+}
+
+.context-menu-input > label,
+.context-menu-input > label > input[type="text"],
+.context-menu-input > label > textarea,
+.context-menu-input > label > select {
+    display: block;
+    width: 100%;
+    
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+        -ms-box-sizing: border-box;
+         -o-box-sizing: border-box;
+            box-sizing: border-box;
+}
+
+.context-menu-input > label > textarea {
+    height: 100px;
+}
+.context-menu-item > .context-menu-list {
+    display: none;
+    /* re-positioned by js */
+    right: -5px;
+    top: 5px;
+}
+
+.context-menu-item.hover > .context-menu-list {
+    display: block;
+}
+
+.context-menu-accesskey {
+    text-decoration: underline;
+}

airtime_mvc/public/js/airtime/library/events/library_playlistbuilder.js

@@ -27,7 +27,7 @@ function fnLibraryTableDrawCallback() {
 		},
 		*/
 		cursor: 'pointer',
-		connectToSortable: '#side_playlist'
+		connectToSortable: '#spl_sortable'
 	});
 }
 

airtime_mvc/public/js/airtime/library/spl.js

@@ -1,8 +1,9 @@
 //--------------------------------------------------------------------------------------------------------------------------------
-//Side Playlist Functions
+// Playlist Functions
 //--------------------------------------------------------------------------------------------------------------------------------
 
 var AIRTIME = (function(AIRTIME){
+	
 	AIRTIME.playlist = {};
 	var mod = AIRTIME.playlist;
 	
@@ -21,105 +22,6 @@ var AIRTIME = (function(AIRTIME){
 		$(el).removeClass("ui-state-active");
 	}
 	
-	function redrawLib() {
-	    var dt;
-	    dt = $("#library_display").dataTable();
-	    dt.fnStandingRedraw();
-	}
-	
-	function setPlaylistContent(json) {
-
-		$('#spl_name > a')
-			.empty()
-			.append(json.name);
-		$('#spl_length')
-			.empty()
-			.append(json.length);
-	    $('#fieldset-metadate_change textarea')
-	        .empty()
-	        .val(json.description);
-		$('#spl_sortable')
-			.empty()
-			.append(json.html);
-
-		redrawLib();
-	}
-	
-	function getId() {
-		return parseInt($("#pl_id").val(), 10);
-	}
-	
-	function getModified() {
-		return parseInt($("#pl_lastMod").val(), 10);
-	}
-	
-	function openPlaylist(json) {
-		
-		$("#side_playlist")
-			.empty()
-			.append(json.html);
-	}
-	
-	mod.fnNew = function() {
-		var url;
-
-		stopAudioPreview();
-		url = '/Playlist/new';
-
-		$.post(url, {format: "json"}, function(json){
-			openPlaylist(json);
-			redrawLib();
-		});
-	}
-	
-	mod.fnDelete = function() {
-		var url, id, lastMod;
-		
-		stopAudioPreview();	
-		id = getId();
-		lastMod = getModified(); 
-		url = '/Playlist/delete';
-
-		$.post(url, 
-			{format: "json", ids: id, modified: lastMod}, 
-			function(json){
-				openPlaylist(json);
-				redrawLib();
-		});
-	}
-	
-	mod.fnAddItems = function(aItem, iAfter) {
-		
-		$.post("/playlist/add-items", 
-			{format: "json", "ids": aItem, "afterItem": iAfter}, 
-			function(json){
-				setPlaylistContent(json);
-			});
-	};
-	
-	mod.fnMoveItems = function(aIds, iAfter) {
-		
-		$.post("/playlist/move-items", 
-			{format: "json", "ids": aIds, "afterItem": iAfter}, 
-			function(json){
-				setPlaylistContent(json);
-			});
-	};
-	
-	mod.fnDeleteItems = function(aItems) {
-		
-		$.post("/playlist/delete-items", 
-			{format: "json", "ids": aItems}, 
-			function(json){
-				setPlaylistContent(json);
-			});
-	};
-	
-	return AIRTIME;
-	
-}(AIRTIME || {}));
-
-
 	function isTimeValid(time) {
 		var regExpr = new RegExp("^\\d{2}[:]\\d{2}[:]\\d{2}([.]\\d{1,6})?$");
 
@@ -146,10 +48,10 @@ function hideError(el) {
 	function changeCueIn(event) {
 	    event.stopPropagation();
 
-	var pos, url, cueIn, li, unqid;
+		var id, url, cueIn, li, unqid;
 
 		span = $(this);
-	pos = span.parent().attr("id").split("_").pop();
+		id = span.parent().attr("id").split("_").pop();
 		url = "/Playlist/set-cue";
 		cueIn = $.trim(span.text());
 		li = span.parent().parent().parent().parent();
@@ -160,14 +62,14 @@ function changeCueIn(event) {
 	        return;
 		}
 
-	$.post(url, {format: "json", cueIn: cueIn, pos: pos, type: event.type}, function(json){
+		$.post(url, {format: "json", cueIn: cueIn, id: id, type: event.type}, function(json){
 		   
 	        if(json.response !== undefined && json.response.error) {
 	            showError(span, json.response.error);
 				return;
 			}
 	        
-        setSPLContent(json);
+	        setPlaylistContent(json);
 	        
 	        li = $('#side_playlist li[unqid='+unqid+']');
 	        li.find(".cue-edit").toggle();
@@ -179,10 +81,10 @@ function changeCueIn(event) {
 	function changeCueOut(event) {
 	    event.stopPropagation();
 
-	var pos, url, cueOut, li, unqid;
+		var id, url, cueOut, li, unqid;
 
 		span = $(this);
-	pos = span.parent().attr("id").split("_").pop();
+		id = span.parent().attr("id").split("_").pop();
 		url = "/Playlist/set-cue";
 		cueOut = $.trim(span.text());
 		li = span.parent().parent().parent().parent();
@@ -193,14 +95,14 @@ function changeCueOut(event) {
 			return;
 		}
 
-	$.post(url, {format: "json", cueOut: cueOut, pos: pos}, function(json){
+		$.post(url, {format: "json", cueOut: cueOut, id: id}, function(json){
 		   
 			if(json.response !== undefined && json.response.error) {
 	            showError(span, json.response.error);
 				return;
 			}
 
-		setSPLContent(json);
+			setPlaylistContent(json);
 	        
 	        li = $('#side_playlist li[unqid='+unqid+']');
 	        li.find(".cue-edit").toggle();
@@ -233,7 +135,7 @@ function changeFadeIn(event) {
 				return;
 			}
 
-		setSPLContent(json);
+			setPlaylistContent(json);
 	        
 	        li = $('#side_playlist li[unqid='+unqid+']');
 	        li.find('.crossfade').toggle();
@@ -264,7 +166,7 @@ function changeFadeOut(event) {
 				return;
 			}
 
-		setSPLContent(json);
+			setPlaylistContent(json);
 	        
 	        li = $('#side_playlist li[unqid='+unqid+']');
 	        li.find('.crossfade').toggle();
@@ -335,163 +237,52 @@ function editName() {
 	    	            }
 	                    input.addClass('element_hidden');
 	                    nameElement.text(json.playlistName);
-                    redrawDataTablePage();
+	                    redrawLib();
 	    	        });
 	        	}
 	        })
 	        .focus();
 	}
 		
-
-
-$(document).ready(function() {
-	var playlist = $("#side_playlist"),
-		sortableConf;
-	
-	function setUpSPL() {
-		
-		/*
-	    $("#spl_crossfade").on("click", function(){
-
-	        if ($(this).hasClass("ui-state-active")) {
-	            $(this).removeClass("ui-state-active");
-	            $("#crossfade_main").hide();
+	function redrawLib() {
+	    var dt;
+	    dt = $("#library_display").dataTable();
+	    dt.fnStandingRedraw();
 	}
-	        else {
-	            $(this).addClass("ui-state-active");
 	
-	            var url = '/Playlist/set-playlist-fades';
+	function setPlaylistContent(json) {
 
-		        $.get(url, {format: "json"}, function(json){
-		            if(json.playlist_error == true){
-	                    alertPlaylistErrorAndReload();
-	                }
-	                $("#spl_fade_in_main").find("span")
+		$('#spl_name > a')
 			.empty()
-	                    .append(json.fadeIn);
-	                $("#spl_fade_out_main").find("span")
+			.append(json.name);
+		$('#spl_length')
 			.empty()
-	                    .append(json.fadeOut);
+			.append(json.length);
+	    $('#fieldset-metadate_change textarea')
+	        .empty()
+	        .val(json.description);
+		$('#spl_sortable')
+			.empty()
+			.append(json.html);
 
-	                $("#crossfade_main").show();
-	            });
-	        }
-	    });
-
-	    $("#playlist_name_display").on("click", editName);
-	    
-	    $("#fieldset-metadate_change > legend").on("click", function(){
-	        var descriptionElement = $(this).parent();
-
-	        if(descriptionElement.hasClass("closed")) {
-	            descriptionElement.removeClass("closed");
-	        }
-	        else {
-	            descriptionElement.addClass("closed");
-	        }
-	    });
-
-	    $("#description_save").on("click", function(){
-	        var textarea = $("#fieldset-metadate_change textarea"),
-	        	description = textarea.val(),
-	        	url;
-	        
-	        url = '/Playlist/set-playlist-description';
-
-	        $.post(url, {format: "json", description: description}, function(json){
-	            if(json.playlist_error == true){
-	                alertPlaylistErrorAndReload();
-	            }
-	            else{
-	                textarea.val(json.playlistDescription);
+		redrawLib();
 	}
 	
-	            $("#fieldset-metadate_change").addClass("closed");
-	            
-	            // update the "Last Modified" time for this playlist
-	            redrawDataTablePage();
-	        });
-	    });
-
-	    $("#description_cancel").on("click", function(){
-	        var textarea = $("#fieldset-metadate_change textarea"),
-	        	url;
-	        
-	        url = '/Playlist/set-playlist-description';
-
-	        $.post(url, {format: "json"}, function(json){
-	            if(json.playlist_error == true){
-	                alertPlaylistErrorAndReload();
-	            }
-	            else{
-	                textarea.val(json.playlistDescription);
+	function getId() {
+		return parseInt($("#pl_id").val(), 10);
 	}
 	
-	            $("#fieldset-metadate_change").addClass("closed");
-	        });
-	    });
-
-	    $("#spl_fade_in_main span:first").on("blur", function(event){
-	        event.stopPropagation();
-
-		    var url, fadeIn, span;
-
-		    span = $(this);
-		    url = "/Playlist/set-playlist-fades";
-		    fadeIn = $.trim(span.text());
-
-		    if (!isTimeValid(fadeIn)){
-	            showError(span, "please put in a time '00:00:00 (.000000)'");
-			    return;
+	function getModified() {
+		return parseInt($("#pl_lastMod").val(), 10);
 	}
 	
-		    $.post(url, {format: "json", fadeIn: fadeIn}, function(json){
-		        if(json.playlist_error == true){
-	                alertPlaylistErrorAndReload();
-	            }
-			    if(json.response.error) {
-				    return;
-			    }
+	function openPlaylist(json) {
 		
-	             hideError(span);
-		    });
-	    });
-
-	    $("#spl_fade_out_main span:first").on("blur", function(event){
-	        event.stopPropagation();
-
-		    var url, fadeIn, span;
-
-		    span = $(this);
-		    url = "/Playlist/set-playlist-fades";
-		    fadeOut = $.trim(span.text());
-
-		    if(!isTimeValid(fadeOut)){
-	            showError(span, "please put in a time '00:00:00 (.000000)'");
-			    return;
-		    }
-
-		    $.post(url, {format: "json", fadeOut: fadeOut}, function(json){
-		        if(json.playlist_error == true){
-	                alertPlaylistErrorAndReload();
-	            }
-			    if(json.response.error) {
-				    return;
-			    }
-
-	             hideError(span);
-		    });
-	    });
-
-	    $("#spl_fade_in_main span:first, #spl_fade_out_main span:first")
-	        .on("keydown", submitOnEnter);
-
-	    $("#crossfade_main > .ui-icon-closethick").on("click", function(){
-	        $("#spl_crossfade").removeClass("ui-state-active");
-	        $("#crossfade_main").hide();
-	    });
-	    */
+		$("#side_playlist")
+			.empty()
+			.append(json.html);
 		
+		mod.setUpPlaylist();
 	}
 	
 	function setPlaylistButtonEvents(el) {
@@ -513,13 +304,12 @@ $(document).ready(function() {
 					AIRTIME.playlist.fnDeleteItems([id]);
 				}});
 
-		/*
 		$(el).delegate(".spl_fade_control", 
 	    		{"click": openFadeEditor});
 		
 		$(el).delegate(".spl_cue", 
 				{"click": openCueEditor});
-		*/
+
 	}
 	
 	//sets events dynamically for the cue editor.
@@ -546,12 +336,153 @@ $(document).ready(function() {
 	    		"keydown": submitOnEnter});
 	}
 	
+	mod.setUpPlaylist = function() {
 		
+		var playlist = $("#side_playlist"),
+			sortableConf;
+
+	    playlist.find("#spl_crossfade").on("click", function(){
+
+	        if ($(this).hasClass("ui-state-active")) {
+	            $(this).removeClass("ui-state-active");
+	            playlist.find("#crossfade_main").hide();
+	        }
+	        else {
+	            $(this).addClass("ui-state-active");
+
+	            var url = '/Playlist/set-playlist-fades';
+
+		        $.get(url, {format: "json"}, function(json){
+		            if(json.playlist_error == true){
+	                    alertPlaylistErrorAndReload();
+	                }
+		            playlist.find("#spl_fade_in_main").find("span")
+	                    .empty()
+	                    .append(json.fadeIn);
+		            playlist.find("#spl_fade_out_main").find("span")
+	                    .empty()
+	                    .append(json.fadeOut);
+
+		            playlist.find("#crossfade_main").show();
+	            });
+	        }
+	    });
+
+		playlist.find("#playlist_name_display").on("click", editName);
+	    
+		playlist.find("#fieldset-metadate_change > legend").on("click", function(){
+	        var descriptionElement = $(this).parent();
+
+	        if(descriptionElement.hasClass("closed")) {
+	            descriptionElement.removeClass("closed");
+	        }
+	        else {
+	            descriptionElement.addClass("closed");
+	        }
+	    });
+
+		playlist.find("#description_save").on("click", function(){
+	        var textarea = playlist.find("#fieldset-metadate_change textarea"),
+	        	description = textarea.val(),
+	        	url;
+	        
+	        url = '/Playlist/set-playlist-description';
+
+	        $.post(url, {format: "json", description: description}, function(json){
+	            if(json.playlist_error == true){
+	                alertPlaylistErrorAndReload();
+	            }
+	            else{
+	                textarea.val(json.playlistDescription);
+	            }
+	            
+	            playlist.find("#fieldset-metadate_change").addClass("closed");
+	            redrawLib();
+	        });
+	    });
+
+		playlist.find("#description_cancel").on("click", function(){
+	        var textarea = playlist.find("#fieldset-metadate_change textarea"),
+	        	url;
+	        
+	        url = '/Playlist/set-playlist-description';
+
+	        $.post(url, {format: "json"}, function(json){
+	            if(json.playlist_error == true){
+	                alertPlaylistErrorAndReload();
+	            }
+	            else{
+	                textarea.val(json.playlistDescription);
+	            }
+	            
+	            playlist.find("#fieldset-metadate_change").addClass("closed");
+	        });
+	    });
+
+		playlist.find("#spl_fade_in_main span:first").on("blur", function(event){
+	        event.stopPropagation();
+
+		    var url, fadeIn, span;
+
+		    span = $(this);
+		    url = "/Playlist/set-playlist-fades";
+		    fadeIn = $.trim(span.text());
+
+		    if (!isTimeValid(fadeIn)){
+	            showError(span, "please put in a time '00:00:00 (.000000)'");
+			    return;
+		    }
+
+		    $.post(url, {format: "json", fadeIn: fadeIn}, function(json){
+		        if(json.playlist_error == true){
+	                alertPlaylistErrorAndReload();
+	            }
+			    if(json.response.error) {
+				    return;
+			    }
+
+	             hideError(span);
+		    });
+	    });
+
+		playlist.find("#spl_fade_out_main span:first").on("blur", function(event){
+	        event.stopPropagation();
+
+		    var url, fadeIn, span;
+
+		    span = $(this);
+		    url = "/Playlist/set-playlist-fades";
+		    fadeOut = $.trim(span.text());
+
+		    if(!isTimeValid(fadeOut)){
+	            showError(span, "please put in a time '00:00:00 (.000000)'");
+			    return;
+		    }
+
+		    $.post(url, {format: "json", fadeOut: fadeOut}, function(json){
+		        if(json.playlist_error == true){
+	                alertPlaylistErrorAndReload();
+	            }
+			    if(json.response.error) {
+				    return;
+			    }
+
+	             hideError(span);
+		    });
+	    });
+
+		playlist.find("#spl_fade_in_main span:first, #spl_fade_out_main span:first")
+	        .on("keydown", submitOnEnter);
+
+		playlist.find("#crossfade_main > .ui-icon-closethick").on("click", function(){
+			playlist.find("#spl_crossfade").removeClass("ui-state-active");
+			playlist.find("#crossfade_main").hide();
+	    });
 	    
 	    setPlaylistButtonEvents(playlist);
 		setPlaylistEntryEvents(playlist);
-	//setCueEvents(playlist);
-	//setFadeEvents(playlist);
+		setCueEvents(playlist);
+		setFadeEvents(playlist);
 		
 		sortableConf = (function(){
 			var origRow,
@@ -565,21 +496,24 @@ $(document).ready(function() {
 			fnUpdate = function(event, ui) {
 				var prev,
 					aItem = [],
-				iAfter;
+					iAfter,
+					sAddType;
 				
 				prev = ui.item.prev();
 				if (prev.hasClass("spl_empty") || prev.length === 0) {
 					iAfter = undefined;
+					sAddType = 'before';
 				}
 				else {
 					iAfter = parseInt(prev.attr("id").split("_").pop(), 10);
+					sAddType = 'after';
 				}
 				
 				//item was dragged in from library datatable
 				if (origRow !== undefined) {
 					aItem.push(origRow.data("aData").id);
 					origRow = undefined;
-				AIRTIME.playlist.fnAddItems(aItem, iAfter);
+					AIRTIME.playlist.fnAddItems(aItem, iAfter, sAddType);
 				}
 				//item was reordered.
 				else {
@@ -604,5 +538,74 @@ $(document).ready(function() {
 			};
 		}());
 
-    playlist.sortable(sortableConf);
+	    playlist.find("#spl_sortable").sortable(sortableConf);
+	}
+	
+	mod.fnNew = function() {
+		var url;
+
+		stopAudioPreview();
+		url = '/Playlist/new';
+
+		$.post(url, {format: "json"}, function(json){
+			openPlaylist(json);
+			redrawLib();
+		});
+	}
+	
+	mod.fnEdit = function() {
+		
+	}
+	
+	mod.fnDelete = function() {
+		var url, id, lastMod;
+		
+		stopAudioPreview();	
+		id = getId();
+		lastMod = getModified(); 
+		url = '/Playlist/delete';
+
+		$.post(url, 
+			{format: "json", ids: id, modified: lastMod}, 
+			function(json){
+				openPlaylist(json);
+				redrawLib();
+		});
+	}
+	
+	mod.fnAddItems = function(aItems, iAfter, sAddType) {
+		
+		$.post("/playlist/add-items", 
+			{format: "json", "ids": aItems, "afterItem": iAfter, "type": sAddType}, 
+			function(json){
+				setPlaylistContent(json);
+			});
+	};
+	
+	mod.fnMoveItems = function(aIds, iAfter) {
+		
+		$.post("/playlist/move-items", 
+			{format: "json", "ids": aIds, "afterItem": iAfter}, 
+			function(json){
+				setPlaylistContent(json);
+			});
+	};
+	
+	mod.fnDeleteItems = function(aItems) {
+		
+		$.post("/playlist/delete-items", 
+			{format: "json", "ids": aItems}, 
+			function(json){
+				setPlaylistContent(json);
+			});
+	};
+	
+	return AIRTIME;
+	
+}(AIRTIME || {}));
+
+
+$(document).ready(function() {
+	
+	AIRTIME.playlist.setUpPlaylist();
 });