diff --git a/airtime_mvc/application/controllers/LibraryController.php b/airtime_mvc/application/controllers/LibraryController.php
index 70bfd2d7b..182979c03 100644
--- a/airtime_mvc/application/controllers/LibraryController.php
+++ b/airtime_mvc/application/controllers/LibraryController.php
@@ -11,7 +11,6 @@ class LibraryController extends Zend_Controller_Action
     {
         $ajaxContext = $this->_helper->getHelper('AjaxContext');
         $ajaxContext->addActionContext('contents-feed', 'json')
-                    ->addActionContext('contents-feed-test', 'json')
                     ->addActionContext('delete', 'json')
                     ->addActionContext('duplicate', 'json')
                     ->addActionContext('delete-group', 'json')
@@ -424,19 +423,6 @@ class LibraryController extends Zend_Controller_Action
         $this->view->files = SecurityHelper::htmlescape_recursive($r["aaData"]);
     }
 
-    public function contentsFeedTestAction()
-    {
-        $params = $this->getRequest()->getParams();
-
-        # terrible name for the method below. it does not only search files.
-        $r = Application_Model_StoredFile::searchLibraryFiles($params);
-
-        $this->view->sEcho = $r["sEcho"];
-        $this->view->iTotalDisplayRecords = $r["iTotalDisplayRecords"];
-        $this->view->iTotalRecords = $r["iTotalRecords"];
-        $this->view->files = SecurityHelper::htmlescape_recursive($r["aaData"]);
-    }
-
     public function editFileMdAction()
     {
         $user = Application_Model_User::getCurrentUser();
diff --git a/airtime_mvc/application/controllers/ShowBuilderController.php b/airtime_mvc/application/controllers/ShowBuilderController.php
index c5cd87818..67c58c512 100644
--- a/airtime_mvc/application/controllers/ShowBuilderController.php
+++ b/airtime_mvc/application/controllers/ShowBuilderController.php
@@ -30,7 +30,7 @@ class ShowBuilderController extends Zend_Controller_Action {
         $this->view->headLink()->appendStylesheet($baseUrl.'css/datatables/css/ColVis.css?'.$CC_CONFIG['airtime_version']);
         $this->view->headLink()->appendStylesheet($baseUrl.'css/datatables/css/ColReorder.css?'.$CC_CONFIG['airtime_version']);
         $this->view->headScript()->appendFile($baseUrl.'js/airtime/library/library-test.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
-        $this->view->headScript()->appendFile($baseUrl.'js/airtime/library/events/library_showbuilder.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
+        $this->view->headScript()->appendFile($baseUrl.'js/airtime/library/events/library_showbuilder_test.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
 
         // PLUPLOAD
         $this->view->headScript()->appendFile($baseUrl.'js/libs/dropzone.min.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
@@ -40,8 +40,14 @@ class ShowBuilderController extends Zend_Controller_Action {
         $this->view->headScript()->appendFile($baseUrl.'js/airtime/showbuilder/builder_test.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'js/airtime/showbuilder/main_builder_test.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
 
+        // MEDIA BUILDER
+        $this->view->headScript()->appendFile($baseUrl.'js/airtime/library/spl-test.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');
+        $this->view->headScript()->appendFile($baseUrl.'js/airtime/playlist/smart_blockbuilder.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');
+        $this->view->headLink()->appendStylesheet($baseUrl.'css/playlist_builder.css?'.$CC_CONFIG['airtime_version']);
+
         $this->view->headLink()->appendStylesheet($baseUrl.'css/jquery.ui.timepicker.css?'.$CC_CONFIG['airtime_version']);
         $this->view->headLink()->appendStylesheet($baseUrl.'css/showbuilder.css?'.$CC_CONFIG['airtime_version']);
+        $this->view->headLink()->appendStylesheet($baseUrl.'css/showbuilder-test.css?'.$CC_CONFIG['airtime_version']);
 
         $csrf_namespace = new Zend_Session_Namespace('csrf_namespace');
         $csrf_element = new Zend_Form_Element_Hidden('csrf');
diff --git a/airtime_mvc/application/models/StoredFile.php b/airtime_mvc/application/models/StoredFile.php
index 5d92dd54d..7c3a242a3 100644
--- a/airtime_mvc/application/models/StoredFile.php
+++ b/airtime_mvc/application/models/StoredFile.php
@@ -907,113 +907,7 @@ SQL;
         return $results;
     }
 
-    public static function searchLibraryFilesTest($datatables)
-    {
-        $con = Propel::getConnection(CcFilesPeer::DATABASE_NAME);
-        $displayColumns = self::getLibraryColumns();
-
-        $fileSelect   = array();
-        foreach ($displayColumns as $key) {
-            if ($key === "id") {
-                $fileSelect[]   = "FILES.id AS $key";
-            } elseif ($key === "owner_id") {
-                $fileSelect[]   = "sub.login AS $key";
-            } //file length is displayed based on cueout - cuein.
-            else if ($key === "length") {
-                $fileSelect[]   = "(cueout - cuein)::INTERVAL AS length";
-            } elseif ($key === "year") {
-                $fileSelect[]   = "year AS ".$key;
-            } else {
-                $fileSelect[]   = $key;
-            }
-        }
-
-        $fileSelect   = "SELECT ". join(",", $fileSelect);
-        $fileTable = "({$fileSelect} FROM cc_files AS FILES LEFT JOIN cc_subjs AS sub ON (sub.id = FILES.owner_id) WHERE file_exists = 'TRUE' AND hidden='FALSE')";
-        $fromTable = $fileTable." AS File"; //need an alias for the table if it's standalone.
-
-        // update is_scheduled to false for tracks that
-        // have already played out
-        self::updatePastFilesIsScheduled();
-        $results = Application_Model_Datatables::findEntries($con, $displayColumns, $fromTable, $datatables);
-
-        $displayTimezone = new DateTimeZone(Application_Model_Preference::GetUserTimezone());
-        $utcTimezone = new DateTimeZone("UTC");
-
-        foreach ($results['aaData'] as &$row) {
-            $row['id'] = intval($row['id']);
-
-            //taken from Datatables.php, needs to be cleaned up there.
-            if (isset($r['ftype'])) {
-                if ($r['ftype'] == 'playlist') {
-                    $pl = new Application_Model_Playlist($r['id']);
-                    $r['length'] = $pl->getLength();
-                } elseif ($r['ftype'] == "block") {
-                    $bl = new Application_Model_Block($r['id']);
-                    $r['bl_type'] = $bl->isStatic() ? 'static' : 'dynamic';
-                    $r['length']  = $bl->getLength();
-                }
-            }
-
-            if ($row['ftype'] === "audioclip") {
-
-                $cuein_formatter = new LengthFormatter($row["cuein"]);
-                $row["cuein"] = $cuein_formatter->format();
-
-                $cueout_formatter = new LengthFormatter($row["cueout"]);
-                $row["cueout"] = $cueout_formatter->format();
-
-                $cuein = Application_Common_DateHelper::playlistTimeToSeconds($row["cuein"]);
-                $cueout = Application_Common_DateHelper::playlistTimeToSeconds($row["cueout"]);
-                $row_length = Application_Common_DateHelper::secondsToPlaylistTime($cueout - $cuein);
-
-                $formatter = new SamplerateFormatter($row['sample_rate']);
-                $row['sample_rate'] = $formatter->format();
-
-                $formatter = new BitrateFormatter($row['bit_rate']);
-                $row['bit_rate'] = $formatter->format();
-
-                // for audio preview
-                $row['audioFile'] = $row['id'].".".pathinfo($row['filepath'], PATHINFO_EXTENSION);
-
-            }
-            else {
-
-                $row['audioFile'] = $row['id'];
-                $row_length = $row['length'];
-            }
-
-            $len_formatter = new LengthFormatter($row_length);
-            $row['length'] = $len_formatter->format();
-
-            //convert mtime and utime to localtime
-            $row['mtime'] = new DateTime($row['mtime'], $utcTimezone);
-            $row['mtime']->setTimeZone($displayTimezone);
-            $row['mtime'] = $row['mtime']->format(DEFAULT_TIMESTAMP_FORMAT);
-            $row['utime'] = new DateTime($row['utime'], $utcTimezone);
-            $row['utime']->setTimeZone($displayTimezone);
-            $row['utime'] = $row['utime']->format(DEFAULT_TIMESTAMP_FORMAT);
-
-            //need to convert last played to localtime if it exists.
-            if (isset($row['lptime'])) {
-                $row['lptime'] = new DateTime($row['lptime'], $utcTimezone);
-                $row['lptime']->setTimeZone($displayTimezone);
-                $row['lptime'] = $row['lptime']->format(DEFAULT_TIMESTAMP_FORMAT);
-            }
-
-            // we need to initalize the checkbox and image row because we do not retrieve
-            // any data from the db for these and datatables will complain
-            $row['checkbox'] = "";
-            $row['image'] = "";
-
-            $type = substr($row['ftype'], 0, 2);
-            $row['tr_id'] = "{$type}_{$row['id']}";
-        }
-
-        return $results;
-    }
-
-    /** 
+    /**
      * Copy a newly uploaded audio file from its temporary upload directory 
      * on the local disk (like /tmp) over to Airtime's "stor" directory, 
      * which is where all ingested music/media live.
diff --git a/airtime_mvc/application/views/scripts/show-builder/index.phtml b/airtime_mvc/application/views/scripts/show-builder/index.phtml
index 5d4b7abd1..3b69bf1af 100644
--- a/airtime_mvc/application/views/scripts/show-builder/index.phtml
+++ b/airtime_mvc/application/views/scripts/show-builder/index.phtml
@@ -1,8 +1,12 @@
 <style>
-    body {
+    html, body {
         background: #242424;
     }
 
+    div.ColVis_collectionBackground {
+        background-color: transparent;
+    }
+
     .wrapper {
         position: absolute;
         background: #242424;
@@ -21,13 +25,26 @@
 </form>
 
 <div id="media_type_nav">
-    <button id="new_media_selector" class="btn btn-small dropdown-toggle" data-toggle="dropdown">
-        New <span class="caret"></span>
-    </button>
-    <div class="media_type_selector selected" selection_id="1">Files</div>
-    <div class="media_type_selector" selection_id="2">Playlists</div>
-    <div class="media_type_selector" selection_id="3">Smart Blocks</div>
-    <div class="media_type_selector" selection_id="4">Webstreams</div>
+    <div class="btn-group">
+        <button id="new_media_selector" class="btn btn-small dropdown-toggle" data-toggle="dropdown">
+            New <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu">
+            <li id="new-playlist">
+                <a href="#"><?php echo _("Playlist") ?></a>
+            </li>
+            <li id="new-smart-block">
+                <a href="#"><?php echo _("Smart Block") ?></a>
+            </li>
+            <li id="new-webstream">
+                <a href="#"><?php echo _("Webstream") ?></a>
+            </li>
+        </ul>
+    </div>
+    <div class="media_type_selector selected" selection_id="1"><?php echo _("Files") ?></div>
+    <div class="media_type_selector" selection_id="2"><?php echo _("Playlists") ?></div>
+    <div class="media_type_selector" selection_id="3"><?php echo _("Smart Blocks") ?></div>
+    <div class="media_type_selector" selection_id="4"><?php echo _("Webstreams") ?></div>
 </div>
 
 <div id="library_content" class="lib-content tabs lib-test">
@@ -40,4 +57,8 @@
     </div>
     <table id="show_builder_table" cellpadding="0" cellspacing="0" class="datatable"></table>
 </div>
+
+<div id="side_playlist" class="pl-content media-builder-test">
+</div>
+
 <?php echo $this->dialog ?>
diff --git a/airtime_mvc/application/views/scripts/webstream/webstream.phtml b/airtime_mvc/application/views/scripts/webstream/webstream.phtml
index feae5e419..9c9af52b4 100644
--- a/airtime_mvc/application/views/scripts/webstream/webstream.phtml
+++ b/airtime_mvc/application/views/scripts/webstream/webstream.phtml
@@ -22,9 +22,9 @@
 </div>
 
 <?php if (isset($this->obj)) : ?>
-    <input id="obj_id" type="hidden" value="<?php echo $this->obj->getId(); ?>"></input>
-    <input id="obj_lastMod" type="hidden" value="<?php echo "1";//$this->obj->getLastModified('U'); ?>"></input>
-    <input id="obj_type" type="hidden" value="webstream"></input>
+    <input id="obj_id" type="hidden" value="<?php echo $this->obj->getId(); ?>"/>
+    <input id="obj_lastMod" type="hidden" value="<?php echo "1";//$this->obj->getLastModified('U'); ?>"/>
+    <input id="obj_type" type="hidden" value="webstream"/>
     <div class="status" style="display:none;"></div>
 
     <div class="playlist_title">
diff --git a/airtime_mvc/public/css/add-show.css b/airtime_mvc/public/css/add-show.css
index c9cce1869..ccf8e1bec 100644
--- a/airtime_mvc/public/css/add-show.css
+++ b/airtime_mvc/public/css/add-show.css
@@ -169,7 +169,7 @@ label.wrapp-label input[type="checkbox"] {
     color: #ffffff;
     margin:0;
     font-size:12px;
-    font-weight:bold;
+    /*font-weight:bold;*/
     padding:4px 12px 4px 22px;
     text-decoration:none;
     /*text-shadow: #000 0px -1px;*/
diff --git a/airtime_mvc/public/css/bootstrap.css b/airtime_mvc/public/css/bootstrap.css
index 2974d8cda..bfc1753fd 100644
--- a/airtime_mvc/public/css/bootstrap.css
+++ b/airtime_mvc/public/css/bootstrap.css
@@ -972,7 +972,7 @@ input[type="submit"].btn.btn-mini {
   margin-left: 5px;
 }
 .btn-toolbar {
-  font-size: 0;
+  /*font-size: 0;*/
   margin-top: 10px;
   margin-bottom: 10px;
 }
diff --git a/airtime_mvc/public/css/showbuilder-test.css b/airtime_mvc/public/css/showbuilder-test.css
new file mode 100644
index 000000000..6fd1d1669
--- /dev/null
+++ b/airtime_mvc/public/css/showbuilder-test.css
@@ -0,0 +1,144 @@
+/* Show Builder*/
+
+@media screen and (max-width: 1015px) {
+    .lib-test, .sb-test, .media-builder-test, #media_type_nav {
+        width: 100% !important;
+    }
+    .media-builder-test {
+        margin-top: 0 !important;
+    }
+    #media_type_nav div {
+        float: left;
+        width: 20%;
+        text-align: center;
+        margin: auto;
+    }
+    #media_type_nav .media_type_selector {
+        margin-top: .25em;
+    }
+}
+
+@media screen and (max-width: 780px) {
+    .lib-test .dataTables_filter input[type="text"] {
+        position: relative;
+        width: calc(100% - 1em) !important;
+        margin: 0 .5em .5em 0;
+    }
+}
+
+.lib-test .dataTables_filter {
+    margin: 0;
+}
+
+.lib-test .dataTables_filter input[type="text"], .lib-test .dataTables_filter select {
+    margin-top: .5em;
+    width: 30%;
+    float: right;
+    height: 26px;
+}
+
+.lib-test label {
+    padding: 0;
+}
+
+.lib-test .dataTables_length {
+    padding: 5px;
+}
+
+.lib-test .dataTables_length label {
+    color: #555555;
+}
+
+.lib-test legend, .lib-test span, .lib-test label {
+    font-weight: normal;
+    color: #efefef;
+}
+
+.lib-test {
+    margin: 2em 2em 2em 0;
+    overflow: hidden !important;
+}
+
+.sb-test, .media-builder-test {
+    margin-top: 4.6em; /* Standardize this somehow */
+}
+
+.lib-test, .sb-test, .media-builder-test {
+    /* 1em for the middle margin, 6 for half the width of the left pane */
+    width: calc(50% - 8em);
+    min-width: 470px;
+}
+
+/* Media builder */
+
+.media-builder-test {
+    color: #efefef;
+}
+
+#side_playlist {
+    width: calc(50% - 8em);
+    font-size: inherit;
+}
+
+/* Media type selector */
+
+#media_type_nav {
+    float: left;
+    margin: 2em 0 0 0;
+
+    width: 12em;
+
+    background: none;
+    padding: 0 2em 0 0;
+}
+
+#new_media_selector {
+    width: 100%;
+}
+
+.media_type_selector {
+    cursor: pointer;
+    color: #cecece;
+    font-family: Roboto, "Open Sans", sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    width: 100%;
+    margin: 1em 1em 0 0;
+
+    -webkit-transition: color 0.2s linear;
+    -moz-transition: color 0.2s linear;
+    -o-transition: color 0.2s linear;
+    transition: color 0.2s linear;
+}
+
+.media_type_selector.selected {
+    color: #fff;
+    -webkit-transition: color 0.2s linear;
+    -moz-transition: color 0.2s linear;
+    -o-transition: color 0.2s linear;
+    transition: color 0.2s linear;
+}
+
+.media_type_selector:hover {
+    color: #fff;
+    -webkit-transition: color 0.2s linear;
+    -moz-transition: color 0.2s linear;
+    -o-transition: color 0.2s linear;
+    transition: color 0.2s linear;
+}
+
+/* Uploads/Dropzone */
+
+#upload_form {
+    width: 100%;
+    min-width: 470px;
+
+    background: none;
+    border: 2px dashed #efefef;
+
+    color: #efefef;
+    font-family: Roboto, "Open Sans", sans-serif;
+    font-size: 20px;
+    font-weight: 300;
+    line-height: 1.4rem;
+}
diff --git a/airtime_mvc/public/css/styles.css b/airtime_mvc/public/css/styles.css
index 215a0c970..47f27e6bf 100644
--- a/airtime_mvc/public/css/styles.css
+++ b/airtime_mvc/public/css/styles.css
@@ -937,7 +937,7 @@ dl.inline-list dd {
 
 .dataTables_info {
     float: left;
-    padding: 8px 0 0 8px;
+    padding: 10px;
     font-size:12px;
     color:#555555;
     font-weight:normal;
@@ -3308,85 +3308,6 @@ dd .stream-status {
     margin: 0 auto;
 }
 
-/* Show Builder*/
-
-@media screen and (max-width: 1015px) {
-    .lib-test, .sb-test {
-        width: 100% !important;
-    }
-}
-
-.lib-test legend, .lib-test label, .lib-test span {
-    color: #efefef;
-}
-
-.lib-test {
-    margin: 2em 2em 2em 0;
-    overflow: hidden !important;
-}
-
-.sb-test {
-    margin-top: 2em;
-}
-
-.lib-test, .sb-test {
-    /* 1em for the middle margin, 6 for half the width of the left pane */
-    width: calc(50% - 8em);
-    min-width: 470px;
-}
-
-#media_type_nav {
-    float: left;
-    margin: 2em 0 0 0;
-
-    width: 12em;
-
-    background: none;
-    padding: 0 2em 0 0;
-}
-
-#new_media_selector {
-    width: 100%;
-}
-
-.media_type_selector {
-    cursor: pointer;
-    color: #cecece;
-    font-family: Roboto, "Open Sans", sans-serif;
-    font-size: 16px;
-    font-weight: 400;
-    width: 100%;
-    margin: 1em 1em 0 0;
-}
-
-.media_type_selector.selected {
-    color: #fff;
-}
-
-.media_type_selector:hover {
-    color: #fff;
-    -webkit-transition: color 0.2s linear;
-    -moz-transition: color 0.2s linear;
-    -o-transition: color 0.2s linear;
-    transition: color 0.2s linear;
-}
-
-/* Uploads */
-
-#upload_form {
-    width: 100%;
-    min-width: 470px;
-
-    background: none;
-    border: 2px dashed #efefef;
-
-    color: #efefef;
-    font-family: Roboto, "Open Sans", sans-serif;
-    font-size: 20px;
-    font-weight: 300;
-    line-height: 1.4rem;
-}
-
 /* Usability Hints */
 
 .usability_hint {
diff --git a/airtime_mvc/public/js/airtime/library/events/library_showbuilder_test.js b/airtime_mvc/public/js/airtime/library/events/library_showbuilder_test.js
new file mode 100644
index 000000000..6fa450632
--- /dev/null
+++ b/airtime_mvc/public/js/airtime/library/events/library_showbuilder_test.js
@@ -0,0 +1,325 @@
+var AIRTIME = (function(AIRTIME) {
+    var mod;
+
+    if (AIRTIME.library === undefined) {
+        AIRTIME.library = {};
+    }
+
+    mod = AIRTIME.library;
+
+    mod.checkAddButton = function() {
+        var selected = mod.getChosenItemsLength(), $cursor = $('tr.sb-selected'), check = false,
+            shows = $('tr.sb-header'), current = $('tr.sb-current-show'),
+        // TODO: this is an ugly way of doing this... we should find a more robust way of checking which view we're in.
+            btnText = (window.location.href.toLowerCase().indexOf("schedule") > -1) ? $.i18n._('Add to show') : $.i18n._('Add to next show');
+
+        // make sure library items are selected and a cursor is selected.
+        if (selected !== 0) {
+            check = true;
+        }
+
+        if (shows.length === 0) {
+            check = false;
+        }
+
+        if (check) {
+            AIRTIME.button.enableButton("btn-group #library-plus", false);
+        } else {
+            AIRTIME.button.disableButton("btn-group #library-plus", false);
+        }
+
+        if ($("#show_builder").is(":visible")) {
+            if ($cursor.length !== 0) {
+                btnText = $.i18n._('Add after selected items');
+            } else if (current.length !== 0) {
+                btnText = $.i18n._('Add to current show');
+            }
+        } else {
+            var objType = $('#obj_type').val();
+            if (objType === 'block') {
+                btnText = ' ' + $.i18n._('Add to current smart block');
+            } else {
+                btnText = ' ' + $.i18n._('Add to current playlist');
+            }
+        }
+        AIRTIME.library.changeAddButtonText($('.btn-group #library-plus #lib-plus-text'), ' '+ btnText);
+    };
+
+    mod.fnRowCallback = function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
+        var $nRow = $(nRow);
+
+        if (aData.ftype === "audioclip") {
+            $nRow.addClass("lib-audio");
+            $image = $nRow.find('td.library_type');
+            if (!isAudioSupported(aData.mime)) {
+                $image.html('<span class="ui-icon ui-icon-locked"></span>');
+                aData.image = '<span class="ui-icon ui-icon-locked"></span>';
+            }
+        } else if (aData.ftype === "stream") {
+            $nRow.addClass("lib-stream");
+        } else {
+            $nRow.addClass("lib-pl");
+        }
+
+        $nRow.attr("id", aData["tr_id"]).data("aData", aData).data("screen",
+            "timeline");
+    };
+
+    mod.fnDrawCallback = function fnLibDrawCallback() {
+
+        mod.redrawChosen();
+        mod.checkToolBarIcons();
+
+        if ($("#show_builder").is(":visible")) {
+            $('#library_display tr.lib-audio, tr.lib-pl, tr.lib-stream')
+                .draggable(
+                {
+                    helper: function () {
+
+                        var $el = $(this), selected = mod
+                            .getChosenItemsLength(), container, thead = $("#show_builder_table thead"), colspan = thead
+                            .find("th").length, width = $el.width(), message;
+
+                        // dragging an element that has an unselected
+                        // checkbox.
+                        if (mod.isChosenItem($el) === false) {
+                            selected++;
+                        }
+
+                        if (selected === 1) {
+                            message = $.i18n._("Adding 1 Item");
+                        } else {
+                            message = sprintf($.i18n._("Adding %s Items"), selected);
+                        }
+
+                        container = $('<div/>').attr('id',
+                            'draggingContainer').append('<tr/>')
+                            .find("tr").append('<td/>').find("td")
+                            .attr("colspan", colspan).width(width)
+                            .addClass("ui-state-highlight").append(
+                            message).end().end();
+
+                        return container;
+                    },
+                    cursor: 'pointer',
+                    cursorAt: {
+                        top: 30,
+                        left: 100
+                    },
+                    connectToSortable: '#show_builder_table'
+                });
+        } else {
+            $('#library_display tr.lib-audio, tr.lib-stream, tr.lib-pl, tr.lib-block')
+                .draggable(
+                {
+                    helper: function () {
+
+                        var $el = $(this), selected = mod
+                                .getChosenAudioFilesLength(), container, message, li = $("#side_playlist ul[id='spl_sortable'] li:first"),
+                            width = li.width(), height = 55;
+                        if (width > 798) width = 798;
+
+                        // dragging an element that has an unselected
+                        // checkbox.
+                        if (mod.isChosenItem($el) === false) {
+                            selected++;
+                        }
+
+                        if (selected === 1) {
+                            message = $.i18n._("Adding 1 Item");
+                        } else {
+                            message = sprintf($.i18n._("Adding %s Items"), selected);
+                        }
+
+                        container = $('<div class="helper"/>').append(
+                            "<li/>").find("li").addClass(
+                            "ui-state-default").append("<div/>")
+                            .find("div").addClass(
+                            "list-item-container").append(
+                            message).end().width(width)
+                            .height(height).end();
+
+                        return container;
+                    },
+                    cursor: 'pointer',
+                    cursorAt: {
+                        top: 30,
+                        left: 100
+                    },
+                    connectToSortable: '#spl_sortable'
+                });
+        }
+    };
+
+    mod.dblClickAdd = function(data, type) {
+        var i, length, temp, aMediaIds = [], aSchedIds = [], aData = [];
+
+        if ($("#show_builder").is(":visible")) {
+            // process selected files/playlists.
+            aMediaIds.push({
+                "id": data.id,
+                "type": type
+            });
+
+            $("#show_builder_table tr.sb-selected").each(function (i, el) {
+                aData.push($(el).data("aData"));
+            });
+
+            // process selected schedule rows to add media after.
+            for (i = 0, length = aData.length; i < length; i++) {
+                temp = aData[i];
+                aSchedIds.push({
+                    "id": temp.id,
+                    "instance": temp.instance,
+                    "timestamp": temp.timestamp
+                });
+            }
+
+            if (aSchedIds.length == 0) {
+                if (!addToCurrentOrNext(aSchedIds)) {
+                    return;
+                }
+            }
+
+            AIRTIME.showbuilder.fnAdd(aMediaIds, aSchedIds);
+        } else {
+            // process selected files/playlists.
+            aMediaIds.push(new Array(data.id, data.ftype));
+
+            // check if a playlist/block is open before adding items
+            if ($('input[id="obj_type"]').val() == 'playlist'
+                || $('input[id="obj_type"]').val() == 'block') {
+                AIRTIME.playlist.fnAddItems(aMediaIds, undefined, 'after');
+            }
+        }
+    };
+
+    function addToCurrentOrNext(arr) {
+        var el;
+        // Add to the end of the current show by getting the footer
+        el = $(".sb-footer.sb-current-show");
+        var data = el.prev().data("aData");
+
+        if (data === undefined) {
+            alert($.i18n._("Cannot schedule outside a show."));
+            return false;
+        }
+
+        arr.push({
+            "id" : data.id,
+            "instance" : data.instance,
+            "timestamp" : data.timestamp
+        });
+
+        if (!isInView(el)) {
+            $('.dataTables_scrolling.sb-padded').animate({
+                scrollTop: el.offset().top
+            }, 0);
+        }
+
+        return true;
+    }
+
+    mod.setupLibraryToolbar = function() {
+        var $toolbar = $(".lib-content .fg-toolbar:first");
+
+        mod.createToolbarButtons();
+        
+        $toolbar.append($menu);
+        // add to timeline button
+        $toolbar
+            .find('.icon-plus').parent()
+            .click(
+                    function() {
+
+                        if (AIRTIME.button.isDisabled('btn-group #library-plus') === true) {
+                            return;
+                        }
+    
+                        var selected = AIRTIME.library.getSelectedData(), data, i, length, temp, aMediaIds = [], aSchedIds = [], aData = [];
+    
+                        // process selected files/playlists.
+                        for (i = 0, length = selected.length; i < length; i++) {
+                            data = selected[i];
+                            aMediaIds.push( {
+                                "id" : data.id,
+                                "type" : data.ftype
+                            });
+                        }
+    
+                        $("#show_builder_table tr.sb-selected")
+                                .each(function(i, el) {
+                                    aData.push($(el).data("aData"));
+                                });
+    
+                        // process selected schedule rows to add media
+                        // after.
+                        for (i = 0, length = aData.length; i < length; i++) {
+                            temp = aData[i];
+                            aSchedIds.push( {
+                                "id" : temp.id,
+                                "instance" : temp.instance,
+                                "timestamp" : temp.timestamp
+                            });
+                        }
+
+                        if (aSchedIds.length == 0) {
+                            addToCurrentOrNext(aSchedIds);
+                        }
+    
+                        AIRTIME.showbuilder.fnAdd(aMediaIds, aSchedIds);
+                    });
+
+        // delete from library.
+        $toolbar.find('.icon-trash').parent().click(function() {
+
+            if (AIRTIME.button.isDisabled('icon-trash') === true) {
+                return;
+            }
+
+            AIRTIME.library.fnDeleteSelectedItems();
+        });
+
+        $toolbar.find('#sb-new').click(function() {
+            if (AIRTIME.button.isDisabled('btn-group #sb-new') === true) {
+                return;
+            }
+
+            var selection = $(".media_type_selector.selected").attr("selection_id");
+            console.log(selection);
+
+            if (selection == 2) {
+                AIRTIME.playlist.fnNew();
+            } else if (selection == 3) {
+                AIRTIME.playlist.fnNewBlock();
+            } else if (selection == 4) {
+                AIRTIME.playlist.fnWsNew();
+            }
+        });
+
+
+        $toolbar.find('#sb-edit').click(function() {
+            if (AIRTIME.button.isDisabled('btn-group #sb-edit') === true) {
+                return;
+            }
+
+            var data = $(".lib-selected:first").data("aData");
+
+            if (data.ftype === "audioclip") {
+                $.get(baseUrl + "library/edit-file-md/id/" + data.id, {format: "json"}, function(json){
+                    buildEditMetadataDialog(json);
+                });
+            } else if (data.ftype === "playlist" || data.ftype === "block") {
+                AIRTIME.playlist.fnEdit(data.id, data.ftype, baseUrl+'Playlist/edit');
+                AIRTIME.playlist.validatePlaylistElements();
+            } else if (data.ftype === "stream") {
+                AIRTIME.playlist.fnEdit(data.id, data.ftype, baseUrl + 'Webstream/edit');
+            }
+        });
+
+        mod.createToolbarDropDown();
+    };
+
+    return AIRTIME;
+
+}(AIRTIME || {}));
diff --git a/airtime_mvc/public/js/airtime/library/library-test.js b/airtime_mvc/public/js/airtime/library/library-test.js
index 1517c2a5e..3454aeaf0 100644
--- a/airtime_mvc/public/js/airtime/library/library-test.js
+++ b/airtime_mvc/public/js/airtime/library/library-test.js
@@ -131,10 +131,20 @@ var AIRTIME = (function(AIRTIME) {
                             "<span id='lib-plus-text'></span>" +
                         "</button>" +
                     "</div>")
-            .append("<div class='btn-group'>" +
+            .append("<div class='btn-group' title=" + $.i18n._('Delete') + ">" +
                         "<button class='btn btn-small' id='sb-trash'>" +
                             "<i class='icon-white icon-trash'></i>" +
                         "</button>" +
+                    "</div>")
+            .append("<div class='btn-group' title=" + $.i18n._('Edit') + ">" +
+                        "<button class='btn btn-small' id='sb-edit'>" +
+                            "<i class='icon-white icon-pencil'></i>" +
+                        "</button>" +
+                    "</div>")
+            .append("<div class='btn-group' title=" + $.i18n._('New') + ">" +
+                        "<button class='btn btn-small' id='sb-new'>" +
+                            "<i class='icon-white icon-plus'></i>" +
+                        "</button>" +
                     "</div>");
     };
     
@@ -143,7 +153,7 @@ var AIRTIME = (function(AIRTIME) {
         $('#sb-dselect-page').click(function(){mod.deselectCurrentPage();});
         $('#sb-dselect-all').click(function(){mod.selectNone();});
     };
-    
+
     mod.checkDeleteButton = function() {
         var selected = mod.getChosenItemsLength(),
             check = false;
@@ -151,7 +161,7 @@ var AIRTIME = (function(AIRTIME) {
         if (selected !== 0) {
             check = true;
         }
-        
+
         if (check === true) {
             AIRTIME.button.enableButton("btn-group #sb-trash", false);
         }
@@ -159,11 +169,44 @@ var AIRTIME = (function(AIRTIME) {
             AIRTIME.button.disableButton("btn-group #sb-trash", false);
         }
     };
-    
+
+    mod.checkEditButton = function() {
+        var selected = mod.getChosenItemsLength(),
+            check = false;
+
+        if (selected === 1) {
+            check = true;
+        }
+
+        if (check === true) {
+            AIRTIME.button.enableButton("btn-group #sb-edit", false);
+        }
+        else {
+            AIRTIME.button.disableButton("btn-group #sb-edit", false);
+        }
+    };
+
+    mod.checkNewButton = function() {
+        var selected = $(".media_type_selector.selected").attr("selection_id"),
+            check = false;
+
+        if (selected != 1) {
+            check = true;
+        }
+
+        if (check === true) {
+            AIRTIME.button.enableButton("btn-group #sb-new", false);
+        }
+        else {
+            AIRTIME.button.disableButton("btn-group #sb-new", false);
+        }
+    };
+
     mod.checkToolBarIcons = function() {
-        
         AIRTIME.library.checkAddButton();
-        AIRTIME.library.checkDeleteButton();        
+        AIRTIME.library.checkDeleteButton();
+        AIRTIME.library.checkEditButton();
+        AIRTIME.library.checkNewButton();
     };
     
     mod.getSelectedData = function() {
@@ -301,8 +344,6 @@ var AIRTIME = (function(AIRTIME) {
 
         //Prevent the user from spamming the delete button while the AJAX request is in progress
         AIRTIME.button.disableButton("btn-group #sb-trash", false);
-        //Hack to immediately show the "Processing" div in DataTables to give the user some sort of feedback.
-        $(".dataTables_processing").css('visibility','visible');
 
         $.post(baseUrl+"library/delete", 
             {"format": "json", "media": aMedia}, 
@@ -560,7 +601,7 @@ var AIRTIME = (function(AIRTIME) {
                 oData.iCreate = parseInt(oData.iCreate, 10);
             },
             
-            "sAjaxSource": baseUrl+"Library/contents-feed-test",
+            "sAjaxSource": baseUrl+"Library/contents-feed",
             "sAjaxDataProp": "files",
             
             "fnServerData": function ( sSource, aoData, fnCallback ) {
@@ -648,7 +689,7 @@ var AIRTIME = (function(AIRTIME) {
             "oLanguage": datatables_dict,
             
             // R = ColReorder, C = ColVis
-            "sDom": 'Rl<"#library_display_type">f<"dt-process-rel"r><"H"<"library_toolbar"C>><"dataTables_scrolling"t><"F"ip>',
+            "sDom": 'R<"#library_display_type"><"dt-process-rel"r><"H"<"library_toolbar"Cf>><"dataTables_scrolling"t><"F"ilp>>',
             
             "oColVis": {
                 "sAlign": "right",
diff --git a/airtime_mvc/public/js/airtime/library/library.js b/airtime_mvc/public/js/airtime/library/library.js
index 8c4986310..23fbc7bd4 100644
--- a/airtime_mvc/public/js/airtime/library/library.js
+++ b/airtime_mvc/public/js/airtime/library/library.js
@@ -164,7 +164,7 @@ var AIRTIME = (function(AIRTIME) {
     mod.checkToolBarIcons = function() {
         
         AIRTIME.library.checkAddButton();
-        AIRTIME.library.checkDeleteButton();        
+        AIRTIME.library.checkDeleteButton();
     };
     
     mod.getSelectedData = function() {
diff --git a/airtime_mvc/public/js/airtime/library/spl-test.js b/airtime_mvc/public/js/airtime/library/spl-test.js
new file mode 100644
index 000000000..3e5a91876
--- /dev/null
+++ b/airtime_mvc/public/js/airtime/library/spl-test.js
@@ -0,0 +1,1462 @@
+//--------------------------------------------------------------------------------------------------------------------------------
+// Playlist Functions
+//--------------------------------------------------------------------------------------------------------------------------------
+
+var AIRTIME = (function(AIRTIME){
+    
+    if (AIRTIME.playlist === undefined) {
+        AIRTIME.playlist = {};
+    }
+    
+    var mod = AIRTIME.playlist,
+        viewport,
+        $lib,
+        $pl,
+        $togglePl = $("<button id='pl_edit' class='btn btn-small' href='#' title='"+$.i18n._("Open Media Builder")+"'>"+$.i18n._("Open Media Builder")+"</button>"),
+        widgetHeight,
+        resizeTimeout,
+        width;
+    
+    function isTimeValid(time) {
+        //var regExpr = new RegExp("^\\d{2}[:]\\d{2}[:]\\d{2}([.]\\d{1,6})?$");
+        var regExpr = new RegExp("^\\d{2}[:]([0-5]){1}([0-9]){1}[:]([0-5]){1}([0-9]){1}([.]\\d{1})?$");
+        
+        return regExpr.test(time);
+    }
+    
+    function isFadeValid(fade) {
+        var regExpr = new RegExp("^\\d{1}(\\d{1})?([.]\\d{1})?$");
+
+        return regExpr.test(fade);
+    }
+    
+    function playlistError(json) {
+        alert(json.error);
+        openPlaylist(json);
+    }
+    
+    function stopAudioPreview() {
+        // stop any preview playing
+        $('#jquery_jplayer_1').jPlayer('stop');
+    }
+    
+    function highlightActive(el) {
+
+        $(el).addClass("ui-state-active");
+    }
+
+    function unHighlightActive(el) {
+
+        $(el).removeClass("ui-state-active");
+    }
+
+    function showError(el, error) {
+        $(el).parent().next()
+            .empty()
+            .append(error)
+            .show();
+    }
+
+    function hideError(el) {
+         $(el).parent().next()
+            .empty()
+            .hide();
+    }
+
+    function changeCueIn(event) {
+        event.stopPropagation();
+        var span = $(this),
+            id = span.parent().attr("id").split("_").pop(),
+            url = baseUrl+"Playlist/set-cue",
+            cueIn = $.trim(span.text()),
+            li = span.parents("li"),
+            unqid = li.attr("unqid"),
+            lastMod = getModified(),
+            type = $('#obj_type').val();
+        
+        if (!isTimeValid(cueIn)){
+            showError(span, $.i18n._("please put in a time '00:00:00 (.0)'"));
+            return;
+        }
+        $.post(url, 
+            {format: "json", cueIn: cueIn, id: id, modified: lastMod, type: type}, 
+            function(json){
+
+                if (json.error !== undefined){
+                    playlistError(json);
+                    return;
+                }
+                if (json.cue_error !== undefined) {
+                    showError(span, json.cue_error);
+                    return;
+                }
+
+                setPlaylistContent(json);
+
+                li = $('#side_playlist li[unqid='+unqid+']');
+                li.find(".cue-edit").toggle();
+                highlightActive(li);
+                highlightActive(li.find('.spl_cue'));
+            });
+    }
+
+    function changeCueOut(event) {
+        event.stopPropagation();
+        var span = $(this),
+            id = span.parent().attr("id").split("_").pop(),
+            url = baseUrl+"Playlist/set-cue",
+            cueOut = $.trim(span.text()),
+            li = span.parents("li"),
+            unqid = li.attr("unqid"),
+            lastMod = getModified(),
+            type = $('#obj_type').val();
+
+        if (!isTimeValid(cueOut)){
+            showError(span, $.i18n._("please put in a time '00:00:00 (.0)'"));
+            return;
+        }
+        
+        $.post(url, 
+            {format: "json", cueOut: cueOut, id: id, modified: lastMod, type: type}, 
+            function(json){
+
+                if (json.error !== undefined){
+                    playlistError(json);
+                    return;
+                }
+                if (json.cue_error !== undefined) {
+                    showError(span, json.cue_error);
+                    return;
+                }
+
+                setPlaylistContent(json);
+
+                li = $('#side_playlist li[unqid='+unqid+']');
+                li.find(".cue-edit").toggle();
+                highlightActive(li);
+                highlightActive(li.find('.spl_cue'));
+            });
+        }
+    
+    /* used from waveform pop-up */
+    function changeCues($el, id, cueIn, cueOut) {
+        
+        var url = baseUrl+"Playlist/set-cue",
+            lastMod = getModified(),
+            type = $('#obj_type').val(),
+            li,
+            span;
+        
+        if (!isTimeValid(cueIn)){
+            $el.find('.cue-in-error').val($.i18n._("please put in a time '00:00:00 (.0)'")).show();
+            return;
+        }
+        else {
+            $el.find('.cue-in-error').hide();
+        }
+        
+        if (!isTimeValid(cueOut)){
+            $el.find('.cue-out-error').val($.i18n._("please put in a time '00:00:00 (.0)'")).show();
+            return;
+        }
+        else {
+            $el.find('.cue-out-error').hide();
+        }
+        
+        $.post(url, 
+            {format: "json", cueIn: cueIn, cueOut: cueOut, id: id, modified: lastMod, type: type}, 
+            function(json){
+                
+                $el.dialog('destroy');
+                $el.remove();
+
+                if (json.error !== undefined){
+                    playlistError(json);
+                    return;
+                }
+                if (json.cue_error !== undefined) {
+                    
+                    li = $('#side_playlist li[unqid='+id+']');
+                    
+                    if (json.code === 0) {
+                        
+                        span = $('#spl_cue_in_'+id).find('span');
+                        showError(span, json.cue_error);
+                        span = $('#spl_cue_out_'+id).find('span');
+                        showError(span, json.cue_error);
+                    }
+                    else if (json.code === 1) {
+                        
+                        span = $('#spl_cue_in_'+id).find('span');
+                        showError(span, json.cue_error);
+                    }
+                    else if (json.code === 2) {
+                        
+                        span = $('#spl_cue_out_'+id).find('span');
+                        showError(span, json.cue_error);
+                    }
+                    
+                    return;
+                }
+
+                setPlaylistContent(json);
+
+                li = $('#side_playlist li[unqid='+id+']');
+                li.find(".cue-edit").toggle();
+                highlightActive(li);
+                highlightActive(li.find('.spl_cue'));
+            });
+    }
+    
+    /* used from waveform pop-up */
+    function changeCrossfade($el, id1, id2, fadeIn, fadeOut, offset, id) {
+        
+        var url = baseUrl+"Playlist/set-crossfade",
+            lastMod = getModified(),
+            type = $('#obj_type').val();
+        
+        $.post(url, 
+            {format: "json", fadeIn: fadeIn, fadeOut: fadeOut, id1: id1, id2: id2, offset: offset, modified: lastMod, type: type}, 
+            function(json){
+                
+                $el.dialog('destroy');
+                $el.remove();
+
+                if (json.error !== undefined){
+                    playlistError(json);
+                    return;
+                }
+                
+                setPlaylistContent(json);
+
+                $li = $('#side_playlist li[unqid='+id+']');
+                $li.find('.crossfade').toggle();
+                highlightActive($li.find('.spl_fade_control'));
+            });
+    }
+
+    function changeFadeIn(event) {
+        event.preventDefault();
+
+        var span = $(this),
+            id = span.parent().attr("id").split("_").pop(),
+            url = baseUrl+"Playlist/set-fade",
+            fadeIn = $.trim(span.text()),
+            li = span.parents("li"),
+            unqid = li.attr("unqid"),
+            lastMod = getModified(),
+            type = $('#obj_type').val();
+
+        if (!isFadeValid(fadeIn)){
+            showError(span, $.i18n._("please put in a time in seconds '00 (.0)'"));
+            return;
+        }
+
+        $.post(url, 
+            {format: "json", fadeIn: fadeIn, id: id, modified: lastMod, type: type}, 
+            function(json){
+
+                if (json.error !== undefined){
+                    playlistError(json);
+                    return;
+                }
+                if (json.fade_error !== undefined) {
+                    showError(span, json.fade_error);
+                    return;
+                }
+
+                setPlaylistContent(json);
+
+                li = $('#side_playlist li[unqid='+unqid+']');
+                li.find('.crossfade').toggle();
+                highlightActive(li.find('.spl_fade_control'));
+            });
+    }
+
+    function changeFadeOut(event) {
+        event.stopPropagation();
+
+        var span = $(this),
+            id = span.parent().attr("id").split("_").pop(),
+            url = baseUrl+"Playlist/set-fade",
+            fadeOut = $.trim(span.text()),
+            li = span.parents("li"),
+            unqid = li.attr("unqid"),
+            lastMod = getModified(),
+            type = $('#obj_type').val();
+
+        if (!isFadeValid(fadeOut)){
+            showError(span, $.i18n._("please put in a time in seconds '00 (.0)'"));
+            return;
+        }
+
+        $.post(url, 
+            {format: "json", fadeOut: fadeOut, id: id, modified: lastMod, type: type}, 
+            function(json){
+            
+                if (json.error !== undefined){
+                    playlistError(json);
+                    return;
+                }
+                if (json.fade_error !== undefined) {
+                    showError(span, json.fade_error);
+                    return;
+                }
+    
+                setPlaylistContent(json);
+                
+                li = $('#side_playlist li[unqid='+unqid+']');
+                li.find('.crossfade').toggle();
+                highlightActive(li.find('.spl_fade_control'));
+            });
+    }
+
+    function submitOnEnter(event) {
+        //enter was pressed
+        if(event.keyCode === 13) {
+            event.preventDefault();
+            $(this).blur();
+        }
+    }
+
+    function openFadeEditor(event) {
+        var li;
+        
+        event.stopPropagation();  
+
+        li = $(this).parents("li");
+        li.find(".crossfade").toggle();
+
+        if ($(this).hasClass("ui-state-active")) {
+            unHighlightActive(this);
+        }
+        else {
+            highlightActive(this);
+        }
+    }
+
+    function openCueEditor(event) {
+        var li, icon;
+        
+        event.stopPropagation();
+
+        icon = $(this);
+        li = $(this).parents("li"); 
+        li.find(".cue-edit").toggle();
+
+        if (li.hasClass("ui-state-active")) {
+            unHighlightActive(li);
+            unHighlightActive(icon);
+        }
+        else {
+            highlightActive(li);
+            highlightActive(icon);
+        }
+    }
+    
+    function editName() {
+        var nameElement = $(this);
+            //remove any newlines if user somehow snuck them in (easy to do if dragging/dropping text)
+            nameElement.text(nameElement.text().replace("\n", ""));
+    }
+        
+    function redrawLib() {
+        var dt = $lib.find("#library_display").dataTable();
+        
+        dt.fnStandingRedraw();
+        AIRTIME.library.redrawChosen();
+    }
+    
+    function setPlaylistContent(json) {
+        var $html = $(json.html);
+        
+        $('#spl_name > a')
+            .empty()
+            .append(json.name);
+        $('#obj_length')
+            .empty()
+            .append(json.length);
+        $('#fieldset-metadate_change textarea')
+            .empty()
+            .val(json.description);
+        
+        $('#spl_sortable').off('focusout keydown');
+        $('#spl_sortable')
+        .empty()
+        .append($html);
+        setCueEvents();
+        setFadeEvents();
+        setModified(json.modified);
+        AIRTIME.playlist.validatePlaylistElements();
+        redrawLib();
+    }
+    
+    function setFadeIcon(){
+        var contents = $("#spl_sortable");
+        var show = contents.is(":visible");
+        var empty = $(".spl_empty");
+        
+        if (!show || empty.length > 0) {
+            $("#spl_crossfade").hide();
+        } else {
+            //get list of playlist contents
+            var list = contents.children();
+            
+            //if first and last items are blocks, hide the fade icon
+            var first = list.first();
+            var last = list.last();
+            if (first.find(':first-child').children().attr('blockid') !== undefined &&
+                last.find(':first-child').children().attr('blockid') !== undefined) {
+                $("#spl_crossfade").hide();
+            } else {
+                $("#spl_crossfade").show();
+            }
+        }
+    }
+    
+    function getId() {
+        return parseInt($("#obj_id").val(), 10);
+    }
+    
+    function getModified() {
+        return parseInt($("#obj_lastMod").val(), 10);
+    }
+    
+    function setModified(modified) {
+        $("#obj_lastMod").val(modified);
+    }
+    
+    function openPlaylist(json) {
+        $("#side_playlist")
+            .empty()
+            .append(json.html);
+                
+        setUpPlaylist();
+        setCueEvents();
+        setFadeEvents();
+        
+        // functions in smart_blockbuilder.js
+        setupUI();
+        appendAddButton();
+        appendModAddButton();
+        removeButtonCheck();
+    }
+    
+    function openPlaylistPanel() {
+        viewport = AIRTIME.utilities.findViewportDimensions();
+        var screenWidth = Math.floor(viewport.width - 40);
+        widgetHeight = viewport.height - 185;
+
+        $pl.show().width(Math.floor(screenWidth * 0.44));
+        $pl.height(widgetHeight);
+        $("#pl_edit").hide();
+    }
+
+    //Purpose of this function is to iterate over all playlist elements
+    //and verify whether they can be previewed by the browser or not. If not
+    //then the playlist element is greyed out
+    mod.validatePlaylistElements = function(){
+        $.each($("div .big_play"), function(index, value){
+            if ($(value).attr('blockId') === undefined) {
+                var mime = $(value).attr("data-mime-type");
+                //If mime is undefined it is likely because the file was
+                //deleted from the library. This case is handled in mod.onReady()
+                if (mime !== undefined) {
+                    if (isAudioSupported(mime)) {
+                        $(value).bind("click", openAudioPreview);
+                    } else {
+                        $(value).attr("class", "big_play_disabled dark_class"); 
+                        $(value).qtip({
+                           content: $.i18n._("Your browser does not support playing this file type: ")+ mime,
+                           show: 'mouseover',
+                            hide: {
+                                delay: 500,
+                                fixed: true
+                            },
+                            style: {
+                                border: {
+                                    width: 0,
+                                    radius: 4
+                                },
+                                classes: "ui-tooltip-dark ui-tooltip-rounded"
+                            },
+                            position: {
+                                my: "left bottom",
+                                at: "right center"
+                            }
+                        }) 
+                    }
+                }
+            } else {
+                if ($(value).attr('blocktype') === 'dynamic') {
+                    $(value).attr("class", "big_play_disabled dark_class"); 
+                    $(value).qtip({
+                       content: $.i18n._('Dynamic block is not previewable'),
+                       show: 'mouseover',
+                        hide: {
+                            delay: 500,
+                            fixed: true
+                        },
+                        style: {
+                            border: {
+                                width: 0,
+                                radius: 4
+                            },
+                            classes: "ui-tooltip-dark ui-tooltip-rounded"
+                        },
+                        position: {
+                            my: "left bottom",
+                            at: "right center"
+                        },
+                    })
+                } else {
+                    $(value).bind("click", openAudioPreview);
+                }
+            }
+        });
+    }
+    
+    //sets events dynamically for playlist entries (each row in the playlist)
+    function setPlaylistEntryEvents() {
+        
+        $pl.delegate("#spl_sortable .ui-icon-closethick", 
+                {"click": function(ev){
+                    var id;
+                    id = parseInt($(this).attr("id").split("_").pop(), 10);
+                    AIRTIME.playlist.fnDeleteItems([id]);
+                }});
+
+        $pl.delegate(".spl_fade_control", 
+                {"click": openFadeEditor});
+        
+        $pl.delegate(".spl_cue", 
+                {"click": openCueEditor});
+            
+        $pl.delegate(".spl_block_expand",
+                {"click": function(ev){
+                    var id = parseInt($(this).attr("id").split("_").pop(), 10);
+                    var blockId = parseInt($(this).attr("blockId"), 10);
+                    if ($(this).hasClass('close')) {
+                        var sUrl = baseUrl+"playlist/get-block-info";
+                        mod.disableUI();
+                        $.post(sUrl, {format:"json", id:blockId}, function(data){
+                            $html = "";
+                            var isStatic = data.isStatic;
+                            delete data.type;
+                            if (isStatic) {
+                                $.each(data, function(index, ele){
+                                    if (ele.track_title !== undefined) {
+                                        if (ele.creator === null) {
+                                            ele.creator = "";
+                                        }
+                                        if (ele.track_title === null) {
+                                            ele.track_title = "";
+                                        }
+                                        $html += "<li>" +
+                                            "<span class='block-item-title'>"+ele.track_title+" - </span>" +
+                                            "<span class='block-item-author'>"+ele.creator+"</span>" +
+                                            "<span class='block-item-time'>"+ele.length+"</span>" + 
+                                            "</li>";
+                                    }
+                                })
+                            } else {
+                                for (var key in data.crit){
+                                    $.each(data.crit[key], function(index, ele){
+                                        var extra = (ele['extra']==null)?"":"- "+ele['extra'];
+                                        $html += "<li>" +
+                                            "<span class='block-item-title'>"+ele['display_name']+"</span>" +
+                                            "<span class='block-item-criteria'>"+ele['display_modifier']+"</span>" +
+                                            "<span class='block-item-criteria'>"+ele['value']+"</span>" +
+                                            "<span class='block-item-criteria'>"+extra+"</span>" + 
+                                            "</li>";
+                                    });
+                                }
+                                $html += "<li><br /><span class='block-item-title'>"+$.i18n._("Limit to: ")+data.limit.value+"  "+data.limit.display_modifier+"</span></li>";
+                            }
+                            $pl.find("#block_"+id+"_info").html($html).show();
+                            mod.enableUI();
+                        });
+                        $(this).removeClass('close');
+                    } else {
+                        $pl.find("#block_"+id+"_info").html("").hide();
+                        $(this).addClass('close');
+                    }
+                }});
+    }
+    
+    //sets events dynamically for the cue editor.
+    function setCueEvents() {
+        var temp = $('#spl_sortable');
+        temp.on("focusout", ".spl_cue_in span", changeCueIn);
+        temp.on("keydown", ".spl_cue_in span", submitOnEnter);
+        
+        temp.on("focusout", ".spl_cue_out span", changeCueOut);
+        temp.on("keydown", ".spl_cue_out span", submitOnEnter);
+        
+        //remove show waveform buttons since web audio api is not supported.
+        if (!(window.AudioContext || window.webkitAudioContext)) {
+            temp.find('.pl-waveform-cues-btn')
+                .parent()
+                .html($.i18n._("Waveform features are available in a browser supporting the Web Audio API"));
+        }
+    }
+    
+    //sets events dynamically for the fade editor.
+    function setFadeEvents() {
+        var temp = $('#spl_sortable');
+        temp.on("focusout", ".spl_fade_in span", changeFadeIn);
+        temp.on("keydown", ".spl_fade_in span", submitOnEnter);
+        
+        temp.on("focusout", ".spl_fade_out span", changeFadeOut);
+        temp.on("keydown", ".spl_fade_out span", submitOnEnter);
+        
+      //remove show waveform buttons since web audio api is not supported.
+        if (!(window.AudioContext || window.webkitAudioContext)) {
+            temp.find('.pl-waveform-fades-btn')
+                .parent()
+                .html($.i18n._("Waveform features are available in a browser supporting the Web Audio API"));
+        }
+    }
+    
+    function initialEvents() {    
+        var cachedDescription;
+        
+        //main playlist fades events
+        $pl.on("click", "#spl_crossfade", function() {
+            var lastMod = getModified(),
+                type = $('#obj_type').val();
+
+            if ($(this).hasClass("ui-state-active")) {
+                $(this).removeClass("ui-state-active");
+                $pl.find("#crossfade_main").hide();
+            }
+            else {
+                $(this).addClass("ui-state-active");
+
+                var url = baseUrl+'Playlist/get-playlist-fades';
+                $.post(url, 
+                    {format: "json", modified: lastMod, type: type},
+                    function(json){
+                        if (json.error !== undefined){
+                            playlistError(json);
+                        }
+                        else {
+                            var fadeIn = $pl.find("span.spl_main_fade_in");
+                            var fadeOut = $pl.find("span.spl_main_fade_out");
+                            if (json.fadeIn == null) {
+                                fadeIn.parent().prev().hide();
+                                fadeIn.hide();
+                            } else {
+                                fadeIn.parent().prev().show();
+                                fadeIn.show();
+                                fadeIn.empty().append(json.fadeIn);
+                            }
+                            if (json.fadeOut == null) {
+                                fadeOut.parent().prev().hide();
+                                fadeOut.hide();
+                            } else {
+                                fadeOut.parent().prev().show();
+                                fadeOut.show();
+                                fadeOut.empty().append(json.fadeOut);
+                            }
+                            if (json.fadeIn != null || json.fadeOut != null) {
+                                $pl.find("#crossfade_main").show();
+                            }
+                        }
+                    });
+            }
+        });
+        
+        $pl.on("blur", "span.spl_main_fade_in", function(event){
+            event.stopPropagation();
+
+            var url = baseUrl+"Playlist/set-playlist-fades",
+                span = $(this),
+                fadeIn = $.trim(span.text()), 
+                lastMod = getModified(),
+                type = $('#obj_type').val();
+            
+            if (!isFadeValid(fadeIn)){
+                showError(span, $.i18n._("please put in a time in seconds '00 (.0)'"));
+                return;
+            }
+
+            $.post(url, 
+                {format: "json", fadeIn: fadeIn, modified: lastMod, type: type}, 
+                function(json){       
+                    hideError(span);
+                    if (json.modified !== undefined) {
+                        setModified(json.modified);
+                    }
+                });
+        });
+
+        $pl.on("blur", "span.spl_main_fade_out", function(event){
+            event.stopPropagation();
+
+            var url = baseUrl+"Playlist/set-playlist-fades",
+                span = $(this),
+                fadeOut = $.trim(span.text()), 
+                lastMod = getModified(),
+                type = $('#obj_type').val();
+
+            if (!isFadeValid(fadeOut)){
+                showError(span, $.i18n._("please put in a time in seconds '00 (.0)'"));
+                return;
+            }
+
+            $.post(url, 
+                {format: "json", fadeOut: fadeOut, modified: lastMod, type: type}, 
+                function(json){
+                    hideError(span);
+                    if (json.modified !== undefined) {
+                        setModified(json.modified);
+                    }
+                });
+        });
+
+        $pl.on("keydown", "span.spl_main_fade_in, span.spl_main_fade_out", submitOnEnter);
+
+        $pl.on("click", "#crossfade_main > .ui-icon-closethick", function(){
+            $pl.find("#spl_crossfade").removeClass("ui-state-active");
+            $pl.find("#crossfade_main").hide();
+        });
+        //end main playlist fades.
+
+        //edit playlist name event
+        $pl.on("keydown", "#playlist_name_display", submitOnEnter);
+        $pl.on("blur", "#playlist_name_display", editName);
+        
+        //edit playlist description events
+        $pl.on("click", "legend", function(){
+            var $fs = $(this).parents("fieldset");
+
+            if ($fs.hasClass("closed")) {
+                cachedDescription = $fs.find("textarea").val();
+                $fs.removeClass("closed");
+            }
+            else {
+                $fs.addClass("closed");
+            }
+        });
+        
+
+        $pl.on("click", 'button[id="playlist_shuffle_button"]', function(){
+            obj_id = $('input[id="obj_id"]').val();
+            url = baseUrl+"Playlist/shuffle";
+            enableLoadingIcon();
+            $.post(url, {format: "json", obj_id: obj_id}, function(json){
+
+                if (json.error !== undefined) {
+                    alert(json.error);
+                }
+                AIRTIME.playlist.fnOpenPlaylist(json);
+                if (json.result == "0") {
+                    $pl.find('.success').text($.i18n._('Playlist shuffled'));
+                    $pl.find('.success').show();
+                }
+                disableLoadingIcon();
+                setTimeout(removeSuccessMsg, 5000);
+            });
+        });
+
+        $pl.on("click", "#webstream_save", function(){
+            //get all fields and POST to server
+            //description
+            //stream url
+            //default_length  
+            //playlist name
+            var id = $pl.find("#obj_id").attr("value"); 
+            var description = $pl.find("#description").val();
+            var streamurl = $pl.find("#streamurl-element input").val();
+            var length = $pl.find("#streamlength-element input").val();
+            var name = $pl.find("#playlist_name_display").text(); 
+            
+            //hide any previous errors (if any)
+            $("#side_playlist .errors").empty().hide();
+        
+            var url = baseUrl+'Webstream/save';
+            $.post(url, 
+                {format: "json", id:id, description: description, url:streamurl, length: length, name: name}, 
+                function(json){
+                    if (json.analysis){
+                        for (var s in json.analysis){
+                            var field = json.analysis[s];
+                            
+                            if (!field[0]) {
+                                var elemId = "#"+s+"-error";
+                                var $div = $("#side_playlist " + elemId).text(field[1]).show();
+                            }
+                        }
+                    } else {
+                        var $status = $("#side_playlist .status");
+                        $status.html(json.statusMessage);
+                        $status.show();
+                        setTimeout(function(){$status.fadeOut("slow", function(){$status.empty()})}, 5000);
+
+                        var $ws_id = $("#obj_id");
+                        $ws_id.attr("value", json.streamId);
+
+                        var $ws_id = $("#ws_delete");
+                        $ws_id.show();
+
+
+                        var length = $("#side_playlist #ws_length");
+                        length.text(json.length);
+
+                        //redraw the library to show the new webstream
+                        redrawLib();
+                    }
+                    
+                });    
+        
+        
+        });
+
+        $lib.on("click", "#pl_edit", function() {
+            openPlaylistPanel();
+            $.ajax( {
+                url : baseUrl+"usersettings/set-library-screen-settings",
+                type : "POST",
+                data : {
+                    settings : {
+                        playlist : true
+                    },
+                    format : "json"
+                },
+                dataType : "json"
+            });
+        });
+
+        $pl.on("click", "#lib_pl_close", function() {
+            $pl.hide();
+            $("#show_builder").show();
+            // We need to update the text on the add button
+            AIRTIME.library.checkAddButton();
+            // We also need to run the draw callback to update how dragged items are drawn
+            AIRTIME.library.fnDrawCallback();
+
+            $.ajax( {
+                url : baseUrl+"usersettings/set-library-screen-settings",
+                type : "POST",
+                data : {
+                    settings : {
+                        playlist : false
+                    },
+                    format : "json"
+                },
+                dataType : "json"
+            });
+        });
+
+        $('#save_button').live("click", function(event){
+            /* Smart blocks: get name, description, and criteria
+             * Playlists: get name, description
+             */
+            var criteria = $('form').serializeArray(),
+                block_name = $('#playlist_name_display').text(),
+                block_desc = $('textarea[name="description"]').val(),
+                save_action = baseUrl+'Playlist/save',
+                obj_id = $('input[id="obj_id"]').val(),
+                obj_type = $('#obj_type').val(),
+                lastMod = getModified(),
+                dt = $('table[id="library_display"]').dataTable();
+            enableLoadingIcon();
+            $.post(save_action,
+                    {format: "json", data: criteria, name: block_name, description: block_desc, obj_id: obj_id, type: obj_type, modified: lastMod},
+                    function(json){
+                        if (json.error !== undefined) {
+                            alert(json.error);
+                        }
+                        if (json.html !== undefined) {
+                            AIRTIME.playlist.fnOpenPlaylist(json);
+                        }
+                        setModified(json.modified);
+                        if (obj_type == "block") {
+                            callback(json, "save");
+                        } else {
+                            $('.success').text($.i18n._('Playlist saved'));
+                            $('.success').show();
+                            setTimeout(removeSuccessMsg, 5000);
+                            dt.fnStandingRedraw();
+                        }
+                        setFadeIcon();
+                        disableLoadingIcon();
+                    }
+            );
+        });
+
+        $("#pl-bl-clear-content").live("click", function(event) {
+            var sUrl = baseUrl+"playlist/empty-content",
+                oData = {};
+            playlistRequest(sUrl, oData);
+        });
+    }
+    
+    function setUpPlaylist() {
+        var sortableConf;
+        
+        sortableConf = (function(){
+            var aReceiveItems,
+                html,
+                fnReceive,
+                fnUpdate;        
+            
+            fnReceive = function(event, ui) {
+                var aItems = [],
+                    aSelected,
+                    i,
+                    length;
+                
+                AIRTIME.library.addToChosen(ui.item);
+                
+                //filter out anything that isn't an audiofile.
+                aSelected = AIRTIME.library.getSelectedData();
+                
+                for (i = 0, length = aSelected.length; i < length; i++) {
+                    aItems.push(new Array(aSelected[i].id, aSelected[i].ftype));
+                }
+    
+                aReceiveItems = aItems;
+                html = ui.helper.html();
+                
+                AIRTIME.library.removeFromChosen(ui.item);
+            };
+            
+            fnUpdate = function(event, ui) {
+                var prev,
+                    aItems = [],
+                    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 (aReceiveItems !== undefined) {
+                    
+                    $pl.find("tr.ui-draggable")
+                        .after(html)
+                        .empty();
+                    
+                    aItems = aReceiveItems;
+                    aReceiveItems = undefined;
+                    
+                    AIRTIME.playlist.fnAddItems(aItems, iAfter, sAddType);
+                }
+                //item was reordered.
+                else {
+                    aItems.push(parseInt(ui.item.attr("id").split("_").pop(), 10));
+                    AIRTIME.playlist.fnMoveItems(aItems, iAfter);
+                }
+            };
+            
+            return {
+                items: 'li',
+                //hack taken from
+                //http://stackoverflow.com/questions/2150002/jquery-ui-sortable-how-can-i-change-the-appearance-of-the-placeholder-object
+                placeholder: {
+                    element: function(currentItem) {
+                        
+                        return $('<li class="placeholder ui-state-highlight"></li>')[0];
+                    },
+                    update: function(container, p) {
+                        return;
+                    }
+                },
+                forcePlaceholderSize: true,
+                handle: 'div.list-item-container',
+                start: function(event, ui) {
+                    ui.placeholder.height(56);
+                },
+                receive: fnReceive,
+                update: fnUpdate
+            };
+        }());
+
+        $pl.find("#spl_sortable").sortable(sortableConf);
+        AIRTIME.playlist.validatePlaylistElements();
+    }
+    
+    mod.fnNew = function() {
+        var url = baseUrl+'Playlist/new';
+        $("#side_playlist").show();
+        $("#show_builder").hide();
+
+        stopAudioPreview();
+        
+        $.post(url, 
+            {format: "json", type: 'playlist'}, 
+            function(json){
+                openPlaylist(json);
+                redrawLib();
+            });
+    };
+    
+    mod.fnWsNew = function() {
+        var url = baseUrl+'Webstream/new';
+        $("#side_playlist").show();
+        $("#show_builder").hide();
+
+        stopAudioPreview();
+        
+        $.post(url, 
+            {format: "json"}, 
+            function(json){
+                openPlaylist(json);
+                redrawLib();
+            });
+    };
+    
+
+    mod.fnNewBlock = function() {
+        var url = baseUrl+'Playlist/new';
+        $("#side_playlist").show();
+        $("#show_builder").hide();
+
+        stopAudioPreview();
+        
+        $.post(url, 
+            {format: "json", type: 'block'}, 
+            function(json){
+                openPlaylist(json);
+                redrawLib();
+            });
+    };
+    
+    mod.fnEdit = function(id, type, url) {
+        $("#side_playlist").show();
+        $("#show_builder").hide();
+
+        if ($pl.is(":hidden")) {
+            openPlaylistPanel();
+        }
+        stopAudioPreview();    
+        
+        $.post(url, 
+            {format: "json", id: id, type: type}, 
+            function(json){
+                openPlaylist(json);
+            });
+    };
+
+    
+    mod.fnDelete = function(plid) {
+        var url, id, lastMod;
+        
+        stopAudioPreview();    
+        id = (plid === undefined) ? getId() : plid;
+        lastMod = getModified();
+        type = $('#obj_type').val();
+        url = baseUrl+'Playlist/delete';
+
+        $.post(url, 
+            {format: "json", ids: id, modified: lastMod, type: type}, 
+            function(json){
+                openPlaylist(json);
+                redrawLib();
+            });
+    };
+    
+    mod.fnWsDelete = function(wsid) {
+        var url, id, lastMod;
+        
+        stopAudioPreview();    
+        id = (wsid === undefined) ? getId() : wsid;
+        lastMod = getModified();
+        type = $('#obj_type').val();
+        url = baseUrl+'Webstream/delete';
+        
+        $.post(url, 
+            {format: "json", ids: id, modified: lastMod, type: type}, 
+            function(json){
+                openPlaylist(json);
+                redrawLib();
+            });
+    };
+    
+    mod.disableUI = function() {
+        
+        $lib.block({ 
+            message: "",
+            theme: true,
+            applyPlatformOpacityRules: false
+        });
+        
+        $pl.block({ 
+            message: "",
+            theme: true,
+            applyPlatformOpacityRules: false
+        });
+    };
+    
+    mod.fnOpenPlaylist = function(json) {
+        openPlaylist(json);
+    };
+    
+    mod.enableUI = function() {
+        
+        $lib.unblock();
+        $pl.unblock();
+        
+        //Block UI changes the postion to relative to display the messages.
+        $lib.css("position", "static");
+        $pl.css("position", "static");
+        setupUI();
+    };
+    
+    function playlistResponse(json){    
+        
+        if (json.error !== undefined) {
+            playlistError(json);
+        }
+        else {
+            setPlaylistContent(json);
+            setFadeIcon();
+        }
+        
+        mod.enableUI();
+    }
+    
+    function playlistRequest(sUrl, oData) {
+        var lastMod,
+            obj_type = $('#obj_type').val();
+        
+        mod.disableUI();
+        
+        lastMod = getModified();
+        
+        oData["modified"] = lastMod;
+        oData["obj_type"] = obj_type;
+        oData["format"] = "json";
+        
+        $.post(
+            sUrl, 
+            oData, 
+            playlistResponse
+        );
+    }
+    
+    mod.fnAddItems = function(aItems, iAfter, sAddType) {
+        var sUrl = baseUrl+"playlist/add-items";
+            oData = {"aItems": aItems, "afterItem": iAfter, "type": sAddType};
+        playlistRequest(sUrl, oData);
+    };
+    
+    mod.fnMoveItems = function(aIds, iAfter) {
+        var sUrl = baseUrl+"playlist/move-items",
+            oData = {"ids": aIds, "afterItem": iAfter};
+        
+        playlistRequest(sUrl, oData);
+    };
+    
+    mod.fnDeleteItems = function(aItems) {
+        var sUrl = baseUrl+"playlist/delete-items",
+            oData = {"ids": aItems};
+        
+        playlistRequest(sUrl, oData);
+    };
+    
+    mod.showFadesWaveform = function(e) {
+        var $el = $(e.target),
+            $parent = $el.parents("dl"),
+            $li = $el.parents("li"),
+            $fadeOut = $parent.find(".spl_fade_out"),
+            $fadeIn = $parent.find(".spl_fade_in"),
+            $html = $($("#tmpl-pl-fades").html()),
+            tracks = [],
+            dim = AIRTIME.utilities.findViewportDimensions(),
+            playlistEditor,
+            id1, id2,
+            id = $li.attr("unqid");
+        
+        
+        function removeDialog() {
+            playlistEditor.stop();
+            
+            $html.dialog("destroy");
+            $html.remove();
+        }
+        
+        if ($fadeOut.length > 0) {
+            
+            tracks.push({
+                src: $fadeOut.data("fadeout"),
+                cuein: $fadeOut.data("cuein"),
+                cueout: $fadeOut.data("cueout"),
+                fades: [{
+                    shape: $fadeOut.data("type"),
+                    type: "FadeOut",
+                    end: $fadeOut.data("cueout") - $fadeOut.data("cuein"),
+                    start: $fadeOut.data("cueout") - $fadeOut.data("cuein") - $fadeOut.data("length")
+                }],
+                states: {
+                    'fadein': false,
+                    'shift': false
+                }
+            });
+            
+            id1 = $fadeOut.data("item");
+        }
+
+        if ($fadeIn.length > 0) {
+            
+            tracks.push({
+                src: $fadeIn.data("fadein"),
+                start: $fadeIn.data("offset"),
+                cuein: $fadeIn.data("cuein"),
+                cueout: $fadeIn.data("cueout"),
+                fades: [{
+                    shape: $fadeIn.data("type"),
+                    type: "FadeIn",
+                    end: $fadeIn.data("length"),
+                    start: 0
+                }],
+                states: {
+                    'fadeout': false,
+                    'shift': false
+                }
+            });
+            
+            id2 = $fadeIn.data("item");
+        }
+        
+        //set the first track to not be moveable (might only be one track depending on what follows)
+        //tracks[0].states["shift"] = false;
+        
+        $html.dialog({
+            modal: true,
+            title: $.i18n._("Fade Editor"),
+            show: 'clip',
+            hide: 'clip',
+            width: dim.width - 100,
+            height: 350,
+            buttons: [
+                {text: $.i18n._("Cancel"), class: "btn btn-small", click: removeDialog},
+                {text: $.i18n._("Save"), class: "btn btn-small btn-inverse", click: function() {
+                    var json = playlistEditor.getJson(),
+                        offset, 
+                        fadeIn, fadeOut,
+                        fade;
+                    
+                    playlistEditor.stop();
+                    
+                    if (json.length === 0)
+                    {
+                        id1 = undefined;
+                        id2 = undefined;
+                    }
+                    else if (json.length === 1) {
+                        
+                        fade = json[0]["fades"][0];
+                        
+                        if (fade["type"] === "FadeOut") {
+                            fadeOut = fade["end"] - fade["start"];
+                            id2 = undefined; //incase of track decode error.
+                        }
+                        else {
+                            fadeIn = fade["end"] - fade["start"];
+                            id1 = undefined; //incase of track decode error.
+                        }
+                    }
+                    else {
+                        
+                        offset = json[0]["end"] - json[1]["start"];
+                        
+                        fade = json[0]["fades"][0];
+                        fadeOut = fade["end"] - fade["start"];
+                        
+                        fade = json[1]["fades"][0];
+                        fadeIn = fade["end"] - fade["start"];
+                    }
+                    
+                    fadeIn = (fadeIn === undefined) ? undefined : fadeIn.toFixed(1);
+                    fadeOut = (fadeOut === undefined) ? undefined : fadeOut.toFixed(1);
+                    
+                    changeCrossfade($html, id1, id2, fadeIn, fadeOut, offset, id);
+                }}
+            ],
+            open: function (event, ui) {
+                
+                var config = new Config({
+                    resolution: 15000,
+                    state: "cursor",
+                    mono: true,
+                    timescale: true,
+                    waveHeight: 80,
+                    container: $html[0],
+                    UITheme: "jQueryUI",
+                    timeFormat: 'hh:mm:ss.u'
+                });
+                
+                playlistEditor = new PlaylistEditor();
+                playlistEditor.setConfig(config);
+                playlistEditor.init(tracks);
+            },
+            close: removeDialog,
+            resizeStop: function(event, ui) {
+                playlistEditor.resize();
+            }
+        });        
+    };
+    
+    mod.showCuesWaveform = function(e) {
+        var $el = $(e.target),
+            $li = $el.parents("li"), 
+            id = $li.attr("unqid"),
+            $parent = $el.parent(),
+            uri = $parent.data("uri"),
+            $html = $($("#tmpl-pl-cues").html()),
+            cueIn = $li.find('.spl_cue_in').data("cueIn"),
+            cueOut = $li.find('.spl_cue_out').data("cueOut"),
+            cueInSec = $li.find('.spl_cue_in').data("cueSec"),
+            cueOutSec = $li.find('.spl_cue_out').data("cueSec"),
+            tracks = [{
+                src: uri,
+                selected: {
+                    start: cueInSec,
+                    end: cueOutSec
+                }
+            }],
+            dim = AIRTIME.utilities.findViewportDimensions(),
+            playlistEditor;
+        
+        function removeDialog() {
+            playlistEditor.stop();
+            
+            $html.dialog("destroy");
+            $html.remove();
+        }
+        
+        $html.find('.editor-cue-in').html(cueIn);
+        $html.find('.editor-cue-out').html(cueOut);
+        
+        $html.on("click", ".set-cue-in", function(e) {
+            var cueIn = $html.find('.audio_start').val();
+            
+            $html.find('.editor-cue-in').html(cueIn);
+        });
+        
+        $html.on("click", ".set-cue-out", function(e) {
+            var cueOut = $html.find('.audio_end').val();
+            
+            $html.find('.editor-cue-out').html(cueOut);
+        });
+        
+        $html.dialog({
+            modal: true,
+            title: $.i18n._("Cue Editor"),
+            show: 'clip',
+            hide: 'clip',
+            width: dim.width - 100,
+            height: 325,
+            buttons: [
+                {text: $.i18n._("Cancel"), class: "btn btn-small", click: removeDialog},
+                {text: $.i18n._("Save"),  class: "btn btn-small btn-inverse", click: function() {
+                    var cueIn = $html.find('.editor-cue-in').html(),
+                        cueOut = $html.find('.editor-cue-out').html();
+                    
+                    playlistEditor.stop();
+                    
+                    changeCues($html, id, cueIn, cueOut);
+                }}
+            ],
+            open: function (event, ui) {
+                
+                var config = new Config({
+                    resolution: 15000,
+                    mono: true,
+                    timescale: true,
+                    waveHeight: 80,
+                    container: $html[0],
+                    UITheme: "jQueryUI",
+                    timeFormat: 'hh:mm:ss.u'
+                });
+                
+                playlistEditor = new PlaylistEditor();
+                playlistEditor.setConfig(config);
+                playlistEditor.init(tracks);    
+            },
+            close: removeDialog,
+            resizeStop: function(event, ui) {
+                playlistEditor.resize();
+            }
+        });    
+    };
+    
+    mod.init = function() {
+        $('#new-playlist').live('click', function(){AIRTIME.playlist.fnNew();});
+        $('#new-smart-block').live('click', function(){AIRTIME.playlist.fnNewBlock();});
+        $('#new-webstream').live('click', function(){AIRTIME.playlist.fnWsNew();});
+
+        $pl.delegate("#spl_delete", {"click": function(ev){
+            AIRTIME.playlist.fnDelete();
+        }});
+        
+        $pl.delegate("#ws_delete", {"click": function(ev){
+            AIRTIME.playlist.fnWsDelete();
+        }});
+        
+        $pl.delegate(".pl-waveform-cues-btn", {"click": function(ev){
+            AIRTIME.playlist.showCuesWaveform(ev);
+        }});
+        
+        $pl.delegate(".pl-waveform-fades-btn", {"click": function(ev){
+            AIRTIME.playlist.showFadesWaveform(ev);
+        }});
+        
+        setPlaylistEntryEvents();
+        setCueEvents();
+        setFadeEvents();
+        setFadeIcon();
+        
+        initialEvents();
+        setUpPlaylist();
+    };
+
+    mod.onReady = function() {
+        $lib = $("#library_content");
+        $pl = $("#side_playlist");
+
+        $pl.hide();
+
+        AIRTIME.playlist.init();
+
+        $pl.find(".ui-icon-alert").qtip({
+            content: {
+                text: sprintf($.i18n._("%s is unsure about the status of this file. This can happen when the file is on a remote drive that is unaccessible or the file is in a directory that isn't 'watched' anymore."), PRODUCT_NAME)
+            },
+            position: {
+                adjust: {
+                resize: true,
+                method: "flip flip"
+                },
+                at: "right center",
+                my: "left top",
+                viewport: $(window)
+            },
+            style: {
+                classes: "ui-tooltip-dark"
+            },
+            show: 'mouseover',
+            hide: 'mouseout'
+        });
+    };
+    
+    mod.onResize = function() {
+    };
+    
+    return AIRTIME;
+    
+}(AIRTIME || {}));
+
+
+$(document).ready(AIRTIME.playlist.onReady);
+$(window).resize(AIRTIME.playlist.onResize);
diff --git a/airtime_mvc/public/js/airtime/showbuilder/builder.js b/airtime_mvc/public/js/airtime/showbuilder/builder.js
index 7d7a26f4a..3d85b071a 100644
--- a/airtime_mvc/public/js/airtime/showbuilder/builder.js
+++ b/airtime_mvc/public/js/airtime/showbuilder/builder.js
@@ -316,7 +316,7 @@ var AIRTIME = (function(AIRTIME){
         
     mod.fnAdd = function(aMediaIds, aSchedIds) {
         mod.disableUI();
-        
+
         $.post(baseUrl+"showbuilder/schedule-add", 
             {"format": "json", "mediaIds": aMediaIds, "schedIds": aSchedIds},
             mod.fnItemCallback
diff --git a/airtime_mvc/public/js/airtime/showbuilder/builder_test.js b/airtime_mvc/public/js/airtime/showbuilder/builder_test.js
index 38d521396..16f664897 100644
--- a/airtime_mvc/public/js/airtime/showbuilder/builder_test.js
+++ b/airtime_mvc/public/js/airtime/showbuilder/builder_test.js
@@ -305,13 +305,6 @@ var AIRTIME = (function(AIRTIME){
         
     mod.fnAdd = function(aMediaIds, aSchedIds) {
         mod.disableUI();
-        for (var i in aSchedIds) {
-            if ($("#"+aSchedIds[i].id).hasClass("sb-past")) {
-                alert($.i18n._("Cannot add media before currently playing track."));
-                mod.enableUI();
-                return;
-            }
-        }
 
         $.post(baseUrl+"showbuilder/schedule-add",
             {"format": "json", "mediaIds": aMediaIds, "schedIds": aSchedIds},
@@ -381,7 +374,7 @@ var AIRTIME = (function(AIRTIME){
             "url": sSource,
             "data": aoData,
             "success": function(json) {
-                mod.updateCalendarStatusIcon(json)
+                mod.updateCalendarStatusIcon(json);
                 mod.setTimestamp(json.timestamp);
                 mod.setShowInstances(json.instances);
                 mod.getSelectedCursors();
@@ -402,7 +395,7 @@ var AIRTIME = (function(AIRTIME){
 
     mod.builderDataTable = function() {
         $sbContent = $('#show_builder');
-        $lib = $("#library_content"),
+        $lib = $("#library_content");
         $sbTable = $sbContent.find('table');
         var isInitialized = false;
 
diff --git a/airtime_mvc/public/js/airtime/showbuilder/main_builder_test.js b/airtime_mvc/public/js/airtime/showbuilder/main_builder_test.js
index 1da573d13..e0895a0fb 100644
--- a/airtime_mvc/public/js/airtime/showbuilder/main_builder_test.js
+++ b/airtime_mvc/public/js/airtime/showbuilder/main_builder_test.js
@@ -144,8 +144,27 @@ AIRTIME = (function(AIRTIME) {
     }
 
     mod.onReady = function() {
+        // Normally we would just use audio/*, but it includes file types that we can't handle (like .m4a)
+        var acceptedTypes = ["audio/ogg",
+                             "application/ogg",
+                             "audio/vorbis",
+                             "audio/mp3",
+                             "audio/mpeg",
+                             "audio/mpeg3",
+                             "audio/x-aac",
+                             "audio/aac",
+                             "audio/aacp",
+                             "audio/mp4",
+                             "audio/x-flac",
+                             "audio/wav",
+                             "audio/x-wav",
+                             "audio/mp2",
+                             "audio/mp1",
+                             "audio/x-ms-wma",
+                             "audio/basic"];
 
         Dropzone.options.uploadForm = {
+            acceptedFiles: acceptedTypes.join(),
             init: function () {
                 this.on("sending", function (file, xhr, data) {
                     data.append("csrf_token", $("#csrf").val());