diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 9e7c56ad0..1e9deeae5 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -32,7 +32,7 @@ repos:
     hooks:
       - id: prettier
         files: \.(md|mdx|yml|yaml|js|jsx|ts|tsx|json|css)$
-        exclude: ^legacy/public
+        exclude: ^legacy/public(?!/js/airtime)
 
   - repo: https://github.com/asottile/pyupgrade
     rev: v2.34.0
diff --git a/legacy/application/layouts/scripts/layout.phtml b/legacy/application/layouts/scripts/layout.phtml
index 746148273..803dc682f 100644
--- a/legacy/application/layouts/scripts/layout.phtml
+++ b/legacy/application/layouts/scripts/layout.phtml
@@ -21,7 +21,10 @@
         $scs = $this->SourceConnectionStatus();
         ?>
         <?php echo $this->partial('partialviews/header.phtml', array(
-            "live_dj_switch" => $sss['live_dj'], "live_dj_connection" => $scs['live_dj'], "master_dj_switch" => $sss['master_dj'], "master_dj_connection" => $scs['master_dj'],
+            "live_dj_switch" => $sss['live_dj'],
+            "live_dj_connection" => $scs['live_dj'],
+            "master_dj_switch" => $sss['master_dj'],
+            "master_dj_connection" => $scs['master_dj'],
             "scheduled_play_switch" => $sss['scheduled_play']
         )) ?>
         <?php $partial = array('menu.phtml', 'default');
diff --git a/legacy/application/views/scripts/audiopreview/audio-preview.phtml b/legacy/application/views/scripts/audiopreview/audio-preview.phtml
index 27aac26eb..bed7d213f 100644
--- a/legacy/application/views/scripts/audiopreview/audio-preview.phtml
+++ b/legacy/application/views/scripts/audiopreview/audio-preview.phtml
@@ -1,28 +1,28 @@
 <div id="jquery_jplayer_1" class="jp-jplayer"></div>
 <div id="jp_container_1" class="jp-audio">
-<?php if (isset($this->playlistID)): ?>
-    <span class='playlistID'><?php echo "$this->playlistID" ?></span>
-    <span class='playlistIndex'><?php echo "$this->playlistIndex" ?></span>
-<?php elseif (isset($this->blockId)): ?>
-    <span class='blockId' style="display: none;"><?php echo "$this->blockId" ?></span>
-    <span class='blockIndex' style="display: none;"><?php echo "$this->blockIndex" ?></span>
-<?php elseif (isset($this->uri)): ?>
-    <span class='audioUri' style="display: none;"><?php echo "$this->uri" ?></span>
-    <span class='audioMime' style="display: none;"><?php echo "$this->mime" ?></span>
-    <span class='audioFileTitle'><?php echo "$this->audioFileTitle" ?></span>
-    <span class='audioFileArtist'><?php echo "$this->audioFileArtist" ?></span>
-<?php elseif (isset($this->showID)): ?>
-    <span class='showID'><?php echo "$this->showID" ?></span>
-    <span class='showIndex'><?php echo "$this->showIndex" ?></span>
-<?php endif;?>
+    <?php if (isset($this->playlistID)) : ?>
+        <span class='playlistID'><?php echo "$this->playlistID" ?></span>
+        <span class='playlistIndex'><?php echo "$this->playlistIndex" ?></span>
+    <?php elseif (isset($this->blockId)) : ?>
+        <span class='blockId' style="display: none;"><?php echo "$this->blockId" ?></span>
+        <span class='blockIndex' style="display: none;"><?php echo "$this->blockIndex" ?></span>
+    <?php elseif (isset($this->uri)) : ?>
+        <span class='audioUri' style="display: none;"><?php echo "$this->uri" ?></span>
+        <span class='audioMime' style="display: none;"><?php echo "$this->mime" ?></span>
+        <span class='audioFileTitle'><?php echo "$this->audioFileTitle" ?></span>
+        <span class='audioFileArtist'><?php echo "$this->audioFileArtist" ?></span>
+    <?php elseif (isset($this->showID)) : ?>
+        <span class='showID'><?php echo "$this->showID" ?></span>
+        <span class='showIndex'><?php echo "$this->showIndex" ?></span>
+    <?php endif; ?>
     <div class="jp-type-playlist">
         <div class="jp-gui jp-interface">
             <ul class="jp-controls">
-                <?php if ($this->type != "audioclip"): ?>
-                <li class="ui-state-default ui-corner-all jp-previous">
-                    <span class="ui-icon ui-icon-seek-prev" tabindex="1"><?php echo _("previous") ?></span>
-                </li>
-                <?php endif;?>
+                <?php if ($this->type != "audioclip") : ?>
+                    <li class="ui-state-default ui-corner-all jp-previous">
+                        <span class="ui-icon ui-icon-seek-prev" tabindex="1"><?php echo _("previous") ?></span>
+                    </li>
+                <?php endif; ?>
 
                 <li class="ui-state-default ui-corner-all jp-play">
                     <span class="ui-icon ui-icon-play" tabindex="1"><?php echo _("play") ?></span>
@@ -32,11 +32,11 @@
                     <span class="ui-icon ui-icon-pause" tabindex="1"><?php echo _("pause") ?></span>
                 </li>
 
-                <?php if ($this->type != "audioclip"): ?>
-                <li class="ui-state-default ui-corner-all jp-next">
-                    <span class="ui-icon ui-icon-seek-next" tabindex="1"><?php echo _("next") ?></span>
-                </li>
-                <?php endif;?>
+                <?php if ($this->type != "audioclip") : ?>
+                    <li class="ui-state-default ui-corner-all jp-next">
+                        <span class="ui-icon ui-icon-seek-next" tabindex="1"><?php echo _("next") ?></span>
+                    </li>
+                <?php endif; ?>
 
                 <li class="ui-state-default ui-corner-all jp-stop">
                     <span class="ui-icon ui-icon-stop" tabindex="1"><?php echo _("stop") ?></span>
@@ -50,9 +50,9 @@
                 </div>
                 <div class="jp-time-holder">
                     <div class="jp-current-time"></div>
-                    <?php if ($this->type == "audioclip"): ?>
-                    <div class="jp-duration"></div>
-                    <?php endif;?>
+                    <?php if ($this->type == "audioclip") : ?>
+                        <div class="jp-duration"></div>
+                    <?php endif; ?>
                 </div>
             </div>
             <div class="jp-volume-block">
@@ -77,9 +77,11 @@
         </div>
         <div class="jp-no-solution">
             <span><?php echo _("Update Required") ?></span>
-            <?php sprintf(_("To play the media you will need to either update your browser to a recent version or update your %sFlash plugin%s."),
+            <?php sprintf(
+                _("To play the media you will need to either update your browser to a recent version or update your %sFlash plugin%s."),
                 "<a href='http://get.adobe.com/flashplayer/' target='_blank'>",
-                "</a>") ?>
+                "</a>"
+            ) ?>
         </div>
     </div>
 </div>
diff --git a/legacy/application/views/scripts/dashboard/about.phtml b/legacy/application/views/scripts/dashboard/about.phtml
index f7cac7198..ff636a5b4 100644
--- a/legacy/application/views/scripts/dashboard/about.phtml
+++ b/legacy/application/views/scripts/dashboard/about.phtml
@@ -1,28 +1,34 @@
 <div class="text-content">
     <h2><?php echo _("About") ?></h2>
-<p>
-<?php
+    <p>
+        <?php
 
-$productSiteAnchor = "<a href='" . PRODUCT_SITE_URL . "' target='_blank'>"
-                        . PRODUCT_NAME
-                    . "</a>";
-echo sprintf(_('%1$s %2$s, the open radio software for scheduling and remote station management.'),
-    $productSiteAnchor,
-    $this->airtime_version)
-?>
-<br />
-<br />© <?php echo(gmdate('Y')); ?>
-<?php
-$companySiteAnchor = "<a href='" . COMPANY_SITE_URL . "' target='_blank'>"
-                        . COMPANY_NAME . " " . COMPANY_SUFFIX
-                    . "</a>";
-$licenseAnchor = "<a href='" . LICENSE_URL . "' target='_blank'>"
-                    . LICENSE_VERSION
-                . "</a>";
-echo sprintf(_('%1$s %2$s is distributed under the %3$s'),
-    $companySiteAnchor, PRODUCT_NAME, $licenseAnchor)
-?>
-</p>
+        $productSiteAnchor = "<a href='" . PRODUCT_SITE_URL . "' target='_blank'>"
+            . PRODUCT_NAME
+            . "</a>";
+        echo sprintf(
+            _('%1$s %2$s, the open radio software for scheduling and remote station management.'),
+            $productSiteAnchor,
+            $this->airtime_version
+        )
+        ?>
+        <br />
+        <br />© <?php echo (gmdate('Y')); ?>
+        <?php
+        $companySiteAnchor = "<a href='" . COMPANY_SITE_URL . "' target='_blank'>"
+            . COMPANY_NAME . " " . COMPANY_SUFFIX
+            . "</a>";
+        $licenseAnchor = "<a href='" . LICENSE_URL . "' target='_blank'>"
+            . LICENSE_VERSION
+            . "</a>";
+        echo sprintf(
+            _('%1$s %2$s is distributed under the %3$s'),
+            $companySiteAnchor,
+            PRODUCT_NAME,
+            $licenseAnchor
+        )
+        ?>
+    </p>
 </div>
 <br>
 <br>
diff --git a/legacy/application/views/scripts/dashboard/help.phtml b/legacy/application/views/scripts/dashboard/help.phtml
index c2736ed8e..2916caac9 100644
--- a/legacy/application/views/scripts/dashboard/help.phtml
+++ b/legacy/application/views/scripts/dashboard/help.phtml
@@ -1,24 +1,32 @@
 <div class="text-content">
-  <h2><?php echo sprintf(_("Welcome to %s!"), PRODUCT_NAME) ?></h2>
-<p><?php echo sprintf(_("Here's how you can get started using %s to automate your broadcasts: "), PRODUCT_NAME)?></p>
+    <h2><?php echo sprintf(_("Welcome to %s!"), PRODUCT_NAME) ?></h2>
+    <p><?php echo sprintf(_("Here's how you can get started using %s to automate your broadcasts: "), PRODUCT_NAME) ?></p>
 
-<ol>
-    <li><h4><?php echo _("Upload audio tracks");?></h4>
-        <?php echo _("Click the 'Upload' button in the left corner to upload tracks to your library.")?></li>
-    <li><h4><?php echo _("Schedule a show");?></h4>
-        <?php echo _("Click on 'Calendar' in the navigation bar on the left. From there click the '+ New Show' button and fill out the required fields.")?></li>
-    <li><h4><?php echo _("Add tracks to your show"); ?></h4>
-        <?php echo _("Click on your show in the calendar and select 'Schedule Show'. In the popup window drag tracks into your show."); ?>
-    </li>
+    <ol>
+        <li>
+            <h4><?php echo _("Upload audio tracks"); ?></h4>
+            <?php echo _("Click the 'Upload' button in the left corner to upload tracks to your library.") ?>
+        </li>
+        <li>
+            <h4><?php echo _("Schedule a show"); ?></h4>
+            <?php echo _("Click on 'Calendar' in the navigation bar on the left. From there click the '+ New Show' button and fill out the required fields.") ?>
+        </li>
+        <li>
+            <h4><?php echo _("Add tracks to your show"); ?></h4>
+            <?php echo _("Click on your show in the calendar and select 'Schedule Show'. In the popup window drag tracks into your show."); ?>
+        </li>
 
 
-</ol>
-<p><strong><?php echo _("Now you're good to go!")?></strong><br />
-<?php
-$userManualAnchorOpen = "<a href='" . USER_MANUAL_URL . "' target='_blank'>";
-echo sprintf(_("For more detailed help, read the %suser manual%s."),
-    $userManualAnchorOpen, "</a>")
+    </ol>
+    <p><strong><?php echo _("Now you're good to go!") ?></strong><br />
+        <?php
+        $userManualAnchorOpen = "<a href='" . USER_MANUAL_URL . "' target='_blank'>";
+        echo sprintf(
+            _("For more detailed help, read the %suser manual%s."),
+            $userManualAnchorOpen,
+            "</a>"
+        )
 
-?>
-</p>
+        ?>
+    </p>
 </div>
diff --git a/legacy/application/views/scripts/dashboard/stream-player.phtml b/legacy/application/views/scripts/dashboard/stream-player.phtml
index 3da914a46..f8e00e963 100644
--- a/legacy/application/views/scripts/dashboard/stream-player.phtml
+++ b/legacy/application/views/scripts/dashboard/stream-player.phtml
@@ -1,99 +1,99 @@
 <div id="content" class="jp-container">
-<h1><?php echo _("Live stream") ?></h1>
-<a id="popup-link" href="#"><?php echo _("Share") ?></a>
-<?php $ids = Application_Model_StreamSetting::getEnabledStreamIds(); ?>
-<script>
-function setjPlayer(url, type, serverType){
-    var obj = new Object();
-    obj[type] = url;
+    <h1><?php echo _("Live stream") ?></h1>
+    <a id="popup-link" href="#"><?php echo _("Share") ?></a>
+    <?php $ids = Application_Model_StreamSetting::getEnabledStreamIds(); ?>
+    <script>
+        function setjPlayer(url, type, serverType) {
+            var obj = new Object();
+            obj[type] = url;
 
-    if(serverType == 'shoutcast'){
-        obj[type] = url + ";stream/1";
-    }
+            if (serverType == 'shoutcast') {
+                obj[type] = url + ";stream/1";
+            }
 
-    $("#jquery_jplayer_1").jPlayer("destroy");
-    $("#jquery_jplayer_1").jPlayer({
-        ready: function () {
-            $(this).jPlayer("setMedia", obj).jPlayer("play");
-        },
-        ended: function (event) {
-            $(this).jPlayer("play");
-        },
-        swfPath: "/js/jplayer/",
-        supplied: type,
-        wmode: "window"
-    });
-}
-
-$(document).ready(function(){
-
-    $("#combo-box").change(function(eventObject){
-        var elem = $("#combo-box option:selected");
-        setjPlayer(elem.attr("data-url"), elem.attr("data-type"), elem.attr("server-type"));
-    });
-
-    <?php
-        if (count($ids) > 0){
-            $id = $ids[0];
-            $streamData = Application_Model_StreamSetting::getStreamData($id);
-            $url = "http://".$streamData["${id}_host"].":".$streamData["${id}_port"]."/".$streamData["${id}_mount"];
-            $type = $streamData["${id}_type"];
-            $serverType = $streamData["${id}_output"];
-            if ($type == "ogg")
-                $type = "oga";
-            echo "setjPlayer('$url', '$type', '$serverType');";
+            $("#jquery_jplayer_1").jPlayer("destroy");
+            $("#jquery_jplayer_1").jPlayer({
+                ready: function() {
+                    $(this).jPlayer("setMedia", obj).jPlayer("play");
+                },
+                ended: function(event) {
+                    $(this).jPlayer("play");
+                },
+                swfPath: "/js/jplayer/",
+                supplied: type,
+                wmode: "window"
+            });
         }
-    ?>
 
-    $("#popup-link").click(function() {
-        $("#popup-share").show("slow");
-        $("#popup-share-link").val($("#combo-box option:selected").attr("data-url"));
-    });
+        $(document).ready(function() {
 
-    $("#popup-close").click(function() {
-        $("#popup-share").hide("slow");
-    });
-});
-</script>
-  <div class="jp-logo"><img id="logo-img" onload='resizeToMaxHeight(this, 40);' src="<?php echo $this->logo ?>" /></div>
-  <div id="popup-share">
-    <a class="close-round" href="#" id="popup-close"></a>
-      <input id="popup-share-link" type="text" readonly="readonly"/>
-  </div>
-        <div class="jp-stream stream-player-label">
-            <div class="jp-stream-text"><?php echo _("Select stream:"); ?></div>
+            $("#combo-box").change(function(eventObject) {
+                var elem = $("#combo-box option:selected");
+                setjPlayer(elem.attr("data-url"), elem.attr("data-type"), elem.attr("server-type"));
+            });
 
-              <form id="form1" method="post" action="">
-                <select id="combo-box">
-                    <?php
-                        foreach($ids as $id) {
-                            $streamData = Application_Model_StreamSetting::getStreamData($id);
-                            $url = "http://".$streamData["${id}_host"].":".$streamData["${id}_port"]."/".$streamData["${id}_mount"];
-                            $type = $streamData["${id}_type"];
-                            $serverType = $streamData["${id}_output"];
-                            if ($type == "ogg")
-                                $type = "oga";
+            <?php
+            if (count($ids) > 0) {
+                $id = $ids[0];
+                $streamData = Application_Model_StreamSetting::getStreamData($id);
+                $url = "http://" . $streamData["${id}_host"] . ":" . $streamData["${id}_port"] . "/" . $streamData["${id}_mount"];
+                $type = $streamData["${id}_type"];
+                $serverType = $streamData["${id}_output"];
+                if ($type == "ogg")
+                    $type = "oga";
+                echo "setjPlayer('$url', '$type', '$serverType');";
+            }
+            ?>
 
-                            $label = "(".$streamData["${id}_host"].") ".$streamData["${id}_description"]." - ".$streamData["${id}_bitrate"]." kbit/s";
-                            echo sprintf("<option class='stream' value='%s' data-url='%s' data-type='%s' server-type='%s'>%s</option>", $id, $url, $type, $serverType, $label);
-                        }
-                    ?>
-                </select>
-              </form>
-        </div>
-        <div id="jquery_jplayer_1" class="jp-jplayer"></div>
+            $("#popup-link").click(function() {
+                $("#popup-share").show("slow");
+                $("#popup-share-link").val($("#combo-box option:selected").attr("data-url"));
+            });
 
-<div id="jp_container_1" class="jp-audio">
-    <div class="jp-type-single">
-        <div id="jp_interface_1" class="jp-gui jp-interface">
-            <ul class="jp-controls">
-                <li><a title="mute" tabindex="1" class="jp-mute" href="javascript:;"><?php echo _("mute") ?></a></li>
-                <li><a title="unmute" tabindex="1" class="jp-unmute" href="javascript:;"><?php echo _("unmute") ?></a></li>
-            </ul>
-            <div class="jp-volume-bar">
-                <div class="jp-volume-bar-value"></div>
-            </div>
-        </div>
-        <div id="jp_playlist_1" class="jp-playlist"></div>
+            $("#popup-close").click(function() {
+                $("#popup-share").hide("slow");
+            });
+        });
+    </script>
+    <div class="jp-logo"><img id="logo-img" onload='resizeToMaxHeight(this, 40);' src="<?php echo $this->logo ?>" /></div>
+    <div id="popup-share">
+        <a class="close-round" href="#" id="popup-close"></a>
+        <input id="popup-share-link" type="text" readonly="readonly" />
+    </div>
+    <div class="jp-stream stream-player-label">
+        <div class="jp-stream-text"><?php echo _("Select stream:"); ?></div>
+
+        <form id="form1" method="post" action="">
+            <select id="combo-box">
+                <?php
+                foreach ($ids as $id) {
+                    $streamData = Application_Model_StreamSetting::getStreamData($id);
+                    $url = "http://" . $streamData["${id}_host"] . ":" . $streamData["${id}_port"] . "/" . $streamData["${id}_mount"];
+                    $type = $streamData["${id}_type"];
+                    $serverType = $streamData["${id}_output"];
+                    if ($type == "ogg")
+                        $type = "oga";
+
+                    $label = "(" . $streamData["${id}_host"] . ") " . $streamData["${id}_description"] . " - " . $streamData["${id}_bitrate"] . " kbit/s";
+                    echo sprintf("<option class='stream' value='%s' data-url='%s' data-type='%s' server-type='%s'>%s</option>", $id, $url, $type, $serverType, $label);
+                }
+                ?>
+            </select>
+        </form>
+    </div>
+    <div id="jquery_jplayer_1" class="jp-jplayer"></div>
+
+    <div id="jp_container_1" class="jp-audio">
+        <div class="jp-type-single">
+            <div id="jp_interface_1" class="jp-gui jp-interface">
+                <ul class="jp-controls">
+                    <li><a title="mute" tabindex="1" class="jp-mute" href="javascript:;"><?php echo _("mute") ?></a></li>
+                    <li><a title="unmute" tabindex="1" class="jp-unmute" href="javascript:;"><?php echo _("unmute") ?></a></li>
+                </ul>
+                <div class="jp-volume-bar">
+                    <div class="jp-volume-bar-value"></div>
+                </div>
+            </div>
+            <div id="jp_playlist_1" class="jp-playlist"></div>
+        </div>
     </div>
-</div>
diff --git a/legacy/application/views/scripts/embed/player.phtml b/legacy/application/views/scripts/embed/player.phtml
index 75e7cd4de..92a98b536 100644
--- a/legacy/application/views/scripts/embed/player.phtml
+++ b/legacy/application/views/scripts/embed/player.phtml
@@ -2,11 +2,11 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 
 <head>
-    <link rel="stylesheet" href="<?php echo $this->css?>" type="text/css">
-    <script src="<?php echo $this->playerhtml5_js?>" type="text/javascript"></script>
-    <script src="<?php echo $this->jquery?>" type="text/javascript"></script>
+    <link rel="stylesheet" href="<?php echo $this->css ?>" type="text/css">
+    <script src="<?php echo $this->playerhtml5_js ?>" type="text/javascript"></script>
+    <script src="<?php echo $this->jquery ?>" type="text/javascript"></script>
 
-    <script src="<?php echo $this->jquery_i18n?>" type="text/javascript"></script>
+    <script src="<?php echo $this->jquery_i18n ?>" type="text/javascript"></script>
     <script src="/locale/general-translation-table" type="text/javascript"></script>
     <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
     <script type="text/javascript">
@@ -15,15 +15,15 @@
         var MAX_MOBILE_SCREEN_WIDTH = 760;
 
         var Html5Player = function() {
-            var id_element=getRandomIdPlayer(3000);
+            var id_element = getRandomIdPlayer(3000);
             this.mobileDetect = this.mobileDetect();
             this.playerMode = "<?php echo $this->playerMode ?>";
             this.settings = {
-                'elementId': id_element,    // leave alone
-                'autoplay': false,          // or true (only works on some browsers)
-                'forceHTTPS': false,         // or true if the stream is in SSL (beware of the listening port, usually 8000)
-                'replacePort': false,        // false for disabled or '8000' as the usual start port, forces to specify replacePortTo.
-                'replacePortTo': ''          // either '' to use the default port of the browser (80/http, 443/https) or '8443' to force the port of the stream.
+                'elementId': id_element, // leave alone
+                'autoplay': false, // or true (only works on some browsers)
+                'forceHTTPS': false, // or true if the stream is in SSL (beware of the listening port, usually 8000)
+                'replacePort': false, // false for disabled or '8000' as the usual start port, forces to specify replacePortTo.
+                'replacePortTo': '' // either '' to use the default port of the browser (80/http, 443/https) or '8443' to force the port of the stream.
             };
 
             if (this.playerMode == "manual") {
@@ -33,8 +33,8 @@
                 this.settings.url = <?php echo $this->streamURL ?>;
                 this.settings.codec = "<?php echo $this->codec ?>";
             } else if (this.playerMode == "auto") {
-                this.availableMobileStreamQueue = <?php echo $this->availableMobileStreams?>;
-                this.availableDesktopStreamQueue = <?php echo $this->availableDesktopStreams?>;
+                this.availableMobileStreamQueue = <?php echo $this->availableMobileStreams ?>;
+                this.availableDesktopStreamQueue = <?php echo $this->availableDesktopStreams ?>;
                 var stream = this.getNextAvailableStream();
                 this.settings.url = stream["url"];
                 this.settings.codec = stream["codec"];
@@ -43,10 +43,10 @@
             // Create the Muses player object
             playerhtml5_insert(this.settings);
             playerhtml5_audio = document.getElementById(id_element);
-            if(playerhtml5_audio.played==true) togglePlayStopButton();
+            if (playerhtml5_audio.played == true) togglePlayStopButton();
 
             // Configure player title
-            var player_title = <?php echo $this->player_title?>;
+            var player_title = <?php echo $this->player_title ?>;
             if (player_title === null) {
                 $(".airtime_header").hide();
                 $(".airtime_player").css('height', '150px');
@@ -119,13 +119,14 @@
             playerhtml5_audio.pause();
             togglePlayStopButton();
         };
+
         function togglePlayStopButton() {
             document.getElementById("play_button").classList.toggle("hide_button");
             document.getElementById("stop_button").classList.toggle("hide_button");
         }
 
         $(document).ready(function() {
-            $(".play").click(function () {
+            $(".play").click(function() {
                 if ($(this).hasClass("pause")) {
                     html5Player.stop();
                 } else {
@@ -144,9 +145,13 @@
         // and attaches it to the player UI.
         //
         // The metadata is fetched when the current track is about to end.
-        function attachStreamMetadataToPlayer(){
-            $.ajax({url: "<?php echo $this->metadata_api_url?>",
-                data: {type:"interval",limit:"5"},
+        function attachStreamMetadataToPlayer() {
+            $.ajax({
+                url: "<?php echo $this->metadata_api_url ?>",
+                data: {
+                    type: "interval",
+                    limit: "5"
+                },
                 dataType: "jsonp",
                 success: function(data) {
 
@@ -155,7 +160,7 @@
                             //Master/show source have no current track but they do have a current show.
                             $("p.now_playing").html($.i18n._("On Air") + "<span>" + data.currentShow[0].name + "</span>");
                         } else {
-                            $("p.now_playing").html($.i18n._("Off Air") + "<span>"+ $.i18n._("Offline") + "</span>");
+                            $("p.now_playing").html($.i18n._("Off Air") + "<span>" + $.i18n._("Offline") + "</span>");
                         }
                         time_to_next_track_starts = 20000;
                     } else {
@@ -197,12 +202,10 @@
             }
 
             // Add 3 seconds to the timeout so Airtime has time to update the metadata before we fetch it
-            metadataTimer = setTimeout(attachStreamMetadataToPlayer, time_to_next_track_starts+3000);
+            metadataTimer = setTimeout(attachStreamMetadataToPlayer, time_to_next_track_starts + 3000);
 
 
         }
-
-
     </script>
 
     <style type="text/css">
@@ -212,59 +215,66 @@
         not work. It has to be "visible" on the page. As a hacky work around we
         set the height and width to 1px so users will not see it.
         */
-        #html5player_skin{width:0; height:0; overflow: hidden;}
+        #html5player_skin {
+            width: 0;
+            height: 0;
+            overflow: hidden;
+        }
     </style>
 
 </head>
 
 <body>
 
-<div id="player" <?php if ($this->player_style == "basic") echo "style='display:block;'"; else echo "style='display:none'"; ?>>
-    <div class="airtime_player">
+    <div id="player" <?php if ($this->player_style == "basic") echo "style='display:block;'";
+                        else echo "style='display:none'"; ?>>
+        <div class="airtime_player">
 
-        <div class="airtime_header">
-            <p class="station_name">fff</p>
-        </div>
-
-        <div class="airtime_box">
-
-            <div class="airtime_button">
-                <span id="play_button" class="play_button" onclick="html5Player.play()"></span>
-                <span id="stop_button" class="stop_button hide_button" onclick="html5Player.stop()"></span>
+            <div class="airtime_header">
+                <p class="station_name">fff</p>
             </div>
-            <p class="now_playing"></p>
 
-        </div>
+            <div class="airtime_box">
 
-        <div style="clear:both"></div>
+                <div class="airtime_button">
+                    <span id="play_button" class="play_button" onclick="html5Player.play()"></span>
+                    <span id="stop_button" class="stop_button hide_button" onclick="html5Player.stop()"></span>
+                </div>
+                <p class="now_playing"></p>
 
-        <div class="airtime_schedule">
-            <p class="airtime_next"><?php echo _("Next") ?></p>
-            <ul class="schedule_list">
-                <li></li>
-            </ul>
-        </div>
-        <a class="airtime_pro" target="_blank" href="<?php echo PRODUCT_SITE_URL; ?>"><?php printf(_('Powered by %s'), PRODUCT_NAME); ?></a>
+            </div>
 
-    </div>
-</div>
+            <div style="clear:both"></div>
 
-<div id="premium_player" <?php if ($this->player_style == "premium") echo "style='display:block;'"; else echo "style='display:none'"; ?>>
-    <div class="bottom_bar">
-        <div class="play cont_btn"></div>
+            <div class="airtime_schedule">
+                <p class="airtime_next"><?php echo _("Next") ?></p>
+                <ul class="schedule_list">
+                    <li></li>
+                </ul>
+            </div>
+            <a class="airtime_pro" target="_blank" href="<?php echo PRODUCT_SITE_URL; ?>"><?php printf(_('Powered by %s'), PRODUCT_NAME); ?></a>
 
-        <div class="on_air">
-            <p class="now_playing"></p>
         </div>
     </div>
 
-</div>
+    <div id="premium_player" <?php if ($this->player_style == "premium") echo "style='display:block;'";
+                                else echo "style='display:none'"; ?>>
+        <div class="bottom_bar">
+            <div class="play cont_btn"></div>
 
-<div id="html5player_skin">
-    <script type="text/javascript">
-        var html5Player = new Html5Player();
-    </script>
-</div>
+            <div class="on_air">
+                <p class="now_playing"></p>
+            </div>
+        </div>
+
+    </div>
+
+    <div id="html5player_skin">
+        <script type="text/javascript">
+            var html5Player = new Html5Player();
+        </script>
+    </div>
 
 </body>
+
 </html>
diff --git a/legacy/application/views/scripts/embed/weekly-program.phtml b/legacy/application/views/scripts/embed/weekly-program.phtml
index 12b7f7262..ae052b726 100644
--- a/legacy/application/views/scripts/embed/weekly-program.phtml
+++ b/legacy/application/views/scripts/embed/weekly-program.phtml
@@ -2,16 +2,16 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 
 <head>
-    <link rel="stylesheet" href="<?php echo $this->css?>" type="text/css">
+    <link rel="stylesheet" href="<?php echo $this->css ?>" type="text/css">
     <script src="<?php echo $this->jquery ?>" type="text/javascript"></script>
     <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
     <script src="/js/libs/handlebars.min.js"></script>
 </head>
 
 <body>
-<div id="wpBody" class="schedule tab_content current">
-    <script id="wpWidget" type="text/x-handlebars-template">
-        <ul class="tabs">
+    <div id="wpBody" class="schedule tab_content current">
+        <script id="wpWidget" type="text/x-handlebars-template">
+            <ul class="tabs">
             {{#each this}}
             <li>
                 {{dayOfWeek}}<span>{{dayOfMonth}}</span>
@@ -40,65 +40,70 @@
             <a href="<?php echo PRODUCT_SITE_URL; ?>" target="_blank"><?php printf(_('Powered by %s'), PRODUCT_NAME); ?></a>
         </div>
     </script>
-</div>
+    </div>
 
-<script type="text/javascript">
-    let importSchedule = <?php echo $this->schedule_data; ?>;  // Object prepared in JSON, w/o API call
-    let cleanSchedule = [];
+    <script type="text/javascript">
+        let importSchedule = <?php echo $this->schedule_data; ?>; // Object prepared in JSON, w/o API call
+        let cleanSchedule = [];
 
-    // Insert shows into correct locations in importShows array (work-around for API v.1)
-    let importShows = importSchedule["shows"];
-    importShows.forEach(element => {
-        // Convert timestamps to JS (sec -> millisec)
-        var start_date = new Date(element.starts_timestamp*1000);
-        var end_date = new Date(element.ends_timestamp*1000);
-        // Check date of show so we know where to assign it to
-        var format_start_date = start_date.getFullYear() + "-" + (start_date.getMonth()+1) + "-" + start_date.getDate();
-        // Assign show to correct location
-        if (importSchedule["weekDays"][format_start_date] !== undefined) {
-            importSchedule["weekDays"][format_start_date]["shows"].push(
-                {
-                    "show_start_hour": start_date.toLocaleTimeString([], { hour: 'numeric', minute : 'numeric' }),
-                    "show_end_hour": end_date.toLocaleTimeString([], { hour: 'numeric', minute : 'numeric' }),
+        // Insert shows into correct locations in importShows array (work-around for API v.1)
+        let importShows = importSchedule["shows"];
+        importShows.forEach(element => {
+            // Convert timestamps to JS (sec -> millisec)
+            var start_date = new Date(element.starts_timestamp * 1000);
+            var end_date = new Date(element.ends_timestamp * 1000);
+            // Check date of show so we know where to assign it to
+            var format_start_date = start_date.getFullYear() + "-" + (start_date.getMonth() + 1) + "-" + start_date.getDate();
+            // Assign show to correct location
+            if (importSchedule["weekDays"][format_start_date] !== undefined) {
+                importSchedule["weekDays"][format_start_date]["shows"].push({
+                    "show_start_hour": start_date.toLocaleTimeString([], {
+                        hour: 'numeric',
+                        minute: 'numeric'
+                    }),
+                    "show_end_hour": end_date.toLocaleTimeString([], {
+                        hour: 'numeric',
+                        minute: 'numeric'
+                    }),
                     "name": element.name
                 });
-        }
-    });
-
-    // Re-arraying data into a Handlebars-friendly format
-    for (var i = 0; i <= 6; i++) {
-        cleanSchedule.push(Object.values(importSchedule.weekDays)[i]);
-    }
-
-    // Checker
-    Handlebars.registerHelper('noShowsCheck', function(obj){
-        return obj.length == 0;
-    });
-
-    // Templating with Handlebars.js
-    var wpWidget = document.querySelector('#wpWidget').innerHTML;
-    var wpTemplate = Handlebars.compile(wpWidget);
-    var compiledHTML = wpTemplate(cleanSchedule);
-    document.querySelector('#wpBody').innerHTML = compiledHTML;
-
-    // Tabs logic
-    $(document).ready(function() {
-        //initialize first day to active
-        $('.tabs').find("li").first().addClass("active");
-        $('.schedule_content').find('.schedule_item').first().addClass("active");
-
-        $('.tabs li').click(function(){
-            //var tab_id = $(this).attr('data-tab');
-            var tab_id = "day-"+$(this).find('span').text();
-
-            $('.tabs li').removeClass('active');
-            $('.schedule_item').removeClass('active');
-
-            $(this).addClass('active');
-            $("#"+tab_id).addClass('active');
+            }
         });
-    });
 
-</script>
+        // Re-arraying data into a Handlebars-friendly format
+        for (var i = 0; i <= 6; i++) {
+            cleanSchedule.push(Object.values(importSchedule.weekDays)[i]);
+        }
+
+        // Checker
+        Handlebars.registerHelper('noShowsCheck', function(obj) {
+            return obj.length == 0;
+        });
+
+        // Templating with Handlebars.js
+        var wpWidget = document.querySelector('#wpWidget').innerHTML;
+        var wpTemplate = Handlebars.compile(wpWidget);
+        var compiledHTML = wpTemplate(cleanSchedule);
+        document.querySelector('#wpBody').innerHTML = compiledHTML;
+
+        // Tabs logic
+        $(document).ready(function() {
+            //initialize first day to active
+            $('.tabs').find("li").first().addClass("active");
+            $('.schedule_content').find('.schedule_item').first().addClass("active");
+
+            $('.tabs li').click(function() {
+                //var tab_id = $(this).attr('data-tab');
+                var tab_id = "day-" + $(this).find('span').text();
+
+                $('.tabs li').removeClass('active');
+                $('.schedule_item').removeClass('active');
+
+                $(this).addClass('active');
+                $("#" + tab_id).addClass('active');
+            });
+        });
+    </script>
 </body>
+
 </html>
diff --git a/legacy/application/views/scripts/error/error-400.phtml b/legacy/application/views/scripts/error/error-400.phtml
index 036f8e71a..2c2ec4d96 100644
--- a/legacy/application/views/scripts/error/error-400.phtml
+++ b/legacy/application/views/scripts/error/error-400.phtml
@@ -1,17 +1,20 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
+
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-  <title><?php echo _("An error has occurred.") ?></title>
-  <?php echo $this->headLink(); ?>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <title><?php echo _("An error has occurred.") ?></title>
+    <?php echo $this->headLink(); ?>
 </head>
+
 <body>
     <div class="error-content" id="error-400">
-        <h2><?php echo _("Bad Request!")?></h2>
-        <p><?php echo _("The requested action is not supported!")?></p>
+        <h2><?php echo _("Bad Request!") ?></h2>
+        <p><?php echo _("The requested action is not supported!") ?></p>
         <div class="button-bar">
             <a class="toggle-button" href="<?php echo $this->helpUrl; ?>"><?php echo _("Help") ?></a>
         </div>
     </div>
 </body>
+
 </html>
diff --git a/legacy/application/views/scripts/error/error-403.phtml b/legacy/application/views/scripts/error/error-403.phtml
index 072bb475b..2cfb4bf89 100644
--- a/legacy/application/views/scripts/error/error-403.phtml
+++ b/legacy/application/views/scripts/error/error-403.phtml
@@ -1,17 +1,20 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
+
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-  <title><?php echo _("An error has occurred.") ?></title>
-  <?php echo $this->headLink(); ?>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <title><?php echo _("An error has occurred.") ?></title>
+    <?php echo $this->headLink(); ?>
 </head>
+
 <body>
     <div class="error-content" id="error-403">
-        <h2><?php echo _("Access Denied!")?></h2>
-        <p><?php echo _("You do not have permission to access this page!")?></p>
+        <h2><?php echo _("Access Denied!") ?></h2>
+        <p><?php echo _("You do not have permission to access this page!") ?></p>
         <div class="button-bar">
             <a class="toggle-button" href="<?php echo $this->helpUrl; ?>"><?php echo _("Help") ?></a>
         </div>
     </div>
 </body>
+
 </html>
diff --git a/legacy/application/views/scripts/error/error-404.phtml b/legacy/application/views/scripts/error/error-404.phtml
index 7cb90f771..1cdc0ca1e 100644
--- a/legacy/application/views/scripts/error/error-404.phtml
+++ b/legacy/application/views/scripts/error/error-404.phtml
@@ -1,17 +1,20 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
+
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-  <title><?php echo _("An error has occurred.") ?></title>
-  <?php echo $this->headLink(); ?>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <title><?php echo _("An error has occurred.") ?></title>
+    <?php echo $this->headLink(); ?>
 </head>
+
 <body>
     <div class="error-content" id="error-404">
-        <h2><?php echo _("Page not found!")?></h2>
-        <p><?php echo _("We couldn't find the page you were looking for.")?></p>
+        <h2><?php echo _("Page not found!") ?></h2>
+        <p><?php echo _("We couldn't find the page you were looking for.") ?></p>
         <div class="button-bar">
             <a class="toggle-button" href="<?php echo $this->helpUrl; ?>"><?php echo _("Help") ?></a>
         </div>
     </div>
 </body>
+
 </html>
diff --git a/legacy/application/views/scripts/error/error-500.phtml b/legacy/application/views/scripts/error/error-500.phtml
index 4c8cb2516..440bea27a 100644
--- a/legacy/application/views/scripts/error/error-500.phtml
+++ b/legacy/application/views/scripts/error/error-500.phtml
@@ -1,17 +1,20 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
+
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-  <title><?php echo _("An error has occurred.") ?></title>
-  <?php echo $this->headLink(); ?>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <title><?php echo _("An error has occurred.") ?></title>
+    <?php echo $this->headLink(); ?>
 </head>
+
 <body>
     <div class="error-content" id="error-500">
-        <h2><?php echo _("Oops!")?></h2>
-        <p><?php echo _("Something went wrong!")?></p>
+        <h2><?php echo _("Oops!") ?></h2>
+        <p><?php echo _("Something went wrong!") ?></p>
         <div class="button-bar">
             <a class="toggle-button" href="<?php echo $this->helpUrl; ?>"><?php echo _("Help") ?></a>
         </div>
     </div>
 </body>
+
 </html>
diff --git a/legacy/application/views/scripts/error/error.phtml b/legacy/application/views/scripts/error/error.phtml
index 96f90c325..a0493c8fd 100644
--- a/legacy/application/views/scripts/error/error.phtml
+++ b/legacy/application/views/scripts/error/error.phtml
@@ -1,18 +1,20 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN";
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
-<html xmlns="http://www.w3.org/1999/xhtml">
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ; "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
+<html xmlns=" http://www.w3.org/1999/xhtml">
+
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-  <title><?php echo _("An error has occurred.") ?></title>
-  <?php echo $this->headLink(); ?>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <title><?php echo _("An error has occurred.") ?></title>
+    <?php echo $this->headLink(); ?>
 </head>
+
 <body>
     <div class="error-content">
-        <h2><?php echo $this->escape($this->message)?></h2>
-        <p><?php echo _("Looks like the page you were looking for doesn't exist!")?></p>
+        <h2><?php echo $this->escape($this->message) ?></h2>
+        <p><?php echo _("Looks like the page you were looking for doesn't exist!") ?></p>
         <div class="button-bar">
             <a class="toggle-button" href="<?php echo $this->baseUrl('dashboard/help'); ?>"><?php echo _("Help") ?></a>
         </div>
     </div>
 </body>
+
 </html>
diff --git a/legacy/application/views/scripts/form/add-show-autoplaylist.phtml b/legacy/application/views/scripts/form/add-show-autoplaylist.phtml
index 3f22104db..1cee68cd4 100644
--- a/legacy/application/views/scripts/form/add-show-autoplaylist.phtml
+++ b/legacy/application/views/scripts/form/add-show-autoplaylist.phtml
@@ -2,7 +2,7 @@
     <dl>
         <dt id="add_show_has_autoplaylist_label">
             <label for="add_show_has_autoplaylist_label">
-                <?php echo $this->element->getElement('add_show_has_autoplaylist')->getLabel()?>
+                <?php echo $this->element->getElement('add_show_has_autoplaylist')->getLabel() ?>
             </label>
         </dt>
         <dd>
@@ -10,24 +10,24 @@
             <span class="show_autoplaylist_help_icon" aria-describedby="ui-tooltip-2"></span>
         </dd>
 
-	<div id="add_show_playlist_dropdown">
-        <p><?php echo _("Autoloading playlists' contents are added to shows one hour before the show airs. <a target='_blank' href='http://libretime.org/docs/playlists'>More information</a>"); ?></p>
-        <dt id="add_show_autoplaylist_id">
-            <label for="add_show_autoplaylist_id" class="required">
-                <?php echo $this->element->getElement('add_show_autoplaylist_id')->getLabel()?>
-            </label>
-        </dt>
-        <dd>
-            <?php echo $this->element->getElement('add_show_autoplaylist_id') ?>
-        </div>
-        <div  id="add_show_autoplaylist_repeat">
-            <dt id="add_show_autoplaylist_repeat_label">
-            <label for="add_show_autoplaylist_repeat_label">
-                <?php echo $this->element->getElement('add_show_autoplaylist_repeat')->getLabel()?>
-            </label>
+        <div id="add_show_playlist_dropdown">
+            <p><?php echo _("Autoloading playlists' contents are added to shows one hour before the show airs. <a target='_blank' href='http://libretime.org/docs/playlists'>More information</a>"); ?></p>
+            <dt id="add_show_autoplaylist_id">
+                <label for="add_show_autoplaylist_id" class="required">
+                    <?php echo $this->element->getElement('add_show_autoplaylist_id')->getLabel() ?>
+                </label>
             </dt>
             <dd>
-            <?php echo $this->element->getElement('add_show_autoplaylist_repeat') ?>
+                <?php echo $this->element->getElement('add_show_autoplaylist_id') ?>
+        </div>
+        <div id="add_show_autoplaylist_repeat">
+            <dt id="add_show_autoplaylist_repeat_label">
+                <label for="add_show_autoplaylist_repeat_label">
+                    <?php echo $this->element->getElement('add_show_autoplaylist_repeat')->getLabel() ?>
+                </label>
+            </dt>
+            <dd>
+                <?php echo $this->element->getElement('add_show_autoplaylist_repeat') ?>
             </dd>
         </div>
 
diff --git a/legacy/application/views/scripts/form/add-show-block.phtml b/legacy/application/views/scripts/form/add-show-block.phtml
index 491b8000b..6ca18fd0c 100644
--- a/legacy/application/views/scripts/form/add-show-block.phtml
+++ b/legacy/application/views/scripts/form/add-show-block.phtml
@@ -1,6 +1,8 @@
 <dt id="<?php echo $this->element->getName() ?>-label" class="<?php echo $this->class ?>">
-    <?php echo $this->formLabel($this->element->getName(),
-                         $this->element->getLabel()) ?>
+    <?php echo $this->formLabel(
+        $this->element->getName(),
+        $this->element->getLabel()
+    ) ?>
 </dt>
 <dd id="<?php echo $this->element->getName() ?>-element" class="<?php echo $this->class ?>">
     <?php echo $this->{$this->element->helper}(
@@ -8,8 +10,8 @@
         $this->element->getValue(),
         $this->element->getAttribs()
     ) ?>
-    <?php if($this->element->hasErrors()) {
-            echo $this->formErrors($this->element->getMessages());
-        }
+    <?php if ($this->element->hasErrors()) {
+        echo $this->formErrors($this->element->getMessages());
+    }
     ?>
 </dd>
diff --git a/legacy/application/views/scripts/form/add-show-live-stream.phtml b/legacy/application/views/scripts/form/add-show-live-stream.phtml
index abce2445d..438be1c5d 100644
--- a/legacy/application/views/scripts/form/add-show-live-stream.phtml
+++ b/legacy/application/views/scripts/form/add-show-live-stream.phtml
@@ -15,5 +15,5 @@
             <?php echo $this->element->getElement("show_source_port")->render() ?>
             <?php echo $this->element->getElement("show_source_mount")->render() ?>
         </fieldset>
-     </dl>
+    </dl>
 </fieldset>
diff --git a/legacy/application/views/scripts/form/add-show-rebroadcast-absolute.phtml b/legacy/application/views/scripts/form/add-show-rebroadcast-absolute.phtml
index aea90510f..add873c5e 100644
--- a/legacy/application/views/scripts/form/add-show-rebroadcast-absolute.phtml
+++ b/legacy/application/views/scripts/form/add-show-rebroadcast-absolute.phtml
@@ -1,44 +1,48 @@
 <fieldset id="add_show_rebroadcast_absolute">
     <dl>
-    <dt id="add_show_hosts_rebroadcast_day-label" class="block-display">
-        <label for="add_show_rebroadcast_day" class="optional"><?php echo _("Choose Days:"); ?></label>
-    </dt>
-    <dd id="add_show_rebroadcast_day-element" class="block-display clearfix">
-    <ul class="formrow-repeat">
-        <?php for($i=1; $i<=10; $i++): ?>
-            <li <?php if(($i > 1)
-                        && ($this->element->getElement('add_show_rebroadcast_date_absolute_'.$i)->getValue() == ""
-                        && $this->element->getElement('add_show_rebroadcast_time_absolute_'.$i)->getValue() == "")){echo 'style=display:none';} ?>>
-                <?php echo $this->element->getElement('add_show_rebroadcast_date_absolute_'.$i) ?>
-                <span class="inline-text">@</span>
-                <?php echo $this->element->getElement('add_show_rebroadcast_time_absolute_'.$i) ?>
-                <?php if($i > 1): ?>
-                    <a class="ui-button ui-button-icon-only  ui-widget ui-state-default" id="remove_rebroadcast_absolute_<?php echo $i ?>">
-                        <span class="ui-icon ui-icon-closethick"></span>
-                        <span class="ui-button-text"><?php echo _("Remove") ?></span>
-                    </a>
-                <?php endif; ?>
-                <?php if(($this->element->getElement('add_show_rebroadcast_date_absolute_'.$i)->hasErrors())
-                  || ($this->element->getElement('add_show_rebroadcast_time_absolute_'.$i)->hasErrors())) : ?>
-                    <ul class='errors'>
-                        <?php $errors = array_merge(
-                                $this->element->getElement('add_show_rebroadcast_date_absolute_'.$i)->getMessages(),
-                                $this->element->getElement('add_show_rebroadcast_time_absolute_'.$i)->getMessages()
+        <dt id="add_show_hosts_rebroadcast_day-label" class="block-display">
+            <label for="add_show_rebroadcast_day" class="optional"><?php echo _("Choose Days:"); ?></label>
+        </dt>
+        <dd id="add_show_rebroadcast_day-element" class="block-display clearfix">
+            <ul class="formrow-repeat">
+                <?php for ($i = 1; $i <= 10; $i++) : ?>
+                    <li <?php if (($i > 1)
+                            && ($this->element->getElement('add_show_rebroadcast_date_absolute_' . $i)->getValue() == ""
+                                && $this->element->getElement('add_show_rebroadcast_time_absolute_' . $i)->getValue() == "")
+                        ) {
+                            echo 'style=display:none';
+                        } ?>>
+                        <?php echo $this->element->getElement('add_show_rebroadcast_date_absolute_' . $i) ?>
+                        <span class="inline-text">@</span>
+                        <?php echo $this->element->getElement('add_show_rebroadcast_time_absolute_' . $i) ?>
+                        <?php if ($i > 1) : ?>
+                            <a class="ui-button ui-button-icon-only  ui-widget ui-state-default" id="remove_rebroadcast_absolute_<?php echo $i ?>">
+                                <span class="ui-icon ui-icon-closethick"></span>
+                                <span class="ui-button-text"><?php echo _("Remove") ?></span>
+                            </a>
+                        <?php endif; ?>
+                        <?php if (($this->element->getElement('add_show_rebroadcast_date_absolute_' . $i)->hasErrors())
+                            || ($this->element->getElement('add_show_rebroadcast_time_absolute_' . $i)->hasErrors())
+                        ) : ?>
+                            <ul class='errors'>
+                                <?php $errors = array_merge(
+                                    $this->element->getElement('add_show_rebroadcast_date_absolute_' . $i)->getMessages(),
+                                    $this->element->getElement('add_show_rebroadcast_time_absolute_' . $i)->getMessages()
                                 );
-                        ?>
+                                ?>
 
-                        <?php foreach($errors as $error): ?>
-                            <li><?php echo $error; ?></li>
-                        <?php endforeach; ?>
-                    </ul>
-                <?php endif; ?>
-            </li>
-        <?php endfor; ?>
-    </ul>
-    <a class="ui-button ui-button-icon-only  ui-widget ui-state-default add_absolute_rebroadcast_day">
-        <span class="ui-icon ui-icon-plusthick"></span>
-        <span class="ui-button-text"><?php echo _("Add") ?></span>
-    </a>
-    </dd>
+                                <?php foreach ($errors as $error) : ?>
+                                    <li><?php echo $error; ?></li>
+                                <?php endforeach; ?>
+                            </ul>
+                        <?php endif; ?>
+                    </li>
+                <?php endfor; ?>
+            </ul>
+            <a class="ui-button ui-button-icon-only  ui-widget ui-state-default add_absolute_rebroadcast_day">
+                <span class="ui-icon ui-icon-plusthick"></span>
+                <span class="ui-button-text"><?php echo _("Add") ?></span>
+            </a>
+        </dd>
     </dl>
 </fieldset>
diff --git a/legacy/application/views/scripts/form/add-show-rebroadcast.phtml b/legacy/application/views/scripts/form/add-show-rebroadcast.phtml
index a5743a0f4..0996b40dd 100644
--- a/legacy/application/views/scripts/form/add-show-rebroadcast.phtml
+++ b/legacy/application/views/scripts/form/add-show-rebroadcast.phtml
@@ -1,45 +1,49 @@
 <fieldset id="add_show_rebroadcast_relative">
     <dl>
         <dt id="add_show_hosts_rebroadcast_repeat_day-label" class="block-display">
-          <label for="add_show_rebroadcast_repeat_day" class="optional"><?php echo _("Repeat Days:"); ?></label>
+            <label for="add_show_rebroadcast_repeat_day" class="optional"><?php echo _("Repeat Days:"); ?></label>
         </dt>
         <dd id="add_show_rebroadcast_repeat_day-element" class="block-display clearfix">
             <ul class="formrow-repeat">
-                <?php for($i=1; $i<=10; $i++): ?>
-                <li <?php if(($i > 1)
-                        && ($this->element->getElement('add_show_rebroadcast_date_'.$i)->getValue() == ""
-                        && $this->element->getElement('add_show_rebroadcast_time_'.$i)->getValue() == "")){echo 'style=display:none';} ?>>
-                    <?php echo $this->element->getElement('add_show_rebroadcast_date_'.$i) ?>
-                    <span class="inline-text">@</span>
-                    <?php echo $this->element->getElement('add_show_rebroadcast_time_'.$i) ?>
-                    <?php if($i > 1): ?>
-                        <a class="ui-button ui-button-icon-only  ui-widget ui-state-default" id="remove_rebroadcast_<?php echo $i ?>">
-                            <span class="ui-icon ui-icon-closethick"></span>
-                            <span class="ui-button-text"><?php echo _("Remove") ?></span>
-                        </a>
-                    <?php endif; ?>
-                    <?php if(($this->element->getElement('add_show_rebroadcast_date_'.$i)->hasErrors())
-                      || ($this->element->getElement('add_show_rebroadcast_time_'.$i)->hasErrors())) : ?>
-                        <ul class='errors'>
-                            <?php $errors = array_merge(
-                                    $this->element->getElement('add_show_rebroadcast_date_'.$i)->getMessages(),
-                                    $this->element->getElement('add_show_rebroadcast_time_'.$i)->getMessages()
-                                    );
-                            ?>
+                <?php for ($i = 1; $i <= 10; $i++) : ?>
+                    <li <?php if (($i > 1)
+                            && ($this->element->getElement('add_show_rebroadcast_date_' . $i)->getValue() == ""
+                                && $this->element->getElement('add_show_rebroadcast_time_' . $i)->getValue() == "")
+                        ) {
+                            echo 'style=display:none';
+                        } ?>>
+                        <?php echo $this->element->getElement('add_show_rebroadcast_date_' . $i) ?>
+                        <span class="inline-text">@</span>
+                        <?php echo $this->element->getElement('add_show_rebroadcast_time_' . $i) ?>
+                        <?php if ($i > 1) : ?>
+                            <a class="ui-button ui-button-icon-only  ui-widget ui-state-default" id="remove_rebroadcast_<?php echo $i ?>">
+                                <span class="ui-icon ui-icon-closethick"></span>
+                                <span class="ui-button-text"><?php echo _("Remove") ?></span>
+                            </a>
+                        <?php endif; ?>
+                        <?php if (($this->element->getElement('add_show_rebroadcast_date_' . $i)->hasErrors())
+                            || ($this->element->getElement('add_show_rebroadcast_time_' . $i)->hasErrors())
+                        ) : ?>
+                            <ul class='errors'>
+                                <?php $errors = array_merge(
+                                    $this->element->getElement('add_show_rebroadcast_date_' . $i)->getMessages(),
+                                    $this->element->getElement('add_show_rebroadcast_time_' . $i)->getMessages()
+                                );
+                                ?>
 
-                            <?php foreach($errors as $error): ?>
-                                <li><?php echo $error; ?></li>
-                            <?php endforeach; ?>
-                        </ul>
-                    <?php endif; ?>
-                </li>
+                                <?php foreach ($errors as $error) : ?>
+                                    <li><?php echo $error; ?></li>
+                                <?php endforeach; ?>
+                            </ul>
+                        <?php endif; ?>
+                    </li>
 
                 <?php endfor; ?>
             </ul>
-        <a class="ui-button ui-button-icon-only  ui-widget ui-state-default add_absolute_rebroadcast_day">
-            <span class="ui-icon ui-icon-plusthick"></span>
-            <span class="ui-button-text"><?php echo _("Add") ?></span>
-        </a>
+            <a class="ui-button ui-button-icon-only  ui-widget ui-state-default add_absolute_rebroadcast_day">
+                <span class="ui-icon ui-icon-plusthick"></span>
+                <span class="ui-button-text"><?php echo _("Add") ?></span>
+            </a>
         </dd>
     </dl>
 </fieldset>
diff --git a/legacy/application/views/scripts/form/add-show-style.phtml b/legacy/application/views/scripts/form/add-show-style.phtml
index 86f42ff24..19935dd0b 100644
--- a/legacy/application/views/scripts/form/add-show-style.phtml
+++ b/legacy/application/views/scripts/form/add-show-style.phtml
@@ -1,6 +1,8 @@
 <dt id="<?php echo $this->element->getName() ?>-label" class="<?php echo $this->class ?>">
-    <?php echo $this->formLabel($this->element->getName(),
-                         $this->element->getLabel()) ?>
+    <?php echo $this->formLabel(
+        $this->element->getName(),
+        $this->element->getLabel()
+    ) ?>
 </dt>
 <dd id="<?php echo $this->element->getName() ?>-element">
     <?php echo $this->{$this->element->helper}(
@@ -9,5 +11,7 @@
         $this->element->getAttribs()
     ) ?>
 
-    <?php if($this->element->hasErrors()) { echo $this->formErrors($this->element->getMessages());} ?>
+    <?php if ($this->element->hasErrors()) {
+        echo $this->formErrors($this->element->getMessages());
+    } ?>
 </dd>
diff --git a/legacy/application/views/scripts/form/add-show-when.phtml b/legacy/application/views/scripts/form/add-show-when.phtml
index f82fb8256..16bc92841 100644
--- a/legacy/application/views/scripts/form/add-show-when.phtml
+++ b/legacy/application/views/scripts/form/add-show-when.phtml
@@ -2,7 +2,7 @@
     <dl>
         <dt id="add_show_start_now-label">
             <label for="add_show_start_now">
-                <?php echo $this->element->getElement('add_show_start_now')->getLabel()?>
+                <?php echo $this->element->getElement('add_show_start_now')->getLabel() ?>
             </label>
         </dt>
         <dd>
@@ -12,29 +12,30 @@
 
         <dt id="add_show_start_date-label">
             <label for="add_show_start_date" class="required">
-                <?php //echo $this->element->getElement('add_show_start_date')->getLabel()?>
+                <?php //echo $this->element->getElement('add_show_start_date')->getLabel()
+                ?>
             </label>
         </dt>
         <dd>
             <?php echo $this->element->getElement('add_show_start_date') ?>
             <?php echo $this->element->getElement('add_show_start_time') ?>
         </dd>
-        <?php if($this->element->getElement('add_show_start_date')->hasErrors() || $this->element->getElement('add_show_start_time')->hasErrors()){ ?>
-                <ul class='errors'>
-                    <?php foreach($this->element->getElement('add_show_start_date')->getMessages() as $error): ?>
-                        <li><?php echo $error; ?></li>
-                    <?php endforeach; ?>
-                    <?php foreach($this->element->getElement('add_show_start_time')->getMessages() as $error): ?>
-                        <li><?php echo $error; ?></li>
-                    <?php endforeach; ?>
-                </ul>
+        <?php if ($this->element->getElement('add_show_start_date')->hasErrors() || $this->element->getElement('add_show_start_time')->hasErrors()) { ?>
+            <ul class='errors'>
+                <?php foreach ($this->element->getElement('add_show_start_date')->getMessages() as $error) : ?>
+                    <li><?php echo $error; ?></li>
+                <?php endforeach; ?>
+                <?php foreach ($this->element->getElement('add_show_start_time')->getMessages() as $error) : ?>
+                    <li><?php echo $error; ?></li>
+                <?php endforeach; ?>
+            </ul>
         <?php } ?>
 
 
 
         <dt id="add_show_end_date_no_repeat-label">
             <label for="add_show_end_date_no_repeat" class="required">
-                <?php echo $this->element->getElement('add_show_end_date_no_repeat')->getLabel()?>
+                <?php echo $this->element->getElement('add_show_end_date_no_repeat')->getLabel() ?>
             </label>
         </dt>
 
@@ -42,15 +43,15 @@
             <?php echo $this->element->getElement('add_show_end_date_no_repeat') ?>
             <?php echo $this->element->getElement('add_show_end_time') ?>
         </dd>
-        <?php if($this->element->getElement('add_show_end_date_no_repeat')->hasErrors() || $this->element->getElement('add_show_end_time')->hasErrors()){ ?>
-                <ul class='errors'>
-                    <?php foreach($this->element->getElement('add_show_end_date_no_repeat')->getMessages() as $error): ?>
-                        <li><?php echo $error; ?></li>
-                    <?php endforeach; ?>
-                    <?php foreach($this->element->getElement('add_show_end_time')->getMessages() as $error): ?>
-                        <li><?php echo $error; ?></li>
-                    <?php endforeach; ?>
-                </ul>
+        <?php if ($this->element->getElement('add_show_end_date_no_repeat')->hasErrors() || $this->element->getElement('add_show_end_time')->hasErrors()) { ?>
+            <ul class='errors'>
+                <?php foreach ($this->element->getElement('add_show_end_date_no_repeat')->getMessages() as $error) : ?>
+                    <li><?php echo $error; ?></li>
+                <?php endforeach; ?>
+                <?php foreach ($this->element->getElement('add_show_end_time')->getMessages() as $error) : ?>
+                    <li><?php echo $error; ?></li>
+                <?php endforeach; ?>
+            </ul>
         <?php } ?>
         <dt id="add_show_duration-label">
             <label for="add_show_duration" class="optional">
@@ -59,14 +60,14 @@
         </dt>
         <dd id="add_show_duration-element">
             <?php echo $this->element->getElement('add_show_duration') ?>
-            <img id="icon-loader-small"/>
+            <img id="icon-loader-small" />
         </dd>
-        <?php if($this->element->getElement('add_show_duration')->hasErrors()){ ?>
-                <ul class='errors'>
-                    <?php foreach($this->element->getElement('add_show_duration')->getMessages() as $error): ?>
-                        <li><?php echo $error; ?></li>
-                    <?php endforeach; ?>
-                </ul>
+        <?php if ($this->element->getElement('add_show_duration')->hasErrors()) { ?>
+            <ul class='errors'>
+                <?php foreach ($this->element->getElement('add_show_duration')->getMessages() as $error) : ?>
+                    <li><?php echo $error; ?></li>
+                <?php endforeach; ?>
+            </ul>
         <?php } ?>
 
         <dt id="add_show_timezone-label">
@@ -85,5 +86,5 @@
         <dd id="add_show_repeats-element">
             <?php echo $this->element->getElement('add_show_repeats') ?>
         </dd>
-     </dl>
+    </dl>
 </fieldset>
diff --git a/legacy/application/views/scripts/form/daterange.phtml b/legacy/application/views/scripts/form/daterange.phtml
index 81d19489e..aee2901c7 100644
--- a/legacy/application/views/scripts/form/daterange.phtml
+++ b/legacy/application/views/scripts/form/daterange.phtml
@@ -3,7 +3,7 @@
     <?php echo $this->element->getElement('his_time_start') ?>
     <?php echo $this->element->getElement('his_date_end') ?>
     <?php echo $this->element->getElement('his_time_end') ?>
-    <div id="his_submit" class=" btn btn-small" title="<?php echo _("Filter History")?>">
-        <i class="icon-white icon-search"></i><span><?php echo _("Filter History")?></span>
+    <div id="his_submit" class=" btn btn-small" title="<?php echo _("Filter History") ?>">
+        <i class="icon-white icon-search"></i><span><?php echo _("Filter History") ?></span>
     </div>
 </div>
diff --git a/legacy/application/views/scripts/form/edit-history-file.phtml b/legacy/application/views/scripts/form/edit-history-file.phtml
index 709288569..a6b2e022d 100644
--- a/legacy/application/views/scripts/form/edit-history-file.phtml
+++ b/legacy/application/views/scripts/form/edit-history-file.phtml
@@ -1,37 +1,37 @@
 <form>
-<?php $form = $this->element ?>
+  <?php $form = $this->element ?>
 
-<dl class="zend_form">
+  <dl class="zend_form">
 
- <?php $name = "his_file_id"; ?>
-  <dd id="<?php echo $name;?>-element">
-    <?php echo $form->getElement($name); ?>
-  </dd>
+    <?php $name = "his_file_id"; ?>
+    <dd id="<?php echo $name; ?>-element">
+      <?php echo $form->getElement($name); ?>
+    </dd>
 
-<?php foreach ($form->getSubForm('his_file_template') as $index=>$el): ?>
-  <?php $name = $el->getName(); ?>
+    <?php foreach ($form->getSubForm('his_file_template') as $index => $el) : ?>
+      <?php $name = $el->getName(); ?>
 
-  <dt id="<?php echo $name;?>-label">
-    <label for="<?php echo $name;?>"><?php echo $el->getLabel() ?></label>
-  </dt>
-  <dd id="<?php echo $name;?>-element">
-    <?php echo $el ?>
-    <?php if ($el->hasErrors()): ?>
-    <ul class='errors'>
-    <?php foreach($el->getMessages() as $error): ?>
-      <li><?php echo $error; ?></li>
+      <dt id="<?php echo $name; ?>-label">
+        <label for="<?php echo $name; ?>"><?php echo $el->getLabel() ?></label>
+      </dt>
+      <dd id="<?php echo $name; ?>-element">
+        <?php echo $el ?>
+        <?php if ($el->hasErrors()) : ?>
+          <ul class='errors'>
+            <?php foreach ($el->getMessages() as $error) : ?>
+              <li><?php echo $error; ?></li>
+            <?php endforeach; ?>
+          </ul>
+        <?php endif; ?>
+      </dd>
+    <?php endforeach; ?>
+
+    <dd id="submitButtons-element">
+      <?php foreach (array("his_file_save", "his_file_cancel") as $name) : ?>
+        <?php echo $form->getElement($name); ?>
       <?php endforeach; ?>
-    </ul>
-    <?php endif; ?>
-  </dd>
-<?php endforeach; ?>
+    </dd>
 
-<dd id="submitButtons-element">
-<?php foreach (array("his_file_save", "his_file_cancel") as $name): ?>
-<?php echo $form->getElement($name); ?>
-<?php endforeach;?>
-</dd>
-
-</dl>
+  </dl>
 
 </form>
diff --git a/legacy/application/views/scripts/form/edit-history-item.phtml b/legacy/application/views/scripts/form/edit-history-item.phtml
index 460d46242..e107c2f9d 100644
--- a/legacy/application/views/scripts/form/edit-history-item.phtml
+++ b/legacy/application/views/scripts/form/edit-history-item.phtml
@@ -1,86 +1,86 @@
 <form>
-<?php $form = $this->element ?>
+  <?php $form = $this->element ?>
 
-<dl class="zend_form">
+  <dl class="zend_form">
 
-  <?php $formErrors = $form->getErrorMessages() ?>
-  <?php if (count($formErrors) > 0) : ?>
-  <ul class='errors'>
-  <?php foreach ($formErrors as $error): ?>
-    <li><?php echo $error; ?></li>
+    <?php $formErrors = $form->getErrorMessages() ?>
+    <?php if (count($formErrors) > 0) : ?>
+      <ul class='errors'>
+        <?php foreach ($formErrors as $error) : ?>
+          <li><?php echo $error; ?></li>
+        <?php endforeach; ?>
+      </ul>
+    <?php endif; ?>
+
+    <?php $name = "his_item_id"; ?>
+    <dd id="<?php echo $name; ?>-element">
+      <?php echo $form->getElement($name); ?>
+    </dd>
+
+    <?php foreach (array("his_item_starts", "his_item_ends") as $name) : ?>
+      <dt id="<?php echo $name; ?>-label">
+        <label for="<?php echo $name; ?>"><?php echo $form->getElement($name)->getLabel() ?></label>
+      </dt>
+      <dd id="<?php echo $name; ?>-element">
+        <div class="well">
+          <div id="<?php echo $name; ?>_datetimepicker" class="input-append date">
+            <?php echo $form->getElement($name) ?>
+            <span class="add-on">
+              <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
+            </span>
+          </div>
+        </div>
+        <?php if ($form->getElement($name)->hasErrors()) : ?>
+          <ul class='errors'>
+            <?php foreach ($form->getElement($name)->getMessages() as $error) : ?>
+              <li><?php echo $error; ?></li>
+            <?php endforeach; ?>
+          </ul>
+        <?php endif; ?>
+      </dd>
     <?php endforeach; ?>
-  </ul>
-  <?php endif; ?>
 
- <?php $name = "his_item_id"; ?>
-  <dd id="<?php echo $name;?>-element">
-    <?php echo $form->getElement($name); ?>
-  </dd>
-
-<?php foreach (array("his_item_starts", "his_item_ends") as $name): ?>
-  <dt id="<?php echo $name;?>-label">
-    <label for="<?php echo $name;?>"><?php echo $form->getElement($name)->getLabel() ?></label>
-  </dt>
-  <dd id="<?php echo $name;?>-element">
-    <div class="well">
-      <div id="<?php echo $name;?>_datetimepicker" class="input-append date">
-        <?php echo $form->getElement($name) ?>
-        <span class="add-on">
-          <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
-        </span>
+    <dd id="his_choose_instance">
+      <div>
+        <label for="<?php echo $name; ?>"><?php echo _("Choose Show Instance") ?></label>
       </div>
-    </div>
-    <?php if ($form->getElement($name)->hasErrors()) : ?>
-    <ul class='errors'>
-    <?php foreach ($form->getElement($name)->getMessages() as $error): ?>
-      <li><?php echo $error; ?></li>
+      <div>
+        <?php $select = $form->getElement("his_instance_select"); ?>
+        <?php if (isset($select)) : ?>
+          <?php echo $select; ?>
+        <?php else : ?>
+          <select id="his_instance_select">
+            <option value="0"><?php echo _("No Show") ?></option>
+          </select>
+        <?php endif; ?>
+        <button class="btn" type="button" id="his_instance_retrieve"><?php echo _("Find") ?></button>
+      </div>
+    </dd>
+
+    <?php foreach ($form->getSubForm('his_item_template') as $index => $el) : ?>
+      <?php $name = $el->getName(); ?>
+
+      <dt id="<?php echo $name; ?>-label">
+        <label for="<?php echo $name; ?>"><?php echo $el->getLabel() ?></label>
+      </dt>
+      <dd id="<?php echo $name; ?>-element">
+        <?php echo $el ?>
+        <?php if ($el->hasErrors()) : ?>
+          <ul class='errors'>
+            <?php foreach ($el->getMessages() as $error) : ?>
+              <li><?php echo $error; ?></li>
+            <?php endforeach; ?>
+          </ul>
+        <?php endif; ?>
+      </dd>
+    <?php endforeach; ?>
+
+    <dd id="submitButtons-element">
+      <?php foreach (array("his_item_save", "his_item_cancel") as $name) : ?>
+        <?php echo $form->getElement($name); ?>
       <?php endforeach; ?>
-    </ul>
-    <?php endif; ?>
-  </dd>
-<?php endforeach;?>
+    </dd>
 
-  <dd id="his_choose_instance">
-    <div>
-      <label for="<?php echo $name;?>"><?php echo _("Choose Show Instance") ?></label>
-    </div>
-    <div>
-      <?php $select = $form->getElement("his_instance_select"); ?>
-      <?php if (isset($select)): ?>
-        <?php echo $select; ?>
-      <?php else: ?>
-      <select id="his_instance_select">
-        <option value="0"><?php echo _("No Show") ?></option>
-      </select>
-      <?php endif; ?>
-      <button class="btn" type="button" id="his_instance_retrieve"><?php echo _("Find") ?></button>
-    </div>
-  </dd>
-
-<?php foreach ($form->getSubForm('his_item_template') as $index=>$el): ?>
-  <?php $name = $el->getName(); ?>
-
-  <dt id="<?php echo $name;?>-label">
-    <label for="<?php echo $name;?>"><?php echo $el->getLabel() ?></label>
-  </dt>
-  <dd id="<?php echo $name;?>-element">
-    <?php echo $el ?>
-    <?php if ($el->hasErrors()): ?>
-    <ul class='errors'>
-    <?php foreach($el->getMessages() as $error): ?>
-      <li><?php echo $error; ?></li>
-      <?php endforeach; ?>
-    </ul>
-    <?php endif; ?>
-  </dd>
-<?php endforeach; ?>
-
-<dd id="submitButtons-element">
-<?php foreach (array("his_item_save", "his_item_cancel") as $name): ?>
-<?php echo $form->getElement($name); ?>
-<?php endforeach;?>
-</dd>
-
-</dl>
+  </dl>
 
 </form>
diff --git a/legacy/application/views/scripts/form/edit-user.phtml b/legacy/application/views/scripts/form/edit-user.phtml
index 2051f720d..b9dda47bc 100644
--- a/legacy/application/views/scripts/form/edit-user.phtml
+++ b/legacy/application/views/scripts/form/edit-user.phtml
@@ -1,165 +1,165 @@
 <h2><?php echo _("My Profile") ?></h2>
 <div id="current-user-container">
 
-<form id="current-user-form" class="edit-user-global" method="post" enctype="application/x-www-form-urlencoded">
-    <dl class="zend_form">
-        <?php echo $this->element->getElement('cu_user_id') ?>
-        <dt id="cu-username-label">
-            <label><?php echo $this->element->getElement('cu_login')->getLabel() ?>
-            </label>
-        </dt>
-        <dd id="cu-username-element">
-            <?php echo $this->element->getElement('cu_login') ?>
-            <?php if($this->element->getElement('cu_login')->hasErrors()) : ?>
-                <ul class='errors edit-user-errors'>
-                    <?php foreach($this->element->getElement('cu_login')->getMessages() as $error): ?>
-                        <li><?php echo $error; ?></li>
-                    <?php endforeach; ?>
-                </ul>
-            <?php endif; ?>
-        </dd>
-        <dt id="cu-password-label">
-            <label><?php echo $this->element->getElement('cu_password')->getLabel() ?>
-            </label>
-        </dt>
-        <dd id="cu-password-element">
-            <?php echo $this->element->getElement('cu_password') ?>
-            <?php if($this->element->getElement('cu_password')->hasErrors()) : ?>
-                <ul class='errors edit-user-errors'>
-                    <?php foreach($this->element->getElement('cu_password')->getMessages() as $error): ?>
-                        <li><?php echo $error; ?></li>
-                    <?php endforeach; ?>
-                </ul>
-            <?php endif; ?>
-        </dd>
-        <dt id="cu-passwordVerify-label">
-            <label><?php echo $this->element->getElement('cu_passwordVerify')->getLabel() ?>
-            </label>
-        </dt>
-        <dd id="cu-passwordVerify-element">
-            <?php echo $this->element->getElement('cu_passwordVerify') ?>
-            <?php if($this->element->getElement('cu_passwordVerify')->hasErrors()) : ?>
-                <ul class='errors edit-user-errors'>
-                    <?php foreach($this->element->getElement('cu_passwordVerify')->getMessages() as $error): ?>
-                        <li><?php echo $error; ?></li>
-                    <?php endforeach; ?>
-                </ul>
-            <?php endif; ?>
-        </dd>
-        <dt id="cu-firstname-label">
-            <label><?php echo $this->element->getElement('cu_first_name')->getLabel() ?>
-            </label>
-        </dt>
-        <dd id="cu-firstname-element">
-            <?php echo $this->element->getElement('cu_first_name') ?>
-            <?php if($this->element->getElement('cu_first_name')->hasErrors()) : ?>
-                <ul class='errors edit-user-errors'>
-                    <?php foreach($this->element->getElement('cu_first_name')->getMessages() as $error): ?>
-                        <li><?php echo $error; ?></li>
-                    <?php endforeach; ?>
-                </ul>
-            <?php endif; ?>
-        </dd>
-        <dt id="cu-lastname-label">
-            <label><?php echo $this->element->getElement('cu_last_name')->getLabel() ?>
-            </label>
-        </dt>
-        <dd id="cu-lastname-element">
-            <?php echo $this->element->getElement('cu_last_name') ?>
-            <?php if($this->element->getElement('cu_last_name')->hasErrors()) : ?>
-                <ul class='errors edit-user-errors'>
-                    <?php foreach($this->element->getElement('cu_last_name')->getMessages() as $error): ?>
-                        <li><?php echo $error; ?></li>
-                    <?php endforeach; ?>
-                </ul>
-            <?php endif; ?>
-        </dd>
-        <dt id="cu-email-label">
-            <label><?php echo $this->element->getElement('cu_email')->getLabel() ?>
-            </label>
-        </dt>
-        <dd id="cu-email-element">
-            <?php echo $this->element->getElement('cu_email') ?>
-            <?php if($this->element->getElement('cu_email')->hasErrors()) : ?>
-                <ul class='errors edit-user-errors'>
-                    <?php foreach($this->element->getElement('cu_email')->getMessages() as $error): ?>
-                        <li><?php echo $error; ?></li>
-                    <?php endforeach; ?>
-                </ul>
-            <?php endif; ?>
-        </dd>
-        <dt id="cu-cell_phone-label">
-            <label><?php echo $this->element->getElement('cu_cell_phone')->getLabel() ?>
-            </label>
-        </dt>
-        <dd id="cu-cell_phone-element">
-            <?php echo $this->element->getElement('cu_cell_phone') ?>
-            <?php if($this->element->getElement('cu_cell_phone')->hasErrors()) : ?>
-                <ul class='errors edit-user-errors'>
-                    <?php foreach($this->element->getElement('cu_cell_phone')->getMessages() as $error): ?>
-                        <li><?php echo $error; ?></li>
-                    <?php endforeach; ?>
-                </ul>
-            <?php endif; ?>
-        </dd>
-        <dt id="cu-skype-label">
-            <label><?php echo $this->element->getElement('cu_skype')->getLabel() ?>
-            </label>
-        </dt>
-        <dd id="cu-skype-element">
-            <?php echo $this->element->getElement('cu_skype') ?>
-            <?php if($this->element->getElement('cu_skype')->hasErrors()) : ?>
-                <ul class='errors edit-user-errors'>
-                    <?php foreach($this->element->getElement('cu_skype')->getMessages() as $error): ?>
-                        <li><?php echo $error; ?></li>
-                    <?php endforeach; ?>
-                </ul>
-            <?php endif; ?>
-        </dd>
-        <dt id="cu-jabber-label">
-            <label><?php echo $this->element->getElement('cu_jabber')->getLabel() ?>
-            </label>
-        </dt>
-        <dd id="cu-jabber-element">
-            <?php echo $this->element->getElement('cu_jabber') ?>
-            <?php if($this->element->getElement('cu_jabber')->hasErrors()) : ?>
-                <ul class='errors edit-user-errors'>
-                    <?php foreach($this->element->getElement('cu_jabber')->getMessages() as $error): ?>
-                        <li><?php echo $error; ?></li>
-                    <?php endforeach; ?>
-                </ul>
-            <?php endif; ?>
-        </dd>
-        <dt id="cu-locale-label">
-            <label><?php echo $this->element->getElement('cu_locale')->getLabel() ?>
-            </label>
-        </dt>
-        <dd id="cu-locale-element">
-            <?php echo $this->element->getElement('cu_locale') ?>
-            <?php if($this->element->getElement('cu_locale')->hasErrors()) : ?>
-                <ul class='errors edit-user-errors'>
-                    <?php foreach($this->element->getElement('cu_locale')->getMessages() as $error): ?>
-                        <li><?php echo $error; ?></li>
-                    <?php endforeach; ?>
-                </ul>
-            <?php endif; ?>
-        </dd>
-        <dt id="cu-timezone-label">
-            <label><?php echo $this->element->getElement('cu_timezone')->getLabel() ?>
-            </label>
-        </dt>
-        <dd id="cu-timezone-element">
-            <?php echo $this->element->getElement('cu_timezone') ?>
-            <?php if($this->element->getElement('cu_timezone')->hasErrors()) : ?>
-                <ul class='errors edit-user-errors'>
-                    <?php foreach($this->element->getElement('cu_timezone')->getMessages() as $error): ?>
-                        <li><?php echo $error; ?></li>
-                    <?php endforeach; ?>
-                </ul>
-            <?php endif; ?>
-        </dd>
-        <?php echo $this->element->getElement('csrf') ?>
-    </dl>
-    <button type="submit" id="cu_save_user" class="btn right-floated"><?php echo _("Save")?></button>
-</form>
+    <form id="current-user-form" class="edit-user-global" method="post" enctype="application/x-www-form-urlencoded">
+        <dl class="zend_form">
+            <?php echo $this->element->getElement('cu_user_id') ?>
+            <dt id="cu-username-label">
+                <label><?php echo $this->element->getElement('cu_login')->getLabel() ?>
+                </label>
+            </dt>
+            <dd id="cu-username-element">
+                <?php echo $this->element->getElement('cu_login') ?>
+                <?php if ($this->element->getElement('cu_login')->hasErrors()) : ?>
+                    <ul class='errors edit-user-errors'>
+                        <?php foreach ($this->element->getElement('cu_login')->getMessages() as $error) : ?>
+                            <li><?php echo $error; ?></li>
+                        <?php endforeach; ?>
+                    </ul>
+                <?php endif; ?>
+            </dd>
+            <dt id="cu-password-label">
+                <label><?php echo $this->element->getElement('cu_password')->getLabel() ?>
+                </label>
+            </dt>
+            <dd id="cu-password-element">
+                <?php echo $this->element->getElement('cu_password') ?>
+                <?php if ($this->element->getElement('cu_password')->hasErrors()) : ?>
+                    <ul class='errors edit-user-errors'>
+                        <?php foreach ($this->element->getElement('cu_password')->getMessages() as $error) : ?>
+                            <li><?php echo $error; ?></li>
+                        <?php endforeach; ?>
+                    </ul>
+                <?php endif; ?>
+            </dd>
+            <dt id="cu-passwordVerify-label">
+                <label><?php echo $this->element->getElement('cu_passwordVerify')->getLabel() ?>
+                </label>
+            </dt>
+            <dd id="cu-passwordVerify-element">
+                <?php echo $this->element->getElement('cu_passwordVerify') ?>
+                <?php if ($this->element->getElement('cu_passwordVerify')->hasErrors()) : ?>
+                    <ul class='errors edit-user-errors'>
+                        <?php foreach ($this->element->getElement('cu_passwordVerify')->getMessages() as $error) : ?>
+                            <li><?php echo $error; ?></li>
+                        <?php endforeach; ?>
+                    </ul>
+                <?php endif; ?>
+            </dd>
+            <dt id="cu-firstname-label">
+                <label><?php echo $this->element->getElement('cu_first_name')->getLabel() ?>
+                </label>
+            </dt>
+            <dd id="cu-firstname-element">
+                <?php echo $this->element->getElement('cu_first_name') ?>
+                <?php if ($this->element->getElement('cu_first_name')->hasErrors()) : ?>
+                    <ul class='errors edit-user-errors'>
+                        <?php foreach ($this->element->getElement('cu_first_name')->getMessages() as $error) : ?>
+                            <li><?php echo $error; ?></li>
+                        <?php endforeach; ?>
+                    </ul>
+                <?php endif; ?>
+            </dd>
+            <dt id="cu-lastname-label">
+                <label><?php echo $this->element->getElement('cu_last_name')->getLabel() ?>
+                </label>
+            </dt>
+            <dd id="cu-lastname-element">
+                <?php echo $this->element->getElement('cu_last_name') ?>
+                <?php if ($this->element->getElement('cu_last_name')->hasErrors()) : ?>
+                    <ul class='errors edit-user-errors'>
+                        <?php foreach ($this->element->getElement('cu_last_name')->getMessages() as $error) : ?>
+                            <li><?php echo $error; ?></li>
+                        <?php endforeach; ?>
+                    </ul>
+                <?php endif; ?>
+            </dd>
+            <dt id="cu-email-label">
+                <label><?php echo $this->element->getElement('cu_email')->getLabel() ?>
+                </label>
+            </dt>
+            <dd id="cu-email-element">
+                <?php echo $this->element->getElement('cu_email') ?>
+                <?php if ($this->element->getElement('cu_email')->hasErrors()) : ?>
+                    <ul class='errors edit-user-errors'>
+                        <?php foreach ($this->element->getElement('cu_email')->getMessages() as $error) : ?>
+                            <li><?php echo $error; ?></li>
+                        <?php endforeach; ?>
+                    </ul>
+                <?php endif; ?>
+            </dd>
+            <dt id="cu-cell_phone-label">
+                <label><?php echo $this->element->getElement('cu_cell_phone')->getLabel() ?>
+                </label>
+            </dt>
+            <dd id="cu-cell_phone-element">
+                <?php echo $this->element->getElement('cu_cell_phone') ?>
+                <?php if ($this->element->getElement('cu_cell_phone')->hasErrors()) : ?>
+                    <ul class='errors edit-user-errors'>
+                        <?php foreach ($this->element->getElement('cu_cell_phone')->getMessages() as $error) : ?>
+                            <li><?php echo $error; ?></li>
+                        <?php endforeach; ?>
+                    </ul>
+                <?php endif; ?>
+            </dd>
+            <dt id="cu-skype-label">
+                <label><?php echo $this->element->getElement('cu_skype')->getLabel() ?>
+                </label>
+            </dt>
+            <dd id="cu-skype-element">
+                <?php echo $this->element->getElement('cu_skype') ?>
+                <?php if ($this->element->getElement('cu_skype')->hasErrors()) : ?>
+                    <ul class='errors edit-user-errors'>
+                        <?php foreach ($this->element->getElement('cu_skype')->getMessages() as $error) : ?>
+                            <li><?php echo $error; ?></li>
+                        <?php endforeach; ?>
+                    </ul>
+                <?php endif; ?>
+            </dd>
+            <dt id="cu-jabber-label">
+                <label><?php echo $this->element->getElement('cu_jabber')->getLabel() ?>
+                </label>
+            </dt>
+            <dd id="cu-jabber-element">
+                <?php echo $this->element->getElement('cu_jabber') ?>
+                <?php if ($this->element->getElement('cu_jabber')->hasErrors()) : ?>
+                    <ul class='errors edit-user-errors'>
+                        <?php foreach ($this->element->getElement('cu_jabber')->getMessages() as $error) : ?>
+                            <li><?php echo $error; ?></li>
+                        <?php endforeach; ?>
+                    </ul>
+                <?php endif; ?>
+            </dd>
+            <dt id="cu-locale-label">
+                <label><?php echo $this->element->getElement('cu_locale')->getLabel() ?>
+                </label>
+            </dt>
+            <dd id="cu-locale-element">
+                <?php echo $this->element->getElement('cu_locale') ?>
+                <?php if ($this->element->getElement('cu_locale')->hasErrors()) : ?>
+                    <ul class='errors edit-user-errors'>
+                        <?php foreach ($this->element->getElement('cu_locale')->getMessages() as $error) : ?>
+                            <li><?php echo $error; ?></li>
+                        <?php endforeach; ?>
+                    </ul>
+                <?php endif; ?>
+            </dd>
+            <dt id="cu-timezone-label">
+                <label><?php echo $this->element->getElement('cu_timezone')->getLabel() ?>
+                </label>
+            </dt>
+            <dd id="cu-timezone-element">
+                <?php echo $this->element->getElement('cu_timezone') ?>
+                <?php if ($this->element->getElement('cu_timezone')->hasErrors()) : ?>
+                    <ul class='errors edit-user-errors'>
+                        <?php foreach ($this->element->getElement('cu_timezone')->getMessages() as $error) : ?>
+                            <li><?php echo $error; ?></li>
+                        <?php endforeach; ?>
+                    </ul>
+                <?php endif; ?>
+            </dd>
+            <?php echo $this->element->getElement('csrf') ?>
+        </dl>
+        <button type="submit" id="cu_save_user" class="btn right-floated"><?php echo _("Save") ?></button>
+    </form>
 </div>
diff --git a/legacy/application/views/scripts/form/login.phtml b/legacy/application/views/scripts/form/login.phtml
index f31d94b15..a624ae679 100644
--- a/legacy/application/views/scripts/form/login.phtml
+++ b/legacy/application/views/scripts/form/login.phtml
@@ -3,7 +3,7 @@
 
     <dt id="username-label">
       <label for="username" class="required">
-          <?php echo $this->element->getElement('username')->getLabel() ?>
+        <?php echo $this->element->getElement('username')->getLabel() ?>
       </label>
     </dt>
     <dd id="username-element">
@@ -12,7 +12,7 @@
 
     <dt id="password-label">
       <label for="password" class="required">
-          <?php echo $this->element->getElement('password')->getLabel() ?>
+        <?php echo $this->element->getElement('password')->getLabel() ?>
       </label>
     </dt>
     <dd id="password-element">
@@ -21,7 +21,7 @@
 
     <dt id="locale-label">
       <label for="locale" class="required">
-          <?php echo $this->element->getElement('locale')->getLabel() ?>
+        <?php echo $this->element->getElement('locale')->getLabel() ?>
       </label>
     </dt>
     <dd id="locale-element">
diff --git a/legacy/application/views/scripts/form/password-change.phtml b/legacy/application/views/scripts/form/password-change.phtml
index 1d79b37c7..8c7c43528 100644
--- a/legacy/application/views/scripts/form/password-change.phtml
+++ b/legacy/application/views/scripts/form/password-change.phtml
@@ -2,34 +2,34 @@
   <dl class="zend_form">
     <dt id="new-password-label">
       <label for="new-password" class="required">
-          <?php echo $this->element->getElement('password')->getLabel() ?>
+        <?php echo $this->element->getElement('password')->getLabel() ?>
       </label>
     </dt>
     <dd id="new-password-element">
       <?php echo $this->element->getElement('password') ?>
     </dd>
-    <?php if($this->element->getElement('password')->hasErrors()): ?>
-        <ul class='errors'>
-            <?php foreach($this->element->getElement('password')->getMessages() as $error): ?>
-                <li><?php echo $error; ?></li>
-            <?php endforeach; ?>
-        </ul>
+    <?php if ($this->element->getElement('password')->hasErrors()) : ?>
+      <ul class='errors'>
+        <?php foreach ($this->element->getElement('password')->getMessages() as $error) : ?>
+          <li><?php echo $error; ?></li>
+        <?php endforeach; ?>
+      </ul>
     <?php endif; ?>
 
     <dt id="confirm-password-label">
       <label for="confirm-password" class="required">
-          <?php echo $this->element->getElement('password_confirm')->getLabel() ?>
+        <?php echo $this->element->getElement('password_confirm')->getLabel() ?>
       </label>
     </dt>
     <dd id="confirm-password-element">
       <?php echo $this->element->getElement('password_confirm') ?>
     </dd>
-    <?php if($this->element->getElement('password_confirm')->hasErrors()): ?>
-        <ul class='errors'>
-            <?php foreach($this->element->getElement('password_confirm')->getMessages() as $error): ?>
-                <li><?php echo $error; ?></li>
-            <?php endforeach; ?>
-        </ul>
+    <?php if ($this->element->getElement('password_confirm')->hasErrors()) : ?>
+      <ul class='errors'>
+        <?php foreach ($this->element->getElement('password_confirm')->getMessages() as $error) : ?>
+          <li><?php echo $error; ?></li>
+        <?php endforeach; ?>
+      </ul>
     <?php endif; ?>
 
     <dt id="submit-label">&nbsp;</dt>
diff --git a/legacy/application/views/scripts/form/password-restore.phtml b/legacy/application/views/scripts/form/password-restore.phtml
index 3fd8143ea..9bdfe2764 100644
--- a/legacy/application/views/scripts/form/password-restore.phtml
+++ b/legacy/application/views/scripts/form/password-restore.phtml
@@ -2,15 +2,15 @@
     <form enctype="application/x-www-form-urlencoded" method="post" action="">
         <dl class="zend_form">
 
-            <p><?php echo(_("Please enter both your username and email address.")); ?></p>
+            <p><?php echo (_("Please enter both your username and email address.")); ?></p>
             <dt id="username-label">
                 <label for="username" class="required">
                     <?php echo $this->element->getElement('username')->getLabel() ?>
                 </label>
-                </dt>
-                <dd id="username-element">
-                    <?php echo $this->element->getElement('username') ?>
-                </dd>
+            </dt>
+            <dd id="username-element">
+                <?php echo $this->element->getElement('username') ?>
+            </dd>
             </dt>
 
             <dt id="email-label">
@@ -21,9 +21,9 @@
             <dd id="email-element">
                 <?php echo $this->element->getElement('email') ?>
             </dd>
-            <?php if ($this->element->getElement('email')->hasErrors()): ?>
+            <?php if ($this->element->getElement('email')->hasErrors()) : ?>
                 <ul class='errors'>
-                    <?php foreach ($this->element->getElement('email')->getMessages() as $error): ?>
+                    <?php foreach ($this->element->getElement('email')->getMessages() as $error) : ?>
                         <li><?php echo $error; ?></li>
                     <?php endforeach; ?>
                 </ul>
@@ -36,8 +36,8 @@
 
             <dd id="cancel-element">
 
-                <a href="<?php echo($this->baseUrl('login')); ?>">
-                    <button name="cancel" type="button" class="ui-button ui-widget ui-state-default ui-button-text-only center"><?php echo(_("Back")); ?></button>
+                <a href="<?php echo ($this->baseUrl('login')); ?>">
+                    <button name="cancel" type="button" class="ui-button ui-widget ui-state-default ui-button-text-only center"><?php echo (_("Back")); ?></button>
                 </a>
             </dd>
         </dl>
diff --git a/legacy/application/views/scripts/form/player.phtml b/legacy/application/views/scripts/form/player.phtml
index 806b9b7b1..7fdf16c13 100644
--- a/legacy/application/views/scripts/form/player.phtml
+++ b/legacy/application/views/scripts/form/player.phtml
@@ -1,19 +1,15 @@
 <style type="text/css">
+    .player-title {
+        width: 70px;
+        border-style: none float: left;
+    }
 
-.player-title {
-	width: 70px;
-	border-style: none
-	float: left;
-	}
-
-.preview-label {
-	line-height: 60px;
-	border-style: none
-	float: left;
-	font-size: 20px;
-	color: #fff
-	}
-
+    .preview-label {
+        line-height: 60px;
+        border-style: none float: left;
+        font-size: 20px;
+        color: #fff
+    }
 </style>
 <fieldset class="padded">
     <dl class="zend_form">
@@ -38,7 +34,8 @@
 
         <?php echo $this->element->getElement('player_embed_src')->render(); ?>
 
-        <?php //echo $this->element->getElement('player_display_track_metadata'); ?>
+        <?php //echo $this->element->getElement('player_display_track_metadata');
+        ?>
 
         <table id="player_compatibility_chart" style="text-align:center; position:relative; top:40px;">
             <th colspan="5" style="text-align:center"><?php echo _("Stream Compatibility") ?></th>
diff --git a/legacy/application/views/scripts/form/preferences_general.phtml b/legacy/application/views/scripts/form/preferences_general.phtml
index 11e907f95..66b06cac8 100644
--- a/legacy/application/views/scripts/form/preferences_general.phtml
+++ b/legacy/application/views/scripts/form/preferences_general.phtml
@@ -9,12 +9,12 @@
 
         <?php echo $this->element->getElement('stationLogoRemove')->render() ?>
 
-<!--        <button id="logo-remove-btn" value="Remove" class="btn">Remove</button>-->
+        <!--        <button id="logo-remove-btn" value="Remove" class="btn">Remove</button>-->
 
         <div id="Logo-img-container">
             <?php
             $logoImg = $this->element->getView()->logoImg;
-            $src = "data:image/png;base64,".$logoImg;
+            $src = "data:image/png;base64," . $logoImg;
             ?>
             <img onError="this.onerror = '';this.style.visibility='hidden';$('#logo-remove-btn').hide();$('[id^=stationLogoRemove]').each(function(i,v){v.style.width=v.style.height=v.style.margin=v.style.padding='0px';});" id="logo-img" onload='/*resizeImg(this, 450, 450);*/' src="<?php echo $src ?>" />
         </div>
diff --git a/legacy/application/views/scripts/form/preferences_livestream.phtml b/legacy/application/views/scripts/form/preferences_livestream.phtml
index 517dcfa6b..b4be3e725 100644
--- a/legacy/application/views/scripts/form/preferences_livestream.phtml
+++ b/legacy/application/views/scripts/form/preferences_livestream.phtml
@@ -19,7 +19,7 @@
                 <a href=# id="connection_url_override" style="font-size: 12px;"><?php echo _("Override") ?></a>&nbsp;&nbsp;
                 <span class="override_help_icon"></span></br>
                 <div id="master_dj_connection_url_actions" style="display:none">&nbsp;&nbsp;
-                <a href=# id="ok" style="font-size: 12px;"><?php echo _("OK") ?></a>&nbsp;&nbsp;<a href=# id="reset" style="font-size: 12px;"><?php echo _("RESET"); ?></a>
+                    <a href=# id="ok" style="font-size: 12px;"><?php echo _("OK") ?></a>&nbsp;&nbsp;<a href=# id="reset" style="font-size: 12px;"><?php echo _("RESET"); ?></a>
                 </div>
             </span>
             <?php echo $this->element->getElement("master_source_port")->render() ?>
@@ -32,12 +32,12 @@
                 <?php echo _("DJs can use these settings in their broadcasting software to broadcast live only during shows assigned to them.") ?>
             </p>
             <span id="stream_url">
-            <?php echo $this->element->getElement("show_source_host")->render() ?>
+                <?php echo $this->element->getElement("show_source_host")->render() ?>
                 <a href=# id="connection_url_override" style="font-size: 12px;"><?php echo _("Override") ?></a>&nbsp;&nbsp;
                 <span class="override_help_icon"></span>
                 </br>
                 <div id="live_dj_connection_url_actions" style="display:none; float:left">&nbsp;&nbsp;
-                <a href=# id="ok" style="font-size: 12px;"><?php echo _("OK") ?></a>&nbsp;&nbsp;<a href=# id="reset" style="font-size: 12px;"><?php echo _("RESET"); ?></a>
+                    <a href=# id="ok" style="font-size: 12px;"><?php echo _("OK") ?></a>&nbsp;&nbsp;<a href=# id="reset" style="font-size: 12px;"><?php echo _("RESET"); ?></a>
                 </div>
             </span>
             <?php echo $this->element->getElement("show_source_port")->render() ?>
diff --git a/legacy/application/views/scripts/form/preferences_tunein.phtml b/legacy/application/views/scripts/form/preferences_tunein.phtml
index cd3e72630..1c62c6454 100644
--- a/legacy/application/views/scripts/form/preferences_tunein.phtml
+++ b/legacy/application/views/scripts/form/preferences_tunein.phtml
@@ -1,7 +1,7 @@
 <fieldset class="padded">
     <dl class="zend_form">
 
-        <?php if($this->element->getElement("enable_tunein")->hasErrors()) {
+        <?php if ($this->element->getElement("enable_tunein")->hasErrors()) {
             echo $this->element->getElement('enable_tunein')->renderErrors();
         }
         ?>
diff --git a/legacy/application/views/scripts/form/preferences_watched_dirs.phtml b/legacy/application/views/scripts/form/preferences_watched_dirs.phtml
index a62468f91..b7b3a7cc5 100644
--- a/legacy/application/views/scripts/form/preferences_watched_dirs.phtml
+++ b/legacy/application/views/scripts/form/preferences_watched_dirs.phtml
@@ -6,17 +6,18 @@
         </dt>
         <dd id="storageFolder-element" class="block-display">
             <?php echo $this->element->getElement('storageFolder') ?>
-            <input id="storageFolder-selection" type="button" value="<?php echo _("Choose folder")?>"></input>
-            <input id="storageFolder-ok" type="button" value="<?php echo _("Set")?>"></input>
-            <?php if($this->element->getElement('storageFolder')->hasErrors()) : ?>
+            <input id="storageFolder-selection" type="button" value="<?php echo _("Choose folder") ?>"></input>
+            <input id="storageFolder-ok" type="button" value="<?php echo _("Set") ?>"></input>
+            <?php if ($this->element->getElement('storageFolder')->hasErrors()) : ?>
                 <ul class='errors'>
-                    <?php foreach($this->element->getElement('storageFolder')->getMessages() as $error): ?>
+                    <?php foreach ($this->element->getElement('storageFolder')->getMessages() as $error) : ?>
                         <li><?php echo $this->escape($error); ?></li>
                     <?php endforeach; ?>
                 </ul>
             <?php endif; ?>
         </dd>
-        <dd class="block-display selected-item"><strong><?php echo _("Current Import Folder:"); ?></strong><?php $stor = Application_Model_MusicDir::getStorDir(); echo $stor->getDirectory(); ?></dd>
+        <dd class="block-display selected-item"><strong><?php echo _("Current Import Folder:"); ?></strong><?php $stor = Application_Model_MusicDir::getStorDir();
+                                                                                                            echo $stor->getDirectory(); ?></dd>
 
         <dt id="watchedFolder-label" class="block-display">
             <label class="required" for="watchedFolder"><?php echo $this->element->getElement('watchedFolder')->getLabel() ?></label>
@@ -24,11 +25,11 @@
         </dt>
         <dd id="watchedFolder-element" class="block-display">
             <?php echo $this->element->getElement('watchedFolder') ?>
-            <input id="watchedFolder-selection" type="button" value="<?php echo _("Choose folder")?>"></input>
-            <input id="watchedFolder-ok" type="button" value="<?php echo _("Add")?>"></input>
-            <?php if($this->element->getElement('watchedFolder')->hasErrors()) : ?>
+            <input id="watchedFolder-selection" type="button" value="<?php echo _("Choose folder") ?>"></input>
+            <input id="watchedFolder-ok" type="button" value="<?php echo _("Add") ?>"></input>
+            <?php if ($this->element->getElement('watchedFolder')->hasErrors()) : ?>
                 <ul class='errors'>
-                    <?php foreach($this->element->getElement('watchedFolder')->getMessages() as $error): ?>
+                    <?php foreach ($this->element->getElement('watchedFolder')->getMessages() as $error) : ?>
                         <li><?php echo $this->escape($error); ?></li>
                     <?php endforeach; ?>
                 </ul>
@@ -36,15 +37,15 @@
         </dd>
         <?php $watched_dirs = Application_Model_MusicDir::getWatchedDirs(null, true); ?>
 
-        <?php if (count($watched_dirs) > 0): ?>
-            <?php foreach($watched_dirs as $watched_dir): ?>
+        <?php if (count($watched_dirs) > 0) : ?>
+            <?php foreach ($watched_dirs as $watched_dir) : ?>
                 <dd class="block-display selected-item">
-                    <?php echo ($watched_dir->getExistsFlag())?"":"<span class='ui-icon-alert'><img src='/css/images/warning-icon.png'></span>"?><span id="folderPath" style="display:block; width:350px"><?php echo htmlspecialchars($watched_dir->getDirectory());?></span></span>
-                    <span title="<?php echo sprintf(_("Rescan watched directory (This is useful if it is network mount and may be out of sync with %s)"), PRODUCT_NAME)?>" class="ui-icon ui-icon-refresh"></span>
-                    <span title="<?php echo _("Remove watched directory")?>" class="ui-icon ui-icon-close"></span>
+                    <?php echo ($watched_dir->getExistsFlag()) ? "" : "<span class='ui-icon-alert'><img src='/css/images/warning-icon.png'></span>" ?><span id="folderPath" style="display:block; width:350px"><?php echo htmlspecialchars($watched_dir->getDirectory()); ?></span></span>
+                    <span title="<?php echo sprintf(_("Rescan watched directory (This is useful if it is network mount and may be out of sync with %s)"), PRODUCT_NAME) ?>" class="ui-icon ui-icon-refresh"></span>
+                    <span title="<?php echo _("Remove watched directory") ?>" class="ui-icon ui-icon-close"></span>
                 </dd>
             <?php endforeach; ?>
-        <?php else: ?>
+        <?php else : ?>
             <dd class="block-display selected-item">
                 <span><?php echo _("You are not watching any media folders."); ?></span>
             </dd>
diff --git a/legacy/application/views/scripts/form/setup-lang-timezone.phtml b/legacy/application/views/scripts/form/setup-lang-timezone.phtml
index 9fb120a0d..214a479aa 100644
--- a/legacy/application/views/scripts/form/setup-lang-timezone.phtml
+++ b/legacy/application/views/scripts/form/setup-lang-timezone.phtml
@@ -9,7 +9,7 @@
                 <?php echo $this->element->getElement('setup_timezone')->render(); ?>
             </dl>
         </fieldset>
-        <p style="margin-bottom: 0px; text-align: center;"><?php echo _("You can change these later in your preferences and user settings.");?></p>
+        <p style="margin-bottom: 0px; text-align: center;"><?php echo _("You can change these later in your preferences and user settings."); ?></p>
 
     </form>
 </div>
diff --git a/legacy/application/views/scripts/form/showbuilder.phtml b/legacy/application/views/scripts/form/showbuilder.phtml
index 69ecfaf97..86b769a51 100644
--- a/legacy/application/views/scripts/form/showbuilder.phtml
+++ b/legacy/application/views/scripts/form/showbuilder.phtml
@@ -9,8 +9,13 @@
 
     <?php echo $this->element->getElement('sb_show_filter') ?>
 
-<!--    --><?php //if ($this->element->getElement('sb_my_shows')):?>
-<!--        <label>--><?php //echo $this->element->getElement('sb_my_shows')->getLabel(); ?><!--</label>-->
-<!--        --><?php //echo $this->element->getElement('sb_my_shows'); ?>
-<!--    --><?php //endif;?>
+    <!--    --><?php //if ($this->element->getElement('sb_my_shows')):
+                ?>
+    <!--        <label>--><?php //echo $this->element->getElement('sb_my_shows')->getLabel();
+                            ?>
+    <!--</label>-->
+    <!--        --><?php //echo $this->element->getElement('sb_my_shows');
+                    ?>
+    <!--    --><?php //endif;
+                ?>
 </div>
diff --git a/legacy/application/views/scripts/form/smart-block-criteria.phtml b/legacy/application/views/scripts/form/smart-block-criteria.phtml
index a8bd7af75..3700f5fd5 100644
--- a/legacy/application/views/scripts/form/smart-block-criteria.phtml
+++ b/legacy/application/views/scripts/form/smart-block-criteria.phtml
@@ -1,65 +1,66 @@
 <form class="smart-block-form" method="post" action="">
     <dl class='zend_form search-criteria'>
         <div id='sp-success' class='success' style='display:none'></div>
-        <dt><label><?php echo(_("Search Criteria:"));?></label></dt>
+        <dt><label><?php echo (_("Search Criteria:")); ?></label></dt>
         <dd id='sp_criteria-element' class='criteria-element'>
-        <?php for ($i = 0; $i < $this->criteriasLength; $i++) {
-        // modRowMap holds the number of modifier rows for each criteria element
-        // i.e. if we have 'Album contains 1' and 'Album contains 2' the modRowMap
-        // for Album is 2
-        ?>
-        <?php for ($j = 0; $j < $this->modRowMap[$i]; $j++) {
-                // determine if logic label should be 'and' or 'or'
-                if ($this->modRowMap[$i] > 1 && $j != $this->modRowMap[$i]-1) $logicLabel = _('or');
-                else $logicLabel = _('and');
+            <?php for ($i = 0; $i < $this->criteriasLength; $i++) {
+                // modRowMap holds the number of modifier rows for each criteria element
+                // i.e. if we have 'Album contains 1' and 'Album contains 2' the modRowMap
+                // for Album is 2
+            ?>
+                <?php for ($j = 0; $j < $this->modRowMap[$i]; $j++) {
+                    // determine if logic label should be 'and' or 'or'
+                    if ($this->modRowMap[$i] > 1 && $j != $this->modRowMap[$i] - 1) $logicLabel = _('or');
+                    else $logicLabel = _('and');
 
-                $disabled = $this->element->getElement("sp_criteria_field_".$i."_".$j)->getAttrib('disabled') == 'disabled'?true:false;
-                // determine if the next row is disabled and only display the logic label if it isn't
-                if ($j == $this->modRowMap[$i]-1 && $i < 25) {
-                    $n = $i+1;
-                    $nextIndex = $n."_0";
-                } elseif ($j+1 <= $this->modRowMap[$i]-1) {
-                    $n = $j+1;
-                    $nextIndex = $i."_".$n;
+                    $disabled = $this->element->getElement("sp_criteria_field_" . $i . "_" . $j)->getAttrib('disabled') == 'disabled' ? true : false;
+                    // determine if the next row is disabled and only display the logic label if it isn't
+                    if ($j == $this->modRowMap[$i] - 1 && $i < 25) {
+                        $n = $i + 1;
+                        $nextIndex = $n . "_0";
+                    } elseif ($j + 1 <= $this->modRowMap[$i] - 1) {
+                        $n = $j + 1;
+                        $nextIndex = $i . "_" . $n;
+                    }
+                    $nextDisabled = $this->element->getElement("sp_criteria_field_" . $nextIndex)->getAttrib('disabled') == 'disabled' ? true : false;
+                ?>
+                    <div <?php if (/*($i > 0) && */$disabled) {
+                                echo 'style="display:none"';
+                            } ?> class="search-row-<?php echo $logicLabel ?>">
+                        <?php echo $this->element->getElement("sp_criteria_field_" . $i . "_" . $j) ?>
+                        <?php echo $this->element->getElement("sp_criteria_modifier_" . $i . "_" . $j)   /* @todo finish this */ ?>
 
-                }
-                $nextDisabled = $this->element->getElement("sp_criteria_field_".$nextIndex)->getAttrib('disabled') == 'disabled'?true:false;
-        ?>
-            <div <?php if (/*($i > 0) && */ $disabled) {
-                          echo 'style="display:none"';
-                      }?> class="search-row-<?php echo $logicLabel ?>">
-                <?php echo $this->element->getElement("sp_criteria_field_".$i."_".$j) ?>
-                <?php echo $this->element->getElement("sp_criteria_modifier_".$i."_".$j)   /* @todo finish this */?>
+                        <?php echo $this->element->getElement("sp_criteria_value_" . $i . "_" . $j) ?>
+                        <span class='sp_text_font' id="datetime_select" <?php echo $this->element->getElement("sp_criteria_datetime_select_" . $i . "_" . $j)->getAttrib("disabled") == "disabled" ? 'style="display:none;"' : "" ?>><?php echo $this->element->getElement('sp_criteria_datetime_select_' . $i . "_" . $j) ?><?php echo _(" ago "); ?></span>
 
-                <?php echo $this->element->getElement("sp_criteria_value_".$i."_".$j) ?>
-                <span class='sp_text_font' id="datetime_select" <?php echo $this->element->getElement("sp_criteria_datetime_select_".$i."_".$j)->getAttrib("disabled") == "disabled"?'style="display:none;"':""?>><?php echo $this->element->getElement('sp_criteria_datetime_select_'.$i."_".$j) ?><?php echo _(" ago "); ?></span>
+                        <a <?php if ($disabled) {
+                                echo 'style=display:none';
+                            } ?> class='modifier_add_link' id='modifier_add_<?php echo $i ?>'>
+                            + <?php echo (_("New Modifier")); ?>
+                        </a>
 
-                <a <?php if ($disabled) { echo 'style=display:none'; } ?>  class='modifier_add_link' id='modifier_add_<?php echo $i ?>'>
-                    + <?php echo(_("New Modifier")); ?>
-                </a>
+                        <span class='sp_text_font' id="extra_criteria" <?php echo $this->element->getElement("sp_criteria_extra_" . $i . "_" . $j)->getAttrib("disabled") == "disabled" ? 'style="display:none;"' : "" ?>><?php echo _(" to "); ?><?php echo $this->element->getElement('sp_criteria_extra_' . $i . "_" . $j) ?></span>
+                        <span class='sp_text_font' id="extra_datetime_select" <?php echo $this->element->getElement("sp_criteria_extra_datetime_select_" . $i . "_" . $j)->getAttrib("disabled") == "disabled" ? 'style="display:none;"' : "" ?>><?php echo $this->element->getElement('sp_criteria_extra_datetime_select_' . $i . "_" . $j) ?><?php echo _(" ago "); ?></span>
 
-                <span class='sp_text_font' id="extra_criteria" <?php echo $this->element->getElement("sp_criteria_extra_".$i."_".$j)->getAttrib("disabled") == "disabled"?'style="display:none;"':""?>><?php echo _(" to "); ?><?php echo $this->element->getElement('sp_criteria_extra_'.$i."_".$j) ?></span>
-                <span class='sp_text_font' id="extra_datetime_select" <?php echo $this->element->getElement("sp_criteria_extra_datetime_select_".$i."_".$j)->getAttrib("disabled") == "disabled"?'style="display:none;"':""?>><?php echo $this->element->getElement('sp_criteria_extra_datetime_select_'.$i."_".$j) ?><?php echo _(" ago "); ?></span>
+                        <a style='margin-right:3px' class='btn btn-small btn-danger' id='criteria_remove_<?php echo $i ?>'>
+                            <i class='icon-white icon-remove spl-no-r-margin'></i>
+                        </a>
+                        <span class='db-logic-label' <?php if ($nextDisabled) echo 'style="display:none"'; ?>>
+                            <?php echo $logicLabel; ?>
+                        </span>
 
-                <a style='margin-right:3px' class='btn btn-small btn-danger' id='criteria_remove_<?php echo $i ?>'>
-                    <i class='icon-white icon-remove spl-no-r-margin'></i>
-                </a>
-                <span class='db-logic-label' <?php if ($nextDisabled) echo 'style="display:none"';?>>
-                    <?php echo $logicLabel;?>
-                </span>
+                        <?php if ($this->element->getElement("sp_criteria_field_" . $i . "_" . $j)->hasErrors()) : ?>
+                            <?php foreach ($this->element->getElement("sp_criteria_field_" . $i . "_" . $j)->getMessages() as $error) : ?>
+                                <span class='errors sp-errors'>
+                                    <?php echo $error; ?>
+                                </span>
+                            <?php endforeach; ?>
+                        <?php endif; ?>
+                    </div>
+                <?php } ?>
 
-                <?php if($this->element->getElement("sp_criteria_field_".$i."_".$j)->hasErrors()) : ?>
-                <?php foreach($this->element->getElement("sp_criteria_field_".$i."_".$j)->getMessages() as $error): ?>
-                <span class='errors sp-errors'>
-                    <?php echo $error; ?>
-                </span>
-                <?php endforeach; ?>
-                <?php endif; ?>
-            </div>
             <?php } ?>
-
-        <?php } ?>
-        <a class='btn btn-small btn-new' id='criteria_add'><i class='icon-white icon-plus'></i><?php echo(_("New Criteria")); ?></a>
+            <a class='btn btn-small btn-new' id='criteria_add'><i class='icon-white icon-plus'></i><?php echo (_("New Criteria")); ?></a>
         </dd>
     </dl>
     <dl>
@@ -67,13 +68,13 @@
             <label class='sp_text_font'><?php echo $this->element->getElement('sp_limit_value')->getLabel() ?></label>
         </dt>
         <dd id='sp_limit-element'>
-            <?php echo $this->element->getElement('sp_limit_value')?>
+            <?php echo $this->element->getElement('sp_limit_value') ?>
             <?php echo $this->element->getElement('sp_limit_options') ?>
-            <?php if($this->element->getElement("sp_limit_value")->hasErrors()) : ?>
-                <?php foreach($this->element->getElement("sp_limit_value")->getMessages() as $error): ?>
+            <?php if ($this->element->getElement("sp_limit_value")->hasErrors()) : ?>
+                <?php foreach ($this->element->getElement("sp_limit_value")->getMessages() as $error) : ?>
                     <span class='errors sp-errors'>
-                   <?php echo $error; ?>
-                </span>
+                        <?php echo $error; ?>
+                    </span>
                 <?php endforeach; ?>
             <?php endif; ?>
         </dd>
@@ -88,14 +89,16 @@
                 </label>
             </dt>
             <dd id='sp_type-element'>
-                <?php $i=0;
-                    $value = $this->element->getElement('sp_type')->getValue();
-                    foreach ($this->element->getElement('sp_type')->getMultiOptions() as $radio) : ?>
+                <?php $i = 0;
+                $value = $this->element->getElement('sp_type')->getValue();
+                foreach ($this->element->getElement('sp_type')->getMultiOptions() as $radio) : ?>
 
-                    <label class='sp-label' for='sp_type-<?php echo $i?>'>
-                        <input type="radio" value="<?php echo $i ?>" id="sp_type-<?php echo $i ?>" name="sp_type" <?php if($i == $value){echo 'checked="checked"';}?> ><?php echo $radio ?>
+                    <label class='sp-label' for='sp_type-<?php echo $i ?>'>
+                        <input type="radio" value="<?php echo $i ?>" id="sp_type-<?php echo $i ?>" name="sp_type" <?php if ($i == $value) {
+                                                                                                                        echo 'checked="checked"';
+                                                                                                                    } ?>><?php echo $radio ?>
                     </label>
-                <?php $i = $i + 1; ?>
+                    <?php $i = $i + 1; ?>
                 <?php endforeach; ?>
                 <span class='playlist_type_help_icon'></span>
             </dd>
@@ -105,12 +108,12 @@
                 <label class='sp_text_font'><?php echo $this->element->getElement('sp_repeat_tracks')->getLabel() ?></label>
             </dt>
             <dd id='sp_repeat_tracks-element'>
-                <?php echo $this->element->getElement('sp_repeat_tracks')?>
-                <?php if($this->element->getElement("sp_repeat_tracks")->hasErrors()) : ?>
-                    <?php foreach($this->element->getElement("sp_repeat_tracks")->getMessages() as $error): ?>
+                <?php echo $this->element->getElement('sp_repeat_tracks') ?>
+                <?php if ($this->element->getElement("sp_repeat_tracks")->hasErrors()) : ?>
+                    <?php foreach ($this->element->getElement("sp_repeat_tracks")->getMessages() as $error) : ?>
                         <span class='errors sp-errors'>
-                    <?php echo $error; ?>
-                    </span>
+                            <?php echo $error; ?>
+                        </span>
                     <?php endforeach; ?>
                 <?php endif; ?>
                 <span class='repeat_tracks_help_icon'></span>
@@ -121,12 +124,12 @@
                 <label class='sp_text_font'><?php echo $this->element->getElement('sp_overflow_tracks')->getLabel() ?></label>
             </dt>
             <dd id='sp_overflow_tracks-element'>
-                <?php echo $this->element->getElement('sp_overflow_tracks')?>
-                <?php if($this->element->getElement("sp_overflow_tracks")->hasErrors()) : ?>
-                    <?php foreach($this->element->getElement("sp_overflow_tracks")->getMessages() as $error): ?>
+                <?php echo $this->element->getElement('sp_overflow_tracks') ?>
+                <?php if ($this->element->getElement("sp_overflow_tracks")->hasErrors()) : ?>
+                    <?php foreach ($this->element->getElement("sp_overflow_tracks")->getMessages() as $error) : ?>
                         <span class='errors sp-errors'>
-                    <?php echo $error; ?>
-                    </span>
+                            <?php echo $error; ?>
+                        </span>
                     <?php endforeach; ?>
                 <?php endif; ?>
                 <span class='overflow_tracks_help_icon'></span>
@@ -134,15 +137,15 @@
         </dl>
         <dl>
             <dt>
-                <label class='sp_text_font'><?php echo $this->element->getElement('sp_sort_options')->getLabel();?></label>
+                <label class='sp_text_font'><?php echo $this->element->getElement('sp_sort_options')->getLabel(); ?></label>
             </dt>
             <dd id='sp_sort-element'>
                 <?php echo $this->element->getElement('sp_sort_options') ?>
-                <?php if($this->element->getElement("sp_sort_options")->hasErrors()) : ?>
-                    <?php foreach($this->element->getElement("sp_sort_options")->getMessages() as $error): ?>
+                <?php if ($this->element->getElement("sp_sort_options")->hasErrors()) : ?>
+                    <?php foreach ($this->element->getElement("sp_sort_options")->getMessages() as $error) : ?>
                         <span class='errors sp-errors'>
-                    <?php echo $error; ?>
-                    </span>
+                            <?php echo $error; ?>
+                        </span>
                     <?php endforeach; ?>
                 <?php endif; ?>
             </dd>
diff --git a/legacy/application/views/scripts/form/stream-setting-form.phtml b/legacy/application/views/scripts/form/stream-setting-form.phtml
index 12e3570b9..e839afcc6 100644
--- a/legacy/application/views/scripts/form/stream-setting-form.phtml
+++ b/legacy/application/views/scripts/form/stream-setting-form.phtml
@@ -1,214 +1,214 @@
-        <?php
-        $s_name = "s".$this->stream_number;
-        ?>
-        <h3 class="collapsible-header <?php echo $this->enabled == 0?"closed":""?>"><span class="arrow-icon"></span><?php echo _("Stream "); ?><?php echo $this->stream_number?></h3>
-        <div class="stream-setting-content" <?php echo $this->enabled == 0?'style="display: none;':''?> id="<?php echo $s_name?>-config">
-        <fieldset class="padded">
-            <dl class="zend_form clearfix">
-            <dd id="<?php echo $s_name?>Liquidsoap-error-msg-element" class="liquidsoap_status">
-                <?php echo $this->liquidsoap_error_msg?>
+<?php
+$s_name = "s" . $this->stream_number;
+?>
+<h3 class="collapsible-header <?php echo $this->enabled == 0 ? "closed" : "" ?>"><span class="arrow-icon"></span><?php echo _("Stream "); ?><?php echo $this->stream_number ?></h3>
+<div class="stream-setting-content" <?php echo $this->enabled == 0 ? 'style="display: none;' : '' ?> id="<?php echo $s_name ?>-config">
+    <fieldset class="padded">
+        <dl class="zend_form clearfix">
+            <dd id="<?php echo $s_name ?>Liquidsoap-error-msg-element" class="liquidsoap_status">
+                <?php echo $this->liquidsoap_error_msg ?>
             </dd>
-            <dt id="<?php echo $s_name?>Enabled-label">
-                <label for="<?php echo $s_name?>Enabled"><?php echo $this->element->getElement('enable')->getLabel() ?></label>
+            <dt id="<?php echo $s_name ?>Enabled-label">
+                <label for="<?php echo $s_name ?>Enabled"><?php echo $this->element->getElement('enable')->getLabel() ?></label>
             </dt>
-            <dd id="<?php echo $s_name?>Enabled-element">
-                <?php echo $this->element->getElement('enable')?>
+            <dd id="<?php echo $s_name ?>Enabled-element">
+                <?php echo $this->element->getElement('enable') ?>
             </dd>
 
-            <dt id="<?php echo $s_name?>Mobile-label">
-                <label for="<?php echo $s_name?>Mobile"><?php echo $this->element->getElement('mobile')->getLabel() ?></label>
+            <dt id="<?php echo $s_name ?>Mobile-label">
+                <label for="<?php echo $s_name ?>Mobile"><?php echo $this->element->getElement('mobile')->getLabel() ?></label>
             </dt>
-            <dd id="<?php echo $s_name?>Mobile-element">
-                <?php echo $this->element->getElement('mobile')?>
+            <dd id="<?php echo $s_name ?>Mobile-element">
+                <?php echo $this->element->getElement('mobile') ?>
             </dd>
 
-            <dt id="<?php echo $s_name?>Type-label">
-                <label for="<?php echo $s_name?>Type"><?php echo $this->element->getElement('type')->getLabel()?></label>
+            <dt id="<?php echo $s_name ?>Type-label">
+                <label for="<?php echo $s_name ?>Type"><?php echo $this->element->getElement('type')->getLabel() ?></label>
             </dt>
-            <dd id="<?php echo $s_name?>Type-element">
-                <?php echo $this->element->getElement('type')?>
+            <dd id="<?php echo $s_name ?>Type-element">
+                <?php echo $this->element->getElement('type') ?>
                 <span class='stream_type_help_icon'></span>
             </dd>
 
-            <dt id="<?php echo $s_name?>Bitrate-label">
-                <label for="<?php echo $s_name?>Bitrate"><?php echo $this->element->getElement('bitrate')->getLabel()?></label>
+            <dt id="<?php echo $s_name ?>Bitrate-label">
+                <label for="<?php echo $s_name ?>Bitrate"><?php echo $this->element->getElement('bitrate')->getLabel() ?></label>
             </dt>
-            <dd id="<?php echo $s_name?>Bitrate-element">
-                <?php echo $this->element->getElement('bitrate')?>
+            <dd id="<?php echo $s_name ?>Bitrate-element">
+                <?php echo $this->element->getElement('bitrate') ?>
             </dd>
             <dt id="outputServer-label">
-                <label for="outputServer"><?php echo $this->element->getElement('host')->getLabel()?><span class="info-text-small">
-                <?php echo _("(Required)")?></span> :</label>
+                <label for="outputServer"><?php echo $this->element->getElement('host')->getLabel() ?><span class="info-text-small">
+                        <?php echo _("(Required)") ?></span> :</label>
             </dt>
             <dd id="outputServer-element">
-                <?php echo $this->element->getElement('host')?>
-                <?php if($this->element->getElement('host')->hasErrors()) : ?>
+                <?php echo $this->element->getElement('host') ?>
+                <?php if ($this->element->getElement('host')->hasErrors()) : ?>
                     <ul class='errors'>
-                        <?php foreach($this->element->getElement('host')->getMessages() as $error): ?>
+                        <?php foreach ($this->element->getElement('host')->getMessages() as $error) : ?>
                             <li><?php echo $error; ?></li>
                         <?php endforeach; ?>
                     </ul>
                 <?php endif; ?>
             </dd>
             <dt id="outputPort-label">
-                <label for="outputPort"><?php echo $this->element->getElement('port')->getLabel()?><span class="info-text-small">
-                <?php echo _("(Required)")?></span> :</label>
+                <label for="outputPort"><?php echo $this->element->getElement('port')->getLabel() ?><span class="info-text-small">
+                        <?php echo _("(Required)") ?></span> :</label>
             </dt>
             <dd id="outputPort-element">
-                <?php echo $this->element->getElement('port')?>
-                <?php if($this->element->getElement('port')->hasErrors()) : ?>
+                <?php echo $this->element->getElement('port') ?>
+                <?php if ($this->element->getElement('port')->hasErrors()) : ?>
                     <ul class='errors'>
-                        <?php foreach($this->element->getElement('port')->getMessages() as $error): ?>
+                        <?php foreach ($this->element->getElement('port')->getMessages() as $error) : ?>
                             <li><?php echo $error; ?></li>
                         <?php endforeach; ?>
                     </ul>
                 <?php endif; ?>
             </dd>
-            <dt id="<?php echo $s_name?>Output-label">
-                <label for="<?php echo $s_name?>Output"><?php echo $this->element->getElement('output')->getLabel()?></label>
+            <dt id="<?php echo $s_name ?>Output-label">
+                <label for="<?php echo $s_name ?>Output"><?php echo $this->element->getElement('output')->getLabel() ?></label>
             </dt>
-            <dd id="<?php echo $s_name?>Output-element">
-                <?php echo $this->element->getElement('output')?>
+            <dd id="<?php echo $s_name ?>Output-element">
+                <?php echo $this->element->getElement('output') ?>
             </dd>
 
-             <dt id="<?php echo $s_name?>Channels-label">
-                <label for="<?php echo $s_name?>Channels"><?php echo $this->element->getElement('channels')->getLabel()?></label>
+            <dt id="<?php echo $s_name ?>Channels-label">
+                <label for="<?php echo $s_name ?>Channels"><?php echo $this->element->getElement('channels')->getLabel() ?></label>
             </dt>
-            <dd id="<?php echo $s_name?>Channels-element">
-                <?php echo $this->element->getElement('channels')?>
+            <dd id="<?php echo $s_name ?>Channels-element">
+                <?php echo $this->element->getElement('channels') ?>
             </dd>
 
             <fieldset class="padded top-margin display_field toggle closed" id="output_setting">
                 <legend style="cursor: pointer;">
                     <span class="ui-icon ui-icon-triangle-2-n-s"></span>
-                    <?php echo _("Additional Options")?>
+                    <?php echo _("Additional Options") ?>
                 </legend>
                 <dl class="zend_form">
-                <dt id="outputUser-label">
-                    <label for="outputUser"><?php echo $this->element->getElement('user')->getLabel()?> :
-                    <span class='stream_username_help_icon'></span>
-                    </label>
-                </dt>
-                <dd id="outputUser-element">
-                    <?php echo $this->element->getElement('user')?>
-                    <?php if($this->element->getElement('user')->hasErrors()) : ?>
-                        <ul class='errors'>
-                            <?php foreach($this->element->getElement('user')->getMessages() as $error): ?>
-                                <li><?php echo $error; ?></li>
-                            <?php endforeach; ?>
-                        </ul>
-                    <?php endif; ?>
-                </dd>
-                <dt id="outputPassword-label">
-                    <label class="optional" for="outputPassword"><?php echo $this->element->getElement('pass')->getLabel()?> :</label>
-                </dt>
-                <dd id="outputPassword-element" class="clearfix">
-                    <?php echo $this->element->getElement('pass')?>
-                    <?php if($this->element->getElement('pass')->hasErrors()) : ?>
-                        <ul class='errors'>
-                            <?php foreach($this->element->getElement('pass')->getMessages() as $error): ?>
-                                <li><?php echo $error; ?></li>
-                            <?php endforeach; ?>
-                        </ul>
-                    <?php endif; ?>
-                </dd>
-                <dt id="adminUser-label">
-                    <label for="outputUser"><?php echo $this->element->getElement('admin_user')->getLabel()?> :
-                    <span class='admin_username_help_icon'></span>
-                    </label>
-                </dt>
-                <dd id="adminUser-element">
-                    <?php echo $this->element->getElement('admin_user')?>
-                    <?php if($this->element->getElement('admin_user')->hasErrors()) : ?>
-                        <ul class='errors'>
-                            <?php foreach($this->element->getElement('admin_user')->getMessages() as $error): ?>
-                                <li><?php echo $error; ?></li>
-                            <?php endforeach; ?>
-                        </ul>
-                    <?php endif; ?>
-                </dd>
-                <dt id="adminPassword-label">
-                    <label class="optional" for="outputPassword"><?php echo $this->element->getElement('admin_pass')->getLabel()?> :</label>
-                </dt>
-                <dd id="adminPassword-element" class="clearfix">
-                    <?php echo $this->element->getElement('admin_pass')?>
-                    <?php if($this->element->getElement('admin_pass')->hasErrors()) : ?>
-                        <ul class='errors'>
-                            <?php foreach($this->element->getElement('admin_pass')->getMessages() as $error): ?>
-                                <li><?php echo $error; ?></li>
-                            <?php endforeach; ?>
-                        </ul>
-                    <?php endif; ?>
-                </dd>
-                <dt class="block-display info-block">
-                    <?php echo _("The following info will be displayed to listeners in their media player:")?>
-                </dt>
-                <dt id="stationName-label">
-                    <label for="stationName"><?php echo $this->element->getElement('name')->getLabel()?> :</label>
-                </dt>
-                <dd id="stationName-element" class="clearfix">
-                    <?php echo $this->element->getElement('name')?>
-                    <?php if($this->element->getElement('name')->hasErrors()) : ?>
-                        <ul class='errors'>
-                            <?php foreach($this->element->getElement('name')->getMessages() as $error): ?>
-                                <li><?php echo $error; ?></li>
-                            <?php endforeach; ?>
-                        </ul>
-                    <?php endif; ?>
-                </dd>
-                <dt id="stationDescription-label">
-                    <label for="stationDescription"><?php echo $this->element->getElement('description')->getLabel()?> :</label>
-                </dt>
-                <dd id="stationDescription-element" class="clearfix">
-                    <?php echo $this->element->getElement('description')?>
-                    <?php if($this->element->getElement('description')->hasErrors()) : ?>
-                        <ul class='errors'>
-                            <?php foreach($this->element->getElement('description')->getMessages() as $error): ?>
-                                <li><?php echo $error; ?></li>
-                            <?php endforeach; ?>
-                        </ul>
-                    <?php endif; ?>
-                </dd>
-                <dt id="stationURL-label">
-                    <label for="stationURL"><?php echo $this->element->getElement('url')->getLabel()?> :</label>
-                </dt>
-                <dd id="stationURL-element" class="clearfix">
-                    <?php echo $this->element->getElement('url')?>
-                    <span class="info-text-small"><?php echo _("(Your radio station website)")?></span>
-                    <?php if($this->element->getElement('url')->hasErrors()) : ?>
-                        <ul class='errors'>
-                            <?php foreach($this->element->getElement('url')->getMessages() as $error): ?>
-                                <li><?php echo $error; ?></li>
-                            <?php endforeach; ?>
-                        </ul>
-                    <?php endif; ?>
-                </dd>
-                <dt id="outputGenre-label">
-                    <label for="outputGenre"><?php echo $this->element->getElement('genre')->getLabel()?> :</label>
-                </dt>
-                <dd id="outputGenre-element">
-                    <?php echo $this->element->getElement('genre')?>
-                    <?php if($this->element->getElement('genre')->hasErrors()) : ?>
-                        <ul class='errors'>
-                            <?php foreach($this->element->getElement('genre')->getMessages() as $error): ?>
-                                <li><?php echo $error; ?></li>
-                            <?php endforeach; ?>
-                        </ul>
-                    <?php endif; ?>
-                </dd>
-                <dt id="outputMountpoint-label">
-                    <label for="outputMountpoint"><?php echo $this->element->getElement('mount')->getLabel()?> :</label>
-                </dt>
-                <dd id="outputMountpoint-element">
-                    <?php echo $this->element->getElement('mount')?>
-                    <?php if($this->element->getElement('mount')->hasErrors()) : ?>
-                        <ul class='errors'>
-                            <?php foreach($this->element->getElement('mount')->getMessages() as $error): ?>
-                                <li><?php echo $error; ?></li>
-                            <?php endforeach; ?>
-                        </ul>
-                    <?php endif; ?>
-                </dd>
+                    <dt id="outputUser-label">
+                        <label for="outputUser"><?php echo $this->element->getElement('user')->getLabel() ?> :
+                            <span class='stream_username_help_icon'></span>
+                        </label>
+                    </dt>
+                    <dd id="outputUser-element">
+                        <?php echo $this->element->getElement('user') ?>
+                        <?php if ($this->element->getElement('user')->hasErrors()) : ?>
+                            <ul class='errors'>
+                                <?php foreach ($this->element->getElement('user')->getMessages() as $error) : ?>
+                                    <li><?php echo $error; ?></li>
+                                <?php endforeach; ?>
+                            </ul>
+                        <?php endif; ?>
+                    </dd>
+                    <dt id="outputPassword-label">
+                        <label class="optional" for="outputPassword"><?php echo $this->element->getElement('pass')->getLabel() ?> :</label>
+                    </dt>
+                    <dd id="outputPassword-element" class="clearfix">
+                        <?php echo $this->element->getElement('pass') ?>
+                        <?php if ($this->element->getElement('pass')->hasErrors()) : ?>
+                            <ul class='errors'>
+                                <?php foreach ($this->element->getElement('pass')->getMessages() as $error) : ?>
+                                    <li><?php echo $error; ?></li>
+                                <?php endforeach; ?>
+                            </ul>
+                        <?php endif; ?>
+                    </dd>
+                    <dt id="adminUser-label">
+                        <label for="outputUser"><?php echo $this->element->getElement('admin_user')->getLabel() ?> :
+                            <span class='admin_username_help_icon'></span>
+                        </label>
+                    </dt>
+                    <dd id="adminUser-element">
+                        <?php echo $this->element->getElement('admin_user') ?>
+                        <?php if ($this->element->getElement('admin_user')->hasErrors()) : ?>
+                            <ul class='errors'>
+                                <?php foreach ($this->element->getElement('admin_user')->getMessages() as $error) : ?>
+                                    <li><?php echo $error; ?></li>
+                                <?php endforeach; ?>
+                            </ul>
+                        <?php endif; ?>
+                    </dd>
+                    <dt id="adminPassword-label">
+                        <label class="optional" for="outputPassword"><?php echo $this->element->getElement('admin_pass')->getLabel() ?> :</label>
+                    </dt>
+                    <dd id="adminPassword-element" class="clearfix">
+                        <?php echo $this->element->getElement('admin_pass') ?>
+                        <?php if ($this->element->getElement('admin_pass')->hasErrors()) : ?>
+                            <ul class='errors'>
+                                <?php foreach ($this->element->getElement('admin_pass')->getMessages() as $error) : ?>
+                                    <li><?php echo $error; ?></li>
+                                <?php endforeach; ?>
+                            </ul>
+                        <?php endif; ?>
+                    </dd>
+                    <dt class="block-display info-block">
+                        <?php echo _("The following info will be displayed to listeners in their media player:") ?>
+                    </dt>
+                    <dt id="stationName-label">
+                        <label for="stationName"><?php echo $this->element->getElement('name')->getLabel() ?> :</label>
+                    </dt>
+                    <dd id="stationName-element" class="clearfix">
+                        <?php echo $this->element->getElement('name') ?>
+                        <?php if ($this->element->getElement('name')->hasErrors()) : ?>
+                            <ul class='errors'>
+                                <?php foreach ($this->element->getElement('name')->getMessages() as $error) : ?>
+                                    <li><?php echo $error; ?></li>
+                                <?php endforeach; ?>
+                            </ul>
+                        <?php endif; ?>
+                    </dd>
+                    <dt id="stationDescription-label">
+                        <label for="stationDescription"><?php echo $this->element->getElement('description')->getLabel() ?> :</label>
+                    </dt>
+                    <dd id="stationDescription-element" class="clearfix">
+                        <?php echo $this->element->getElement('description') ?>
+                        <?php if ($this->element->getElement('description')->hasErrors()) : ?>
+                            <ul class='errors'>
+                                <?php foreach ($this->element->getElement('description')->getMessages() as $error) : ?>
+                                    <li><?php echo $error; ?></li>
+                                <?php endforeach; ?>
+                            </ul>
+                        <?php endif; ?>
+                    </dd>
+                    <dt id="stationURL-label">
+                        <label for="stationURL"><?php echo $this->element->getElement('url')->getLabel() ?> :</label>
+                    </dt>
+                    <dd id="stationURL-element" class="clearfix">
+                        <?php echo $this->element->getElement('url') ?>
+                        <span class="info-text-small"><?php echo _("(Your radio station website)") ?></span>
+                        <?php if ($this->element->getElement('url')->hasErrors()) : ?>
+                            <ul class='errors'>
+                                <?php foreach ($this->element->getElement('url')->getMessages() as $error) : ?>
+                                    <li><?php echo $error; ?></li>
+                                <?php endforeach; ?>
+                            </ul>
+                        <?php endif; ?>
+                    </dd>
+                    <dt id="outputGenre-label">
+                        <label for="outputGenre"><?php echo $this->element->getElement('genre')->getLabel() ?> :</label>
+                    </dt>
+                    <dd id="outputGenre-element">
+                        <?php echo $this->element->getElement('genre') ?>
+                        <?php if ($this->element->getElement('genre')->hasErrors()) : ?>
+                            <ul class='errors'>
+                                <?php foreach ($this->element->getElement('genre')->getMessages() as $error) : ?>
+                                    <li><?php echo $error; ?></li>
+                                <?php endforeach; ?>
+                            </ul>
+                        <?php endif; ?>
+                    </dd>
+                    <dt id="outputMountpoint-label">
+                        <label for="outputMountpoint"><?php echo $this->element->getElement('mount')->getLabel() ?> :</label>
+                    </dt>
+                    <dd id="outputMountpoint-element">
+                        <?php echo $this->element->getElement('mount') ?>
+                        <?php if ($this->element->getElement('mount')->hasErrors()) : ?>
+                            <ul class='errors'>
+                                <?php foreach ($this->element->getElement('mount')->getMessages() as $error) : ?>
+                                    <li><?php echo $error; ?></li>
+                                <?php endforeach; ?>
+                            </ul>
+                        <?php endif; ?>
+                    </dd>
                 </dl>
             </fieldset>
             <dt id="outputStreamURL-label">
@@ -217,6 +217,6 @@
             <dd id="outputStreamURL-element">
                 <span id="stream_url" class="static_text"></span>
             </dd>
-            </dl>
-        </fieldset>
-        </div>
+        </dl>
+    </fieldset>
+</div>
diff --git a/legacy/application/views/scripts/index/index.phtml b/legacy/application/views/scripts/index/index.phtml
index d80a3660a..b84129df2 100644
--- a/legacy/application/views/scripts/index/index.phtml
+++ b/legacy/application/views/scripts/index/index.phtml
@@ -1,16 +1,16 @@
 <script language="JavaScript">
-    function autoResize(id){
+    function autoResize(id) {
         var newheight;
         var newwidth;
 
-        if(document.getElementById){
-            newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
+        if (document.getElementById) {
+            newheight = document.getElementById(id).contentWindow.document.body.scrollHeight;
             // Hack to get height in Firefox
             if (newheight == 0) newheight = newheight = document.getElementById(id).contentWindow.document.documentElement.scrollHeight;
-            newwidth=document.getElementById(id).contentWindow.document.body.scrollWidth;
+            newwidth = document.getElementById(id).contentWindow.document.body.scrollWidth;
         }
-        document.getElementById(id).height= (newheight) + "px";
-        document.getElementById(id).width= (newwidth) + "px";
+        document.getElementById(id).height = (newheight) + "px";
+        document.getElementById(id).width = (newwidth) + "px";
     }
 </script>
 
@@ -19,12 +19,12 @@
     <div class="bck_cover"></div>
 
     <?php if ($this->stationLogo === DEFAULT_LOGO_PLACEHOLDER) {
-        echo "<a href='#' class='logo'><img src='".DEFAULT_LOGO_FILE."'></a>";
+        echo "<a href='#' class='logo'><img src='" . DEFAULT_LOGO_FILE . "'></a>";
     } else {
         echo "<a href='#' class='logo'><img src='data:image/png;base64," . $this->stationLogo . "'></a>";
     } ?>
 
-    <?php if ($this->displayLoginButton): ?>
+    <?php if ($this->displayLoginButton) : ?>
         <div class='login-btn'>
             <a href='/login' target='_parent'>
                 <span><?php echo _('Login'); ?></span>
@@ -53,7 +53,7 @@
     </div>
 
     <?php
-    if ($this->displayRssTab) {?>
+    if ($this->displayRssTab) { ?>
         <div id="tab-4" class="podcast tab_content">
             <div class="rss-title-wrapper">
                 <div id="rss-subscribe">
@@ -67,78 +67,79 @@
             <div id="jquery_jplayer_1" class="jp-player">
             </div>
             <div class="podcast_bck">
-            <div id="jp_container_1" class="jp-audio">
-                <div class="jp-type-playlist">
+                <div id="jp_container_1" class="jp-audio">
+                    <div class="jp-type-playlist">
 
-                    <div class="current-track track-overflow"><?php echo _("Now Playing:") ?><span class="track-overflow"></span></div>
-                    <div class="jp-gui jp-interface">
-                        <div class="playbar playbar-buttons">
-                        <ul class="jp-controls rss-buttons">
-                            <li class="ui-corner-all jp-play">
-                                <span class="icon-play icon-white" tabindex="1"><?php /*echo _("play") */?></span>
-                            </li>
+                        <div class="current-track track-overflow"><?php echo _("Now Playing:") ?><span class="track-overflow"></span></div>
+                        <div class="jp-gui jp-interface">
+                            <div class="playbar playbar-buttons">
+                                <ul class="jp-controls rss-buttons">
+                                    <li class="ui-corner-all jp-play">
+                                        <span class="icon-play icon-white" tabindex="1"><?php /*echo _("play") */ ?></span>
+                                    </li>
 
-                            <li class="ui-corner-all jp-pause">
-                                <span class="icon-pause icon-white" tabindex="1"><?php /*echo _("pause") */?></span>
-                            </li>
-                            <li class="ui-corner-all jp-stop">
-                                <span class="icon-stop icon-white" tabindex="1"><?php /*echo _("stop") */?></span>
-                            </li>
-                        </ul>
-                        </div>
-                        <div class="playbar playbar-progress">
-                        <div class="jp-time-block">
-                            <div class="jp-progress">
-                                <div class="jp-seek-bar">
-                                    <div class="jp-play-bar"></div>
+                                    <li class="ui-corner-all jp-pause">
+                                        <span class="icon-pause icon-white" tabindex="1"><?php /*echo _("pause") */ ?></span>
+                                    </li>
+                                    <li class="ui-corner-all jp-stop">
+                                        <span class="icon-stop icon-white" tabindex="1"><?php /*echo _("stop") */ ?></span>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="playbar playbar-progress">
+                                <div class="jp-time-block">
+                                    <div class="jp-progress">
+                                        <div class="jp-seek-bar">
+                                            <div class="jp-play-bar"></div>
+                                        </div>
+                                    </div>
+                                    <div class="jp-time-holder">
+                                        <div class="jp-current-time"></div>
+                                    </div>
                                 </div>
                             </div>
-                            <div class="jp-time-holder">
-                                <div class="jp-current-time"></div>
+
+                            <div class="playbar playbar-progress">
+                                <div class="jp-volume-block">
+                                    <div class="jp-mute">
+                                        <span class="ui-icon" tabindex="1" title="mute"><?php /*echo _("mute") */ ?></span>
+                                    </div>
+                                    <div class="jp-unmute">
+                                        <span class="ui-icon" tabindex="1" title="unmute"><?php /*echo _("unmute") */ ?></span>
+                                    </div>
+                                    <div class="jp-volume-bar">
+                                        <div class="jp-volume-bar-value"></div>
+                                    </div>
+                                    <div class="jp-volume-max">
+                                        <span class="ui-icon" tabindex="1" title="max volume"><?php /*echo _("max volume") */ ?></span>
+                                    </div>
+                                </div>
                             </div>
-                        </div>
+                            </ul>
+
                         </div>
 
-                        <div class="playbar playbar-progress">
-                        <div class="jp-volume-block">
-                            <div class="jp-mute">
-                                <span class="ui-icon" tabindex="1" title="mute"><?php /*echo _("mute") */?></span>
-                            </div>
-                            <div class="jp-unmute">
-                                <span class="ui-icon" tabindex="1" title="unmute"><?php /*echo _("unmute") */?></span>
-                            </div>
-                            <div class="jp-volume-bar">
-                                <div class="jp-volume-bar-value"></div>
-                            </div>
-                            <div class="jp-volume-max">
-                                <span class="ui-icon" tabindex="1" title="max volume"><?php /*echo _("max volume") */?></span>
-                            </div>
+                        <div class="rss-tracks">
+                            <ul class="jp-playlist">
+                            </ul>
                         </div>
-                        </div>
-                        </ul>
 
-                    </div>
-
-                    <div class="rss-tracks">
-                        <ul class="jp-playlist">
+                        <ul class="pagination">
                         </ul>
                     </div>
 
-                    <ul class="pagination">
-                    </ul>
                 </div>
-
-            </div>
             </div>
 
             <script type="text/javascript">
                 var playlist;
+
                 function buildJplayerPlaylist(page, data) {
                     playlist = new Array();
                     var media;
 
                     $('.rss-tracks ul').html('');
-                    $.each(data[Object.keys(data)[page]], function (index, value) {
+                    $.each(data[Object.keys(data)[page]], function(index, value) {
                         var media_mime_supported = true;
                         media = {
                             title: value.CcFiles.track_title,
@@ -157,12 +158,12 @@
                             media_mime_supported = false;
                         }
 
-                        var podcast_title_link = "<a class='podcast_title jp-playlist-item' tabindex='0' href='#'>"+value.CcFiles.track_title+"</a>";
-                        var podcast_title_no_link = "<div class='podcast_title'>"+value.CcFiles.track_title+"</div>";
-                        var playlist_metadata = "<span class='podcast_date'>"+value.publication_date+"</span>" +
-                        "<span class='podcast_length'>"+value.CcFiles.length+"</span>" +
-                        "<span class='podcast_desc_btn'>Description</span>" +
-                        "<div class='podcast_desc'>"+value.CcFiles.description+"</div>";
+                        var podcast_title_link = "<a class='podcast_title jp-playlist-item' tabindex='0' href='#'>" + value.CcFiles.track_title + "</a>";
+                        var podcast_title_no_link = "<div class='podcast_title'>" + value.CcFiles.track_title + "</div>";
+                        var playlist_metadata = "<span class='podcast_date'>" + value.publication_date + "</span>" +
+                            "<span class='podcast_length'>" + value.CcFiles.length + "</span>" +
+                            "<span class='podcast_desc_btn'>Description</span>" +
+                            "<div class='podcast_desc'>" + value.CcFiles.description + "</div>";
 
                         if (media_mime_supported) {
                             playlist.push(media);
@@ -171,9 +172,9 @@
 
                             playlist_item += podcast_title_link + playlist_metadata;
 
-                            playlist_item += "<div class='podcast_btn_group'>"+
-                            "<span class='podcast_play podcast_action_btn'><a href='#' id='rss-track' data-rss-playlist-id='"+index+"'><img src='css/radio-page/img/podcast_play.png'></a></span>" +
-                            "<span class='podcast_download podcast_action_btn'><a id='rss-download-link' href='"+value.download_url+"'><img src='css/radio-page/img/podcast_download.png'></a></span> </div></div></li>";
+                            playlist_item += "<div class='podcast_btn_group'>" +
+                                "<span class='podcast_play podcast_action_btn'><a href='#' id='rss-track' data-rss-playlist-id='" + index + "'><img src='css/radio-page/img/podcast_play.png'></a></span>" +
+                                "<span class='podcast_download podcast_action_btn'><a id='rss-download-link' href='" + value.download_url + "'><img src='css/radio-page/img/podcast_download.png'></a></span> </div></div></li>";
 
                         } else {
                             // add empty media item to playlist so indexes stay inline with the corret
@@ -182,9 +183,9 @@
 
                             var playlist_item = "<div class='playlist-item-no-preview podcast_info'>";
                             playlist_item += podcast_title_no_link + playlist_metadata;
-                            playlist_item += "<div class='podcast_btn_group'>"+
-                            "<span class='podcast_no_play'><img src='css/radio-page/img/podcast_no_play.png'></span>" +
-                            "<span class='podcast_download podcast_action_btn'><a id='rss-download-link' href='"+value.download_url+"'><img src='css/radio-page/img/podcast_download.png'></a></span> </div></div>";
+                            playlist_item += "<div class='podcast_btn_group'>" +
+                                "<span class='podcast_no_play'><img src='css/radio-page/img/podcast_no_play.png'></span>" +
+                                "<span class='podcast_download podcast_action_btn'><a id='rss-download-link' href='" + value.download_url + "'><img src='css/radio-page/img/podcast_download.png'></a></span> </div></div>";
                         }
 
                         $('.rss-tracks ul').append(playlist_item);
@@ -196,7 +197,7 @@
                     // we have to set the player to play the first track on page load
                     // or else the play button won't work at first. make sure nothing
                     // is playing first
-                    if($("#jquery_jplayer_1").data().jPlayer.status.paused == true){
+                    if ($("#jquery_jplayer_1").data().jPlayer.status.paused == true) {
                         // jPlayer is not currently playing
                         _playlist_jplayer.play(0);
                         $("#jquery_jplayer_1").jPlayer("stop");
@@ -211,7 +212,7 @@
                         return false;
                     });
 
-                    $('.podcast_desc_btn').click(function(){
+                    $('.podcast_desc_btn').click(function() {
                         $(this).toggleClass('current');
                         $(this).next('.podcast_desc').slideToggle();
                     });
@@ -221,7 +222,7 @@
                 _playlist_jplayer = new jPlayerPlaylist({
                         jPlayer: "#jquery_jplayer_1",
                         cssSelectorAncestor: "#jp_container_1"
-                    },[], //array of songs will be filled with below's json call
+                    }, [], //array of songs will be filled with below's json call
                     {
                         swfPath: baseUrl + "js/jplayer",
                         supplied: "oga, mp3, m4v, m4a, wav",
@@ -240,7 +241,7 @@
                             removeTime: 0,
                             shuffleTime: 0
                         },
-                        ready: function () {
+                        ready: function() {
 
                             var episodes = <?php echo $this->episodes ?>;
                             var empty_podcast_message = "<?php echo $this->emptyPodcastMessage ?>";
@@ -252,14 +253,14 @@
 
 
                                 // update current track metadata on player bar
-                                $("#jquery_jplayer_1").bind(jQuery.jPlayer.event.play, function (event) {
+                                $("#jquery_jplayer_1").bind(jQuery.jPlayer.event.play, function(event) {
                                     var current = _playlist_jplayer.current;
                                     $('.current-track span').html(playlist[current].title);
                                 });
 
                                 // build pagination menu
                                 var pages = "<li data-page-index='0'><</li>";
-                                $.each(episodes, function (index, value) {
+                                $.each(episodes, function(index, value) {
                                     var page_number = +index + 1;
                                     pages += "<li data-page-index='" + index + "'>" + page_number + "</li>";
                                 });
@@ -269,7 +270,7 @@
                                 $("ul.pagination").find("li:contains('1')").addClass('current');
 
                                 // pagination click
-                                $("ul.pagination li").click(function () {
+                                $("ul.pagination li").click(function() {
                                     buildJplayerPlaylist($(this).attr("data-page-index"), episodes);
                                     $(this).siblings().removeClass('current');
                                     if ($(this).text() === "<") {
@@ -283,7 +284,7 @@
                                 });
 
                                 //turn off player bar when podcast track is played
-                                $("a.jp-playlist-item, .jp-play, .podcast_play").click(function () {
+                                $("a.jp-playlist-item, .jp-play, .podcast_play").click(function() {
                                     if ($("#player_iframe").contents().find('.play').hasClass('pause')) {
                                         $("#player_iframe").contents().find('.play').click();
                                     }
@@ -292,7 +293,6 @@
                         }
                     }
                 );
-
             </script>
         </div>
     <?php
@@ -304,11 +304,11 @@
 </div>
 
 <script type="text/javascript">
-    $(document).ready(function () {
+    $(document).ready(function() {
 
 
 
-        $("#player_iframe").load(function () {
+        $("#player_iframe").load(function() {
 
             $("#player_iframe").contents().find('.bottom_bar').append("<div class='flex_spacer' data-tab='tab-1'></div>");
             $("#player_iframe").contents().find('.bottom_bar').append("<div class='schedule_btn button current' data-tab='tab-1'></div>");
@@ -316,26 +316,26 @@
 
             <?php
             // Is there a better way to do this?
-            if ($this->displayRssTab) {?>
+            if ($this->displayRssTab) { ?>
                 $("#player_iframe").contents().find('.bottom_bar').append("<div class='station_rss_btn button' data-tab='tab-4'></div>");
             <?php
             }
             ?>
 
 
-            $("#player_iframe").contents().find('.bottom_bar .button').click(function(){
+            $("#player_iframe").contents().find('.bottom_bar .button').click(function() {
                 var tab_id = $(this).attr('data-tab');
 
                 $("#player_iframe").contents().find('.bottom_bar .button').removeClass('current');
                 $('.tab_content').removeClass('current');
 
-                window.scrollTo(0,0);
+                window.scrollTo(0, 0);
                 $(this).addClass('current');
-                $("#"+tab_id).addClass('current');
+                $("#" + tab_id).addClass('current');
             });
 
             //turn off jplayer if it's playing and someone clicks to play the player bar
-            $("#player_iframe").contents().find('.play').click(function () {
+            $("#player_iframe").contents().find('.play').click(function() {
                 if ($('.jp-play').is(':hidden')) {
                     $('.jp-pause').click();
                 }
@@ -343,16 +343,15 @@
         });
 
         // schedule widget tabs
-        $('.tabs li').click(function(){
+        $('.tabs li').click(function() {
             var tab_id = $(this).attr('data-tab');
 
             $('.tabs li').removeClass('active');
             $('.schedule_item').removeClass('active');
 
             $(this).addClass('active');
-            $("#"+tab_id).addClass('active');
+            $("#" + tab_id).addClass('active');
         });
 
     });
-
 </script>
diff --git a/legacy/application/views/scripts/library/edit-file-md.phtml b/legacy/application/views/scripts/library/edit-file-md.phtml
index 475fd0739..fa26736d6 100644
--- a/legacy/application/views/scripts/library/edit-file-md.phtml
+++ b/legacy/application/views/scripts/library/edit-file-md.phtml
@@ -13,24 +13,24 @@
         <div class="track-edit-right-wrapper">
             <div class="track-edit-right">
                 <div class="inner_track_editor_title" style="width: 100%;">
-                    <h2 style="line-height: 26px !important;"><span class="title_obj_name"><?php echo($this->title); ?></span></h2>
-                    <h3 style="line-height: 2px !important;"><span class=""><?php echo($this->artist_name); ?></span></h3>
+                    <h2 style="line-height: 26px !important;"><span class="title_obj_name"><?php echo ($this->title); ?></span></h2>
+                    <h3 style="line-height: 2px !important;"><span class=""><?php echo ($this->artist_name); ?></span></h3>
                 </div>
             </div>
         </div>
         <div class="track-edit-left">
-            <div class="artwork-upload" data-id="<?php echo($this->id); ?>">
+            <div class="artwork-upload" data-id="<?php echo ($this->id); ?>">
                 <div class="artwork-edit">
-                    <input type='file' class="artworkUpload artwork-uploaded-<?php echo($this->id); ?>" id="artworkUpload-<?php echo ($this->id); ?>" data-id="<?php echo($this->id); ?>" accept=".png, .jpg, .jpeg" />
+                    <input type='file' class="artworkUpload artwork-uploaded-<?php echo ($this->id); ?>" id="artworkUpload-<?php echo ($this->id); ?>" data-id="<?php echo ($this->id); ?>" accept=".png, .jpg, .jpeg" />
                     <label for="artworkUpload-<?php echo ($this->id); ?>"></label>
                 </div>
                 <div id="artwork-preview" class="artwork-preview">
-                    <div class="artwork-preview-<?php echo($this->id); ?>" id="artworkPreview" style="background-image: url(<?php echo $get_artwork; ?>);">
+                    <div class="artwork-preview-<?php echo ($this->id); ?>" id="artworkPreview" style="background-image: url(<?php echo $get_artwork; ?>);">
                     </div>
                 </div>
             </div>
             <div>
-              <a href="#" class="delete-artwork" data-id="<?php echo($this->id); ?>" style="font-size: 11px;">Remove</a>
+                <a href="#" class="delete-artwork" data-id="<?php echo ($this->id); ?>" style="font-size: 11px;">Remove</a>
             </div>
         </div>
     </div>
diff --git a/legacy/application/views/scripts/library/get-file-metadata.ajax.phtml b/legacy/application/views/scripts/library/get-file-metadata.ajax.phtml
index ed61cc420..1fde778c5 100644
--- a/legacy/application/views/scripts/library/get-file-metadata.ajax.phtml
+++ b/legacy/application/views/scripts/library/get-file-metadata.ajax.phtml
@@ -4,56 +4,122 @@ foreach ($this->md as $key => &$value) {
     $value = $this->escape($value);
 }
 ?>
-<?php if($this->type == "audioclip") : ?>
-<table class='library-track-md'>
-<tr><td><?php echo _("Title:"); ?></td><td><?php echo ($this->md["MDATA_KEY_TITLE"]);?></td></tr>
-<tr><td><?php echo _("Creator:"); ?></td><td><?php echo ($this->md["MDATA_KEY_CREATOR"]);?></td></tr>
-<tr><td><?php echo _("Album:"); ?></td><td><?php echo ($this->md["MDATA_KEY_SOURCE"]);?></td></tr>
-<tr><td><?php echo _("Track:"); ?></td><td><?php echo ($this->md["MDATA_KEY_TRACKNUMBER"]);?></td></tr>
-<tr><td><?php echo _("Length:"); ?></td><td><?php echo ($this->md["MDATA_KEY_DURATION"]);?></td></tr>
-<tr><td class='file-md-qtip-nowrap'><?php echo _("Sample Rate:"); ?></td><td><?php echo ($this->md["MDATA_KEY_SAMPLERATE"]);?></td></tr>
-<tr><td><?php echo _("Bit Rate:"); ?></td><td><?php echo ($this->md["MDATA_KEY_BITRATE"]);?></td></tr>
-<tr><td><?php echo _("Mood:"); ?></td><td><?php echo ($this->md["MDATA_KEY_MOOD"]);?></td></tr>
-<tr><td><?php echo _("Genre:"); ?></td><td><?php echo ($this->md["MDATA_KEY_GENRE"]);?></td></tr>
-<tr><td><?php echo _("Year:"); ?></td><td><?php echo ($this->md["MDATA_KEY_YEAR"]);?></td></tr>
-<tr><td><?php echo _("Label:"); ?></td><td><?php echo ($this->md["MDATA_KEY_LABEL"]);?></td></tr>
-<tr><td><?php echo _("BPM:"); ?></td><td><?php echo ($this->md["MDATA_KEY_BPM"]);?></td></tr>
-<tr><td><?php echo _("Composer:"); ?></td><td><?php echo ($this->md["MDATA_KEY_COMPOSER"]);?></td></tr>
-<tr><td><?php echo _("Conductor:"); ?></td><td><?php echo ($this->md["MDATA_KEY_CONDUCTOR"]);?></td></tr>
-<tr><td><?php echo _("Copyright:"); ?></td><td><?php echo ($this->md["MDATA_KEY_COPYRIGHT"]);?></td></tr>
-<tr><td><?php echo _("Isrc Number:"); ?></td><td><?php echo ($this->md["MDATA_KEY_ISRC"]);?></td></tr>
-<tr><td><?php echo _("Website:"); ?></td><td><?php echo ($this->md["MDATA_KEY_URL"]);?></td></tr>
-<tr><td><?php echo _("Artwork:"); ?></td><td><?php echo ($this->md["MDATA_KEY_ARTWORK"]);?></td></tr>
-<tr><td><?php echo _("Artwork Data:"); ?></td><td><?php echo ($this->md["MDATA_KEY_ARTWORK_DATA"]);?></td></tr>
-<tr><td><?php echo _("Language:"); ?></td><td><?php echo ($this->md["MDATA_KEY_LANGUAGE"]);?></td></tr>
-<tr><td><?php echo _("Track Type:"); ?></td><td><?php echo ($this->md["MDATA_KEY_TRACK_TYPE"]);?></td></tr>
-<tr><td class='file-md-qtip-nowrap'><?php echo _("File Path:"); ?></td><td><?php echo ($this->md["MDATA_KEY_FILEPATH"]);?></td></tr>
-</table>
+<?php if ($this->type == "audioclip") : ?>
+    <table class='library-track-md'>
+        <tr>
+            <td><?php echo _("Title:"); ?></td>
+            <td><?php echo ($this->md["MDATA_KEY_TITLE"]); ?></td>
+        </tr>
+        <tr>
+            <td><?php echo _("Creator:"); ?></td>
+            <td><?php echo ($this->md["MDATA_KEY_CREATOR"]); ?></td>
+        </tr>
+        <tr>
+            <td><?php echo _("Album:"); ?></td>
+            <td><?php echo ($this->md["MDATA_KEY_SOURCE"]); ?></td>
+        </tr>
+        <tr>
+            <td><?php echo _("Track:"); ?></td>
+            <td><?php echo ($this->md["MDATA_KEY_TRACKNUMBER"]); ?></td>
+        </tr>
+        <tr>
+            <td><?php echo _("Length:"); ?></td>
+            <td><?php echo ($this->md["MDATA_KEY_DURATION"]); ?></td>
+        </tr>
+        <tr>
+            <td class='file-md-qtip-nowrap'><?php echo _("Sample Rate:"); ?></td>
+            <td><?php echo ($this->md["MDATA_KEY_SAMPLERATE"]); ?></td>
+        </tr>
+        <tr>
+            <td><?php echo _("Bit Rate:"); ?></td>
+            <td><?php echo ($this->md["MDATA_KEY_BITRATE"]); ?></td>
+        </tr>
+        <tr>
+            <td><?php echo _("Mood:"); ?></td>
+            <td><?php echo ($this->md["MDATA_KEY_MOOD"]); ?></td>
+        </tr>
+        <tr>
+            <td><?php echo _("Genre:"); ?></td>
+            <td><?php echo ($this->md["MDATA_KEY_GENRE"]); ?></td>
+        </tr>
+        <tr>
+            <td><?php echo _("Year:"); ?></td>
+            <td><?php echo ($this->md["MDATA_KEY_YEAR"]); ?></td>
+        </tr>
+        <tr>
+            <td><?php echo _("Label:"); ?></td>
+            <td><?php echo ($this->md["MDATA_KEY_LABEL"]); ?></td>
+        </tr>
+        <tr>
+            <td><?php echo _("BPM:"); ?></td>
+            <td><?php echo ($this->md["MDATA_KEY_BPM"]); ?></td>
+        </tr>
+        <tr>
+            <td><?php echo _("Composer:"); ?></td>
+            <td><?php echo ($this->md["MDATA_KEY_COMPOSER"]); ?></td>
+        </tr>
+        <tr>
+            <td><?php echo _("Conductor:"); ?></td>
+            <td><?php echo ($this->md["MDATA_KEY_CONDUCTOR"]); ?></td>
+        </tr>
+        <tr>
+            <td><?php echo _("Copyright:"); ?></td>
+            <td><?php echo ($this->md["MDATA_KEY_COPYRIGHT"]); ?></td>
+        </tr>
+        <tr>
+            <td><?php echo _("Isrc Number:"); ?></td>
+            <td><?php echo ($this->md["MDATA_KEY_ISRC"]); ?></td>
+        </tr>
+        <tr>
+            <td><?php echo _("Website:"); ?></td>
+            <td><?php echo ($this->md["MDATA_KEY_URL"]); ?></td>
+        </tr>
+        <tr>
+            <td><?php echo _("Artwork:"); ?></td>
+            <td><?php echo ($this->md["MDATA_KEY_ARTWORK"]); ?></td>
+        </tr>
+        <tr>
+            <td><?php echo _("Artwork Data:"); ?></td>
+            <td><?php echo ($this->md["MDATA_KEY_ARTWORK_DATA"]); ?></td>
+        </tr>
+        <tr>
+            <td><?php echo _("Language:"); ?></td>
+            <td><?php echo ($this->md["MDATA_KEY_LANGUAGE"]); ?></td>
+        </tr>
+        <tr>
+            <td><?php echo _("Track Type:"); ?></td>
+            <td><?php echo ($this->md["MDATA_KEY_TRACK_TYPE"]); ?></td>
+        </tr>
+        <tr>
+            <td class='file-md-qtip-nowrap'><?php echo _("File Path:"); ?></td>
+            <td><?php echo ($this->md["MDATA_KEY_FILEPATH"]); ?></td>
+        </tr>
+    </table>
 <?php endif; ?>
 
-<?php if($this->type == "playlist" || $this->type == "block") : ?>
-<div class='file-md-qtip-left'>
-    <span><?php echo _("Name:"); ?></span><span><?php echo ($this->md["dc:title"]);?></span><br />
-    <span><?php echo _("Creator:"); ?></span><span><?php echo ($this->md["dc:creator"]);?></span><br />
-    <?php if ($this->type == "block" && $this->blType == "Dynamic") { ?>
-    <span><?php echo _("Length:"); ?></span><span><?php echo $this->block->getLength();?></span><br />
-    <?php } else { ?>
-    <span><?php echo _("Length:"); ?></span><span><?php echo ($this->md["dcterms:extent"]);?></span><br />
+<?php if ($this->type == "playlist" || $this->type == "block") : ?>
+    <div class='file-md-qtip-left'>
+        <span><?php echo _("Name:"); ?></span><span><?php echo ($this->md["dc:title"]); ?></span><br />
+        <span><?php echo _("Creator:"); ?></span><span><?php echo ($this->md["dc:creator"]); ?></span><br />
+        <?php if ($this->type == "block" && $this->blType == "Dynamic") { ?>
+            <span><?php echo _("Length:"); ?></span><span><?php echo $this->block->getLength(); ?></span><br />
+        <?php } else { ?>
+            <span><?php echo _("Length:"); ?></span><span><?php echo ($this->md["dcterms:extent"]); ?></span><br />
+        <?php } ?>
+        <span><?php echo _("Description:"); ?></span><span><?php echo ($this->md["dc:description"]); ?></span>
+    </div>
+
+    <?php if ($this->type == "playlist") { ?>
+        <div class='file-md-qtip-legend'>
+            <span class='webstream'>o</span> <span><?php echo _("Web Stream"); ?></span><br />
+            <span class='dynamic'>o</span> <span><?php echo _("Dynamic Smart Block"); ?></span><br />
+            <span class='static'>o</span> <span><?php echo _("Static Smart Block"); ?></span><br />
+            <span>o</span> <span><?php echo _("Audio Track"); ?></span>
+        </div>
+
     <?php } ?>
-    <span><?php echo _("Description:"); ?></span><span><?php echo ($this->md["dc:description"]);?></span>
-</div>
 
-<?php if ($this->type == "playlist") { ?>
-<div class='file-md-qtip-legend'>
-<span class='webstream'>o</span> <span><?php echo _("Web Stream"); ?></span><br />
-<span class='dynamic'>o</span> <span><?php echo _("Dynamic Smart Block"); ?></span><br />
-<span class='static'>o</span> <span><?php echo _("Static Smart Block"); ?></span><br />
-<span>o</span> <span><?php echo _("Audio Track"); ?></span>
-</div>
-
-<?php } ?>
-
-    <?php if ($this->type == "playlist" || ($this->type == "block" && $this->blType == "Static")) {?>
+    <?php if ($this->type == "playlist" || ($this->type == "block" && $this->blType == "Static")) { ?>
         <?php
         //XSS exploit prevention
         /*foreach ($this->contents as &$item) {
@@ -68,74 +134,75 @@ foreach ($this->md as $key => &$value) {
             <div class='file-md-qtip-left'><span><?php echo _("Static Smart Block Contents: "); ?></span></div>
         <?php } ?>
         <table class='library-get-file-md'>
-        <?php foreach($this->contents as $row) : ?>
-            <?php
-            $titleMaxStrLen = 35;
-            if (mb_strlen($row["track_title"], 'UTF-8') > $titleMaxStrLen) {
-                $row["track_title"] = mb_substr($row["track_title"], 0, 34, 'UTF-8')."...";
-            }
-            $artistMaxStrLen = 22;
-            if (mb_strlen($row["creator"], 'UTF-8') > $artistMaxStrLen) {
-                $row["creator"] = mb_substr($row["creator"], 0, 21, 'UTF-8')."...";
-            }
-            ?>
-            <?php if ($row["type"] == 2) {
-                $bl = new Application_Model_Block($row["item_id"]);
-                $isStatic = $bl->isStatic(); ?>
-                <tr class='file-md-qtip-playlist <?php if ($isStatic) echo 'static'; else echo 'dynamic';?>'>
-                    <td class='file-md-qtip-row-width-title file-md-qtip-nowrap'><?php echo $row["track_title"] ?></td>
-                    <td class='file-md-qtip-row-width-artist file-md-qtip-nowrap'><?php echo $row["creator"] ?></td>
-                    <td class='file-md-qtip-row-width-small'><?php echo $bl->getLength(); ?></td>
-                </tr>
-            <?php } else if ($row["type"] == 1) {?>
-                <tr class='file-md-qtip-playlist webstream'>
-                    <td class='file-md-qtip-row-width-title file-md-qtip-nowrap'><?php echo $row["track_title"] ?></td>
-                    <td class='file-md-qtip-row-width-artist file-md-qtip-nowrap'><?php echo $row["creator"] ?></td>
-                    <td class='file-md-qtip-row-width-small'><?php echo $row["length"] ?></td>
-                </tr>
-            <?php } else { ?>
-                <tr>
-                    <td class='file-md-qtip-row-width-title file-md-qtip-nowrap'><?php echo $row["track_title"] ?></td>
-                    <td class='file-md-qtip-row-width-artist file-md-qtip-nowrap'><?php echo $row["creator"] ?></td>
-                    <td class='file-md-qtip-row-width-small'><?php echo $row["length"] ?></td>
-                </tr>
-            <?php } ?>
-        <?php endforeach; ?>
+            <?php foreach ($this->contents as $row) : ?>
+                <?php
+                $titleMaxStrLen = 35;
+                if (mb_strlen($row["track_title"], 'UTF-8') > $titleMaxStrLen) {
+                    $row["track_title"] = mb_substr($row["track_title"], 0, 34, 'UTF-8') . "...";
+                }
+                $artistMaxStrLen = 22;
+                if (mb_strlen($row["creator"], 'UTF-8') > $artistMaxStrLen) {
+                    $row["creator"] = mb_substr($row["creator"], 0, 21, 'UTF-8') . "...";
+                }
+                ?>
+                <?php if ($row["type"] == 2) {
+                    $bl = new Application_Model_Block($row["item_id"]);
+                    $isStatic = $bl->isStatic(); ?>
+                    <tr class='file-md-qtip-playlist <?php if ($isStatic) echo 'static';
+                                                        else echo 'dynamic'; ?>'>
+                        <td class='file-md-qtip-row-width-title file-md-qtip-nowrap'><?php echo $row["track_title"] ?></td>
+                        <td class='file-md-qtip-row-width-artist file-md-qtip-nowrap'><?php echo $row["creator"] ?></td>
+                        <td class='file-md-qtip-row-width-small'><?php echo $bl->getLength(); ?></td>
+                    </tr>
+                <?php } else if ($row["type"] == 1) { ?>
+                    <tr class='file-md-qtip-playlist webstream'>
+                        <td class='file-md-qtip-row-width-title file-md-qtip-nowrap'><?php echo $row["track_title"] ?></td>
+                        <td class='file-md-qtip-row-width-artist file-md-qtip-nowrap'><?php echo $row["creator"] ?></td>
+                        <td class='file-md-qtip-row-width-small'><?php echo $row["length"] ?></td>
+                    </tr>
+                <?php } else { ?>
+                    <tr>
+                        <td class='file-md-qtip-row-width-title file-md-qtip-nowrap'><?php echo $row["track_title"] ?></td>
+                        <td class='file-md-qtip-row-width-artist file-md-qtip-nowrap'><?php echo $row["creator"] ?></td>
+                        <td class='file-md-qtip-row-width-small'><?php echo $row["length"] ?></td>
+                    </tr>
+                <?php } ?>
+            <?php endforeach; ?>
         </table>
 
     <?php } elseif ($this->blType == "Dynamic") { ?>
         <div class='file-md-qtip-left'><span><?php echo _("Dynamic Smart Block Criteria: "); ?></span></div>
         <table class='library-get-file-md table-small'>
-        <?php foreach ($this->contents["crit"] as &$criterias) : ?>
-            <?php foreach ($criterias as &$crit ) : ?>
-                <?php
-                // XSS exploit prevention
-                //$crit["value"] = htmlspecialchars($crit["value"]);
-                //$crit["extra"] = htmlspecialchars($crit["extra"]);
+            <?php foreach ($this->contents["crit"] as &$criterias) : ?>
+                <?php foreach ($criterias as &$crit) : ?>
+                    <?php
+                    // XSS exploit prevention
+                    //$crit["value"] = htmlspecialchars($crit["value"]);
+                    //$crit["extra"] = htmlspecialchars($crit["extra"]);
 
-                $valMaxStrLen = 25;
-                if (strlen($crit["value"]) > $valMaxStrLen) {
-                    $crit["value"] = substr($crit["value"], 0, 24)."...";
-                }
-                $critMaxStrLen = 13;
-                if (strlen($crit["display_name"]) > $critMaxStrLen) {
-                    $crit["display_name"] = substr($crit["display_name"], 0, 12)."...";
-                }
-                $modMaxStrLen = 16;
-                if (strlen($crit["modifier"]) > $modMaxStrLen) {
-                    $crit["modifier"] = substr($crit["modifier"], 0, 15)."...";
-                }
-                ?>
-                <tr>
-                    <td class='file-md-qtip-criteria-width-small file-md-qtip-nowrap'><?php echo $crit["display_name"] ?></td>
-                    <td class='file-md-qtip-criteria-width-small file-md-qtip-nowrap'><?php echo $crit["modifier"] ?></td>
-                    <td class='file-md-qtip-criteria-width file-md-qtip-nowrap'><?php echo $crit["value"] ?>
-                    <?php if (isset($crit["extra"])) { ?>
-                        to <?php echo $crit["extra"] ?></td>
+                    $valMaxStrLen = 25;
+                    if (strlen($crit["value"]) > $valMaxStrLen) {
+                        $crit["value"] = substr($crit["value"], 0, 24) . "...";
+                    }
+                    $critMaxStrLen = 13;
+                    if (strlen($crit["display_name"]) > $critMaxStrLen) {
+                        $crit["display_name"] = substr($crit["display_name"], 0, 12) . "...";
+                    }
+                    $modMaxStrLen = 16;
+                    if (strlen($crit["modifier"]) > $modMaxStrLen) {
+                        $crit["modifier"] = substr($crit["modifier"], 0, 15) . "...";
+                    }
+                    ?>
+                    <tr>
+                        <td class='file-md-qtip-criteria-width-small file-md-qtip-nowrap'><?php echo $crit["display_name"] ?></td>
+                        <td class='file-md-qtip-criteria-width-small file-md-qtip-nowrap'><?php echo $crit["modifier"] ?></td>
+                        <td class='file-md-qtip-criteria-width file-md-qtip-nowrap'><?php echo $crit["value"] ?>
+                            <?php if (isset($crit["extra"])) { ?>
+                                to <?php echo $crit["extra"] ?></td>
                     <?php } ?>
-                </tr>
+                    </tr>
+                <?php endforeach; ?>
             <?php endforeach; ?>
-        <?php endforeach; ?>
             <tr>
                 <td><?php echo _("Limit to ") ?></td>
                 <td><?php echo $this->contents["limit"]["value"] ?> <?php echo $this->contents["limit"]["modifier"] ?></td>
@@ -146,11 +213,11 @@ foreach ($this->md as $key => &$value) {
 
 <?php if ($this->type == "stream") : ?>
 
-<div><span><?php echo _("Name:"); ?></span><span><?php echo ($this->md["name"]);?></span></div>
-<div><span><?php echo _("Length:"); ?></span><span><?php echo ($this->md["length"]);?></span></div>
-<div><span><?php echo _("Creator:"); ?></span><span><?php echo ($this->md["login"]);?></span></div>
-<div><span><?php echo _("Description:"); ?></span><span><?php echo ($this->md["description"]);?></span></div>
-<div><span><?php echo _("URL:"); ?></span><span><?php echo ($this->md["url"]);?></span></div>
+    <div><span><?php echo _("Name:"); ?></span><span><?php echo ($this->md["name"]); ?></span></div>
+    <div><span><?php echo _("Length:"); ?></span><span><?php echo ($this->md["length"]); ?></span></div>
+    <div><span><?php echo _("Creator:"); ?></span><span><?php echo ($this->md["login"]); ?></span></div>
+    <div><span><?php echo _("Description:"); ?></span><span><?php echo ($this->md["description"]); ?></span></div>
+    <div><span><?php echo _("URL:"); ?></span><span><?php echo ($this->md["url"]); ?></span></div>
 
 
 <?php endif; ?>
diff --git a/legacy/application/views/scripts/library/index.phtml b/legacy/application/views/scripts/library/index.phtml
index bb38286ca..6af0faa74 100644
--- a/legacy/application/views/scripts/library/index.phtml
+++ b/legacy/application/views/scripts/library/index.phtml
@@ -9,18 +9,18 @@ if ($this->showPlaylist) {
     $display = "display:none";
 }
 ?>
-<div class="side_playlist pl-content ui-widget ui-widget-content block-shadow omega-block padded" style="height:697px; width:720px;<?php echo $display?>">
+<div class="side_playlist pl-content ui-widget ui-widget-content block-shadow omega-block padded" style="height:697px; width:720px;<?php echo $display ?>">
     <?php if ($this->type == 'block') {
-            echo $this->render('playlist/smart-block.phtml');
-        } else if ($this->type == 'playlist') {
-            echo $this->render('playlist/playlist.phtml');
-        } else if ($this->type == 'stream') {
-            echo $this->render('webstream/webstream.phtml');
-        } else {
-            echo $this->render('webstream/webstream.phtml');
-            //throw new Exception("Unrecognized type: '{$this->type}'");
-        }
+        echo $this->render('playlist/smart-block.phtml');
+    } else if ($this->type == 'playlist') {
+        echo $this->render('playlist/playlist.phtml');
+    } else if ($this->type == 'stream') {
+        echo $this->render('webstream/webstream.phtml');
+    } else {
+        echo $this->render('webstream/webstream.phtml');
+        //throw new Exception("Unrecognized type: '{$this->type}'");
+    }
 
 
-?>
+    ?>
 </div>
diff --git a/legacy/application/views/scripts/library/publish-dialog.phtml b/legacy/application/views/scripts/library/publish-dialog.phtml
index 2a3d01bbc..c0ef304a2 100644
--- a/legacy/application/views/scripts/library/publish-dialog.phtml
+++ b/legacy/application/views/scripts/library/publish-dialog.phtml
@@ -7,12 +7,12 @@
     </div>
     <div class="inner_editor_wrapper">
         <form class="media-metadata">
-            <input ng-value="media.id" class="obj_id" type="hidden"/>
+            <input ng-value="media.id" class="obj_id" type="hidden" />
             <label class="publish-md-field"><?php echo _("Title:") ?></label>
-            <input disabled ng-model="media.track_title" type="text"/>
+            <input disabled ng-model="media.track_title" type="text" />
 
             <label class="publish-md-field"><?php echo _("Creator:") ?></label>
-            <input disabled ng-model="media.artist_name" type="text"/>
+            <input disabled ng-model="media.artist_name" type="text" />
 
             <label class="publish-md-field"><?php echo _("Description:") ?></label>
             <textarea disabled ng-model="media.description"></textarea>
diff --git a/legacy/application/views/scripts/listenerstat/index.phtml b/legacy/application/views/scripts/listenerstat/index.phtml
index ccbcc15f6..05f78c551 100644
--- a/legacy/application/views/scripts/listenerstat/index.phtml
+++ b/legacy/application/views/scripts/listenerstat/index.phtml
@@ -1,5 +1,5 @@
 <div id="listenerstat_content" class="alpha-block padded">
-    <H2><?php echo _("Listeners")?></H2>
+    <H2><?php echo _("Listeners") ?></H2>
     <div id="flot_placeholder" style="height:300px;margin:0px 50px 0px 50px"></div>
     <div id="legend" style="width:600px;height:70px;margin:0px 50px 0px 50px"></div>
     <div id="date_form" style="float:left; margin:0px 0px">
@@ -7,11 +7,13 @@
         <?php echo $this->date_form; ?>
     </div>
     <div id="errorStatus" style="float:right; width: 400px">
-        <h3><?php echo _("Stream Data Collection Status")?></h3>
+        <h3><?php echo _("Stream Data Collection Status") ?></h3>
         <fieldset class="padded stream-setting-global">
-        <?php foreach ($this->errorStatus as $k=>$v) {?>
-        <div class='stream-status <?php echo ($v == 'OK')? 'status-good' : 'status-error' ?>'><p><?php echo $k?>: <?php echo $v?></p></div>
-        <?php }?>
+            <?php foreach ($this->errorStatus as $k => $v) { ?>
+                <div class='stream-status <?php echo ($v == 'OK') ? 'status-good' : 'status-error' ?>'>
+                    <p><?php echo $k ?>: <?php echo $v ?></p>
+                </div>
+            <?php } ?>
         </fieldset>
     </div>
     <div style="clear: both;"></div>
diff --git a/legacy/application/views/scripts/listenerstat/show.phtml b/legacy/application/views/scripts/listenerstat/show.phtml
index 9a4ce82c9..5f185ad10 100644
--- a/legacy/application/views/scripts/listenerstat/show.phtml
+++ b/legacy/application/views/scripts/listenerstat/show.phtml
@@ -1,5 +1,5 @@
 <div id="showlistenerstat_content" class="alpha-block padded">
-    <H2><?php echo _("Listeners")?></H2>
+    <H2><?php echo _("Listeners") ?></H2>
     <div class="error_window"></div>
     <div id="date_form" style="float:left; margin:0px 0px">
         <h3 style="padding-left: 0px"><?php echo _("Date Range")  ?></h3>
@@ -9,12 +9,12 @@
     <table id="show_builder_table" cellpadding="0" cellspacing="0" class="datatable"></table>
     <table cellspacing="0" cellpadding="0" style="" id="show_stats_datatable" class="datatable">
         <thead>
-        <tr>
-            <th><?php echo _("Show Name") ?></th>
-            <th><?php echo _("Air Date") ?></th>
-            <th><?php echo _("Average Listeners")?></th>
-            <th><?php echo _("Maximum Number of Listeners")?></th>
-        </tr>
+            <tr>
+                <th><?php echo _("Show Name") ?></th>
+                <th><?php echo _("Air Date") ?></th>
+                <th><?php echo _("Average Listeners") ?></th>
+                <th><?php echo _("Maximum Number of Listeners") ?></th>
+            </tr>
         </thead>
         <tbody>
         </tbody>
diff --git a/legacy/application/views/scripts/login/index.phtml b/legacy/application/views/scripts/login/index.phtml
index 26c3f2d63..d2ef2977c 100644
--- a/legacy/application/views/scripts/login/index.phtml
+++ b/legacy/application/views/scripts/login/index.phtml
@@ -1,13 +1,13 @@
 <div class="login_box">
     <div class="logobox">&nbsp;</div>
-        <h2><?php echo _("Login") ?></h2>
+    <h2><?php echo _("Login") ?></h2>
     <div id="login" class="login-content clearfix">
-        <?php if(isset($this->demo) && $this->demo == 1){?>
+        <?php if (isset($this->demo) && $this->demo == 1) { ?>
             <p style="font-weight:bold">
-            <?php echo sprintf(_("Welcome to the %s demo! You can log in using the username 'admin' and the password 'admin'."), PRODUCT_NAME)?>
+                <?php echo sprintf(_("Welcome to the %s demo! You can log in using the username 'admin' and the password 'admin'."), PRODUCT_NAME) ?>
             </p>
-        <?php }?>
-        <p class="light" style='<?php echo $this->error?"color:#902d2d;font-size:11px;padding:2px 4px;background:#c6b4b4;margin-bottom:2px;border:1px solid #c83f3f;":""?>'><?php echo $this->message; ?></p>
+        <?php } ?>
+        <p class="light" style='<?php echo $this->error ? "color:#902d2d;font-size:11px;padding:2px 4px;background:#c6b4b4;margin-bottom:2px;border:1px solid #c83f3f;" : "" ?>'><?php echo $this->message; ?></p>
         <?php echo $this->form; ?>
     </div>
 </div>
diff --git a/legacy/application/views/scripts/login/password-change.phtml b/legacy/application/views/scripts/login/password-change.phtml
index 4088e9725..2595d8f40 100644
--- a/legacy/application/views/scripts/login/password-change.phtml
+++ b/legacy/application/views/scripts/login/password-change.phtml
@@ -3,7 +3,7 @@
   <h2><?php echo _("New password") ?></h2>
 
   <div id="login" class="login-content clearfix">
-  <p class="light"><?php echo _("Please enter and confirm your new password in the fields below."); ?></p>
+    <p class="light"><?php echo _("Please enter and confirm your new password in the fields below."); ?></p>
     <?php echo $this->form; ?>
   </div>
 </div>
diff --git a/legacy/application/views/scripts/login/password-restore-after.phtml b/legacy/application/views/scripts/login/password-restore-after.phtml
index 2830cfab8..a0ea5b8b9 100644
--- a/legacy/application/views/scripts/login/password-restore-after.phtml
+++ b/legacy/application/views/scripts/login/password-restore-after.phtml
@@ -7,8 +7,8 @@
     <br>
     <dl class="zend-form">
       <dd id="cancel-element">
-        <a href="<?php echo($this->baseUrl('login')); ?>">
-          <button name="cancel" type="button" class="ui-button ui-widget ui-state-default ui-button-text-only center"><?php echo(_("Back")); ?></button>
+        <a href="<?php echo ($this->baseUrl('login')); ?>">
+          <button name="cancel" type="button" class="ui-button ui-widget ui-state-default ui-button-text-only center"><?php echo (_("Back")); ?></button>
         </a>
       </dd>
     </dl>
diff --git a/legacy/application/views/scripts/menu.phtml b/legacy/application/views/scripts/menu.phtml
index b3349cc56..e5d888618 100644
--- a/legacy/application/views/scripts/menu.phtml
+++ b/legacy/application/views/scripts/menu.phtml
@@ -1,6 +1,6 @@
 <ol class="navigation">
-<?php foreach ($this->container as $page) : ?>
-    <?php
+    <?php foreach ($this->container as $page) : ?>
+        <?php
         // Host users do not have access to the General Preferences
         // therefor we need to manually change the page parameters
         // to point to the first allowed item in the Preferences
@@ -8,38 +8,43 @@
         $user = Application_Model_User::getCurrentUser();
         $isHost = $user->isUserType(array(UTYPE_HOST));
         if ($isHost && $page->getTitle() === 'Settings') {
-                $page->set('resource', 'usersettings');
-		$page->set('controller', 'user');
-                $page->set('action','edit-user');
+            $page->set('resource', 'usersettings');
+            $page->set('controller', 'user');
+            $page->set('action', 'edit-user');
         }
-	?>
-    <?php if($this->navigation()->accept($page)) : ?>
-        <li class="top <?php if($page->isActive(true)){echo 'active';} ?>">
-            <?php if($page->hasPages()) : ?>
-            <a class="top_link" href="<?php echo $page->getHref(); ?>">
-                <span class="down"><?php echo $page->getClass(); echo _($page->getLabel()); ?></span>
-            </a>
-            <ul class="sub">
+        ?>
+        <?php if ($this->navigation()->accept($page)) : ?>
+            <li class="top <?php if ($page->isActive(true)) {
+                                echo 'active';
+                            } ?>">
+                <?php if ($page->hasPages()) : ?>
+                    <a class="top_link" href="<?php echo $page->getHref(); ?>">
+                        <span class="down"><?php echo $page->getClass();
+                                            echo _($page->getLabel()); ?></span>
+                    </a>
+                    <ul class="sub">
 
-                <?php foreach ($page->getPages() as $sub) :
-                         if($sub->getId() == "manage_folder"){
-                             continue;
-                         } ?>
+                        <?php foreach ($page->getPages() as $sub) :
+                            if ($sub->getId() == "manage_folder") {
+                                continue;
+                            } ?>
 
-                <?php if($this->navigation()->accept($sub)) : ?>
+                            <?php if ($this->navigation()->accept($sub)) : ?>
 
-                <li>
-                    <a href="<?php echo $sub->getHref(); ?>" <?php echo ($sub->getTarget() != "")?"target=\"".$sub->getTarget()."\"":""; ?>><?php echo $page->getClass(); echo _($sub->getLabel()); ?></a>
-                </li>
+                                <li>
+                                    <a href="<?php echo $sub->getHref(); ?>" <?php echo ($sub->getTarget() != "") ? "target=\"" . $sub->getTarget() . "\"" : ""; ?>><?php echo $page->getClass();
+                                                                                                                                                                    echo _($sub->getLabel()); ?></a>
+                                </li>
+                            <?php endif; ?>
+                        <?php endforeach; ?>
+                    </ul>
+                <?php else : ?>
+                    <a class="top_link" href="<?php echo $page->getHref(); ?>">
+                        <span><?php echo $page->getClass();
+                                echo _($page->getLabel()); ?></span>
+                    </a>
                 <?php endif; ?>
-                <?php endforeach; ?>
-            </ul>
-            <?php else: ?>
-            <a class="top_link" href="<?php echo $page->getHref(); ?>">
-                <span><?php echo $page->getClass(); echo _($page->getLabel()); ?></span>
-            </a>
-            <?php endif; ?>
-        </li>
-    <?php endif; ?>
-<?php endforeach; ?>
+            </li>
+        <?php endif; ?>
+    <?php endforeach; ?>
 </ol>
diff --git a/legacy/application/views/scripts/partialviews/header.phtml b/legacy/application/views/scripts/partialviews/header.phtml
index 80430e25f..988c8c636 100644
--- a/legacy/application/views/scripts/partialviews/header.phtml
+++ b/legacy/application/views/scripts/partialviews/header.phtml
@@ -9,25 +9,26 @@
     <div class="text-row"><strong><?php echo _("Previous:"); ?></strong> <span id='previous'></span> <span id='prev-length'></span></div>
     <div class="now-playing-info song">
       <div class="time-flow"><span class="song-length" id="song-length"></span><span class="time-elapsed" id="time-elapsed"></span><span class="time-remaining" id="time-remaining"></span></div>
-      <span id='current'></span></div>
+      <span id='current'></span>
+    </div>
     <div class="progressbar">
       <div class="progress-song" id="progress-bar" style="width:0%;"></div>
     </div>
     <div class="text-row next-song"><strong><?php echo _("Next:"); ?></strong> <span id='next'></span> <span id='next-length'></span></div>
   </div>
-    <div class="show-block">
-      <div class="text-row">&nbsp;</div>
-      <div class="now-playing-info show">
-        <div class="recording-show" style="display: none;"></div>
-        <span id="playlist"></span>
-        <span id="show-length" class="show-length"></span>
-      </div>
-      <div class="progressbar">
-        <div class="progress-show" id='progress-show' style="width:0%;"></div>
-      </div>
+  <div class="show-block">
+    <div class="text-row">&nbsp;</div>
+    <div class="now-playing-info show">
+      <div class="recording-show" style="display: none;"></div>
+      <span id="playlist"></span>
+      <span id="show-length" class="show-length"></span>
     </div>
+    <div class="progressbar">
+      <div class="progress-show" id='progress-show' style="width:0%;"></div>
+    </div>
+  </div>
   <div class="source-info-block">
- 	<h3><?php echo _("Source Streams") ?></h3>
+    <h3><?php echo _("Source Streams") ?></h3>
     <ul style="padding-top: 10px;">
       <li>
         <div id="master_dj_div" class="source-label">
@@ -35,31 +36,31 @@
           <?php echo _("Master Source") ?>
         </div>
         <div class="line-to-switch"></div>
-        <a href="#" id="master_dj" class="source-switch-button" onclick="setSwitchListener(this);"><span><?php echo $this->master_dj_switch?></span></a>
+        <a href="#" id="master_dj" class="source-switch-button" onclick="setSwitchListener(this);"><span><?php echo $this->master_dj_switch ?></span></a>
         <div class="line-to-on-air"></div>
       </li>
       <li>
         <div id="live_dj_div" class="source-label">
-        <a id="live_dj" class="source-kick-button" onclick="kickSource(this)"></a>
-          <?php echo _("Show Source")?>
+          <a id="live_dj" class="source-kick-button" onclick="kickSource(this)"></a>
+          <?php echo _("Show Source") ?>
         </div>
         <div class="line-to-switch"></div>
-        <a href="#" id="live_dj" class="source-switch-button" onclick="setSwitchListener(this);"><span><?php echo $this->live_dj_switch?></span></a>
+        <a href="#" id="live_dj" class="source-switch-button" onclick="setSwitchListener(this);"><span><?php echo $this->live_dj_switch ?></span></a>
         <div class="line-to-on-air"></div>
       </li>
     </ul>
   </div>
   <div class="on-air-block">
-  <h3>&nbsp;</h3>
+    <h3>&nbsp;</h3>
     <div class="on-air-info off" id="on-air-info"><?php echo _("ON AIR") ?></div>
     <a href="#" class="listen-control-button"><span><?php echo _("Listen") ?></span></a>
   </div>
   <div class="time-info-block pull-right">
     <div class="time" id="time"></div>
     <div class="personal-block">
-      <a id="current-user" href=<?php echo $this->baseUrl . "/user/edit-user"?>><span class="name"><?php echo $this->escape($this->loggedInAs()); ?></span></a>
+      <a id="current-user" href=<?php echo $this->baseUrl . "/user/edit-user" ?>><span class="name"><?php echo $this->escape($this->loggedInAs()); ?></span></a>
       <span>|</span>
-      <a href=<?php echo $this->baseUrl . "/login/logout"?>><?php echo _("Logout")?></a>
+      <a href=<?php echo $this->baseUrl . "/login/logout" ?>><?php echo _("Logout") ?></a>
     </div>
   </div>
 </div>
diff --git a/legacy/application/views/scripts/playlist/permission-denied.phtml b/legacy/application/views/scripts/playlist/permission-denied.phtml
index 75a6ddcbe..dc89f0a45 100644
--- a/legacy/application/views/scripts/playlist/permission-denied.phtml
+++ b/legacy/application/views/scripts/playlist/permission-denied.phtml
@@ -1,5 +1,9 @@
-<?php if ($this->objType == "block") { $displayText = "smart block"; } else { $displayText = $this->escape($this->objType); } ?>
+<?php if ($this->objType == "block") {
+    $displayText = "smart block";
+} else {
+    $displayText = $this->escape($this->objType);
+} ?>
 <h3>You do not have permission to edit this <?php echo $displayText; ?>.</h3>
-<input class="obj_id" type="hidden" value="<?php echo $this->obj->getId(); ?>"/>
-<input class='obj_type' type='hidden' value="<?php echo $this->escape($this->objType); ?>"/>
+<input class="obj_id" type="hidden" value="<?php echo $this->obj->getId(); ?>" />
+<input class='obj_type' type='hidden' value="<?php echo $this->escape($this->objType); ?>" />
 <input type="hidden" class="playlist_name_display" contenteditable="true" value="<?php echo $this->escape($this->obj->getName()); ?>">
diff --git a/legacy/application/views/scripts/playlist/playlist.phtml b/legacy/application/views/scripts/playlist/playlist.phtml
index 84b060433..2aa44de97 100644
--- a/legacy/application/views/scripts/playlist/playlist.phtml
+++ b/legacy/application/views/scripts/playlist/playlist.phtml
@@ -7,17 +7,17 @@ if (isset($this->obj)) {
 
 <?php if (isset($this->obj)) : ?>
     <div class="inner_editor_title">
-        <H2><?php echo(_("Editing "));?>"<span class="title_obj_name"><?php if (isset($this->unsavedName)) echo $this->unsavedName;
-            else echo $this->escape($this->obj->getName());?></span>"</H2>
+        <H2><?php echo (_("Editing ")); ?>"<span class="title_obj_name"><?php if (isset($this->unsavedName)) echo $this->unsavedName;
+                                                                        else echo $this->escape($this->obj->getName()); ?></span>"</H2>
     </div>
     <div class="inner_editor_wrapper">
-        <input class="obj_id" type="hidden" value="<?php echo $this->obj->getId(); ?>"/>
-        <input class="obj_lastMod" type="hidden" value="<?php echo $this->obj->getLastModified('U'); ?>"/>
-        <input class='obj_type' type='hidden' value='playlist'/>
+        <input class="obj_id" type="hidden" value="<?php echo $this->obj->getId(); ?>" />
+        <input class="obj_lastMod" type="hidden" value="<?php echo $this->obj->getLastModified('U'); ?>" />
+        <input class='obj_type' type='hidden' value='playlist' />
 
         <dl class="zend_form playlist_editor">
             <dt>
-                <label><?php echo(_("Name:")); ?></label>
+                <label><?php echo (_("Name:")); ?></label>
             </dt>
             <dd>
                 <input type="text" class="playlist_name_display" contenteditable="true" value="<?php echo $this->escape($this->obj->getName()); ?>">
@@ -28,13 +28,14 @@ if (isset($this->obj)) {
             </dd>
         </dl>
 
-        <?php //echo $this->form; ?>
+        <?php //echo $this->form;
+        ?>
 
     </div>
 
     <div class="ui-widget-header fg-toolbar btn-toolbar clearfix">
-        <h4 class="obj_length"><?php echo($this->length); ?></h4>
-        <h4 class="obj_length_label"><?php echo(_("Duration:"));?></h4>
+        <h4 class="obj_length"><?php echo ($this->length); ?></h4>
+        <h4 class="obj_length_label"><?php echo (_("Duration:")); ?></h4>
 
         <div class='btn-group'>
             <button class="btn toggle-editor-form" title='<?php echo _("Toggle Details") ?>' type="button"><span class="icon-white spl-no-r-margin icon-chevron-up"></span></button>
@@ -67,8 +68,8 @@ if (isset($this->obj)) {
     </div>
 
     <ul class="spl_sortable">
-        <?php  $this->contents = $contents;
-            echo $this->render('playlist/update.phtml') ?>
+        <?php $this->contents = $contents;
+        echo $this->render('playlist/update.phtml') ?>
     </ul>
     <div class="btn-toolbar clearfix">
         <div class="btn-group pull-right">
diff --git a/legacy/application/views/scripts/playlist/set-cue.phtml b/legacy/application/views/scripts/playlist/set-cue.phtml
index f9940d34e..79cd4800a 100644
--- a/legacy/application/views/scripts/playlist/set-cue.phtml
+++ b/legacy/application/views/scripts/playlist/set-cue.phtml
@@ -1,18 +1,14 @@
 <dl id="spl_cue_editor" class="inline-list">
-	<dd data-uri="<?php echo $this->uri; ?>">
-	  <input type="button" class="pl-waveform-cues-btn" value="<?php echo _("Show Waveform")?>"></input>
-	</dd>
-    <dt><?php echo _("Cue In: "); ?><span class='spl_cue_hint'><?php echo _("(hh:mm:ss.t)")?></span></dt>
-    <dd id="spl_cue_in_<?php echo $this->id; ?>" class="spl_cue_in"
-    	data-cue-in="<?php echo $this->cueIn; ?>"
-    	data-cue-sec="<?php echo $this->cueInSec; ?>">
+    <dd data-uri="<?php echo $this->uri; ?>">
+        <input type="button" class="pl-waveform-cues-btn" value="<?php echo _("Show Waveform") ?>"></input>
+    </dd>
+    <dt><?php echo _("Cue In: "); ?><span class='spl_cue_hint'><?php echo _("(hh:mm:ss.t)") ?></span></dt>
+    <dd id="spl_cue_in_<?php echo $this->id; ?>" class="spl_cue_in" data-cue-in="<?php echo $this->cueIn; ?>" data-cue-sec="<?php echo $this->cueInSec; ?>">
         <span contenteditable="true" class="spl_text_input"><?php echo $this->cueIn; ?></span>
     </dd>
     <dd class="edit-error"></dd>
-    <dt><?php echo _("Cue Out: "); ?><span class='spl_cue_hint'><?php echo _("(hh:mm:ss.t)")?></span></dt>
-    <dd id="spl_cue_out_<?php echo $this->id; ?>" class="spl_cue_out"
-    	data-cue-out="<?php echo $this->cueOut; ?>"
-    	data-cue-sec="<?php echo $this->cueOutSec; ?>">
+    <dt><?php echo _("Cue Out: "); ?><span class='spl_cue_hint'><?php echo _("(hh:mm:ss.t)") ?></span></dt>
+    <dd id="spl_cue_out_<?php echo $this->id; ?>" class="spl_cue_out" data-cue-out="<?php echo $this->cueOut; ?>" data-cue-sec="<?php echo $this->cueOutSec; ?>">
         <span contenteditable="true" class="spl_text_input"><?php echo $this->cueOut; ?></span>
     </dd>
     <dd class="edit-error"></dd>
diff --git a/legacy/application/views/scripts/playlist/set-fade.phtml b/legacy/application/views/scripts/playlist/set-fade.phtml
index ea3fa8ad1..d31fbf991 100644
--- a/legacy/application/views/scripts/playlist/set-fade.phtml
+++ b/legacy/application/views/scripts/playlist/set-fade.phtml
@@ -1,31 +1,23 @@
 <dl id="spl_editor" class="inline-list">
 	<dd>
-	  <input type="button" class="pl-waveform-fades-btn" value="<?php echo _("Show Waveform")?>"></input>
+		<input type="button" class="pl-waveform-fades-btn" value="<?php echo _("Show Waveform") ?>"></input>
 	</dd>
-    <?php if ($this->item1Type == 0) {?>
-    <dt><?php echo _("Fade out: "); ?><span class='spl_cue_hint'><?php echo _("(ss.t)")?></span></dt>
-    <dd id="spl_fade_out_<?php echo $this->item1; ?>" class="spl_fade_out"
-    	data-fadeout="<?php echo $this->item1Url; ?>"
-    	data-cuein="<?php echo $this->cueIn1; ?>"
-    	data-cueout="<?php echo $this->cueOut1; ?>"
-    	data-length="<?php echo $this->fadeOut; ?>"
-    	data-type="logarithmic"
-    	data-item="<?php echo $this->item1; ?>">
-        <span contenteditable="true" class="spl_text_input"><?php echo $this->fadeOut; ?></span>
-    </dd>
-    <dd class="edit-error"></dd>
-    <?php }
-    if (isset($this->item2Url)) {?>
-    <dt><?php echo _("Fade in: "); ?><span class='spl_cue_hint'><?php echo _("(ss.t)")?></span></dt>
-    <dd id="spl_fade_in_<?php echo $this->item2; ?>" class="spl_fade_in"
-    	data-fadein="<?php echo $this->item2Url; ?>"
-    	data-offset="<?php if ($this->item1Type == 0) { echo $this->offset; } else { echo 0; } ?>"
-    	data-cuein="<?php echo $this->cueIn2; ?>"
-    	data-cueout="<?php echo $this->cueOut2; ?>" data-length="<?php echo $this->fadeIn; ?>"
-    	data-type="logarithmic"
-    	data-item="<?php echo $this->item2; ?>">
-        <span contenteditable="true" class="spl_text_input"><?php echo $this->fadeIn; ?></span>
-    </dd>
-    <dd class="edit-error"></dd>
-    <?php }?>
+	<?php if ($this->item1Type == 0) { ?>
+		<dt><?php echo _("Fade out: "); ?><span class='spl_cue_hint'><?php echo _("(ss.t)") ?></span></dt>
+		<dd id="spl_fade_out_<?php echo $this->item1; ?>" class="spl_fade_out" data-fadeout="<?php echo $this->item1Url; ?>" data-cuein="<?php echo $this->cueIn1; ?>" data-cueout="<?php echo $this->cueOut1; ?>" data-length="<?php echo $this->fadeOut; ?>" data-type="logarithmic" data-item="<?php echo $this->item1; ?>">
+			<span contenteditable="true" class="spl_text_input"><?php echo $this->fadeOut; ?></span>
+		</dd>
+		<dd class="edit-error"></dd>
+	<?php }
+	if (isset($this->item2Url)) { ?>
+		<dt><?php echo _("Fade in: "); ?><span class='spl_cue_hint'><?php echo _("(ss.t)") ?></span></dt>
+		<dd id="spl_fade_in_<?php echo $this->item2; ?>" class="spl_fade_in" data-fadein="<?php echo $this->item2Url; ?>" data-offset="<?php if ($this->item1Type == 0) {
+																																			echo $this->offset;
+																																		} else {
+																																			echo 0;
+																																		} ?>" data-cuein="<?php echo $this->cueIn2; ?>" data-cueout="<?php echo $this->cueOut2; ?>" data-length="<?php echo $this->fadeIn; ?>" data-type="logarithmic" data-item="<?php echo $this->item2; ?>">
+			<span contenteditable="true" class="spl_text_input"><?php echo $this->fadeIn; ?></span>
+		</dd>
+		<dd class="edit-error"></dd>
+	<?php } ?>
 </dl>
diff --git a/legacy/application/views/scripts/playlist/smart-block.phtml b/legacy/application/views/scripts/playlist/smart-block.phtml
index 47ce144bc..b16ff8998 100644
--- a/legacy/application/views/scripts/playlist/smart-block.phtml
+++ b/legacy/application/views/scripts/playlist/smart-block.phtml
@@ -7,23 +7,23 @@ if (isset($this->obj)) {
 
 <?php if (isset($this->obj)) : ?>
     <div class="inner_editor_title">
-        <H2><?php echo(_("Editing "));?>"<span class="title_obj_name"><?php if (isset($this->unsavedName)) echo $this->unsavedName;
-                else echo $this->escape($this->obj->getName());?></span>"</H2>
+        <H2><?php echo (_("Editing ")); ?>"<span class="title_obj_name"><?php if (isset($this->unsavedName)) echo $this->unsavedName;
+                                                                        else echo $this->escape($this->obj->getName()); ?></span>"</H2>
     </div>
     <div class="inner_editor_wrapper smart-block-form">
-        <input class="obj_id" type="hidden" value="<?php echo $this->obj->getId(); ?>"/>
-        <input class="obj_lastMod" type="hidden" value="<?php echo $this->obj->getLastModified('U'); ?>"/>
-        <input class='obj_type' type='hidden' value='block'/>
+        <input class="obj_id" type="hidden" value="<?php echo $this->obj->getId(); ?>" />
+        <input class="obj_lastMod" type="hidden" value="<?php echo $this->obj->getLastModified('U'); ?>" />
+        <input class='obj_type' type='hidden' value='block' />
 
         <dl class="zend_form playlist_editor">
             <dt>
-                <label><?php echo(_("Name:")); ?></label>
+                <label><?php echo (_("Name:")); ?></label>
             </dt>
             <dd>
                 <input type="text" class="playlist_name_display" contenteditable="true" value="<?php
-                if (isset($this->unsavedName)) echo $this->unsavedName;
-                else echo $this->escape($this->obj->getName());
-                ?>">
+                                                                                                if (isset($this->unsavedName)) echo $this->unsavedName;
+                                                                                                else echo $this->escape($this->obj->getName());
+                                                                                                ?>">
             </dd>
         </dl>
 
@@ -34,9 +34,9 @@ if (isset($this->obj)) {
                 <dt id="description-label"><label for="description"><?php echo _("Description:") ?></label></dt>
                 <dd id="description-element">
                     <textarea cols="24" rows="3" id="description" name="description"><?php
-                        if (isset($this->unsavedDesc)) echo $this->unsavedDesc;
-                        else echo $this->obj->getDescription();
-                        ?></textarea>
+                                                                                        if (isset($this->unsavedDesc)) echo $this->unsavedDesc;
+                                                                                        else echo $this->obj->getDescription();
+                                                                                        ?></textarea>
                 </dd>
             </dl>
         </div>
@@ -44,17 +44,17 @@ if (isset($this->obj)) {
     </div>
 
     <div class="ui-widget-header fg-toolbar btn-toolbar clearfix">
-        <h4 class="obj_length"><?php echo($this->length); ?></h4>
-        <h4 class="obj_length_label"><?php echo(_("Duration:"));?></h4>
+        <h4 class="obj_length"><?php echo ($this->length); ?></h4>
+        <h4 class="obj_length_label"><?php echo (_("Duration:")); ?></h4>
 
         <div class='btn-group'>
             <button class="btn toggle-editor-form" title='<?php echo _("Toggle Details") ?>' type="button"><span class="icon-white spl-no-r-margin icon-chevron-up"></span></button>
         </div>
         <div class='btn-group'>
-            <?php echo $this->form->getElement('generate_button');?>
+            <?php echo $this->form->getElement('generate_button'); ?>
         </div>
         <div class='btn-group'>
-            <?php echo $this->form->getElement('shuffle_button');?>
+            <?php echo $this->form->getElement('shuffle_button'); ?>
         </div>
         <div class='btn-group'>
             <button id="spl_crossfade" class="btn crossfade-main-button">
@@ -72,17 +72,19 @@ if (isset($this->obj)) {
         <dl id="spl_editor-main" class="inline-list">
             <dt><?php echo _("Fade in: "); ?></dt>
             <dd>
-                <input class="spl_main_fade_in playlist_main_fade_input" value="0" /><span class='spl_cue_hint'> seconds</span></dd>
+                <input class="spl_main_fade_in playlist_main_fade_input" value="0" /><span class='spl_cue_hint'> seconds</span>
+            </dd>
             <dd class="edit-error"></dd>
             <dt><?php echo _("Fade out: "); ?></dt>
-            <dd><input class="spl_main_fade_out playlist_main_fade_input" value="0" /><span class='spl_cue_hint'> seconds</span></dd></dd>
+            <dd><input class="spl_main_fade_out playlist_main_fade_input" value="0" /><span class='spl_cue_hint'> seconds</span></dd>
+            </dd>
             <dd class="edit-error"></dd>
         </dl>
     </div>
 
     <ul class="spl_sortable">
         <?php $this->contents = $contents;
-            echo $this->render('playlist/update.phtml') ?>
+        echo $this->render('playlist/update.phtml') ?>
     </ul>
     <div class="btn-toolbar clearfix">
         <div class="btn-group pull-right">
@@ -91,9 +93,10 @@ if (isset($this->obj)) {
         <div class='btn-group pull-right'>
             <button class="btn" title='Save smart block&#39s title, description, and criteria' type="button" id="save_button"><?php echo _("Save") ?></button>
         </div>
-        <div id='sp-success-saved' class='success' style='display:none'><span</div>
-    </div>
+        <div id='sp-success-saved' class='success' style='display:none'>
+            <span< /div>
+        </div>
 
-<?php else : ?>
-    <div><?php echo _("No smart block currently open") ?></div>
-<?php endif; ?>
+    <?php else : ?>
+        <div><?php echo _("No smart block currently open") ?></div>
+    <?php endif; ?>
diff --git a/legacy/application/views/scripts/playlist/update.phtml b/legacy/application/views/scripts/playlist/update.phtml
index 49689d446..2d28c0acd 100644
--- a/legacy/application/views/scripts/playlist/update.phtml
+++ b/legacy/application/views/scripts/playlist/update.phtml
@@ -5,164 +5,163 @@ $isPlaylist = ($this->obj instanceof Application_Model_Playlist);
 if ($isSmartBlock && $this->showPoolCount) { ?>
     <div class='sp_text_font sp_text_font_bold'>
         <span id='sp_pool_count' class='sp_text_font sp_text_font_bold'>
-        <?php
+            <?php
             echo $this->poolCount;
             echo ngettext(" track matches your search criteria.", " tracks match your search criteria.", $this->poolCount);
-        ?>
+            ?>
         </span>
         <?php if ($this->poolCount > 0) { ?>
             <span class='checked-icon sp-checked-icon' id='sp_pool_count_icon'></span>
-        <?php }
-        else { ?>
+        <?php } else { ?>
             <span class='sp-warning-icon' id='sp_pool_count_icon'></span>
         <?php } ?>
     </div>
-    <?php
+<?php
 }
 if (count($items) && ($isSmartBlock || $isPlaylist)) : ?>
-<?php $i = 0; ?>
-<?php if ($isSmartBlock && !($this->obj->isStatic())) {
-        echo _("</br>This is only a preview of possible content generated by the smart block based upon the above criteria.");}
-?>
-<?php foreach($items as $item) :
-$staticBlock = null;
-$nextFileUrl = null;
-if ($item['type'] == 2) {
-    $bl= new Application_Model_Block($item['item_id']);
-    $staticBlock = $bl->isStatic();
-    $fileUrl = null;
-}
-else if ($item['type'] == 1) {
-    $fileUrl = null;
-}
-else if ($item['type'] == 0) {
-	$audiofile = Application_Model_StoredFile::RecallById($item['item_id']);
-	$fileUrl = $audiofile->getFileUrl();
-}
+    <?php $i = 0; ?>
+    <?php if ($isSmartBlock && !($this->obj->isStatic())) {
+        echo _("</br>This is only a preview of possible content generated by the smart block based upon the above criteria.");
+    }
+    ?>
+    <?php foreach ($items as $item) :
+        $staticBlock = null;
+        $nextFileUrl = null;
+        if ($item['type'] == 2) {
+            $bl = new Application_Model_Block($item['item_id']);
+            $staticBlock = $bl->isStatic();
+            $fileUrl = null;
+        } else if ($item['type'] == 1) {
+            $fileUrl = null;
+        } else if ($item['type'] == 0) {
+            $audiofile = Application_Model_StoredFile::RecallById($item['item_id']);
+            $fileUrl = $audiofile->getFileUrl();
+        }
 
-if (($i < count($items) -1) && ($items[$i+1]['type'] == 0)) {
-	$nextAudiofile = Application_Model_StoredFile::RecallById($items[$i+1]['item_id']);
-	$nextFileUrl = $nextAudiofile->getFileUrl();
-}
-?>
-    <li class="ui-state-default" id="spl_<?php echo $item["id"] ?>" unqid="<?php echo $item["id"]; ?>">
-        <div class="list-item-container">
+        if (($i < count($items) - 1) && ($items[$i + 1]['type'] == 0)) {
+            $nextAudiofile = Application_Model_StoredFile::RecallById($items[$i + 1]['item_id']);
+            $nextFileUrl = $nextAudiofile->getFileUrl();
+        }
+    ?>
+        <li class="ui-state-default" id="spl_<?php echo $item["id"] ?>" unqid="<?php echo $item["id"]; ?>">
+            <div class="list-item-container">
 
-            <?php if ($item['type'] == 0 && $item['exists']):?>
-            <div class="big_play" audioFile="<?php echo $item["id"]; ?>" data-mime-type="<?php echo $item["mime"]; ?>">
-                <span class="ui-icon ui-icon-play"></span>
+                <?php if ($item['type'] == 0 && $item['exists']) : ?>
+                    <div class="big_play" audioFile="<?php echo $item["id"]; ?>" data-mime-type="<?php echo $item["mime"]; ?>">
+                        <span class="ui-icon ui-icon-play"></span>
+                    </div>
+                <?php elseif ($item['type'] == 1 && $item['exists']) : ?>
+                    <div class="big_play" data-mime-type="<?php echo $item["mime"]; ?>">
+                        <span class="ui-icon ui-icon-play"></span>
+                    </div>
+                <?php elseif ($item['type'] == 2 && $item['exists']) : ?>
+                    <div class="big_play" blockId="<?php echo $item["item_id"]; ?>" blocktype="<?php echo $staticBlock ? "static" : "dynamic" ?>">
+                        <span class="ui-icon ui-icon-play"></span>
+                    </div>
+                <?php else : ?>
+                    <div class="big_play ui-state-hover">
+                        <span class="ui-icon ui-icon-alert"></span>
+                    </div>
+                <?php endif; ?>
+                <div class="text-row top">
+                    <span class="spl_playlength"><?php echo $item["length"] ?></span>
+                    <?php if ($item['type'] == 0) { ?>
+                        <!-- <span class="spl_cue ui-state-default"></span> -->
+                        <?php } else if ($item['type'] == 2) {
+                        if ($staticBlock) { ?>
+                            <span class="spl_block_expand close" blockId="<?php echo $item["item_id"]; ?>" id="expand_block_<?php echo $item["id"] ?>">
+                                <span class="ui-icon ui-icon-triangle-2-n-s"></span>
+                                <?php echo _("Expand Static Block") ?>
+                            </span>
+                        <?php   } else { ?>
+                            <span class="spl_block_expand close" blockId="<?php echo $item["item_id"]; ?>" id="expand_block_<?php echo $item["id"] ?>">
+                                <span class="ui-icon ui-icon-triangle-2-n-s"></span>
+                                <?php echo _("Expand Dynamic Block") ?>
+                            </span>
+                    <?php   }
+                    } ?>
+                    <span class="spl_title"><?php echo $item['track_title'] ?></span>
+                </div>
+                <div class="text-row">
+                    <span class="spl_artist"><?php echo $item['creator'] ?></span>
+                    <span class="spl_offset"><?php echo $item["offset"] ?></span>
+                </div>
+                <?php //create the crossfade icon.
+                if (($i < count($items) - 1) && !($items[$i]['type'] == 2 && $items[$i + 1]['type'])) :
+                ?>
+                    <!-- <div id="fade_<?php echo $i ?>" class="spl_fade_control ui-state-default"></div> -->
+                <?php endif; ?>
+                <span id="remove_<?php echo $item["id"] ?>" class="ui-icon ui-icon-closethick"></span>
             </div>
-            <?php elseif ($item['type'] == 1 && $item['exists']): ?>
-            <div class="big_play" data-mime-type="<?php echo $item["mime"]; ?>">
-                <span class="ui-icon ui-icon-play"></span>
-            </div>
-            <?php elseif ($item['type'] == 2 && $item['exists']): ?>
-            <div class="big_play" blockId="<?php echo $item["item_id"]; ?>" blocktype="<?php echo $staticBlock?"static":"dynamic"?>">
-                <span class="ui-icon ui-icon-play"></span>
-            </div>
-            <?php else:?>
-            <div class="big_play ui-state-hover">
-                <span class="ui-icon ui-icon-alert"></span>
-            </div>
-            <?php endif; ?>
-            <div class="text-row top">
-                <span class="spl_playlength"><?php echo $item["length"] ?></span>
-                <?php if ($item['type'] == 0) {?>
-                <!-- <span class="spl_cue ui-state-default"></span> -->
-                <?php } else if ($item['type'] == 2) {
-                        if ($staticBlock) {?>
-                <span class="spl_block_expand close" blockId="<?php echo $item["item_id"]; ?>" id="expand_block_<?php echo $item["id"]?>">
-                    <span class="ui-icon ui-icon-triangle-2-n-s"></span>
-                    <?php echo _("Expand Static Block")?>
-                </span>
-                <?php   } else { ?>
-                <span class="spl_block_expand close" blockId="<?php echo $item["item_id"]; ?>" id="expand_block_<?php echo $item["id"]?>">
-                    <span class="ui-icon ui-icon-triangle-2-n-s"></span>
-                    <?php echo _("Expand Dynamic Block")?>
-                </span>
-                <?php   }
-                      } ?>
-                <span class="spl_title"><?php echo $item['track_title'] ?></span>
-            </div>
-            <div class="text-row">
-                <span class="spl_artist"><?php echo $item['creator'] ?></span>
-                <span class="spl_offset"><?php echo $item["offset"]?></span>
-            </div>
-            <?php //create the crossfade icon.
-                if (($i < count($items) -1) && !($items[$i]['type'] == 2 && $items[$i+1]['type'])):
+            <?php if ($item['type'] == 0) { ?>
+                <div id="cues_<?php echo $i ?>" class="cue-edit clearfix" style="display: none">
+                    <?php echo $this->partial('playlist/set-cue.phtml', array(
+                        'id' => $item["id"],
+                        'cueIn' => $item['cuein'],
+                        'cueOut' => $item['cueout'],
+                        'cueInSec' => $item['cueInSec'],
+                        'cueOutSec' => $item['cueOutSec'],
+                        'uri' => $fileUrl,
+                        'origLength' => $item['orig_length']
+                    )); ?>
+                </div>
+            <?php } ?>
+
+
+            <?php //create a fade editor box
+            //(fadeout of current position + fade in of next position)
+            if (($i < count($items) - 1) && !($items[$i]['type'] == 2 && $items[$i + 1]['type'])) :
             ?>
-            <!-- <div id="fade_<?php echo $i ?>" class="spl_fade_control ui-state-default"></div> -->
+                <div id="crossfade_<?php echo $i ?>-<?php echo $i + 1 ?>" class="crossfade clearfix" style="display: none">
+                    <?php
+
+                    $vars = array(
+                        'item1' => $items[$i]['id'],
+                        'fadeOut' => $items[$i]['fadeout'],
+                        'fadeIn' => $items[$i + 1]['fadein'],
+                        'item1Type' => $items[$i]['type'],
+                        'cueIn1' => $items[$i]['cueInSec'],
+                        'cueOut1' => $items[$i]['cueOutSec'],
+                        'item1Url' => $fileUrl
+                    );
+
+                    $item2 = array(
+                        'item2Url' => $nextFileUrl,
+                        'item2' => $items[$i + 1]['id'],
+                        'item2Type' => $items[$i + 1]['type'],
+                        'offset' => $items[$i]['trackSec'] - $items[$i + 1]['trackoffset'],
+                        'cueIn2' => $items[$i + 1]['cueInSec'],
+                        'cueOut2' => $items[$i + 1]['cueOutSec']
+                    );
+
+                    if (isset($nextFileUrl)) {
+                        $vars = $vars + $item2;
+                    }
+
+                    echo $this->partial('playlist/set-fade.phtml', $vars);
+
+                    ?>
+                </div>
             <?php endif; ?>
-            <span id="remove_<?php echo $item["id"] ?>" class="ui-icon ui-icon-closethick"></span>
-        </div>
-        <?php if ($item['type'] == 0) {?>
-        <div id="cues_<?php echo $i ?>" class="cue-edit clearfix" style="display: none">
-            <?php echo $this->partial('playlist/set-cue.phtml', array(
-                'id' => $item["id"],
-                'cueIn' => $item['cuein'],
-                'cueOut' => $item['cueout'],
-            	'cueInSec' => $item['cueInSec'],
-            	'cueOutSec' => $item['cueOutSec'],
-            	'uri' => $fileUrl,
-                'origLength' => $item['orig_length'])); ?>
-        </div>
-        <?php }?>
-
-
-        <?php //create a fade editor box
-              //(fadeout of current position + fade in of next position)
-            if(($i < count($items) -1) && !($items[$i]['type'] == 2 && $items[$i+1]['type'])):
-        ?>
-        <div id="crossfade_<?php echo $i ?>-<?php echo $i+1 ?>" class="crossfade clearfix" style="display: none">
-            <?php
-
-            $vars = array(
-                'item1' => $items[$i]['id'],
-            	'fadeOut' => $items[$i]['fadeout'],
-            	'fadeIn' => $items[$i+1]['fadein'],
-                'item1Type' => $items[$i]['type'],
-            	'cueIn1' => $items[$i]['cueInSec'],
-            	'cueOut1' => $items[$i]['cueOutSec'],
-                'item1Url' => $fileUrl
-            );
-
-            $item2 = array(
-            	'item2Url' => $nextFileUrl,
-            	'item2' => $items[$i+1]['id'],
-            	'item2Type' => $items[$i+1]['type'],
-            	'offset' => $items[$i]['trackSec'] - $items[$i+1]['trackoffset'],
-            	'cueIn2' => $items[$i+1]['cueInSec'],
-            	'cueOut2' => $items[$i+1]['cueOutSec']
-            );
-
-            if (isset($nextFileUrl)) {
-            	$vars = $vars + $item2;
-            }
-
-            echo $this->partial('playlist/set-fade.phtml', $vars);
-
-            ?>
-        </div>
-        <?php endif; ?>
-        <?php if ($item['type'] == 2) {?>
-        <ul style='display:none' id="block_<?php echo $item["id"]?>_info" class="smart-block-info expand-block-separate"></ul>
-        <?php } ?>
-    </li>
-    <?php $i = $i+1; ?>
-<?php endforeach; ?>
+            <?php if ($item['type'] == 2) { ?>
+                <ul style='display:none' id="block_<?php echo $item["id"] ?>_info" class="smart-block-info expand-block-separate"></ul>
+            <?php } ?>
+        </li>
+        <?php $i = $i + 1; ?>
+    <?php endforeach; ?>
 
 <?php else : ?>
-<div class="spl_empty">
-<?php
-    if ($this->obj instanceof Application_Model_Block) {
-        if ($this->obj->isStatic()) {
-            echo _("Choose some search criteria above and click Generate to create this playlist.");
+    <div class="spl_empty">
+        <?php
+        if ($this->obj instanceof Application_Model_Block) {
+            if ($this->obj->isStatic()) {
+                echo _("Choose some search criteria above and click Generate to create this playlist.");
+            } else {
+                echo _("A track list will be generated when you schedule this smart block into a show.");
+            }
         } else {
-            echo _("A track list will be generated when you schedule this smart block into a show.");
+            echo _("Drag tracks here from your library to add them to the playlist");
         }
-    } else {
-        echo _("Drag tracks here from your library to add them to the playlist");
-    }
-?>
-</div>
+        ?>
+    </div>
 <?php endif; ?>
diff --git a/legacy/application/views/scripts/playouthistory/dialog.phtml b/legacy/application/views/scripts/playouthistory/dialog.phtml
index 440203443..a0d386c14 100644
--- a/legacy/application/views/scripts/playouthistory/dialog.phtml
+++ b/legacy/application/views/scripts/playouthistory/dialog.phtml
@@ -1 +1 @@
-<?php echo $this->form; ?>
+<?php echo $this->form;
diff --git a/legacy/application/views/scripts/playouthistory/index.phtml b/legacy/application/views/scripts/playouthistory/index.phtml
index 9b507a859..1811c3859 100644
--- a/legacy/application/views/scripts/playouthistory/index.phtml
+++ b/legacy/application/views/scripts/playouthistory/index.phtml
@@ -1,22 +1,22 @@
 <div id="history_content" class=" alpha-block padded">
-  <h2><?php echo(_("Playout History"));?></h2>
+  <h2><?php echo (_("Playout History")); ?></h2>
   <?php echo $this->date_form; ?>
 
   <div id="his-tabs">
     <ul>
-      <?php if ($this->userType != UTYPE_HOST): ?>
-      <li><a href="#his-tabs-1"><?php echo _("Log Sheet"); ?></a></li>
-      <li><a href="#his-tabs-2"><?php echo _("File Summary"); ?></a></li>
+      <?php if ($this->userType != UTYPE_HOST) : ?>
+        <li><a href="#his-tabs-1"><?php echo _("Log Sheet"); ?></a></li>
+        <li><a href="#his-tabs-2"><?php echo _("File Summary"); ?></a></li>
       <?php endif; ?>
       <li><a href="#his-tabs-3"><?php echo _("Show Summary"); ?></a></li>
     </ul>
-    <?php if ($this->userType != UTYPE_HOST): ?>
-    <div id="his-tabs-1">
-      <table id="history_table_list" cellpadding="0" cellspacing="0" class="datatable"></table>
-    </div>
-    <div id="his-tabs-2">
-      <table id="history_table_aggregate" cellpadding="0" cellspacing="0" class="datatable"></table>
-    </div>
+    <?php if ($this->userType != UTYPE_HOST) : ?>
+      <div id="his-tabs-1">
+        <table id="history_table_list" cellpadding="0" cellspacing="0" class="datatable"></table>
+      </div>
+      <div id="his-tabs-2">
+        <table id="history_table_aggregate" cellpadding="0" cellspacing="0" class="datatable"></table>
+      </div>
     <?php endif; ?>
     <div id="his-tabs-3">
       <div id="history_show_summary"></div>
diff --git a/legacy/application/views/scripts/playouthistorytemplate/index.phtml b/legacy/application/views/scripts/playouthistorytemplate/index.phtml
index 9e9b89cca..23c29e284 100644
--- a/legacy/application/views/scripts/playouthistorytemplate/index.phtml
+++ b/legacy/application/views/scripts/playouthistorytemplate/index.phtml
@@ -1,65 +1,69 @@
 <div id="history_template" class="prefpanel alpha-block padded-strong">
   <div>
-    <h2><?php echo(_("Playout History Templates"));?></h2>
+    <h2><?php echo (_("Playout History Templates")); ?></h2>
 
-    <div><h4><?php echo _("Log Sheet Templates") ?></h4></div>
+    <div>
+      <h4><?php echo _("Log Sheet Templates") ?></h4>
+    </div>
     <button id="new_item_template" class="btn btn-new"><?php echo _("New Log Sheet Template") ?></button>
     <ul id="template_list">
-      <?php if (count($this->template_list) == 0): ?>
+      <?php if (count($this->template_list) == 0) : ?>
         <li><?php echo _("No Log Sheet Templates") ?></li>
       <?php endif; ?>
-      <?php foreach ($this->template_list as $id=>$name): ?>
-        <?php if (in_array($id, $this->configured)): ?>
-        <li data-template="<?php echo $id; ?>" data-name="<?php echo $name; ?>" class="template_configured">
-          <a class="template_name" href="<?php echo $this->baseUrl("Playouthistorytemplate/configure-template/id/{$id}"); ?>">
-            <?php echo $name; ?>
-          </a>
-          <i class="icon icon-ok"></i>
-        <?php else: ?>
-        <li data-template="<?php echo $id; ?>" data-name="<?php echo $name; ?>">
-          <a class="template_name" href="<?php echo $this->baseUrl("Playouthistorytemplate/configure-template/id/{$id}"); ?>">
-            <?php echo $name; ?>
-          </a>
-          <a class="template_remove" href="<?php echo $this->baseUrl("Playouthistorytemplate/delete-template/id/{$id}"); ?>">
-            <i class="icon icon-trash"></i>
-          </a>
-          <a class="template_default" href="<?php echo $this->baseUrl("Playouthistorytemplate/set-template-default/format/json/id/{$id}"); ?>">
-            <?php echo _("Set Default") ?>
-          </a>
-        <?php endif; ?>
-        </li>
-      <?php endforeach; ?>
+      <?php foreach ($this->template_list as $id => $name) : ?>
+        <?php if (in_array($id, $this->configured)) : ?>
+          <li data-template="<?php echo $id; ?>" data-name="<?php echo $name; ?>" class="template_configured">
+            <a class="template_name" href="<?php echo $this->baseUrl("Playouthistorytemplate/configure-template/id/{$id}"); ?>">
+              <?php echo $name; ?>
+            </a>
+            <i class="icon icon-ok"></i>
+          <?php else : ?>
+          <li data-template="<?php echo $id; ?>" data-name="<?php echo $name; ?>">
+            <a class="template_name" href="<?php echo $this->baseUrl("Playouthistorytemplate/configure-template/id/{$id}"); ?>">
+              <?php echo $name; ?>
+            </a>
+            <a class="template_remove" href="<?php echo $this->baseUrl("Playouthistorytemplate/delete-template/id/{$id}"); ?>">
+              <i class="icon icon-trash"></i>
+            </a>
+            <a class="template_default" href="<?php echo $this->baseUrl("Playouthistorytemplate/set-template-default/format/json/id/{$id}"); ?>">
+              <?php echo _("Set Default") ?>
+            </a>
+          <?php endif; ?>
+          </li>
+        <?php endforeach; ?>
     </ul>
   </div>
   <br><br>
   <div>
-    <div><h4><?php echo _("File Summary Templates") ?></h4></div>
+    <div>
+      <h4><?php echo _("File Summary Templates") ?></h4>
+    </div>
     <button id="new_file_template" class="btn btn-new"><?php echo _("New File Summary Template") ?></button>
     <ul id="template_file">
-      <?php if (count($this->template_file) == 0): ?>
+      <?php if (count($this->template_file) == 0) : ?>
         <li><?php echo _("No File Summary Templates") ?></li>
       <?php endif; ?>
-      <?php foreach ($this->template_file as $id=>$name): ?>
-        <?php if (in_array($id, $this->configured)): ?>
-        <li data-template="<?php echo $id; ?>" data-name="<?php echo $name; ?>" class="template_configured">
-          <a class="template_name" href="<?php echo $this->baseUrl("Playouthistorytemplate/configure-template/id/{$id}"); ?>">
-            <?php echo $name; ?>
-          </a>
-          <i class="icon icon-ok"></i>
-        <?php else: ?>
-        <li data-template="<?php echo $id; ?>" data-name="<?php echo $name; ?>">
-          <a class="template_name" href="<?php echo $this->baseUrl("Playouthistorytemplate/configure-template/id/{$id}"); ?>">
-            <?php echo $name; ?>
-          </a>
-          <a class="template_remove" href="<?php echo $this->baseUrl("Playouthistorytemplate/delete-template/id/{$id}"); ?>">
-            <i class="icon icon-trash"></i>
-          </a>
-          <a class="template_default" href="<?php echo $this->baseUrl("Playouthistorytemplate/set-template-default/format/json/id/{$id}"); ?>">
-            <?php echo _("Set Default") ?>
-          </a>
-        <?php endif; ?>
-        </li>
-      <?php endforeach; ?>
+      <?php foreach ($this->template_file as $id => $name) : ?>
+        <?php if (in_array($id, $this->configured)) : ?>
+          <li data-template="<?php echo $id; ?>" data-name="<?php echo $name; ?>" class="template_configured">
+            <a class="template_name" href="<?php echo $this->baseUrl("Playouthistorytemplate/configure-template/id/{$id}"); ?>">
+              <?php echo $name; ?>
+            </a>
+            <i class="icon icon-ok"></i>
+          <?php else : ?>
+          <li data-template="<?php echo $id; ?>" data-name="<?php echo $name; ?>">
+            <a class="template_name" href="<?php echo $this->baseUrl("Playouthistorytemplate/configure-template/id/{$id}"); ?>">
+              <?php echo $name; ?>
+            </a>
+            <a class="template_remove" href="<?php echo $this->baseUrl("Playouthistorytemplate/delete-template/id/{$id}"); ?>">
+              <i class="icon icon-trash"></i>
+            </a>
+            <a class="template_default" href="<?php echo $this->baseUrl("Playouthistorytemplate/set-template-default/format/json/id/{$id}"); ?>">
+              <?php echo _("Set Default") ?>
+            </a>
+          <?php endif; ?>
+          </li>
+        <?php endforeach; ?>
     </ul>
   </div>
 </div>
diff --git a/legacy/application/views/scripts/playouthistorytemplate/template-contents.phtml b/legacy/application/views/scripts/playouthistorytemplate/template-contents.phtml
index e12dd8389..7769a7108 100644
--- a/legacy/application/views/scripts/playouthistorytemplate/template-contents.phtml
+++ b/legacy/application/views/scripts/playouthistorytemplate/template-contents.phtml
@@ -1,44 +1,38 @@
-<?php if ($this->template_type == Application_Service_HistoryService::TEMPLATE_TYPE_FILE): ?>
-<h4><?php echo _("Creating File Summary Template") ?></h4>
-<?php else: ?>
-<h4><?php echo _("Creating Log Sheet Template") ?></h4>
+<?php if ($this->template_type == Application_Service_HistoryService::TEMPLATE_TYPE_FILE) : ?>
+	<h4><?php echo _("Creating File Summary Template") ?></h4>
+<?php else : ?>
+	<h4><?php echo _("Creating Log Sheet Template") ?></h4>
 <?php endif; ?>
 
 <div class="template_name_wrap">
-  <label>
-    <?php echo _("Name") ?>
-    <input id="template_name" type="text" value="<?php echo $this->template_name; ?>">
-  </label>
+	<label>
+		<?php echo _("Name") ?>
+		<input id="template_name" type="text" value="<?php echo $this->template_name; ?>">
+	</label>
 
 	<?php $i = 0;
-		$usedFileMD = array();
+	$usedFileMD = array();
 	?>
 
 	<ul class="template_item_list">
-	  <?php foreach ($this->template_fields as $field): ?>
+		<?php foreach ($this->template_fields as $field) : ?>
 
-	    <?php if($field["isFileMd"]) {
-	    	$usedFileMD[] = $field["name"];
-	    } ?>
+			<?php if ($field["isFileMd"]) {
+				$usedFileMD[] = $field["name"];
+			} ?>
 
-	  <li id="<?php echo "field_".$i?>"
-	  	data-id="<?php echo isset($field["id"]) ? $field["id"] : ""; ?>"
-	  	data-name="<?php echo $field["name"]?>"
-	  	data-label="<?php echo $field["label"]?>"
-	  	data-type="<?php echo $field["type"]?>"
-	  	data-filemd="<?php echo var_export($field["isFileMd"], true)?>"
-	  	class="<?php echo ($field["isFileMd"]) ? 'field_filemd' : 'field_other' ?>">
-	    <span><?php echo $field["label"]?></span>
-	    <span><?php echo $field["type"]?></span>
-	    <?php if(!in_array($field["name"], $this->required_fields)): ?>
-	    <span class="template_item_remove">
-	      <i class="icon icon-trash"></i>
-	    </span>
-	    <?php endif; ?>
-	  </li>
-	  <?php $i++; ?>
+			<li id="<?php echo "field_" . $i ?>" data-id="<?php echo isset($field["id"]) ? $field["id"] : ""; ?>" data-name="<?php echo $field["name"] ?>" data-label="<?php echo $field["label"] ?>" data-type="<?php echo $field["type"] ?>" data-filemd="<?php echo var_export($field["isFileMd"], true) ?>" class="<?php echo ($field["isFileMd"]) ? 'field_filemd' : 'field_other' ?>">
+				<span><?php echo $field["label"] ?></span>
+				<span><?php echo $field["type"] ?></span>
+				<?php if (!in_array($field["name"], $this->required_fields)) : ?>
+					<span class="template_item_remove">
+						<i class="icon icon-trash"></i>
+					</span>
+				<?php endif; ?>
+			</li>
+			<?php $i++; ?>
 
-	  <?php endforeach; ?>
+		<?php endforeach; ?>
 	</ul>
 </div>
 <div class="add_more">
@@ -46,41 +40,38 @@
 	<p><?php echo _("Add more elements") ?>:</p>
 
 	<ul class="template_file_md">
-	  <?php foreach ($this->fileMD as $md): ?>
+		<?php foreach ($this->fileMD as $md) : ?>
 
-	  <?php if(in_array($md["name"], $usedFileMD)) {
-	      continue;
-	  } ?>
+			<?php if (in_array($md["name"], $usedFileMD)) {
+				continue;
+			} ?>
 
-	  <li id="<?php echo "md_".$md["name"]?>"
-	  	data-name="<?php echo $md["name"]?>"
-	  	data-type="<?php echo $md["type"]?>"
-	  	data-label="<?php echo $md["label"]?>">
-	  	<?php echo $md["label"] ?>
-	  	<a class="field_add" href="#"><i class="icon icon-plus"></i></a>
-	  </li>
-	  <?php endforeach; ?>
+			<li id="<?php echo "md_" . $md["name"] ?>" data-name="<?php echo $md["name"] ?>" data-type="<?php echo $md["type"] ?>" data-label="<?php echo $md["label"] ?>">
+				<?php echo $md["label"] ?>
+				<a class="field_add" href="#"><i class="icon icon-plus"></i></a>
+			</li>
+		<?php endforeach; ?>
 	</ul>
 
-	  <?php if ($this->template_type !== Application_Service_HistoryService::TEMPLATE_TYPE_FILE): ?>
-	  <div class="template_item_add">
-	    <input type="text" placeholder="<?php echo _("Add New Field") ?>">
-	    <select>
-	      <?php foreach ($this->fields as $field): ?>
-	      <option value="<?php echo $field; ?>"><?php echo _($field); ?></option>
-	      <?php endforeach; ?>
-	    </select>
-	    <button class="btn">
-	      <i class="icon-white icon-plus"></i>
-	      <?php echo _("Add") ?>
-	    </button>
-	  </div>
-	  <?php endif; ?>
+	<?php if ($this->template_type !== Application_Service_HistoryService::TEMPLATE_TYPE_FILE) : ?>
+		<div class="template_item_add">
+			<input type="text" placeholder="<?php echo _("Add New Field") ?>">
+			<select>
+				<?php foreach ($this->fields as $field) : ?>
+					<option value="<?php echo $field; ?>"><?php echo _($field); ?></option>
+				<?php endforeach; ?>
+			</select>
+			<button class="btn">
+				<i class="icon-white icon-plus"></i>
+				<?php echo _("Add") ?>
+			</button>
+		</div>
+	<?php endif; ?>
 </div>
 
 <div>
-  <?php if (!in_array($this->template_id, $this->configured)): ?>
-  <button id="template_set_default" data-template="<?php echo $this->template_id; ?>" class="btn"><?php echo _("Set Default Template") ?></button>
-  <?php endif; ?>
-  <button id="template_item_save" data-template="<?php echo $this->template_id; ?>" class="btn"><?php echo _("Save") ?></button>
+	<?php if (!in_array($this->template_id, $this->configured)) : ?>
+		<button id="template_set_default" data-template="<?php echo $this->template_id; ?>" class="btn"><?php echo _("Set Default Template") ?></button>
+	<?php endif; ?>
+	<button id="template_item_save" data-template="<?php echo $this->template_id; ?>" class="btn"><?php echo _("Save") ?></button>
 </div>
diff --git a/legacy/application/views/scripts/podcast/featureupgrade-page.phtml b/legacy/application/views/scripts/podcast/featureupgrade-page.phtml
index afd5a7e3e..58c89ec62 100644
--- a/legacy/application/views/scripts/podcast/featureupgrade-page.phtml
+++ b/legacy/application/views/scripts/podcast/featureupgrade-page.phtml
@@ -1,4 +1,5 @@
 <?php
+
 /**
  * Created by PhpStorm.
  * User: asantoni
@@ -8,6 +9,6 @@
 ?>
 
 <div class="content-pane" style="width: 100%">
-    <?php require(__DIR__."/featureupgrade.phtml"); ?>
+    <?php require(__DIR__ . "/featureupgrade.phtml"); ?>
 
 </div>
diff --git a/legacy/application/views/scripts/podcast/featureupgrade-pane.phtml b/legacy/application/views/scripts/podcast/featureupgrade-pane.phtml
index 0a7706ed9..be8f07b0e 100644
--- a/legacy/application/views/scripts/podcast/featureupgrade-pane.phtml
+++ b/legacy/application/views/scripts/podcast/featureupgrade-pane.phtml
@@ -1,4 +1,5 @@
 <?php
+
 /**
  * Created by PhpStorm.
  * User: asantoni
@@ -7,7 +8,7 @@
  */
 ?>
 
-<?php require(__DIR__."/featureupgrade.phtml"); ?>
+<?php require(__DIR__ . "/featureupgrade.phtml"); ?>
 
 <div class="angular_wrapper" ng-controller="Publish">
 
diff --git a/legacy/application/views/scripts/podcast/podcast.phtml b/legacy/application/views/scripts/podcast/podcast.phtml
index d008ade42..ae74dad09 100644
--- a/legacy/application/views/scripts/podcast/podcast.phtml
+++ b/legacy/application/views/scripts/podcast/podcast.phtml
@@ -6,10 +6,10 @@
     </div>
     <div class="inner_editor_wrapper">
         <form class="podcast-metadata">
-            <input ng-value="podcast.id" class="obj_id" type="hidden"/>
+            <input ng-value="podcast.id" class="obj_id" type="hidden" />
             <div class="podcast-metadata-row">
                 <label for="podcast_name"><?php echo _("Podcast Name: ") ?></label>
-                <input name="podcast_name" type="text" ng-model="podcast.title" value={{podcast.title}} >
+                <input name="podcast_name" type="text" ng-model="podcast.title" value={{podcast.title}}>
             </div>
             <div class="podcast-metadata-row">
                 <label for="podcast_url"><?php echo _("Podcast URL: ") ?></label>
@@ -18,10 +18,10 @@
             <div class="podcast-metadata-row">
                 <label for="podcast_auto_ingest"><?php echo _("Download latest episodes:") ?></label>
                 <div>
-                    <input name="podcast_auto_ingest"  id="podcast_auto_ingest" ng-model="podcast.auto_ingest" type="checkbox"/>
+                    <input name="podcast_auto_ingest" id="podcast_auto_ingest" ng-model="podcast.auto_ingest" type="checkbox" />
                 </div>
             </div>
-            <div class="podcast-metadata-row" >
+            <div class="podcast-metadata-row">
                 <label><?php echo _("Scheduling:") ?></label>
                 <div>
                     <button ng-click="createSmartblock()" class="btn" type="button" name="smartblock">
@@ -33,7 +33,7 @@
         </form>
     </div>
 
-   <table class="datatable podcast_episodes" cellpadding="0" cellspacing="0"></table>
+    <table class="datatable podcast_episodes" cellpadding="0" cellspacing="0"></table>
 
     <div class="btn-toolbar clearfix">
         <div class="btn-group pull-right">
diff --git a/legacy/application/views/scripts/podcast/podcast_url_dialog.phtml b/legacy/application/views/scripts/podcast/podcast_url_dialog.phtml
index 5df6bf9b7..4c3153486 100644
--- a/legacy/application/views/scripts/podcast/podcast_url_dialog.phtml
+++ b/legacy/application/views/scripts/podcast/podcast_url_dialog.phtml
@@ -9,7 +9,7 @@
                     </label>
                 </td>
                 <td style="text-align: right">
-                    <input id="podcast_url_field" type="url" name="url" size="40" style="margin-left: 10px; margin-bottom: 10px;" placeholder="http://example.com/podcast.xml"/>
+                    <input id="podcast_url_field" type="url" name="url" size="40" style="margin-left: 10px; margin-bottom: 10px;" placeholder="http://example.com/podcast.xml" />
                 </td>
             </tr>
         </table>
diff --git a/legacy/application/views/scripts/podcast/station.phtml b/legacy/application/views/scripts/podcast/station.phtml
index 16e59563d..55fc33031 100644
--- a/legacy/application/views/scripts/podcast/station.phtml
+++ b/legacy/application/views/scripts/podcast/station.phtml
@@ -15,18 +15,18 @@
             </div>
             <form class="podcast-metadata">
                 <?php echo $this->form->getElement('csrf') ?>
-                <input ng-value="podcast.id" class="obj_id" type="hidden"/>
+                <input ng-value="podcast.id" class="obj_id" type="hidden" />
 
                 <h3 class="collapsible-header"><span class="arrow-icon"></span><?php echo _("General Fields") ?></h3>
                 <div class="collapsible-content">
                     <fieldset class="padded">
                         <div class="podcast-metadata-row">
                             <label><?php echo _("Name") ?></label>
-                            <input name="podcast_name" ng-model="podcast.title" type="text"/>
+                            <input name="podcast_name" ng-model="podcast.title" type="text" />
                         </div>
                         <div class="podcast-metadata-row">
                             <label><?php echo _("Creator") ?></label>
-                            <input name="podcast_creator" ng-model="podcast.creator" type="text"/>
+                            <input name="podcast_creator" ng-model="podcast.creator" type="text" />
                         </div>
 
                         <div class="podcast-metadata-row">
@@ -37,20 +37,20 @@
                             <label><?php echo _("Language") ?></label>
                             <select name="podcast_language" ng-model="podcast.language">
                                 <?php
-                                    foreach(Application_Common_LocaleHelper::getISO6391LanguageCodes() as $code=>$lang) {
-                                        echo "<option value='$code'>$lang</option>";
-                                    }
+                                foreach (Application_Common_LocaleHelper::getISO6391LanguageCodes() as $code => $lang) {
+                                    echo "<option value='$code'>$lang</option>";
+                                }
                                 ?>
                             </select>
                         </div>
 
                         <div class="podcast-metadata-row">
                             <label><?php echo _("Copyright") ?></label>
-                            <input name="podcast_copyright" ng-model="podcast.copyright" type="text"/>
+                            <input name="podcast_copyright" ng-model="podcast.copyright" type="text" />
                         </div>
                         <div class="podcast-metadata-row">
                             <label><?php echo _("Link") ?></label>
-                            <input name="podcast_link" ng-model="podcast.link" type="url"/>
+                            <input name="podcast_link" ng-model="podcast.link" type="url" />
                         </div>
                     </fieldset>
                 </div>
@@ -60,12 +60,12 @@
                     <fieldset class="padded">
                         <div class="podcast-metadata-row">
                             <label><?php echo _("Author") ?></label>
-                            <input name="podcast_itunes_author" ng-model="podcast.itunes_author" type="text"/>
+                            <input name="podcast_itunes_author" ng-model="podcast.itunes_author" type="text" />
                         </div>
 
                         <div class="podcast-metadata-row">
                             <label><?php echo _("Keywords") ?></label>
-                            <input name="podcast_itunes_keywords" ng-model="podcast.itunes_keywords" type="text"/>
+                            <input name="podcast_itunes_keywords" ng-model="podcast.itunes_keywords" type="text" />
                         </div>
 
                         <div class="podcast-metadata-row">
@@ -80,12 +80,12 @@
 
                         <div class="podcast-metadata-row">
                             <label><?php echo _("Category") ?></label>
-                            <input name="podcast_itunes_category" ng-model="podcast.itunes_category" type="text"/>
+                            <input name="podcast_itunes_category" ng-model="podcast.itunes_category" type="text" />
                         </div>
 
                         <div class="podcast-metadata-row">
                             <label><?php echo _("Explicit") ?></label>
-                            <input name="podcast_itunes_explicit" ng-model="podcast.itunes_explicit" type="checkbox"/>
+                            <input name="podcast_itunes_explicit" ng-model="podcast.itunes_explicit" type="checkbox" />
                         </div>
                     </fieldset>
                 </div>
@@ -114,10 +114,14 @@
                 </div>
 
                 <p id="station_podcast_help_text">
-                    <?php echo(sprintf(_("For detailed information on what these metadata fields mean, please see the %sRSS specification%s
+                    <?php echo (sprintf(
+                        _("For detailed information on what these metadata fields mean, please see the %sRSS specification%s
                     or %sApple's podcasting documentation%s."),
-                        '<a href="http://cyber.law.harvard.edu/rss/rss.html#requiredChannelElements">', '</a>',
-                        '<a target="_blank" href="http://www.apple.com/ca/itunes/podcasts/specs.html">', "</a>")); ?>
+                        '<a href="http://cyber.law.harvard.edu/rss/rss.html#requiredChannelElements">',
+                        '</a>',
+                        '<a target="_blank" href="http://www.apple.com/ca/itunes/podcasts/specs.html">',
+                        "</a>"
+                    )); ?>
                 </p>
             </form>
 
@@ -135,7 +139,7 @@
     </div>
 </div>
 <script>
-    $(document).ready(function () {
+    $(document).ready(function() {
         <?php echo "var podcast = " . $this->podcast . ";" ?>
         AIRTIME.podcast.podcastApp.value('podcast', podcast);
         AIRTIME.podcast.podcastApp.value('tab', null);
diff --git a/legacy/application/views/scripts/preference/directory-config.phtml b/legacy/application/views/scripts/preference/directory-config.phtml
index 0d8d51dd3..079f50536 100644
--- a/legacy/application/views/scripts/preference/directory-config.phtml
+++ b/legacy/application/views/scripts/preference/directory-config.phtml
@@ -1,4 +1,4 @@
 <div id="watched-folder-section" class="ui-widget ui-widget-content block-shadow simple-formblock clearfix padded-strong manage-folders">
-<h2><?php echo _("Manage Media Folders") ?></h2>
-<?php echo $this->form; ?>
+    <h2><?php echo _("Manage Media Folders") ?></h2>
+    <?php echo $this->form; ?>
 </div>
diff --git a/legacy/application/views/scripts/schedule/add-show-form.phtml b/legacy/application/views/scripts/schedule/add-show-form.phtml
index ffb931498..36acc2259 100644
--- a/legacy/application/views/scripts/schedule/add-show-form.phtml
+++ b/legacy/application/views/scripts/schedule/add-show-form.phtml
@@ -16,8 +16,8 @@
         <?php
         if (!$this->addNewShow) {
             $this->when->getElement('add_show_timezone')->setOptions(array('disabled' => true));
-            ?>
-            <input type="hidden" name="add_show_timezone" id="add_show_timezone" value=<?php echo $this->when->getElement('add_show_timezone')->getValue()?>>
+        ?>
+            <input type="hidden" name="add_show_timezone" id="add_show_timezone" value=<?php echo $this->when->getElement('add_show_timezone')->getValue() ?>>
         <?php
         }
         ?>
diff --git a/legacy/application/views/scripts/schedule/get-current-playlist.phtml b/legacy/application/views/scripts/schedule/get-current-playlist.phtml
index c1d521bb3..88cdeb3eb 100644
--- a/legacy/application/views/scripts/schedule/get-current-playlist.phtml
+++ b/legacy/application/views/scripts/schedule/get-current-playlist.phtml
@@ -1,3 +1,2 @@
 <?php
 echo $this->entries;
-?>
diff --git a/legacy/application/views/scripts/schedule/get-show-data.phtml b/legacy/application/views/scripts/schedule/get-show-data.phtml
index 61961639f..7911c1e57 100644
--- a/legacy/application/views/scripts/schedule/get-show-data.phtml
+++ b/legacy/application/views/scripts/schedule/get-show-data.phtml
@@ -1,3 +1,2 @@
 <?php
-    echo $this->data;
-?>
+echo $this->data;
diff --git a/legacy/application/views/scripts/schedule/index.phtml b/legacy/application/views/scripts/schedule/index.phtml
index 98697589e..1dc4f1bb8 100644
--- a/legacy/application/views/scripts/schedule/index.phtml
+++ b/legacy/application/views/scripts/schedule/index.phtml
@@ -1,15 +1,14 @@
-
 <table id="schedule_block_table">
     <tr>
         <td>
             <form id="add-show-form" method="post" action="" style="display:none;">
-            <?php if($this->preloadShowForm){
-                echo $this->render('schedule/add-show-form.phtml');
-            }?>
+                <?php if ($this->preloadShowForm) {
+                    echo $this->render('schedule/add-show-form.phtml');
+                } ?>
             </form>
         </td>
         <td id="schedule_calendar_cell">
             <div id='schedule_calendar' class="ui-widget-content block-shadow padded omega-block"></div>
         </td>
-     </tr>
+    </tr>
 </table>
diff --git a/legacy/application/views/scripts/schedule/show-content-dialog.phtml b/legacy/application/views/scripts/schedule/show-content-dialog.phtml
index 799b10d2a..a43600995 100644
--- a/legacy/application/views/scripts/schedule/show-content-dialog.phtml
+++ b/legacy/application/views/scripts/schedule/show-content-dialog.phtml
@@ -1,31 +1,35 @@
 <div id="show_content_dialog">
-<div><?php echo $this->additionalShowInfo; ?></div>
-<table width="100%" border="0" cellspacing="0" cellpadding="0" class="datatable">
-    <tr>
-        <th><?php echo _("Start") ?></th>
-        <th><?php echo _("Title") ?></th>
-        <th><?php echo _("Creator") ?></th>
-        <th><?php echo _("Album") ?></th>
-        <th><?php echo _("Length") ?></th>
-        <th><?php echo _("Genre") ?></th>
-    </tr>
-<?php $i=0; ?>
-<?php foreach($this->showContent as $row): ?>
-    <tr id="au_<?php echo $row["item_id"] ?>" class="<?php if($i&1){echo "even";}else{echo "odd";}?>">
-        <td><?php echo $row["starts"] ?></td>
-        <td><?php echo $this->escape($row["track_title"]) ?></td>
-        <td><?php echo $this->escape($row["creator"]) ?></td>
-        <td><?php echo $this->escape($row["album"]) ?></td>
-        <td class="library_length"><?php echo $row["length"] ?></td>
-        <td><?php echo $row["genre"] ?></td>
-    </tr>
-<?php $i=$i+1; ?>
-<?php endforeach; ?>
-</table>
-<br/>
-<div id="show_time_info">
-    <span id="show_time_filled" class="time"><?php echo $this->timeFilled; ?></span>
-    <div id="show_progressbar"></div>
-    <span id="show_length" class="time"><?php echo $this->showLength; ?></span>
-</div>
+    <div><?php echo $this->additionalShowInfo; ?></div>
+    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="datatable">
+        <tr>
+            <th><?php echo _("Start") ?></th>
+            <th><?php echo _("Title") ?></th>
+            <th><?php echo _("Creator") ?></th>
+            <th><?php echo _("Album") ?></th>
+            <th><?php echo _("Length") ?></th>
+            <th><?php echo _("Genre") ?></th>
+        </tr>
+        <?php $i = 0; ?>
+        <?php foreach ($this->showContent as $row) : ?>
+            <tr id="au_<?php echo $row["item_id"] ?>" class="<?php if ($i & 1) {
+                                                                    echo "even";
+                                                                } else {
+                                                                    echo "odd";
+                                                                } ?>">
+                <td><?php echo $row["starts"] ?></td>
+                <td><?php echo $this->escape($row["track_title"]) ?></td>
+                <td><?php echo $this->escape($row["creator"]) ?></td>
+                <td><?php echo $this->escape($row["album"]) ?></td>
+                <td class="library_length"><?php echo $row["length"] ?></td>
+                <td><?php echo $row["genre"] ?></td>
+            </tr>
+            <?php $i = $i + 1; ?>
+        <?php endforeach; ?>
+    </table>
+    <br />
+    <div id="show_time_info">
+        <span id="show_time_filled" class="time"><?php echo $this->timeFilled; ?></span>
+        <div id="show_progressbar"></div>
+        <span id="show_length" class="time"><?php echo $this->showLength; ?></span>
+    </div>
 </div>
diff --git a/legacy/application/views/scripts/showbuilder/builderDialog.phtml b/legacy/application/views/scripts/showbuilder/builderDialog.phtml
index 1f82b6800..937d3942a 100644
--- a/legacy/application/views/scripts/showbuilder/builderDialog.phtml
+++ b/legacy/application/views/scripts/showbuilder/builderDialog.phtml
@@ -1,13 +1,15 @@
-<div><!-- jQuery UI changes the styling on the outermost div; use a blank div so as not to break the .wrapper styling-->
+<div>
+    <!-- jQuery UI changes the styling on the outermost div; use a blank div so as not to break the .wrapper styling-->
     <div class="wrapper">
         <div id="media_selector_wrapper">
-            <?php $subnavPrefix = ""; require_once APPLICATION_PATH . "/views/scripts/partialviews/dashboard-sub-nav.php"; ?>
+            <?php $subnavPrefix = "";
+            require_once APPLICATION_PATH . "/views/scripts/partialviews/dashboard-sub-nav.php"; ?>
         </div>
         <?php echo $this->csrf ?>
 
         <div id="library_content" class="lib-content tabs content-pane wide-panel">
             <div>
-                <h2 id="library_title"><?php echo _("Dashboard")." - " ?><span id="library_filter"></span></h2>
+                <h2 id="library_title"><?php echo _("Dashboard") . " - " ?><span id="library_filter"></span></h2>
             </div>
             <div class="panel-header-calendar">
                 <div id="advanced-options" class="btn-group">
diff --git a/legacy/application/views/scripts/showbuilder/index.phtml b/legacy/application/views/scripts/showbuilder/index.phtml
index b5093d583..cad2f70e5 100644
--- a/legacy/application/views/scripts/showbuilder/index.phtml
+++ b/legacy/application/views/scripts/showbuilder/index.phtml
@@ -2,7 +2,7 @@
 
 <div id="library_content" class="lib-content tabs content-pane wide-panel">
     <div>
-        <h2 id="library_title"><?php echo _("Dashboard")." - " ?><span id="library_filter"></span></h2>
+        <h2 id="library_title"><?php echo _("Dashboard") . " - " ?><span id="library_filter"></span></h2>
     </div>
     <div class="panel-header">
         <div id="advanced-options" class="btn-group">
diff --git a/legacy/application/views/scripts/systemstatus/index.phtml b/legacy/application/views/scripts/systemstatus/index.phtml
index bde95a53a..02391b3db 100644
--- a/legacy/application/views/scripts/systemstatus/index.phtml
+++ b/legacy/application/views/scripts/systemstatus/index.phtml
@@ -3,22 +3,22 @@
 </head>
 
 <?php
-    $phpDependencies = checkPhpDependencies();
-    $externalServices = checkExternalServices();
-    $postgres = $phpDependencies["postgres"];
+$phpDependencies = checkPhpDependencies();
+$externalServices = checkExternalServices();
+$postgres = $phpDependencies["postgres"];
 
-    $database =      $externalServices["database"];
-    $rabbitmq =      $externalServices["rabbitmq"];
+$database =      $externalServices["database"];
+$rabbitmq =      $externalServices["rabbitmq"];
 
-    $pypo =          $externalServices["pypo"];
-    $liquidsoap =    $externalServices["liquidsoap"];
-    $analyzer =      $externalServices["analyzer"];
-    $celery =        $externalServices['celery'];
-    $api =           $externalServices['api'];
+$pypo =          $externalServices["pypo"];
+$liquidsoap =    $externalServices["liquidsoap"];
+$analyzer =      $externalServices["analyzer"];
+$celery =        $externalServices['celery'];
+$api =           $externalServices['api'];
 
-    $r1 = array_reduce($phpDependencies, "booleanReduce", true);
-    $r2 = array_reduce($externalServices, "booleanReduce", true);
-    $result = $r1 && $r2;
+$r1 = array_reduce($phpDependencies, "booleanReduce", true);
+$r2 = array_reduce($externalServices, "booleanReduce", true);
+$result = $r1 && $r2;
 ?>
 
 <table width="60%" cellpadding="0" cellspacing="0" border="0" class="statustable">
@@ -41,14 +41,15 @@
             <td class="description">
                 <?php echo _("PDO and PostgreSQL libraries") ?>
             </td>
-            <td class="solution <?php if ($postgres) {echo 'check';?>">
+            <td class="solution <?php if ($postgres) {
+                                    echo 'check'; ?>">
                 <?php
-                    } else {
-                        ?>">
-                        Try running <code>sudo apt-get install php7-pgsql</code>
-                    <?php
-                    }
-                ?>
+                                } else {
+                ?>">
+                Try running <code>sudo apt-get install php7-pgsql</code>
+            <?php
+                                }
+            ?>
             </td>
         </tr>
         <tr>
@@ -58,16 +59,17 @@
             <td class="description">
                 <?php echo _("Database configuration for LibreTime") ?>
             </td>
-            <td class="solution <?php if ($database) {echo 'check';?>">
+            <td class="solution <?php if ($database) {
+                                    echo 'check'; ?>">
                 <?php
-                } else {
-                    ?>">
-                    Make sure you aren't missing any of the Postgres dependencies in the table above.
-                    If your dependencies check out, make sure your database configuration settings in
-                    <code>/etc/libretime/config.yml</code> are correct and the LibreTime database was installed correctly.
-                <?php
-                }
-                ?>
+                                } else {
+                ?>">
+                Make sure you aren't missing any of the Postgres dependencies in the table above.
+                If your dependencies check out, make sure your database configuration settings in
+                <code>/etc/libretime/config.yml</code> are correct and the LibreTime database was installed correctly.
+            <?php
+                                }
+            ?>
             </td>
         </tr>
         <tr>
@@ -77,18 +79,19 @@
             <td class="description">
                 <?php echo _("RabbitMQ configuration for LibreTime") ?>
             </td>
-            <td class="solution <?php if ($rabbitmq) {echo 'check';?>">
+            <td class="solution <?php if ($rabbitmq) {
+                                    echo 'check'; ?>">
                 <?php
-                } else {
-                    ?>">
-                    Make sure RabbitMQ is installed correctly, and that your settings in /etc/libretime/config.yml
-                    are correct. Try using <code>sudo rabbitmqctl list_users</code> and <code>sudo rabbitmqctl list_vhosts</code>
-                    to see if the airtime user (or your custom RabbitMQ user) exists, then checking that
-                    <code>sudo rabbitmqctl list_exchanges</code> contains entries for airtime-analyzer, airtime-pypo,
-                    and airtime-uploads.
-                <?php
-                }
-                ?>
+                                } else {
+                ?>">
+                Make sure RabbitMQ is installed correctly, and that your settings in /etc/libretime/config.yml
+                are correct. Try using <code>sudo rabbitmqctl list_users</code> and <code>sudo rabbitmqctl list_vhosts</code>
+                to see if the airtime user (or your custom RabbitMQ user) exists, then checking that
+                <code>sudo rabbitmqctl list_exchanges</code> contains entries for airtime-analyzer, airtime-pypo,
+                and airtime-uploads.
+            <?php
+                                }
+            ?>
             </td>
         </tr>
         <tr>
@@ -98,17 +101,18 @@
             <td class="description">
                 <?php echo _("LibreTime media analyzer service") ?>
             </td>
-            <td class="solution <?php if ($analyzer) {echo 'check';?>">
+            <td class="solution <?php if ($analyzer) {
+                                    echo 'check'; ?>">
                 <?php
-                } else {
-                    ?>">
-                    <?php echo _("Check that the libretime-analyzer service is installed correctly in ") ?><code>/etc/systemd/system/</code>,
-                    <?php echo _(" and ensure that it's running with ") ?>
-                    <br/><code>systemctl status libretime-analyzer</code><br/>
-                    <?php echo _("If not, try ") ?><br/><code>sudo systemctl restart libretime-analyzer</code>
-                <?php
-                }
-                ?>
+                                } else {
+                ?>">
+                <?php echo _("Check that the libretime-analyzer service is installed correctly in ") ?><code>/etc/systemd/system/</code>,
+                <?php echo _(" and ensure that it's running with ") ?>
+                <br /><code>systemctl status libretime-analyzer</code><br />
+                <?php echo _("If not, try ") ?><br /><code>sudo systemctl restart libretime-analyzer</code>
+            <?php
+                                }
+            ?>
             </td>
         </tr>
         <tr>
@@ -118,17 +122,18 @@
             <td class="description">
                 <?php echo _("LibreTime playout service") ?>
             </td>
-            <td class="solution <?php if ($pypo) {echo 'check';?>">
+            <td class="solution <?php if ($pypo) {
+                                    echo 'check'; ?>">
                 <?php
-                } else {
-                    ?>">
-                    <?php echo _("Check that the libretime-playout service is installed correctly in ") ?><code>/etc/systemd/system/</code>,
-                    <?php echo _(" and ensure that it's running with ") ?>
-                    <br/><code>systemctl status libretime-playout</code><br/>
-                    <?php echo _("If not, try ") ?><br/><code>sudo systemctl restart libretime-playout</code>
-                <?php
-                }
-                ?>
+                                } else {
+                ?>">
+                <?php echo _("Check that the libretime-playout service is installed correctly in ") ?><code>/etc/systemd/system/</code>,
+                <?php echo _(" and ensure that it's running with ") ?>
+                <br /><code>systemctl status libretime-playout</code><br />
+                <?php echo _("If not, try ") ?><br /><code>sudo systemctl restart libretime-playout</code>
+            <?php
+                                }
+            ?>
             </td>
         </tr>
         <tr>
@@ -138,17 +143,18 @@
             <td class="description">
                 <?php echo _("LibreTime liquidsoap service") ?>
             </td>
-            <td class="solution <?php if ($liquidsoap) {echo 'check';?>" >
+            <td class="solution <?php if ($liquidsoap) {
+                                    echo 'check'; ?>">
                 <?php
-                } else {
-                    ?>">
-                    <?php echo _("Check that the libretime-liquidsoap service is installed correctly in ") ?><code>/etc/systemd/system/</code>,
-                    <?php echo _(" and ensure that it's running with ") ?>
-                    <br/><code>systemctl status libretime-liquidsoap</code><br/>
-                    <?php echo _("If not, try ") ?><br/><code>sudo systemctl restart libretime-liquidsoap</code>
-                <?php
-                }
-                ?>
+                                } else {
+                ?>">
+                <?php echo _("Check that the libretime-liquidsoap service is installed correctly in ") ?><code>/etc/systemd/system/</code>,
+                <?php echo _(" and ensure that it's running with ") ?>
+                <br /><code>systemctl status libretime-liquidsoap</code><br />
+                <?php echo _("If not, try ") ?><br /><code>sudo systemctl restart libretime-liquidsoap</code>
+            <?php
+                                }
+            ?>
             </td>
         </tr>
         <tr>
@@ -158,17 +164,18 @@
             <td class="description">
                 <?php echo _("LibreTime Celery Task service") ?>
             </td>
-            <td class="solution <?php if ($celery) {echo 'check';?>" >
+            <td class="solution <?php if ($celery) {
+                                    echo 'check'; ?>">
                 <?php
-                } else {
-                    ?>">
-                    <?php echo _("Check that the libretime-celery service is installed correctly in ") ?><code>/etc/systemd/system/</code>,
-                    <?php echo _(" and ensure that it's running with ") ?>
-                    <br/><code>systemctl status libretime-celery</code><br/>
-                    <?php echo _("If not, try ") ?><br/><code>sudo systemctl restart libretime-celery</code>
-                <?php
-                }
-                ?>
+                                } else {
+                ?>">
+                <?php echo _("Check that the libretime-celery service is installed correctly in ") ?><code>/etc/systemd/system/</code>,
+                <?php echo _(" and ensure that it's running with ") ?>
+                <br /><code>systemctl status libretime-celery</code><br />
+                <?php echo _("If not, try ") ?><br /><code>sudo systemctl restart libretime-celery</code>
+            <?php
+                                }
+            ?>
             </td>
         </tr>
         <tr>
@@ -178,17 +185,18 @@
             <td class="description">
                 <?php echo _("LibreTime API service") ?>
             </td>
-            <td class="solution <?php if ($api) {echo 'check';?>" >
+            <td class="solution <?php if ($api) {
+                                    echo 'check'; ?>">
                 <?php
-                } else {
-                    ?>">
-                    <?php echo _("Check that the libretime-api service is installed correctly in ") ?><code>/etc/systemd/system/</code>,
-                    <?php echo _(" and ensure that it's running with ") ?>
-                    <br/><code>systemctl status libretime-api</code><br/>
-                    <?php echo _("If not, try ") ?><br/><code>sudo systemctl restart libretime-api</code>
-                <?php
-                }
-                ?>
+                                } else {
+                ?>">
+                <?php echo _("Check that the libretime-api service is installed correctly in ") ?><code>/etc/systemd/system/</code>,
+                <?php echo _(" and ensure that it's running with ") ?>
+                <br /><code>systemctl status libretime-api</code><br />
+                <?php echo _("If not, try ") ?><br /><code>sudo systemctl restart libretime-api</code>
+            <?php
+                                }
+            ?>
             </td>
         </tr>
     </tbody>
diff --git a/legacy/application/views/scripts/tracktype/add-tracktype.phtml b/legacy/application/views/scripts/tracktype/add-tracktype.phtml
index db25591da..d20fc549a 100644
--- a/legacy/application/views/scripts/tracktype/add-tracktype.phtml
+++ b/legacy/application/views/scripts/tracktype/add-tracktype.phtml
@@ -1,4 +1,3 @@
-
 <div class="ui-widget prefpanel clearfix padded-strong tracktype-management">
 
     <h2><?php echo _("Manage Track Types") ?></h2>
@@ -8,7 +7,7 @@
             <div class="button-holder">
                 <button type="button" id="add_tracktype_button" name="search_add_group" class="ui-button ui-widget  ui-button-text-icon-primary btn">
                     <span class="ui-icon ui-icon-plusthick"></span>
-                    <span class="ui-button-text"><?php echo _("New Track Type")?></span>
+                    <span class="ui-button-text"><?php echo _("New Track Type") ?></span>
                 </button>
             </div>
 
@@ -17,9 +16,9 @@
                     <tr>
                         <th><?php echo _("id") ?></th>
                         <th><?php echo _("Code") ?></th>
-                        <th><?php echo _("Label")?></th>
-                        <th><?php echo _("Description")?></th>
-                        <th><?php echo _("Visibility")?></th>
+                        <th><?php echo _("Label") ?></th>
+                        <th><?php echo _("Description") ?></th>
+                        <th><?php echo _("Visibility") ?></th>
                         <th>&nbsp;</th>
                     </tr>
                 </thead>
diff --git a/legacy/application/views/scripts/tracktype/get-tracktype-data.phtml b/legacy/application/views/scripts/tracktype/get-tracktype-data.phtml
index f9696f033..88cdeb3eb 100644
--- a/legacy/application/views/scripts/tracktype/get-tracktype-data.phtml
+++ b/legacy/application/views/scripts/tracktype/get-tracktype-data.phtml
@@ -1,3 +1,2 @@
 <?php
-    echo $this->entries;
-?>
+echo $this->entries;
diff --git a/legacy/application/views/scripts/tracktype/remove-tracktype.phtml b/legacy/application/views/scripts/tracktype/remove-tracktype.phtml
index c1d521bb3..88cdeb3eb 100644
--- a/legacy/application/views/scripts/tracktype/remove-tracktype.phtml
+++ b/legacy/application/views/scripts/tracktype/remove-tracktype.phtml
@@ -1,3 +1,2 @@
 <?php
 echo $this->entries;
-?>
diff --git a/legacy/application/views/scripts/user/add-user.phtml b/legacy/application/views/scripts/user/add-user.phtml
index f193c6252..3e4d44b7c 100644
--- a/legacy/application/views/scripts/user/add-user.phtml
+++ b/legacy/application/views/scripts/user/add-user.phtml
@@ -7,7 +7,7 @@
             <div class="button-holder">
                 <button type="button" id="add_user_button" name="search_add_group" class="ui-button ui-widget  ui-button-text-icon-primary btn">
                     <span class="ui-icon ui-icon-plusthick"></span>
-                    <span class="ui-button-text"><?php echo _("New User")?></span>
+                    <span class="ui-button-text"><?php echo _("New User") ?></span>
                 </button>
             </div>
 
@@ -16,9 +16,9 @@
                     <tr>
                         <th><?php echo _("id") ?></th>
                         <th><?php echo _("Username") ?></th>
-                        <th><?php echo _("First Name")?></th>
-                        <th><?php echo _("Last Name")?></th>
-                        <th><?php echo _("User Type")?></th>
+                        <th><?php echo _("First Name") ?></th>
+                        <th><?php echo _("Last Name") ?></th>
+                        <th><?php echo _("User Type") ?></th>
                         <th>&nbsp;</th>
                     </tr>
                 </thead>
diff --git a/legacy/application/views/scripts/user/edit-user.phtml b/legacy/application/views/scripts/user/edit-user.phtml
index 984993bc9..bc5b53127 100644
--- a/legacy/application/views/scripts/user/edit-user.phtml
+++ b/legacy/application/views/scripts/user/edit-user.phtml
@@ -1,4 +1,4 @@
 <div class="prefpanel clearfix padded-strong edit-current-user">
-<?php echo $this->successMessage ?>
-<?php echo $this->form?>
+    <?php echo $this->successMessage ?>
+    <?php echo $this->form ?>
 </div>
diff --git a/legacy/application/views/scripts/user/get-user-data.phtml b/legacy/application/views/scripts/user/get-user-data.phtml
index f9696f033..88cdeb3eb 100644
--- a/legacy/application/views/scripts/user/get-user-data.phtml
+++ b/legacy/application/views/scripts/user/get-user-data.phtml
@@ -1,3 +1,2 @@
 <?php
-    echo $this->entries;
-?>
+echo $this->entries;
diff --git a/legacy/application/views/scripts/user/remove-user.phtml b/legacy/application/views/scripts/user/remove-user.phtml
index c1d521bb3..88cdeb3eb 100644
--- a/legacy/application/views/scripts/user/remove-user.phtml
+++ b/legacy/application/views/scripts/user/remove-user.phtml
@@ -1,3 +1,2 @@
 <?php
 echo $this->entries;
-?>
diff --git a/legacy/application/views/scripts/webstream/webstream.phtml b/legacy/application/views/scripts/webstream/webstream.phtml
index 45f39084b..3ddade9dd 100644
--- a/legacy/application/views/scripts/webstream/webstream.phtml
+++ b/legacy/application/views/scripts/webstream/webstream.phtml
@@ -1,43 +1,44 @@
 <?php if (isset($this->obj)) : ?>
-    <input class="obj_id" type="hidden" value="<?php echo $this->obj->getId(); ?>"/>
-    <input class="obj_lastMod" type="hidden" value="<?php echo "1";//$this->obj->getLastModified('U'); ?>"/>
-    <input class="obj_type" type="hidden" value="webstream"/>
+    <input class="obj_id" type="hidden" value="<?php echo $this->obj->getId(); ?>" />
+    <input class="obj_lastMod" type="hidden" value="<?php echo "1"; //$this->obj->getLastModified('U');
+                                                    ?>" />
+    <input class="obj_type" type="hidden" value="webstream" />
     <div class="status" style="display:none;"></div>
 
     <div class="inner_editor_title">
-        <H2><?php echo(_("Editing "));?>"<span class="title_obj_name"><?php if (isset($this->unsavedName)) echo $this->unsavedName;
-                else echo $this->escape($this->obj->getName());?></span>"</H2>
+        <H2><?php echo (_("Editing ")); ?>"<span class="title_obj_name"><?php if (isset($this->unsavedName)) echo $this->unsavedName;
+                                                                        else echo $this->escape($this->obj->getName()); ?></span>"</H2>
     </div>
 
-<div class="inner_editor_wrapper">
+    <div class="inner_editor_wrapper">
 
 
-    <dl class="zend_form side_playlist playlist_editor">
-        <dt>
-            <label><?php echo(_("Name:")); ?></label>
-        </dt>
-        <dd>
-            <div id="name-error" class="errors" style="display:none;"></div>
-            <input class="playlist_name_display" type="text" contenteditable="true" value="<?php echo $this->escape($this->obj->getName()); ?>">
-        </dd>
+        <dl class="zend_form side_playlist playlist_editor">
+            <dt>
+                <label><?php echo (_("Name:")); ?></label>
+            </dt>
+            <dd>
+                <div id="name-error" class="errors" style="display:none;"></div>
+                <input class="playlist_name_display" type="text" contenteditable="true" value="<?php echo $this->escape($this->obj->getName()); ?>">
+            </dd>
 
-        <dt id="description-label"><label for="description"><?php echo _("Description") ?></label></dt>
-        <dd id="description-element">
-            <textarea cols="80" rows="24" id="description" name="description"><?php echo $this->obj->getDescription(); ?></textarea>
-        </dd>
-        <dt id="submit-label" style="display: none;">&nbsp;</dt>
-        <div id="url-error" class="errors" style="display:none;"></div>
-        <dt id="streamurl-label"><label for="streamurl"><?php echo _("Stream URL:"); ?></label></dt>
-        <dd id="streamurl-element">
-        <input type="url" value="<?php echo $this->obj->getUrl(); ?>" size="40"/>
-        </dd>
-        <div id="length-error" class="errors" style="display:none;"></div>
-        <dt id="streamlength-label"><label for="streamlength"><?php echo _("Default Length:"); ?></label></dt>
-        <dd id="streamlength-element">
-        <input type="text" value="<?php echo $this->obj->getDefaultLength() ?>"/>
-        </dd>
-    </dl>
-</div>
+            <dt id="description-label"><label for="description"><?php echo _("Description") ?></label></dt>
+            <dd id="description-element">
+                <textarea cols="80" rows="24" id="description" name="description"><?php echo $this->obj->getDescription(); ?></textarea>
+            </dd>
+            <dt id="submit-label" style="display: none;">&nbsp;</dt>
+            <div id="url-error" class="errors" style="display:none;"></div>
+            <dt id="streamurl-label"><label for="streamurl"><?php echo _("Stream URL:"); ?></label></dt>
+            <dd id="streamurl-element">
+                <input type="url" value="<?php echo $this->obj->getUrl(); ?>" size="40" />
+            </dd>
+            <div id="length-error" class="errors" style="display:none;"></div>
+            <dt id="streamlength-label"><label for="streamlength"><?php echo _("Default Length:"); ?></label></dt>
+            <dd id="streamlength-element">
+                <input type="text" value="<?php echo $this->obj->getDefaultLength() ?>" />
+            </dd>
+        </dl>
+    </div>
 
 
     <div class="btn-toolbar clearfix">
diff --git a/legacy/public/js/airtime/airtime_bootstrap.js b/legacy/public/js/airtime/airtime_bootstrap.js
index 632d61627..121ef0f54 100644
--- a/legacy/public/js/airtime/airtime_bootstrap.js
+++ b/legacy/public/js/airtime/airtime_bootstrap.js
@@ -1,5 +1,5 @@
-$(document).ready(function() {
-    $.ajaxSetup({
-      cache: false
-    });
+$(document).ready(function () {
+  $.ajaxSetup({
+    cache: false,
+  });
 });
diff --git a/legacy/public/js/airtime/audiopreview/preview_jplayer.js b/legacy/public/js/airtime/audiopreview/preview_jplayer.js
index 5bbbb8993..a53e1448d 100644
--- a/legacy/public/js/airtime/audiopreview/preview_jplayer.js
+++ b/legacy/public/js/airtime/audiopreview/preview_jplayer.js
@@ -3,246 +3,273 @@ var _idToPostionLookUp;
 var URL_BAR_HEIGHT = 32;
 
 /**
-*When the page loads the ready function will get all the data it can from the hidden span elements
-*and call one of three functions depending on weather the window was open to play an audio file,
-*or a playlist or a show.
-*/
-$(document).ready(function(){
+ *When the page loads the ready function will get all the data it can from the hidden span elements
+ *and call one of three functions depending on weather the window was open to play an audio file,
+ *or a playlist or a show.
+ */
+$(document).ready(function () {
+  $.jPlayer.timeFormat.showHour = true;
 
-    $.jPlayer.timeFormat.showHour = true;
+  var audioUri = $(".audioUri").text();
+  var audioMime = $(".audioMime").text();
+  var playlistID = $(".playlistID").text();
+  var playlistIndex = $(".playlistIndex").text();
+  var showID = $(".showID").text();
+  var showIndex = $(".showIndex").text();
+  var blockId = $(".blockId").text();
+  var blockIndex = $(".blockIndex").text();
 
-    var audioUri = $('.audioUri').text();
-    var audioMime = $('.audioMime').text();
-    var playlistID = $('.playlistID').text();
-    var playlistIndex = $('.playlistIndex').text();
-    var showID = $('.showID').text();
-    var showIndex = $('.showIndex').text();
-    var blockId = $('.blockId').text();
-    var blockIndex = $('.blockIndex').text();
-
-    _playlist_jplayer = new jPlayerPlaylist({
-        jPlayer: "#jquery_jplayer_1",
-        cssSelectorAncestor: "#jp_container_1"
-    },[], //array of songs will be filled with below's json call
+  _playlist_jplayer = new jPlayerPlaylist(
     {
-        swfPath: baseUrl+"js/jplayer",
-        supplied:"oga, mp3, m4v, m4a, wav",
-        size: {
-            width: "0px",
-            height: "0px",
-            cssClass: "jp-video-270p"
-        },
-        playlistOptions: {
-            autoPlay: false,
-            loopOnPrevious: false,
-            shuffleOnLoop: true,
-            enableRemoveControls: false,
-            displayTime: 0,
-            addTime: 0,
-            removeTime: 0,
-            shuffleTime: 0
-        },
-        ready: function(){
-            if (playlistID != "" && playlistID !== ""){
-                playAllPlaylist(playlistID, playlistIndex);
-            }else if (audioUri != "") {
-                playOne(audioUri, audioMime);
-            }else if (showID != "") {
-                playAllShow(showID, showIndex);
-            }else if(blockId != "" && blockIndex != ""){
-                playBlock(blockId, blockIndex);
-            }
+      jPlayer: "#jquery_jplayer_1",
+      cssSelectorAncestor: "#jp_container_1",
+    },
+    [], //array of songs will be filled with below's json call
+    {
+      swfPath: baseUrl + "js/jplayer",
+      supplied: "oga, mp3, m4v, m4a, wav",
+      size: {
+        width: "0px",
+        height: "0px",
+        cssClass: "jp-video-270p",
+      },
+      playlistOptions: {
+        autoPlay: false,
+        loopOnPrevious: false,
+        shuffleOnLoop: true,
+        enableRemoveControls: false,
+        displayTime: 0,
+        addTime: 0,
+        removeTime: 0,
+        shuffleTime: 0,
+      },
+      ready: function () {
+        if (playlistID != "" && playlistID !== "") {
+          playAllPlaylist(playlistID, playlistIndex);
+        } else if (audioUri != "") {
+          playOne(audioUri, audioMime);
+        } else if (showID != "") {
+          playAllShow(showID, showIndex);
+        } else if (blockId != "" && blockIndex != "") {
+          playBlock(blockId, blockIndex);
         }
-    });
+      },
+    }
+  );
 
-    $("#jp_container_1").on("mouseenter", "ul.jp-controls li", function(ev) {
-    	$(this).addClass("ui-state-hover");
-    });
-
-    $("#jp_container_1").on("mouseleave", "ul.jp-controls li", function(ev) {
-    	$(this).removeClass("ui-state-hover");
-    });
+  $("#jp_container_1").on("mouseenter", "ul.jp-controls li", function (ev) {
+    $(this).addClass("ui-state-hover");
+  });
 
+  $("#jp_container_1").on("mouseleave", "ul.jp-controls li", function (ev) {
+    $(this).removeClass("ui-state-hover");
+  });
 });
 
 /**
-* Sets up the jPlayerPlaylist to play.
-*  - Get the playlist info based on the playlistID give.
-*  - Update the playlistIndex to the position in the pllist to start playing.
-*  - Select the element played from and start playing. If playlist is null then start at index 0.
-**/
+ * Sets up the jPlayerPlaylist to play.
+ *  - Get the playlist info based on the playlistID give.
+ *  - Update the playlistIndex to the position in the pllist to start playing.
+ *  - Select the element played from and start playing. If playlist is null then start at index 0.
+ **/
 function playAllPlaylist(p_playlistID, p_playlistIndex) {
-    var viewsPlaylistID = $('.playlistID').text();
+  var viewsPlaylistID = $(".playlistID").text();
 
-    if ( _idToPostionLookUp !== undefined && viewsPlaylistID == p_playlistID ) {
-        play(p_playlistIndex);
-    }else {
-        buildplaylist(baseUrl+"audiopreview/get-playlist/playlistID/"+p_playlistID, p_playlistIndex);
-    }
+  if (_idToPostionLookUp !== undefined && viewsPlaylistID == p_playlistID) {
+    play(p_playlistIndex);
+  } else {
+    buildplaylist(
+      baseUrl + "audiopreview/get-playlist/playlistID/" + p_playlistID,
+      p_playlistIndex
+    );
+  }
 }
 
-function playBlock(p_blockId, p_blockIndex)
-{
-    var viewsBlockId = $('.blockId').text();
+function playBlock(p_blockId, p_blockIndex) {
+  var viewsBlockId = $(".blockId").text();
 
-    if ( _idToPostionLookUp !== undefined && viewsBlockId == p_blockId ) {
-        play(p_blockIndex);
-    } else {
-        buildplaylist(baseUrl+"audiopreview/get-block/blockId/"+p_blockId, p_blockIndex);
-    }
+  if (_idToPostionLookUp !== undefined && viewsBlockId == p_blockId) {
+    play(p_blockIndex);
+  } else {
+    buildplaylist(
+      baseUrl + "audiopreview/get-block/blockId/" + p_blockId,
+      p_blockIndex
+    );
+  }
 }
 
 /**
-* Sets up the show to play.
-*  checks with the show id given to the show id on the page/view
-*      if the show id and the page or views show id are the same it means the user clicked another
-*          file in the same show, so don't refresh the show content tust play the track from the preloaded show.
-*      if the the ids are different they we'll need to get the show's context so create the uri
-*      and call the controller.
-**/
+ * Sets up the show to play.
+ *  checks with the show id given to the show id on the page/view
+ *      if the show id and the page or views show id are the same it means the user clicked another
+ *          file in the same show, so don't refresh the show content tust play the track from the preloaded show.
+ *      if the the ids are different they we'll need to get the show's context so create the uri
+ *      and call the controller.
+ **/
 function playAllShow(p_showID, p_index) {
-
-    var viewsShowID = $('.showID').text();
-    if ( _idToPostionLookUp !== undefined && viewsShowID == p_showID ) {
-        play(p_index);
-    }else {
-        buildplaylist(baseUrl+"audiopreview/get-show/showID/"+p_showID, p_index);
-    }
+  var viewsShowID = $(".showID").text();
+  if (_idToPostionLookUp !== undefined && viewsShowID == p_showID) {
+    play(p_index);
+  } else {
+    buildplaylist(
+      baseUrl + "audiopreview/get-show/showID/" + p_showID,
+      p_index
+    );
+  }
 }
 
 /**
-* This function will call the AudiopreviewController to get the contents of
-* either a show or playlist Looping throught the returned contents and
-* creating media for each track.
-*
-* Then trigger the jplayer to play the list.
-*/
+ * This function will call the AudiopreviewController to get the contents of
+ * either a show or playlist Looping throught the returned contents and
+ * creating media for each track.
+ *
+ * Then trigger the jplayer to play the list.
+ */
 function buildplaylist(p_url, p_playIndex) {
-    _idToPostionLookUp = Array();
-    $.getJSON(p_url, function(data){  // get the JSON array produced by my PHP
-        var myPlaylist = new Array();
-        var media;
-        var index;
-        var total = 0;
-        var skipped = 0;
+  _idToPostionLookUp = Array();
+  $.getJSON(p_url, function (data) {
+    // get the JSON array produced by my PHP
+    var myPlaylist = new Array();
+    var media;
+    var index;
+    var total = 0;
+    var skipped = 0;
 
-        for(index in data) {
-            if (data[index]['type'] == 0) {
-                if (data[index]['element_mp3'] != undefined){
-                    media = {title: data[index]['element_title'],
-                            artist: data[index]['element_artist'],
-                            mp3:data[index]['uri']
-                    };
-                } else if (data[index]['element_oga'] != undefined) {
-                    media = {title: data[index]['element_title'],
-                            artist: data[index]['element_artist'],
-                            oga:data[index]['uri']
-                    };
-                } else if (data[index]['element_m4a'] != undefined) {
-                    media = {title: data[index]['element_title'],
-                            artist: data[index]['element_artist'],
-                            m4a:data[index]['uri']
-                    };
-                } else if (data[index]['element_wav'] != undefined) {
-                    media = {title: data[index]['element_title'],
-                            artist: data[index]['element_artist'],
-                            wav:data[index]['uri']
-                    };
-                } else {
-                    // skip this track since it's not supported
-                    console.log("continue");
-                    skipped++;
-                    continue;
-                }
-            } else if (data[index]['type'] == 1) {
-                var mime = data[index]['mime'];
-                if (mime.search(/mp3/i) > 0 || mime.search(/mpeg/i) > 0) {
-                    key = "mp3";
-                } else if (mime.search(/og(g|a)/i) > 0 || mime.search(/vorbis/i) > 0) {
-                    key = "oga";
-                } else if (mime.search(/mp4/i) > 0) {
-                    key = "m4a";
-                } else if (mime.search(/wav/i) > 0) {
-                    key = "wav";
-                }
-
-                if (key) {
-                    media = {title: data[index]['element_title'],
-                            artist: data[index]['element_artist']
-                    };
-                    media[key] = data[index]['uri']
-                }
-            }
-            if (media && isAudioSupported(data[index]['mime'])) {
-                // javascript doesn't support associative array with numeric key
-                // so we need to remove the gap if we skip any of tracks due to
-                // browser incompatibility.
-                myPlaylist[index-skipped] = media;
-            }
-            // we should create a map according to the new position in the
-            // player itself total is the index on the player
-            _idToPostionLookUp[data[index]['element_id']] = total;
-            total++;
+    for (index in data) {
+      if (data[index]["type"] == 0) {
+        if (data[index]["element_mp3"] != undefined) {
+          media = {
+            title: data[index]["element_title"],
+            artist: data[index]["element_artist"],
+            mp3: data[index]["uri"],
+          };
+        } else if (data[index]["element_oga"] != undefined) {
+          media = {
+            title: data[index]["element_title"],
+            artist: data[index]["element_artist"],
+            oga: data[index]["uri"],
+          };
+        } else if (data[index]["element_m4a"] != undefined) {
+          media = {
+            title: data[index]["element_title"],
+            artist: data[index]["element_artist"],
+            m4a: data[index]["uri"],
+          };
+        } else if (data[index]["element_wav"] != undefined) {
+          media = {
+            title: data[index]["element_title"],
+            artist: data[index]["element_artist"],
+            wav: data[index]["uri"],
+          };
+        } else {
+          // skip this track since it's not supported
+          console.log("continue");
+          skipped++;
+          continue;
+        }
+      } else if (data[index]["type"] == 1) {
+        var mime = data[index]["mime"];
+        if (mime.search(/mp3/i) > 0 || mime.search(/mpeg/i) > 0) {
+          key = "mp3";
+        } else if (mime.search(/og(g|a)/i) > 0 || mime.search(/vorbis/i) > 0) {
+          key = "oga";
+        } else if (mime.search(/mp4/i) > 0) {
+          key = "m4a";
+        } else if (mime.search(/wav/i) > 0) {
+          key = "wav";
         }
-        _playlist_jplayer.setPlaylist(myPlaylist);
-        _playlist_jplayer.option("autoPlay", true);
-        play(p_playIndex);
 
-        window.scrollbars = false;
-
-        var container = $("#jp_container_1");
-        // Add 2px to account for borders
-        window.resizeTo(container.width() + 2, container.height() + URL_BAR_HEIGHT + 2);
-    });
-}
-
-/**
-*Function simply plays the given index, for playlists index can be different so need to look up the
-*right index.
-*/
-function play(p_playlistIndex){
-    playlistIndex = _idToPostionLookUp[p_playlistIndex];
-    if(playlistIndex == undefined){
-        playlistIndex = 0
+        if (key) {
+          media = {
+            title: data[index]["element_title"],
+            artist: data[index]["element_artist"],
+          };
+          media[key] = data[index]["uri"];
+        }
+      }
+      if (media && isAudioSupported(data[index]["mime"])) {
+        // javascript doesn't support associative array with numeric key
+        // so we need to remove the gap if we skip any of tracks due to
+        // browser incompatibility.
+        myPlaylist[index - skipped] = media;
+      }
+      // we should create a map according to the new position in the
+      // player itself total is the index on the player
+      _idToPostionLookUp[data[index]["element_id"]] = total;
+      total++;
     }
-    //_playlist_jplayer.select(playlistIndex);
-    _playlist_jplayer.play(playlistIndex);
-}
+    _playlist_jplayer.setPlaylist(myPlaylist);
+    _playlist_jplayer.option("autoPlay", true);
+    play(p_playIndex);
 
-/**
-* Playing one audio track occurs from the library. This function will create the media, setup
-* jplayer and play the track.
-*/
-function playOne(uri, mime) {
-    var playlist = new Array();
-
-    var media = null;
-    var key = null;
-    if (mime.search(/mp3/i) > 0 || mime.search(/mpeg/i) > 0) {
-        key = "mp3";
-    } else if (mime.search(/og(g|a)/i) > 0 || mime.search(/vorbis/i) > 0) {
-        key = "oga";
-    } else if (mime.search(/mp4/i) > 0) {
-        key = "m4a";
-    } else if (mime.search(/wav/i) > 0) {
-        key = "wav";
-    }
-
-    if (key) {
-        media = {title: $('.audioFileTitle').text() != 'null' ?$('.audioFileTitle').text():"",
-            artist: $('.audioFileArtist').text() != 'null' ?$('.audioFileArtist').text():""
-        };
-        media[key] = uri;
-    }
-
-    if (media) {
-        _playlist_jplayer.option("autoPlay", true);
-        playlist[0] = media;
-        _playlist_jplayer.setPlaylist(playlist);
-        _playlist_jplayer.play(0);
-    }
+    window.scrollbars = false;
 
     var container = $("#jp_container_1");
     // Add 2px to account for borders
-    window.resizeTo(container.width() + 2, container.height() + URL_BAR_HEIGHT + 2);
+    window.resizeTo(
+      container.width() + 2,
+      container.height() + URL_BAR_HEIGHT + 2
+    );
+  });
+}
+
+/**
+ *Function simply plays the given index, for playlists index can be different so need to look up the
+ *right index.
+ */
+function play(p_playlistIndex) {
+  playlistIndex = _idToPostionLookUp[p_playlistIndex];
+  if (playlistIndex == undefined) {
+    playlistIndex = 0;
+  }
+  //_playlist_jplayer.select(playlistIndex);
+  _playlist_jplayer.play(playlistIndex);
+}
+
+/**
+ * Playing one audio track occurs from the library. This function will create the media, setup
+ * jplayer and play the track.
+ */
+function playOne(uri, mime) {
+  var playlist = new Array();
+
+  var media = null;
+  var key = null;
+  if (mime.search(/mp3/i) > 0 || mime.search(/mpeg/i) > 0) {
+    key = "mp3";
+  } else if (mime.search(/og(g|a)/i) > 0 || mime.search(/vorbis/i) > 0) {
+    key = "oga";
+  } else if (mime.search(/mp4/i) > 0) {
+    key = "m4a";
+  } else if (mime.search(/wav/i) > 0) {
+    key = "wav";
+  }
+
+  if (key) {
+    media = {
+      title:
+        $(".audioFileTitle").text() != "null"
+          ? $(".audioFileTitle").text()
+          : "",
+      artist:
+        $(".audioFileArtist").text() != "null"
+          ? $(".audioFileArtist").text()
+          : "",
+    };
+    media[key] = uri;
+  }
+
+  if (media) {
+    _playlist_jplayer.option("autoPlay", true);
+    playlist[0] = media;
+    _playlist_jplayer.setPlaylist(playlist);
+    _playlist_jplayer.play(0);
+  }
+
+  var container = $("#jp_container_1");
+  // Add 2px to account for borders
+  window.resizeTo(
+    container.width() + 2,
+    container.height() + URL_BAR_HEIGHT + 2
+  );
 }
diff --git a/legacy/public/js/airtime/buttons/buttons.js b/legacy/public/js/airtime/buttons/buttons.js
index 6cd0728d7..5f0cb0b6d 100644
--- a/legacy/public/js/airtime/buttons/buttons.js
+++ b/legacy/public/js/airtime/buttons/buttons.js
@@ -1,50 +1,51 @@
-var AIRTIME = (function(AIRTIME) {
-    var mod, DEFAULT_CLASS = 'ui-button ui-state-default', DISABLED_CLASS = 'ui-state-disabled';
+var AIRTIME = (function (AIRTIME) {
+  var mod,
+    DEFAULT_CLASS = "ui-button ui-state-default",
+    DISABLED_CLASS = "ui-state-disabled";
 
-    if (AIRTIME.button === undefined) {
-        AIRTIME.button = {};
+  if (AIRTIME.button === undefined) {
+    AIRTIME.button = {};
+  }
+  mod = AIRTIME.button;
+
+  mod.isDisabled = function (c, useParent) {
+    var button = $("." + c);
+    if (useParent) {
+      button = button.parent();
     }
-    mod = AIRTIME.button;
 
-    mod.isDisabled = function(c, useParent) {
-        var button = $("." + c);
-        if (useParent) {
-            button = button.parent();
-        }
+    if (button.hasClass(DISABLED_CLASS)) {
+      return true;
+    }
 
-        if (button.hasClass(DISABLED_CLASS)) {
-            return true;
-        }
+    return false;
+  };
 
-        return false;
-    };
+  mod.enableButton = function (c, useParent) {
+    if (useParent) {
+      var button = $("." + c).parent();
+    } else {
+      var button = $("." + c);
+    }
 
-    mod.enableButton = function(c, useParent) {
-        if (useParent) {
-            var button = $("." + c).parent();
-        } else {
-            var button = $("." + c);
-        }
+    if (button.hasClass(DISABLED_CLASS)) {
+      button.removeClass(DISABLED_CLASS);
+      button.removeAttr("disabled");
+    }
+  };
 
-        if (button.hasClass(DISABLED_CLASS)) {
-            button.removeClass(DISABLED_CLASS);
-            button.removeAttr('disabled');
-        }
-    };
+  mod.disableButton = function (c, useParent) {
+    if (useParent) {
+      var button = $("." + c).parent();
+    } else {
+      var button = $("." + c);
+    }
 
-    mod.disableButton = function(c, useParent) {
-        if (useParent) {
-            var button = $("." + c).parent();
-        } else {
-            var button = $("." + c);
-        }
+    if (!button.hasClass(DISABLED_CLASS)) {
+      button.addClass(DISABLED_CLASS);
+      button.attr("disabled", "disabled");
+    }
+  };
 
-        if (!button.hasClass(DISABLED_CLASS)) {
-            button.addClass(DISABLED_CLASS);
-            button.attr('disabled', 'disabled');
-        }
-    };
-
-    return AIRTIME;
-
-}(AIRTIME || {}));
+  return AIRTIME;
+})(AIRTIME || {});
diff --git a/legacy/public/js/airtime/common/audioplaytest.js b/legacy/public/js/airtime/common/audioplaytest.js
index bc5f16a45..1742ac994 100644
--- a/legacy/public/js/airtime/common/audioplaytest.js
+++ b/legacy/public/js/airtime/common/audioplaytest.js
@@ -1,24 +1,28 @@
+function isAudioSupported(mime) {
+  var audio = new Audio();
 
-function isAudioSupported(mime){
-    var audio = new Audio();
+  if (typeof mime !== "string" || mime === null) {
+    return false;
+  }
 
-    if ((typeof mime) !== "string" || (mime === null)) {
-        return false;
-    }
+  var bMime = null;
+  if (mime.indexOf("ogg") != -1 || mime.indexOf("vorbis") != -1) {
+    bMime = 'audio/ogg; codecs="vorbis"';
+  } else {
+    bMime = mime;
+  }
 
-    var bMime = null;
-    if (mime.indexOf("ogg") != -1 || mime.indexOf("vorbis") != -1) {
-       bMime = 'audio/ogg; codecs="vorbis"';
-    } else {
-        bMime = mime;
-    }
-
-    //return a true of the browser can play this file natively, or if the
-    //file is an mp3 and flash is installed (jPlayer will fall back to flash to play mp3s).
-    //Note that checking the navigator.mimeTypes value does not work for IE7, but the alternative
-    //is adding a javascript library to do the work for you, which seems like overkill....
-    return (!!audio.canPlayType && audio.canPlayType(bMime) != "") ||
-        (mime.indexOf("mp3") != -1 && navigator.mimeTypes ["application/x-shockwave-flash"] != undefined) ||
-        (mime.indexOf("mp4") != -1 && navigator.mimeTypes ["application/x-shockwave-flash"] != undefined) ||
-        (mime.indexOf("mpeg") != -1 && navigator.mimeTypes ["application/x-shockwave-flash"] != undefined);
+  //return a true of the browser can play this file natively, or if the
+  //file is an mp3 and flash is installed (jPlayer will fall back to flash to play mp3s).
+  //Note that checking the navigator.mimeTypes value does not work for IE7, but the alternative
+  //is adding a javascript library to do the work for you, which seems like overkill....
+  return (
+    (!!audio.canPlayType && audio.canPlayType(bMime) != "") ||
+    (mime.indexOf("mp3") != -1 &&
+      navigator.mimeTypes["application/x-shockwave-flash"] != undefined) ||
+    (mime.indexOf("mp4") != -1 &&
+      navigator.mimeTypes["application/x-shockwave-flash"] != undefined) ||
+    (mime.indexOf("mpeg") != -1 &&
+      navigator.mimeTypes["application/x-shockwave-flash"] != undefined)
+  );
 }
diff --git a/legacy/public/js/airtime/common/common.js b/legacy/public/js/airtime/common/common.js
index 1d24f60e0..24e2fa8e3 100644
--- a/legacy/public/js/airtime/common/common.js
+++ b/legacy/public/js/airtime/common/common.js
@@ -1,17 +1,18 @@
 var previewWidth = 482,
-    previewHeight = 110;
+  previewHeight = 110;
 
-$(document).ready(function() {
+$(document).ready(function () {
+  /* Removed as this is now (hopefully) unnecessary */
+  //$("#Panel").stickyPanel({
+  //    topPadding: 1,
+  //    afterDetachCSSClass: "floated-panel",
+  //    savePanelSpace: true
+  //});
 
-    /* Removed as this is now (hopefully) unnecessary */
-    //$("#Panel").stickyPanel({
-    //    topPadding: 1,
-    //    afterDetachCSSClass: "floated-panel",
-    //    savePanelSpace: true
-    //});
-
-    //this statement tells the browser to fade out any success message after 5 seconds
-    setTimeout(function(){$(".success").fadeOut("slow")}, 5000);
+  //this statement tells the browser to fade out any success message after 5 seconds
+  setTimeout(function () {
+    $(".success").fadeOut("slow");
+  }, 5000);
 });
 
 /*
@@ -19,105 +20,104 @@ $(document).ready(function() {
  * which we use in multiple places
  */
 var i18n_months = [
-    $.i18n._("January"),
-    $.i18n._("February"),
-    $.i18n._("March"),
-    $.i18n._("April"),
-    $.i18n._("May"),
-    $.i18n._("June"),
-    $.i18n._("July"),
-    $.i18n._("August"),
-    $.i18n._("September"),
-    $.i18n._("October"),
-    $.i18n._("November"),
-    $.i18n._("December")
+  $.i18n._("January"),
+  $.i18n._("February"),
+  $.i18n._("March"),
+  $.i18n._("April"),
+  $.i18n._("May"),
+  $.i18n._("June"),
+  $.i18n._("July"),
+  $.i18n._("August"),
+  $.i18n._("September"),
+  $.i18n._("October"),
+  $.i18n._("November"),
+  $.i18n._("December"),
 ];
 
 var i18n_months_short = [
-    $.i18n._("Jan"),
-    $.i18n._("Feb"),
-    $.i18n._("Mar"),
-    $.i18n._("Apr"),
-    $.i18n._("May"),
-    $.i18n._("Jun"),
-    $.i18n._("Jul"),
-    $.i18n._("Aug"),
-    $.i18n._("Sep"),
-    $.i18n._("Oct"),
-    $.i18n._("Nov"),
-    $.i18n._("Dec")
+  $.i18n._("Jan"),
+  $.i18n._("Feb"),
+  $.i18n._("Mar"),
+  $.i18n._("Apr"),
+  $.i18n._("May"),
+  $.i18n._("Jun"),
+  $.i18n._("Jul"),
+  $.i18n._("Aug"),
+  $.i18n._("Sep"),
+  $.i18n._("Oct"),
+  $.i18n._("Nov"),
+  $.i18n._("Dec"),
 ];
 
 var i18n_days_short = [
-    $.i18n._("Su"),
-    $.i18n._("Mo"),
-    $.i18n._("Tu"),
-    $.i18n._("We"),
-    $.i18n._("Th"),
-    $.i18n._("Fr"),
-    $.i18n._("Sa")
+  $.i18n._("Su"),
+  $.i18n._("Mo"),
+  $.i18n._("Tu"),
+  $.i18n._("We"),
+  $.i18n._("Th"),
+  $.i18n._("Fr"),
+  $.i18n._("Sa"),
 ];
 
 var HTTPMethods = Object.freeze({
-    GET: "GET",
-    POST: "POST",
-    PUT: "PUT",
-    PATCH: "PATCH",
-    DELETE: "DELETE",
-    OPTIONS: "OPTIONS"
+  GET: "GET",
+  POST: "POST",
+  PUT: "PUT",
+  PATCH: "PATCH",
+  DELETE: "DELETE",
+  OPTIONS: "OPTIONS",
 });
 
 var dateStartId = "#sb_date_start",
-    timeStartId = "#sb_time_start",
-    dateEndId = "#sb_date_end",
-    timeEndId = "#sb_time_end";
+  timeStartId = "#sb_time_start",
+  dateEndId = "#sb_date_end",
+  timeEndId = "#sb_time_end";
 
 function getDatatablesStrings(overrideDict) {
+  var dict = {
+    sEmptyTable: $.i18n._("No data available in table"),
+    sInfo: $.i18n._("Showing _START_ to _END_ of _TOTAL_ entries"),
+    sInfoEmpty: $.i18n._("Showing 0 to 0 of 0 entries"),
+    sInfoFiltered: "", // $.i18n._("(filtered from _MAX_ total entries)"),
+    sInfoPostFix: $.i18n._(""),
+    sInfoThousands: $.i18n._(","),
+    sLengthMenu: $.i18n._("Show _MENU_"),
+    sLoadingRecords: $.i18n._("Loading..."),
+    //"sProcessing":     $.i18n._("Processing..."),
+    sProcessing: $.i18n._(""),
+    sSearch: $.i18n._(""),
+    sZeroRecords: $.i18n._("No matching records found"),
+    oPaginate: {
+      sFirst: "&laquo;",
+      sLast: "&raquo;",
+      sNext: "&rsaquo;",
+      sPrevious: "&lsaquo;",
+    },
+    //"oPaginate": {
+    //    "sFirst":    $.i18n._("First"),
+    //    "sLast":     $.i18n._("Last"),
+    //    "sNext":     $.i18n._("Next"),
+    //    "sPrevious": $.i18n._("Previous")
+    //},
+    oAria: {
+      sSortAscending: $.i18n._(": activate to sort column ascending"),
+      sSortDescending: $.i18n._(": activate to sort column descending"),
+    },
+  };
 
-    var dict = {
-        "sEmptyTable":     $.i18n._("No data available in table"),
-        "sInfo":           $.i18n._("Showing _START_ to _END_ of _TOTAL_ entries"),
-        "sInfoEmpty":      $.i18n._("Showing 0 to 0 of 0 entries"),
-        "sInfoFiltered":   "", // $.i18n._("(filtered from _MAX_ total entries)"),
-        "sInfoPostFix":    $.i18n._(""),
-        "sInfoThousands":  $.i18n._(","),
-        "sLengthMenu":     $.i18n._("Show _MENU_"),
-        "sLoadingRecords": $.i18n._("Loading..."),
-        //"sProcessing":     $.i18n._("Processing..."),
-        "sProcessing":     $.i18n._(""),
-        "sSearch":         $.i18n._(""),
-        "sZeroRecords":    $.i18n._("No matching records found"),
-        "oPaginate": {
-            "sFirst":    "&laquo;",
-            "sLast":     "&raquo;",
-            "sNext":     "&rsaquo;",
-            "sPrevious": "&lsaquo;"
-        },
-        //"oPaginate": {
-        //    "sFirst":    $.i18n._("First"),
-        //    "sLast":     $.i18n._("Last"),
-        //    "sNext":     $.i18n._("Next"),
-        //    "sPrevious": $.i18n._("Previous")
-        //},
-        "oAria": {
-            "sSortAscending":  $.i18n._(": activate to sort column ascending"),
-            "sSortDescending": $.i18n._(": activate to sort column descending")
-        }
-    };
-
-    return $.extend({}, dict, overrideDict);
+  return $.extend({}, dict, overrideDict);
 }
 
-function adjustDateToServerDate(date, serverTimezoneOffset){
-    //date object stores time in the browser's localtime. We need to artificially shift
-    //it to
-    var timezoneOffset = date.getTimezoneOffset()*60*1000;
+function adjustDateToServerDate(date, serverTimezoneOffset) {
+  //date object stores time in the browser's localtime. We need to artificially shift
+  //it to
+  var timezoneOffset = date.getTimezoneOffset() * 60 * 1000;
 
-    date.setTime(date.getTime() + timezoneOffset + serverTimezoneOffset*1000);
+  date.setTime(date.getTime() + timezoneOffset + serverTimezoneOffset * 1000);
 
-    /* date object has been shifted to artificial UTC time. Now let's
-     * shift it to the server's timezone */
-    return date;
+  /* date object has been shifted to artificial UTC time. Now let's
+   * shift it to the server's timezone */
+  return date;
 }
 
 /**
@@ -129,27 +129,31 @@ var _preview_window = null;
  *Gets the info from the view when menu action play choosen and opens the jplayer window.
  */
 function openAudioPreview(p_event) {
-    p_event.stopPropagation();
+  p_event.stopPropagation();
 
-    var audioFileID = $(this).attr('audioFile');
-    var objId = $('.obj_id:first').attr('value');
-    var objType = $('.obj_type:first').attr('value');
-    var playIndex = $(this).parent().parent().attr('id');
-    playIndex = playIndex.substring(4); //remove the spl_
+  var audioFileID = $(this).attr("audioFile");
+  var objId = $(".obj_id:first").attr("value");
+  var objType = $(".obj_type:first").attr("value");
+  var playIndex = $(this).parent().parent().attr("id");
+  playIndex = playIndex.substring(4); //remove the spl_
 
-    if (objType == "playlist") {
-        open_playlist_preview(objId, playIndex);
-    } else if (objType == "block") {
-        open_block_preview(objId, playIndex);
-    }
+  if (objType == "playlist") {
+    open_playlist_preview(objId, playIndex);
+  } else if (objType == "block") {
+    open_block_preview(objId, playIndex);
+  }
 }
 
 function open_audio_preview(type, id) {
-    // The reason that we need to encode artist and title string is that
-    // sometime they contain '/' or '\' and apache reject %2f or %5f
-    // so the work around is to encode it twice.
-    openPreviewWindow(baseUrl+'audiopreview/audio-preview/audioFileID/'+id+'/type/'+type, previewWidth, previewHeight);
-    _preview_window.focus();
+  // The reason that we need to encode artist and title string is that
+  // sometime they contain '/' or '\' and apache reject %2f or %5f
+  // so the work around is to encode it twice.
+  openPreviewWindow(
+    baseUrl + "audiopreview/audio-preview/audioFileID/" + id + "/type/" + type,
+    previewWidth,
+    previewHeight
+  );
+  _preview_window.focus();
 }
 
 /**
@@ -159,26 +163,43 @@ function open_audio_preview(type, id) {
  *given index.
  */
 function open_playlist_preview(p_playlistID, p_playlistIndex) {
-    if (p_playlistIndex == undefined) //Use a resonable default.
-        p_playlistIndex = 0;
+  if (p_playlistIndex == undefined)
+    //Use a resonable default.
+    p_playlistIndex = 0;
 
-
-    if (_preview_window != null && !_preview_window.closed)
-        _preview_window.playAllPlaylist(p_playlistID, p_playlistIndex);
-    else
-        openPreviewWindow(baseUrl+'audiopreview/playlist-preview/playlistIndex/'+p_playlistIndex+'/playlistID/'+p_playlistID, previewWidth, previewHeight);
-    _preview_window.focus();
+  if (_preview_window != null && !_preview_window.closed)
+    _preview_window.playAllPlaylist(p_playlistID, p_playlistIndex);
+  else
+    openPreviewWindow(
+      baseUrl +
+        "audiopreview/playlist-preview/playlistIndex/" +
+        p_playlistIndex +
+        "/playlistID/" +
+        p_playlistID,
+      previewWidth,
+      previewHeight
+    );
+  _preview_window.focus();
 }
 
 function open_block_preview(p_blockId, p_blockIndex) {
-    if (p_blockIndex == undefined) //Use a resonable default.
-        p_blockIndex = 0;
+  if (p_blockIndex == undefined)
+    //Use a resonable default.
+    p_blockIndex = 0;
 
-    if (_preview_window != null && !_preview_window.closed)
-        _preview_window.playBlock(p_blockId, p_blockIndex);
-    else
-        openPreviewWindow(baseUrl+'audiopreview/block-preview/blockIndex/'+p_blockIndex+'/blockId/'+p_blockId, previewWidth, previewHeight);
-    _preview_window.focus();
+  if (_preview_window != null && !_preview_window.closed)
+    _preview_window.playBlock(p_blockId, p_blockIndex);
+  else
+    openPreviewWindow(
+      baseUrl +
+        "audiopreview/block-preview/blockIndex/" +
+        p_blockIndex +
+        "/blockId/" +
+        p_blockId,
+      previewWidth,
+      previewHeight
+    );
+  _preview_window.focus();
 }
 
 /**
@@ -188,134 +209,159 @@ function open_block_preview(p_blockId, p_blockIndex) {
  *given index.
  */
 function open_show_preview(p_showID, p_showIndex) {
-    if (_preview_window != null && !_preview_window.closed)
-        _preview_window.playAllShow(p_showID, p_showIndex);
-    else
-        openPreviewWindow(baseUrl+'audiopreview/show-preview/showID/'+p_showID+'/showIndex/'+p_showIndex, previewWidth, previewHeight);
-    _preview_window.focus();
+  if (_preview_window != null && !_preview_window.closed)
+    _preview_window.playAllShow(p_showID, p_showIndex);
+  else
+    openPreviewWindow(
+      baseUrl +
+        "audiopreview/show-preview/showID/" +
+        p_showID +
+        "/showIndex/" +
+        p_showIndex,
+      previewWidth,
+      previewHeight
+    );
+  _preview_window.focus();
 }
 
 function openPreviewWindow(url, w, h) {
-    var dim = (w && h) ? 'width=' + w + ',height=' + h + ',' : '';
-    // Hardcoding this here is kinda gross, but the alternatives aren't much better...
-    _preview_window = window.open(url, $.i18n._('Audio Player'), dim + 'scrollbars=yes');
-    return false;
+  var dim = w && h ? "width=" + w + ",height=" + h + "," : "";
+  // Hardcoding this here is kinda gross, but the alternatives aren't much better...
+  _preview_window = window.open(
+    url,
+    $.i18n._("Audio Player"),
+    dim + "scrollbars=yes"
+  );
+  return false;
 }
 
 function validateTimeRange() {
-    var oRange,
-        inputs = $('.sb-timerange > input'),
-        start, end;
+  var oRange,
+    inputs = $(".sb-timerange > input"),
+    start,
+    end;
 
-    oRange = AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId, dateEndId, timeEndId);
+  oRange = AIRTIME.utilities.fnGetScheduleRange(
+    dateStartId,
+    timeStartId,
+    dateEndId,
+    timeEndId
+  );
 
-    start = oRange.start;
-    end = oRange.end;
+  start = oRange.start;
+  end = oRange.end;
 
-    if (end >= start) {
-        inputs.removeClass('error');
-    } else {
-        if (!inputs.hasClass('error')) {
-            inputs.addClass('error');
-        }
+  if (end >= start) {
+    inputs.removeClass("error");
+  } else {
+    if (!inputs.hasClass("error")) {
+      inputs.addClass("error");
     }
+  }
 
-    return {
-        start: start,
-        end: end,
-        isValid: end >= start
-    };
+  return {
+    start: start,
+    end: end,
+    isValid: end >= start,
+  };
 }
 
 // validate uploaded images
 function validateImage(img, el) {
-    // remove any existing error messages
-    if ($("#img-err")) { $("#img-err").remove(); }
+  // remove any existing error messages
+  if ($("#img-err")) {
+    $("#img-err").remove();
+  }
 
-    if (img.size > 2048000) { // 2MB - pull this from somewhere instead?
-        // hack way of inserting an error message
-        var err = $.i18n._("Selected file is too large");
-        el.parent().after(
-            "<ul id='img-err' class='errors'>" +
-            "<li>" + err + "</li>" +
-            "</ul>");
-        return false;
-    } else if (validateMimeType(img.type) < 0) {
-        var err = $.i18n._("File format is not supported");
-        el.parent().after(
-            "<ul id='img-err' class='errors'>" +
-            "<li>" + err + "</li>" +
-            "</ul>");
-        return false;
-    }
-    return true;
+  if (img.size > 2048000) {
+    // 2MB - pull this from somewhere instead?
+    // hack way of inserting an error message
+    var err = $.i18n._("Selected file is too large");
+    el.parent().after(
+      "<ul id='img-err' class='errors'>" + "<li>" + err + "</li>" + "</ul>"
+    );
+    return false;
+  } else if (validateMimeType(img.type) < 0) {
+    var err = $.i18n._("File format is not supported");
+    el.parent().after(
+      "<ul id='img-err' class='errors'>" + "<li>" + err + "</li>" + "</ul>"
+    );
+    return false;
+  }
+  return true;
 }
 
 // validate image mime type
 function validateMimeType(mime) {
-    var extensions = [
-        'image/jpeg',
-        'image/png',
-        'image/gif'
-        // BMP?
-    ];
-    return $.inArray(mime, extensions);
+  var extensions = [
+    "image/jpeg",
+    "image/png",
+    "image/gif",
+    // BMP?
+  ];
+  return $.inArray(mime, extensions);
 }
 
 function pad(number, length) {
-    return sprintf("%'0"+length+"d", number);
+  return sprintf("%'0" + length + "d", number);
 }
 
 function removeSuccessMsg() {
-    var $status = $('.success');
+  var $status = $(".success");
 
-    $status.fadeOut("slow", function(){$status.empty()});
+  $status.fadeOut("slow", function () {
+    $status.empty();
+  });
 }
 
 function hideHint(h) {
-    h.hide("slow").addClass("hidden");
+  h.hide("slow").addClass("hidden");
 }
 
 function showHint(h) {
-    h.show("slow").removeClass("hidden");
+  h.show("slow").removeClass("hidden");
 }
 
 function getUsabilityHint() {
-    var pathname = window.location.pathname;
-    $.getJSON(baseUrl + "api/get-usability-hint", {"format": "json", "userPath": pathname}, function(json) {
-        var $hint_div = $('.usability_hint');
-        var current_hint = $hint_div.html();
-        if (json === "") {
-            // there are no more hints to display to the user
-            hideHint($hint_div);
-        } else if (current_hint !== json) {
-            // we only change the message if it is new
-            if ($hint_div.is(":visible")) {
-                hideHint($hint_div);
-            }
-            $hint_div.html(json);
-            showHint($hint_div);
-        } else {
-            // hint is the same before we hid it so we just need to show it
-            if ($hint_div.is(":hidden")) {
-                showHint($hint_div);
-            }
+  var pathname = window.location.pathname;
+  $.getJSON(
+    baseUrl + "api/get-usability-hint",
+    { format: "json", userPath: pathname },
+    function (json) {
+      var $hint_div = $(".usability_hint");
+      var current_hint = $hint_div.html();
+      if (json === "") {
+        // there are no more hints to display to the user
+        hideHint($hint_div);
+      } else if (current_hint !== json) {
+        // we only change the message if it is new
+        if ($hint_div.is(":visible")) {
+          hideHint($hint_div);
         }
-    });
+        $hint_div.html(json);
+        showHint($hint_div);
+      } else {
+        // hint is the same before we hid it so we just need to show it
+        if ($hint_div.is(":hidden")) {
+          showHint($hint_div);
+        }
+      }
+    }
+  );
 }
 
 // TODO: build this out so we can use it as a fallback in fail cases
 function buildErrorDialog(message) {
-    var el = $("<div id='error_dialog'></div>");
-    el.text(message);
-    $(document.body).append(el);
-    $("#error_dialog").dialog({
-        title: $.i18n._("Something went wrong!"),
-        resizable: false,
-        modal: true,
-        width: "auto",
-        height: "auto"
-    });
+  var el = $("<div id='error_dialog'></div>");
+  el.text(message);
+  $(document.body).append(el);
+  $("#error_dialog").dialog({
+    title: $.i18n._("Something went wrong!"),
+    resizable: false,
+    modal: true,
+    width: "auto",
+    height: "auto",
+  });
 }
 
 /**
@@ -324,35 +370,44 @@ function buildErrorDialog(message) {
  * @param selector jQuery selector to search descendants
  * @returns {jQuery}
  */
-jQuery.fn.addTitles = function(selector) {
-    this.each(function() {
-        // Put this in a mouseenter event handler so it's dynamic
-        // (newly created elements will have the title applied on hover)
-        $(this).on("mouseenter", selector, function () {
-            $(this).attr("title", $(this).text());
-        });
+jQuery.fn.addTitles = function (selector) {
+  this.each(function () {
+    // Put this in a mouseenter event handler so it's dynamic
+    // (newly created elements will have the title applied on hover)
+    $(this).on("mouseenter", selector, function () {
+      $(this).attr("title", $(this).text());
     });
+  });
 
-    return this;  // jQuery chaining
+  return this; // jQuery chaining
 };
 
 // XXX: Old code to pan selector text; keeping this around in case we want to use it later - Duncan
-jQuery.fn.scrollText = function(selector) {
-    this.each(function () {
-        $(this).on("mouseenter", selector, function () {
-            var sw = $(this)[0].scrollWidth - parseFloat($(this).css("textIndent")), iw = $(this).innerWidth();
-            if (sw > iw) {
-                $(this).stop().animate({
-                    textIndent: "-" + (sw + 1 - iw) + "px"
-                }, sw * 8);
-            }
-        });
-        $(this).on("mouseleave", selector, function () {
-            $(this).stop().animate({
-                textIndent: "0"
-            }, 500);
-        });
+jQuery.fn.scrollText = function (selector) {
+  this.each(function () {
+    $(this).on("mouseenter", selector, function () {
+      var sw = $(this)[0].scrollWidth - parseFloat($(this).css("textIndent")),
+        iw = $(this).innerWidth();
+      if (sw > iw) {
+        $(this)
+          .stop()
+          .animate(
+            {
+              textIndent: "-" + (sw + 1 - iw) + "px",
+            },
+            sw * 8
+          );
+      }
     });
+    $(this).on("mouseleave", selector, function () {
+      $(this).stop().animate(
+        {
+          textIndent: "0",
+        },
+        500
+      );
+    });
+  });
 
-    return this;
+  return this;
 };
diff --git a/legacy/public/js/airtime/common/facebook.js b/legacy/public/js/airtime/common/facebook.js
index 7a2d711cb..9dfbf1107 100644
--- a/legacy/public/js/airtime/common/facebook.js
+++ b/legacy/public/js/airtime/common/facebook.js
@@ -1,88 +1,100 @@
-
-$(document).ready(function() {
-    $("#facebook-login").click(function() {
-        AIRTIME.facebook.promptForFacebookPage();
-    });
+$(document).ready(function () {
+  $("#facebook-login").click(function () {
+    AIRTIME.facebook.promptForFacebookPage();
+  });
 });
 
-
-window.fbAsyncInit = function() {
-    FB.init({
-        appId      : FACEBOOK_APP_ID,
-        xfbml      : true,
-        version    : 'v2.4'
-    });
+window.fbAsyncInit = function () {
+  FB.init({
+    appId: FACEBOOK_APP_ID,
+    xfbml: true,
+    version: "v2.4",
+  });
 };
 
-var AIRTIME = (function(AIRTIME) {
+var AIRTIME = (function (AIRTIME) {
+  //Module initialization
+  if (AIRTIME.facebook === undefined) {
+    AIRTIME.facebook = {};
+  }
 
-    //Module initialization
-    if (AIRTIME.facebook === undefined) {
-        AIRTIME.facebook = {};
+  var mod = AIRTIME.facebook;
+
+  (function (d, s, id) {
+    var js,
+      fjs = d.getElementsByTagName(s)[0];
+    if (d.getElementById(id)) {
+      return;
     }
+    js = d.createElement(s);
+    js.id = id;
+    js.src = "//connect.facebook.net/en_US/sdk.js";
+    fjs.parentNode.insertBefore(js, fjs);
+  })(document, "script", "facebook-jssdk");
 
-    var mod = AIRTIME.facebook;
-
-    (function (d, s, id) {
-        var js, fjs = d.getElementsByTagName(s)[0];
-        if (d.getElementById(id)) {
-            return;
+  mod.promptForFacebookPage = function () {
+    FB.login(
+      function (response) {
+        if (response.authResponse) {
+          mod.getPagesOwnedByUser(
+            response.authResponse.userID,
+            response.authResponse.accessToken
+          );
+          mod.addPageTab();
+        } else {
+          console.log("Authorization failed.");
         }
-        js = d.createElement(s);
-        js.id = id;
-        js.src = "//connect.facebook.net/en_US/sdk.js";
-        fjs.parentNode.insertBefore(js, fjs);
-    }(document, 'script', 'facebook-jssdk'));
+      },
+      { scope: "manage_pages" }
+    );
+  };
 
-    mod.promptForFacebookPage = function() {
-        FB.login(function (response) {
-            if (response.authResponse) {
-                mod.getPagesOwnedByUser(response.authResponse.userID, response.authResponse.accessToken);
-                mod.addPageTab();
+  mod.getPagesOwnedByUser = function (userId, accessToken) {
+    FB.api(
+      "/" + userId + "/accounts",
+      function (response) {
+        console.log(response);
+      },
+      { access_token: accessToken }
+    );
+  };
 
-            } else {
-                console.log('Authorization failed.');
+  mod.addPageTab = function () {
+    FB.ui(
+      { method: "pagetab" },
+      function (resp) {
+        console.log("response:");
+        console.log(resp);
+        var pageIdList = [];
+        var tabs = resp["tabs_added"];
+
+        if (tabs != undefined && Object.keys(tabs).length > 0) {
+          for (var pageId in tabs) {
+            pageIdList.push(pageId);
+          }
+
+          //POST these back to Airtime, which will then proxy it over to our social app. (multiple requests from Airtime)
+          $.post(
+            "facebook-tab-success",
+            { pages: JSON.stringify(pageIdList) },
+            function () {
+              alert("Successfully added to your Facebook page!");
             }
-        }, {scope: 'manage_pages'});
-    }
+          )
+            .done(function () {})
+            .fail(function () {
+              alert(
+                "Sorry, an error occurred and we were unable to add the widget to your Facebook page."
+              );
+            });
+        }
+      },
+      {
+        app_id: FACEBOOK_APP_ID,
+        //redirect_uri: 'https://localhost'
+      }
+    );
+  };
 
-    mod.getPagesOwnedByUser = function(userId, accessToken) {
-        FB.api('/' + userId + '/accounts', function (response) {
-            console.log(response);
-        }, {access_token: accessToken});
-    }
-
-    mod.addPageTab = function() {
-        FB.ui(
-            { method: 'pagetab' },
-            function (resp) {
-                console.log("response:");
-                console.log(resp);
-                var pageIdList = [];
-                var tabs = resp["tabs_added"];
-
-                if ((tabs != undefined) && (Object.keys(tabs).length > 0)) {
-                    for (var pageId in tabs) {
-                        pageIdList.push(pageId);
-                    }
-
-                    //POST these back to Airtime, which will then proxy it over to our social app. (multiple requests from Airtime)
-                    $.post('facebook-tab-success', { "pages" : JSON.stringify(pageIdList) }, function() {
-                        alert("Successfully added to your Facebook page!");
-                    }).done(function() {
-
-                    }).fail(function() {
-                        alert("Sorry, an error occurred and we were unable to add the widget to your Facebook page.");
-                    });
-                }
-            },
-            {
-                app_id: FACEBOOK_APP_ID,
-                //redirect_uri: 'https://localhost'
-            }
-        );
-    }
-
-    return AIRTIME;
-
-}(AIRTIME || {}));
+  return AIRTIME;
+})(AIRTIME || {});
diff --git a/legacy/public/js/airtime/dashboard/dashboard.js b/legacy/public/js/airtime/dashboard/dashboard.js
index 555cc4c7b..8803e05dc 100644
--- a/legacy/public/js/airtime/dashboard/dashboard.js
+++ b/legacy/public/js/airtime/dashboard/dashboard.js
@@ -22,7 +22,6 @@ var live_dj_on_air = false;
 var scheduled_play_on_air = false;
 var scheduled_play_source = false;
 
-
 //a reference returned by setTimeout. Useful for when we want clearTimeout()
 var newSongTimeoutId = null;
 
@@ -40,449 +39,545 @@ var onAirOffIterations = 0;
 var nextSongPrepare = true;
 var nextShowPrepare = true;
 
-function secondsTimer(){
-    /* This function constantly calls itself every 'uiUpdateInterval'
-     * micro-seconds and is responsible for updating the UI. */
-    if (localRemoteTimeOffset !== null){
-        var date = new Date();
-        approximateServerTime = date.getTime() - localRemoteTimeOffset;
-        updateProgressBarValue();
-        updatePlaybar();
-        controlOnAirLight();
-        controlSwitchLight();
-    }
-    setTimeout(secondsTimer, uiUpdateInterval);
+function secondsTimer() {
+  /* This function constantly calls itself every 'uiUpdateInterval'
+   * micro-seconds and is responsible for updating the UI. */
+  if (localRemoteTimeOffset !== null) {
+    var date = new Date();
+    approximateServerTime = date.getTime() - localRemoteTimeOffset;
+    updateProgressBarValue();
+    updatePlaybar();
+    controlOnAirLight();
+    controlSwitchLight();
+  }
+  setTimeout(secondsTimer, uiUpdateInterval);
 }
 
-function newSongStart(){
-    nextSongPrepare = true;
-    if (nextSong.type == 'track') {
-        currentSong = nextSong;
-        nextSong = null;
-    }
+function newSongStart() {
+  nextSongPrepare = true;
+  if (nextSong.type == "track") {
+    currentSong = nextSong;
+    nextSong = null;
+  }
 }
 
-function nextShowStart(){
-    nextShowPrepare = true;
-    currentShow[0] = nextShow.shift();
+function nextShowStart() {
+  nextShowPrepare = true;
+  currentShow[0] = nextShow.shift();
 }
 
 /* Called every "uiUpdateInterval" mseconds. */
-function updateProgressBarValue(){
-    var showPercentDone = 0;
-    if (currentShow.length > 0){
-        showPercentDone = (approximateServerTime - currentShow[0].showStartPosixTime)/currentShow[0].showLengthMs*100;
-        if (showPercentDone < 0 || showPercentDone > 100){
-            showPercentDone = 0;
-            currentShow = new Array();
-            currentSong = null;
-        }
+function updateProgressBarValue() {
+  var showPercentDone = 0;
+  if (currentShow.length > 0) {
+    showPercentDone =
+      ((approximateServerTime - currentShow[0].showStartPosixTime) /
+        currentShow[0].showLengthMs) *
+      100;
+    if (showPercentDone < 0 || showPercentDone > 100) {
+      showPercentDone = 0;
+      currentShow = new Array();
+      currentSong = null;
     }
-    $('#progress-show').attr("style", "width:"+showPercentDone+"%");
+  }
+  $("#progress-show").attr("style", "width:" + showPercentDone + "%");
 
-    var songPercentDone = 0;
-    var scheduled_play_div = $("#scheduled_play_div");
-    var scheduled_play_line_to_switch = scheduled_play_div.parent().find(".line-to-switch");
+  var songPercentDone = 0;
+  var scheduled_play_div = $("#scheduled_play_div");
+  var scheduled_play_line_to_switch = scheduled_play_div
+    .parent()
+    .find(".line-to-switch");
 
-    if (currentSong !== null){
-        var songElapsedTime = 0;
-        songPercentDone = (approximateServerTime - currentSong.songStartPosixTime)/currentSong.songLengthMs*100;
-        songElapsedTime = approximateServerTime - currentSong.songStartPosixTime;
-        if (songPercentDone < 0) {
-            songPercentDone = 0;
-            //currentSong = null;
-        } else if (songPercentDone > 100) {
-            songPercentDone = 100;
-        } else {
-            if ((currentSong.media_item_played == true && currentShow.length > 0) || (songElapsedTime < 5000 && currentShow[0].record != 1)) {
-                scheduled_play_line_to_switch.attr("class", "line-to-switch on");
-                scheduled_play_div.addClass("ready");
-                scheduled_play_source = true;
-            }
-            else{
-                scheduled_play_source = false;
-                scheduled_play_line_to_switch.attr("class", "line-to-switch off");
-                scheduled_play_div.removeClass("ready");
-            }
-            $('#progress-show').attr("class", "progress-show");
-        }
+  if (currentSong !== null) {
+    var songElapsedTime = 0;
+    songPercentDone =
+      ((approximateServerTime - currentSong.songStartPosixTime) /
+        currentSong.songLengthMs) *
+      100;
+    songElapsedTime = approximateServerTime - currentSong.songStartPosixTime;
+    if (songPercentDone < 0) {
+      songPercentDone = 0;
+      //currentSong = null;
+    } else if (songPercentDone > 100) {
+      songPercentDone = 100;
     } else {
+      if (
+        (currentSong.media_item_played == true && currentShow.length > 0) ||
+        (songElapsedTime < 5000 && currentShow[0].record != 1)
+      ) {
+        scheduled_play_line_to_switch.attr("class", "line-to-switch on");
+        scheduled_play_div.addClass("ready");
+        scheduled_play_source = true;
+      } else {
         scheduled_play_source = false;
         scheduled_play_line_to_switch.attr("class", "line-to-switch off");
         scheduled_play_div.removeClass("ready");
-        $('#progress-show').attr("class", "progress-show-error");
+      }
+      $("#progress-show").attr("class", "progress-show");
     }
-    $('#progress-bar').attr("style", "width:"+songPercentDone+"%");
+  } else {
+    scheduled_play_source = false;
+    scheduled_play_line_to_switch.attr("class", "line-to-switch off");
+    scheduled_play_div.removeClass("ready");
+    $("#progress-show").attr("class", "progress-show-error");
+  }
+  $("#progress-bar").attr("style", "width:" + songPercentDone + "%");
 }
 
-function updatePlaybar(){
-    /* Column 0 update */
-    if (previousSong !== null){
-        $('#previous').text(previousSong.name+",");
-        $('#prev-length').text(convertToHHMMSSmm(previousSong.songLengthMs));
-    }else{
-        $('#previous').empty();
-        $('#prev-length').empty();
-    }
+function updatePlaybar() {
+  /* Column 0 update */
+  if (previousSong !== null) {
+    $("#previous").text(previousSong.name + ",");
+    $("#prev-length").text(convertToHHMMSSmm(previousSong.songLengthMs));
+  } else {
+    $("#previous").empty();
+    $("#prev-length").empty();
+  }
 
-    if (currentSong !== null && !master_dj_on_air && !live_dj_on_air){
-        if (currentSong.record == "1") {
-            $('#current').html("<span style='color:red; font-weight:bold'>"+$.i18n._("Recording:")+"</span>"+currentSong.name+",");
-        } else {
-            $('#current').text(currentSong.name+",");
-            if (currentSong.metadata && currentSong.metadata.artwork_data) {
-
-                  var check_current_song = Cookies.get('current_track');
-                  var loaded = Cookies.get('loaded');
-
-                  if (check_current_song != currentSong.name) {
-                    $('#now-playing-artwork_containter').html("<img height='75' width='75' class'artwork' src='"+ currentSong.metadata.artwork_data +"' />");
-                    Cookies.remove('current_track');
-                    Cookies.set('current_track', currentSong.name);
-                  }
-                  // makes sure it stays updated with current track if page loads
-                  if (loaded != UNIQID) {
-                    Cookies.remove('current_track');
-                    Cookies.remove('loaded');
-                    Cookies.set('loaded', UNIQID);
-                  }
-           }
-        }
-    }else{
-        if (master_dj_on_air) {
-            if (showName) {
-                $('#current').html($.i18n._("Current")+": <span style='color:red; font-weight:bold'>"+showName+" - "+$.i18n._("Master Stream")+"</span>");
-            } else {
-                $('#current').html($.i18n._("Current")+": <span style='color:red; font-weight:bold'>"+$.i18n._("Master Stream")+"</span>");
-            }
-        } else if (live_dj_on_air) {
-            if (showName) {
-                $('#current').html($.i18n._("Current")+": <span style='color:red; font-weight:bold'>"+showName+" - "+$.i18n._("Live Stream")+"</span>");
-            } else {
-                $('#current').html($.i18n._("Current")+": <span style='color:red; font-weight:bold'>"+$.i18n._("Live Stream")+"</span>");
-            }
-        } else {
-            $('#current').html($.i18n._("Current")+": <span style='color:red; font-weight:bold'>"+$.i18n._("Nothing Scheduled")+"</span>");
-        }
-    }
-
-    if (nextSong !== null){
-        $('#next').text(nextSong.name+",");
-        $('#next-length').text(convertToHHMMSSmm(nextSong.songLengthMs));
-    }else{
-        $('#next').empty();
-        $('#next-length').empty();
-    }
-
-    $('#start').empty();
-    $('#end').empty();
-    $('#time-elapsed').empty();
-    $('#time-remaining').empty();
-    $('#song-length').empty();
-    if (currentSong !== null && !master_dj_on_air && !live_dj_on_air){
-        $('#start').text(currentSong.starts.split(' ')[1]);
-        $('#end').text(currentSong.ends.split(' ')[1]);
-
-        /* Get rid of the millisecond accuracy so that the second counters for both
-         * show and song change at the same time. */
-        var songStartRoughly = parseInt(Math.round(currentSong.songStartPosixTime/1000), 10)*1000;
-        var songEndRoughly = parseInt(Math.round(currentSong.songEndPosixTime/1000), 10)*1000;
-
-        $('#time-elapsed').text(convertToHHMMSS(approximateServerTime - songStartRoughly));
-        $('#time-remaining').text(convertToHHMMSS(songEndRoughly - approximateServerTime));
-        $('#song-length').text(convertToHHMMSS(currentSong.songLengthMs));
-    }
-    /* Column 1 update */
-    $('#playlist').text($.i18n._("Current Show:"));
-    var recElem = $('.recording-show');
-    if (currentShow.length > 0){
-        $('#playlist').text(currentShow[0].name);
-        (currentShow[0].record == "1") ? recElem.show(): recElem.hide();
+  if (currentSong !== null && !master_dj_on_air && !live_dj_on_air) {
+    if (currentSong.record == "1") {
+      $("#current").html(
+        "<span style='color:red; font-weight:bold'>" +
+          $.i18n._("Recording:") +
+          "</span>" +
+          currentSong.name +
+          ","
+      );
     } else {
-        recElem.hide();
-    }
+      $("#current").text(currentSong.name + ",");
+      if (currentSong.metadata && currentSong.metadata.artwork_data) {
+        var check_current_song = Cookies.get("current_track");
+        var loaded = Cookies.get("loaded");
 
-    $('#show-length').empty();
-    if (currentShow.length > 0){
-        $('#show-length').text(convertDateToHHMM(currentShow[0].showStartPosixTime) + " - " + convertDateToHHMM(currentShow[0].showEndPosixTime));
+        if (check_current_song != currentSong.name) {
+          $("#now-playing-artwork_containter").html(
+            "<img height='75' width='75' class'artwork' src='" +
+              currentSong.metadata.artwork_data +
+              "' />"
+          );
+          Cookies.remove("current_track");
+          Cookies.set("current_track", currentSong.name);
+        }
+        // makes sure it stays updated with current track if page loads
+        if (loaded != UNIQID) {
+          Cookies.remove("current_track");
+          Cookies.remove("loaded");
+          Cookies.set("loaded", UNIQID);
+        }
+      }
     }
+  } else {
+    if (master_dj_on_air) {
+      if (showName) {
+        $("#current").html(
+          $.i18n._("Current") +
+            ": <span style='color:red; font-weight:bold'>" +
+            showName +
+            " - " +
+            $.i18n._("Master Stream") +
+            "</span>"
+        );
+      } else {
+        $("#current").html(
+          $.i18n._("Current") +
+            ": <span style='color:red; font-weight:bold'>" +
+            $.i18n._("Master Stream") +
+            "</span>"
+        );
+      }
+    } else if (live_dj_on_air) {
+      if (showName) {
+        $("#current").html(
+          $.i18n._("Current") +
+            ": <span style='color:red; font-weight:bold'>" +
+            showName +
+            " - " +
+            $.i18n._("Live Stream") +
+            "</span>"
+        );
+      } else {
+        $("#current").html(
+          $.i18n._("Current") +
+            ": <span style='color:red; font-weight:bold'>" +
+            $.i18n._("Live Stream") +
+            "</span>"
+        );
+      }
+    } else {
+      $("#current").html(
+        $.i18n._("Current") +
+          ": <span style='color:red; font-weight:bold'>" +
+          $.i18n._("Nothing Scheduled") +
+          "</span>"
+      );
+    }
+  }
 
-    /* Column 2 update */
-    $('#time').text(convertDateToHHMMSS(approximateServerTime));
+  if (nextSong !== null) {
+    $("#next").text(nextSong.name + ",");
+    $("#next-length").text(convertToHHMMSSmm(nextSong.songLengthMs));
+  } else {
+    $("#next").empty();
+    $("#next-length").empty();
+  }
+
+  $("#start").empty();
+  $("#end").empty();
+  $("#time-elapsed").empty();
+  $("#time-remaining").empty();
+  $("#song-length").empty();
+  if (currentSong !== null && !master_dj_on_air && !live_dj_on_air) {
+    $("#start").text(currentSong.starts.split(" ")[1]);
+    $("#end").text(currentSong.ends.split(" ")[1]);
+
+    /* Get rid of the millisecond accuracy so that the second counters for both
+     * show and song change at the same time. */
+    var songStartRoughly =
+      parseInt(Math.round(currentSong.songStartPosixTime / 1000), 10) * 1000;
+    var songEndRoughly =
+      parseInt(Math.round(currentSong.songEndPosixTime / 1000), 10) * 1000;
+
+    $("#time-elapsed").text(
+      convertToHHMMSS(approximateServerTime - songStartRoughly)
+    );
+    $("#time-remaining").text(
+      convertToHHMMSS(songEndRoughly - approximateServerTime)
+    );
+    $("#song-length").text(convertToHHMMSS(currentSong.songLengthMs));
+  }
+  /* Column 1 update */
+  $("#playlist").text($.i18n._("Current Show:"));
+  var recElem = $(".recording-show");
+  if (currentShow.length > 0) {
+    $("#playlist").text(currentShow[0].name);
+    currentShow[0].record == "1" ? recElem.show() : recElem.hide();
+  } else {
+    recElem.hide();
+  }
+
+  $("#show-length").empty();
+  if (currentShow.length > 0) {
+    $("#show-length").text(
+      convertDateToHHMM(currentShow[0].showStartPosixTime) +
+        " - " +
+        convertDateToHHMM(currentShow[0].showEndPosixTime)
+    );
+  }
+
+  /* Column 2 update */
+  $("#time").text(convertDateToHHMMSS(approximateServerTime));
 }
 
-function calcAdditionalData(currentItem){
-    currentItem.songStartPosixTime = convertDateToPosixTime(currentItem.starts);
-    currentItem.songEndPosixTime = convertDateToPosixTime(currentItem.ends);
-    currentItem.songLengthMs = currentItem.songEndPosixTime - currentItem.songStartPosixTime;
+function calcAdditionalData(currentItem) {
+  currentItem.songStartPosixTime = convertDateToPosixTime(currentItem.starts);
+  currentItem.songEndPosixTime = convertDateToPosixTime(currentItem.ends);
+  currentItem.songLengthMs =
+    currentItem.songEndPosixTime - currentItem.songStartPosixTime;
 }
 
-function calcAdditionalShowData(show){
-    if (show.length > 0){
-        show[0].showStartPosixTime = convertDateToPosixTime(show[0].start_timestamp);
-        show[0].showEndPosixTime = convertDateToPosixTime(show[0].end_timestamp);
-        show[0].showLengthMs = show[0].showEndPosixTime - show[0].showStartPosixTime;
-    }
+function calcAdditionalShowData(show) {
+  if (show.length > 0) {
+    show[0].showStartPosixTime = convertDateToPosixTime(
+      show[0].start_timestamp
+    );
+    show[0].showEndPosixTime = convertDateToPosixTime(show[0].end_timestamp);
+    show[0].showLengthMs =
+      show[0].showEndPosixTime - show[0].showStartPosixTime;
+  }
 }
 
 function calculateTimeToNextSong() {
-    if (approximateServerTime === null) {
-        return;
-    }
+  if (approximateServerTime === null) {
+    return;
+  }
 
-    if (newSongTimeoutId !== null) {
-        /* We have a previous timeout set, let's unset it */
-        clearTimeout(newSongTimeoutId);
-        newSongTimeoutId = null;
-    }
+  if (newSongTimeoutId !== null) {
+    /* We have a previous timeout set, let's unset it */
+    clearTimeout(newSongTimeoutId);
+    newSongTimeoutId = null;
+  }
 
-    var diff = nextSong.songStartPosixTime - approximateServerTime;
-    if (diff < 0) diff=0;
-    nextSongPrepare = false;
-    newSongTimeoutId= setTimeout(newSongStart, diff);
+  var diff = nextSong.songStartPosixTime - approximateServerTime;
+  if (diff < 0) diff = 0;
+  nextSongPrepare = false;
+  newSongTimeoutId = setTimeout(newSongStart, diff);
 }
 
 function calculateTimeToNextShow() {
-    if (approximateServerTime === null) {
-        return;
-    }
+  if (approximateServerTime === null) {
+    return;
+  }
 
-    if (newShowTimeoutId !== null) {
-        /* We have a previous timeout set, let's unset it */
-        clearTimeout(newShowTimeoutId);
-        newShowTimeoutId = null;
-    }
+  if (newShowTimeoutId !== null) {
+    /* We have a previous timeout set, let's unset it */
+    clearTimeout(newShowTimeoutId);
+    newShowTimeoutId = null;
+  }
 
-    var diff = nextShow[0].showStartPosixTime - approximateServerTime;
-    if (diff < 0) diff=0;
-    nextShowPrepare = false;
-    newShowTimeoutId= setTimeout(nextShowStart, diff);
+  var diff = nextShow[0].showStartPosixTime - approximateServerTime;
+  if (diff < 0) diff = 0;
+  nextShowPrepare = false;
+  newShowTimeoutId = setTimeout(nextShowStart, diff);
 }
 
-function parseItems(obj){
-    previousSong = obj.previous;
-    currentSong = obj.current;
-    nextSong = obj.next;
+function parseItems(obj) {
+  previousSong = obj.previous;
+  currentSong = obj.current;
+  nextSong = obj.next;
 
-    if (previousSong !== null) {
-        calcAdditionalData(previousSong);
-    }
-    if (currentSong !== null) {
-        calcAdditionalData(currentSong);
-    }
-    if (nextSong !== null) {
-        calcAdditionalData(nextSong);
-        calculateTimeToNextSong();
-    }
+  if (previousSong !== null) {
+    calcAdditionalData(previousSong);
+  }
+  if (currentSong !== null) {
+    calcAdditionalData(currentSong);
+  }
+  if (nextSong !== null) {
+    calcAdditionalData(nextSong);
+    calculateTimeToNextSong();
+  }
 
-    currentShow = new Array();
-    if (obj.currentShow.length > 0) {
-        calcAdditionalShowData(obj.currentShow);
-        currentShow = obj.currentShow;
-    }
+  currentShow = new Array();
+  if (obj.currentShow.length > 0) {
+    calcAdditionalShowData(obj.currentShow);
+    currentShow = obj.currentShow;
+  }
 
-    nextShow = new Array();
-    if (obj.nextShow.length > 0) {
-        calcAdditionalShowData(obj.nextShow);
-        nextShow = obj.nextShow;
-        calculateTimeToNextShow();
-    }
+  nextShow = new Array();
+  if (obj.nextShow.length > 0) {
+    calcAdditionalShowData(obj.nextShow);
+    nextShow = obj.nextShow;
+    calculateTimeToNextShow();
+  }
 
-
-    var schedulePosixTime = convertDateToPosixTime(obj.schedulerTime);
-    var date = new Date();
-    localRemoteTimeOffset = date.getTime() - schedulePosixTime;
+  var schedulePosixTime = convertDateToPosixTime(obj.schedulerTime);
+  var date = new Date();
+  localRemoteTimeOffset = date.getTime() - schedulePosixTime;
 }
 
-function parseSourceStatus(obj){
-    var live_div = $("#live_dj_div");
-    var master_div = $("#master_dj_div");
-    var live_li = live_div.parent();
-    var master_li = master_div.parent();
+function parseSourceStatus(obj) {
+  var live_div = $("#live_dj_div");
+  var master_div = $("#master_dj_div");
+  var live_li = live_div.parent();
+  var master_li = master_div.parent();
 
-    if(obj.live_dj_source == false){
-        live_li.find(".line-to-switch").attr("class", "line-to-switch off");
-        live_div.removeClass("ready");
-    }else{
-        live_li.find(".line-to-switch").attr("class", "line-to-switch on");
-        live_div.addClass("ready");
-    }
+  if (obj.live_dj_source == false) {
+    live_li.find(".line-to-switch").attr("class", "line-to-switch off");
+    live_div.removeClass("ready");
+  } else {
+    live_li.find(".line-to-switch").attr("class", "line-to-switch on");
+    live_div.addClass("ready");
+  }
 
-    if(obj.master_dj_source == false){
-        master_li.find(".line-to-switch").attr("class", "line-to-switch off");
-        master_div.removeClass("ready");
-    }else{
-        master_li.find(".line-to-switch").attr("class", "line-to-switch on");
-        master_div.addClass("ready");
-    }
+  if (obj.master_dj_source == false) {
+    master_li.find(".line-to-switch").attr("class", "line-to-switch off");
+    master_div.removeClass("ready");
+  } else {
+    master_li.find(".line-to-switch").attr("class", "line-to-switch on");
+    master_div.addClass("ready");
+  }
 }
 
-function parseSwitchStatus(obj){
+function parseSwitchStatus(obj) {
+  if (obj.live_dj_source == "on") {
+    live_dj_on_air = true;
+  } else {
+    live_dj_on_air = false;
+  }
 
-    if(obj.live_dj_source == "on"){
-        live_dj_on_air = true;
-    }else{
-        live_dj_on_air = false;
-    }
+  if (obj.master_dj_source == "on") {
+    master_dj_on_air = true;
+  } else {
+    master_dj_on_air = false;
+  }
 
-    if(obj.master_dj_source == "on"){
-        master_dj_on_air = true;
-    }else{
-        master_dj_on_air = false;
-    }
+  if (obj.scheduled_play == "on") {
+    scheduled_play_on_air = true;
+  } else {
+    scheduled_play_on_air = false;
+  }
 
-    if(obj.scheduled_play == "on"){
-        scheduled_play_on_air = true;
-    }else{
-        scheduled_play_on_air = false;
-    }
+  var scheduled_play_switch = $("#scheduled_play.source-switch-button");
+  var live_dj_switch = $("#live_dj.source-switch-button");
+  var master_dj_switch = $("#master_dj.source-switch-button");
 
-    var scheduled_play_switch = $("#scheduled_play.source-switch-button");
-    var live_dj_switch = $("#live_dj.source-switch-button");
-    var master_dj_switch = $("#master_dj.source-switch-button");
+  scheduled_play_switch.find("span").html(obj.scheduled_play);
+  if (scheduled_play_on_air) {
+    scheduled_play_switch.addClass("active");
+  } else {
+    scheduled_play_switch.removeClass("active");
+  }
 
-    scheduled_play_switch.find("span").html(obj.scheduled_play);
-    if(scheduled_play_on_air){
-        scheduled_play_switch.addClass("active");
-    }else{
-        scheduled_play_switch.removeClass("active");
-    }
+  live_dj_switch.find("span").html(obj.live_dj_source);
+  if (live_dj_on_air) {
+    live_dj_switch.addClass("active");
+  } else {
+    live_dj_switch.removeClass("active");
+  }
 
-    live_dj_switch.find("span").html(obj.live_dj_source);
-    if(live_dj_on_air){
-        live_dj_switch.addClass("active");
-    }else{
-        live_dj_switch.removeClass("active");
-    }
-
-    master_dj_switch.find("span").html(obj.master_dj_source)
-    if(master_dj_on_air){
-        master_dj_switch.addClass("active");
-    }else{
-        master_dj_switch.removeClass("active");
-    }
+  master_dj_switch.find("span").html(obj.master_dj_source);
+  if (master_dj_on_air) {
+    master_dj_switch.addClass("active");
+  } else {
+    master_dj_switch.removeClass("active");
+  }
 }
 
-function controlOnAirLight(){
-    if ((scheduled_play_on_air && scheduled_play_source) || live_dj_on_air || master_dj_on_air) {
-        $('#on-air-info').attr("class", "on-air-info on");
-        onAirOffIterations = 0;
-    } else if (onAirOffIterations < 20) {
-        //if less than 4 seconds have gone by (< 20 executions of this function)
-        //then keep the ON-AIR light on. Only after at least 3 seconds have gone by,
-        //should we be allowed to turn it off. This is to stop the light from temporarily turning
-        //off between tracks: CC-3725
-        onAirOffIterations++;
-    } else {
-        $('#on-air-info').attr("class", "on-air-info off");
-    }
+function controlOnAirLight() {
+  if (
+    (scheduled_play_on_air && scheduled_play_source) ||
+    live_dj_on_air ||
+    master_dj_on_air
+  ) {
+    $("#on-air-info").attr("class", "on-air-info on");
+    onAirOffIterations = 0;
+  } else if (onAirOffIterations < 20) {
+    //if less than 4 seconds have gone by (< 20 executions of this function)
+    //then keep the ON-AIR light on. Only after at least 3 seconds have gone by,
+    //should we be allowed to turn it off. This is to stop the light from temporarily turning
+    //off between tracks: CC-3725
+    onAirOffIterations++;
+  } else {
+    $("#on-air-info").attr("class", "on-air-info off");
+  }
 }
 
-function controlSwitchLight(){
-    var live_li= $("#live_dj_div").parent();
-    var master_li = $("#master_dj_div").parent();
-    var scheduled_play_li = $("#scheduled_play_div").parent();
+function controlSwitchLight() {
+  var live_li = $("#live_dj_div").parent();
+  var master_li = $("#master_dj_div").parent();
+  var scheduled_play_li = $("#scheduled_play_div").parent();
 
-    if((scheduled_play_on_air && scheduled_play_source) && !live_dj_on_air && !master_dj_on_air){
-        scheduled_play_li.find(".line-to-on-air").attr("class", "line-to-on-air on");
-        live_li.find(".line-to-on-air").attr("class", "line-to-on-air off");
-        master_li.find(".line-to-on-air").attr("class", "line-to-on-air off");
-    }else if(live_dj_on_air && !master_dj_on_air){
-        scheduled_play_li.find(".line-to-on-air").attr("class", "line-to-on-air off");
-        live_li.find(".line-to-on-air").attr("class", "line-to-on-air on");
-        master_li.find(".line-to-on-air").attr("class", "line-to-on-air off");
-    }else if(master_dj_on_air){
-        scheduled_play_li.find(".line-to-on-air").attr("class", "line-to-on-air off");
-        live_li.find(".line-to-on-air").attr("class", "line-to-on-air off");
-        master_li.find(".line-to-on-air").attr("class", "line-to-on-air on");
-    }else{
-        scheduled_play_li.find(".line-to-on-air").attr("class", "line-to-on-air off");
-        live_li.find(".line-to-on-air").attr("class", "line-to-on-air off");
-        master_li.find(".line-to-on-air").attr("class", "line-to-on-air off");
-    }
+  if (
+    scheduled_play_on_air &&
+    scheduled_play_source &&
+    !live_dj_on_air &&
+    !master_dj_on_air
+  ) {
+    scheduled_play_li
+      .find(".line-to-on-air")
+      .attr("class", "line-to-on-air on");
+    live_li.find(".line-to-on-air").attr("class", "line-to-on-air off");
+    master_li.find(".line-to-on-air").attr("class", "line-to-on-air off");
+  } else if (live_dj_on_air && !master_dj_on_air) {
+    scheduled_play_li
+      .find(".line-to-on-air")
+      .attr("class", "line-to-on-air off");
+    live_li.find(".line-to-on-air").attr("class", "line-to-on-air on");
+    master_li.find(".line-to-on-air").attr("class", "line-to-on-air off");
+  } else if (master_dj_on_air) {
+    scheduled_play_li
+      .find(".line-to-on-air")
+      .attr("class", "line-to-on-air off");
+    live_li.find(".line-to-on-air").attr("class", "line-to-on-air off");
+    master_li.find(".line-to-on-air").attr("class", "line-to-on-air on");
+  } else {
+    scheduled_play_li
+      .find(".line-to-on-air")
+      .attr("class", "line-to-on-air off");
+    live_li.find(".line-to-on-air").attr("class", "line-to-on-air off");
+    master_li.find(".line-to-on-air").attr("class", "line-to-on-air off");
+  }
 }
 
-function getScheduleFromServer(){
-    $.ajax({ url: baseUrl+"Schedule/get-current-playlist/format/json",
-                    dataType:"json",
-                    success:function(data){
-                parseItems(data.entries);
-                parseSourceStatus(data.source_status);
-                parseSwitchStatus(data.switch_status);
-                showName = data.show_name;
-          }, error:function(jqXHR, textStatus, errorThrown){}});
+function getScheduleFromServer() {
+  $.ajax({
+    url: baseUrl + "Schedule/get-current-playlist/format/json",
+    dataType: "json",
+    success: function (data) {
+      parseItems(data.entries);
+      parseSourceStatus(data.source_status);
+      parseSwitchStatus(data.switch_status);
+      showName = data.show_name;
+    },
+    error: function (jqXHR, textStatus, errorThrown) {},
+  });
 }
 
-function setupQtip(){
-    var qtipElem = $('#about-link');
+function setupQtip() {
+  var qtipElem = $("#about-link");
 
-    if (qtipElem.length > 0){
-        qtipElem.qtip({
-            content: $('#about-txt').html(),
-            show: 'mouseover',
-            hide: { when: 'mouseout', fixed: true },
-            position: {
-                corner: {
-                    target: 'center',
-                    tooltip: 'topRight'
-                }
-            },
-             style: {
-                border: {
-                   width: 0,
-                   radius: 4
-                },
-                name: 'light' // Use the default light style
-             }
-        });
-    }
-}
-
-function setSwitchListener(ele){
-    var sourcename = $(ele).attr('id');
-    var status_span = $(ele).find("span");
-    var status = status_span.html();
-    $.get(baseUrl+"Dashboard/switch-source/format/json/sourcename/"+sourcename+"/status/"+status, function(data){
-        if(data.error){
-            alert(data.error);
-        }else{
-        	if(data.status == "ON"){
-        		$(ele).addClass("active");
-        	}else{
-        		$(ele).removeClass("active");
-        	}
-            status_span.html(data.status);
-        }
+  if (qtipElem.length > 0) {
+    qtipElem.qtip({
+      content: $("#about-txt").html(),
+      show: "mouseover",
+      hide: { when: "mouseout", fixed: true },
+      position: {
+        corner: {
+          target: "center",
+          tooltip: "topRight",
+        },
+      },
+      style: {
+        border: {
+          width: 0,
+          radius: 4,
+        },
+        name: "light", // Use the default light style
+      },
     });
+  }
 }
 
-function kickSource(ele){
-    var sourcename = $(ele).attr('id');
-
-    $.get(baseUrl+"Dashboard/disconnect-source/format/json/sourcename/"+sourcename, function(data){
-        if(data.error){
-            alert(data.error);
+function setSwitchListener(ele) {
+  var sourcename = $(ele).attr("id");
+  var status_span = $(ele).find("span");
+  var status = status_span.html();
+  $.get(
+    baseUrl +
+      "Dashboard/switch-source/format/json/sourcename/" +
+      sourcename +
+      "/status/" +
+      status,
+    function (data) {
+      if (data.error) {
+        alert(data.error);
+      } else {
+        if (data.status == "ON") {
+          $(ele).addClass("active");
+        } else {
+          $(ele).removeClass("active");
         }
-    });
+        status_span.html(data.status);
+      }
+    }
+  );
+}
+
+function kickSource(ele) {
+  var sourcename = $(ele).attr("id");
+
+  $.get(
+    baseUrl +
+      "Dashboard/disconnect-source/format/json/sourcename/" +
+      sourcename,
+    function (data) {
+      if (data.error) {
+        alert(data.error);
+      }
+    }
+  );
 }
 
 var stream_window = null;
 
 function init() {
-    //begin producer "thread"
-    setInterval(getScheduleFromServer, serverUpdateInterval);
+  //begin producer "thread"
+  setInterval(getScheduleFromServer, serverUpdateInterval);
 
-    //begin consumer "thread"
-    secondsTimer();
+  //begin consumer "thread"
+  secondsTimer();
 
-    setupQtip();
+  setupQtip();
 
-    $('.listen-control-button').click(function() {
-        if (stream_window == null || stream_window.closed)
-            stream_window=window.open(baseUrl+"Dashboard/stream-player", 'name', 'width=400,height=158');
-        stream_window.focus();
-        return false;
-    });
+  $(".listen-control-button").click(function () {
+    if (stream_window == null || stream_window.closed)
+      stream_window = window.open(
+        baseUrl + "Dashboard/stream-player",
+        "name",
+        "width=400,height=158"
+      );
+    stream_window.focus();
+    return false;
+  });
 }
 
 /* We never retrieve the user's password from the db
@@ -491,40 +586,39 @@ function init() {
  * field. Therefore, we fill the password field with 6 x's
  */
 function setCurrentUserPseudoPassword() {
-    $('#cu_password').val("xxxxxx");
-    $('#cu_passwordVerify').val("xxxxxx");
+  $("#cu_password").val("xxxxxx");
+  $("#cu_passwordVerify").val("xxxxxx");
 }
 
 /*$(window).resize(function() {
-    *//* If we don't do this, the menu can stay hidden after resizing *//*
+ */ /* If we don't do this, the menu can stay hidden after resizing */ /*
     if ($(this).width() > 970) {
         $("#nav .responsive-menu").show();
     }
 });*/
 
-$(document).ready(function() {
-    if ($('#master-panel').length > 0)
-        init();
-    if ($('.errors').length === 0) {
-        setCurrentUserPseudoPassword();
-    }
+$(document).ready(function () {
+  if ($("#master-panel").length > 0) init();
+  if ($(".errors").length === 0) {
+    setCurrentUserPseudoPassword();
+  }
 
-    $('body').on('click','#current-user', function() {
-        $.ajax({
-            url: baseUrl+'user/edit-user/format/json'
-        });
+  $("body").on("click", "#current-user", function () {
+    $.ajax({
+      url: baseUrl + "user/edit-user/format/json",
     });
+  });
 
-    $('body').on('click', '#cu_save_user', function() {
-        Cookies.set('airtime_locale', $('#cu_locale').val(), {path: '/'});
-    });
+  $("body").on("click", "#cu_save_user", function () {
+    Cookies.set("airtime_locale", $("#cu_locale").val(), { path: "/" });
+  });
 
-    // When the 'Listen' button is clicked we set the width
-    // of the share button to the width of the 'Live Stream'
-    // text. This differs depending on the language setting
-    $('#popup-link').css('width', $('.jp-container h1').css('width'));
+  // When the 'Listen' button is clicked we set the width
+  // of the share button to the width of the 'Live Stream'
+  // text. This differs depending on the language setting
+  $("#popup-link").css("width", $(".jp-container h1").css("width"));
 
-    /*$('#menu-btn').click(function() {
+  /*$('#menu-btn').click(function() {
         $('#nav .responsive-menu').slideToggle();
     });*/
 });
diff --git a/legacy/public/js/airtime/dashboard/helperfunctions.js b/legacy/public/js/airtime/dashboard/helperfunctions.js
index 846147f37..ff51c5ffc 100644
--- a/legacy/public/js/airtime/dashboard/helperfunctions.js
+++ b/legacy/public/js/airtime/dashboard/helperfunctions.js
@@ -1,232 +1,213 @@
 /* function to create popup window */
-function popup(mylink){
-    if (!window.focus)
-        return true;
-    var href;
-    if (typeof(mylink) == 'string')
-       href=mylink;
-    else
-       href=mylink.href;
-    window.open(href, "player", 'width=300,height=100,scrollbars=yes');
-    return false;
+function popup(mylink) {
+  if (!window.focus) return true;
+  var href;
+  if (typeof mylink == "string") href = mylink;
+  else href = mylink.href;
+  window.open(href, "player", "width=300,height=100,scrollbars=yes");
+  return false;
 }
 
 /* Take a string representing a date in the format 2012-04-25 and return
  * a javascript date object representing this date. */
-function getDateFromString(time){
-    var date = time.split("-");
+function getDateFromString(time) {
+  var date = time.split("-");
 
-    if (date.length != 3){
-        return null;
-    }
+  if (date.length != 3) {
+    return null;
+  }
 
-    var year = parseInt(date[0], 10);
-    var month = parseInt(date[1], 10) -1;
-    var day = parseInt(date[2], 10);
+  var year = parseInt(date[0], 10);
+  var month = parseInt(date[1], 10) - 1;
+  var day = parseInt(date[2], 10);
 
-    if (isNaN(year) || isNaN(month) || isNaN(day)){
-        return null;
-    }
-
-    return new Date(year, month, day);
+  if (isNaN(year) || isNaN(month) || isNaN(day)) {
+    return null;
+  }
 
+  return new Date(year, month, day);
 }
 
-function convertSecondsToDaysHoursMinutesSeconds(seconds){
-    if (seconds < 0)
-        seconds = 0;
+function convertSecondsToDaysHoursMinutesSeconds(seconds) {
+  if (seconds < 0) seconds = 0;
 
-    seconds = parseInt(seconds, 10);
+  seconds = parseInt(seconds, 10);
 
-    var days = parseInt(seconds / 86400);
-    seconds -= days*86400;
+  var days = parseInt(seconds / 86400);
+  seconds -= days * 86400;
 
-    var hours = parseInt(seconds / 3600);
-    seconds -= hours*3600;
+  var hours = parseInt(seconds / 3600);
+  seconds -= hours * 3600;
 
-    var minutes = parseInt(seconds / 60);
-    seconds -= minutes*60;
+  var minutes = parseInt(seconds / 60);
+  seconds -= minutes * 60;
 
-    return {days:days, hours:hours, minutes:minutes, seconds:seconds};
+  return { days: days, hours: hours, minutes: minutes, seconds: seconds };
 }
 
 /* Takes an input parameter of milliseconds and converts these into
  * the format HH:MM:SS */
-function convertToHHMMSS(timeInMS){
-	var time = parseInt(timeInMS);
+function convertToHHMMSS(timeInMS) {
+  var time = parseInt(timeInMS);
 
-	var hours = parseInt(time / 3600000);
-	time -= 3600000*hours;
+  var hours = parseInt(time / 3600000);
+  time -= 3600000 * hours;
 
-	var minutes = parseInt(time / 60000);
-	time -= 60000*minutes;
+  var minutes = parseInt(time / 60000);
+  time -= 60000 * minutes;
 
-	var seconds = parseInt(time / 1000);
+  var seconds = parseInt(time / 1000);
 
-	hours = hours.toString();
-	minutes = minutes.toString();
-	seconds = seconds.toString();
+  hours = hours.toString();
+  minutes = minutes.toString();
+  seconds = seconds.toString();
 
-	if (hours.length == 1)
-		hours = "0" + hours;
-	if (minutes.length == 1)
-		minutes = "0" + minutes;
-	if (seconds.length == 1)
-		seconds = "0" + seconds;
-	return hours + ":" + minutes + ":" + seconds;
+  if (hours.length == 1) hours = "0" + hours;
+  if (minutes.length == 1) minutes = "0" + minutes;
+  if (seconds.length == 1) seconds = "0" + seconds;
+  return hours + ":" + minutes + ":" + seconds;
 }
 
-function convertToHHMMSSmm(timeInMS){
-	var time = parseInt(timeInMS);
+function convertToHHMMSSmm(timeInMS) {
+  var time = parseInt(timeInMS);
 
-	var hours = parseInt(time / 3600000);
-	time -= 3600000*hours;
+  var hours = parseInt(time / 3600000);
+  time -= 3600000 * hours;
 
-	var minutes = parseInt(time / 60000);
-	time -= 60000*minutes;
+  var minutes = parseInt(time / 60000);
+  time -= 60000 * minutes;
 
-	var seconds = parseInt(time / 1000);
-	time -= 1000*seconds;
+  var seconds = parseInt(time / 1000);
+  time -= 1000 * seconds;
 
-	var ms = parseInt(time);
+  var ms = parseInt(time);
 
-	hours = hours.toString();
-	minutes = minutes.toString();
-	seconds = seconds.toString();
-	ms = ms.toString();
+  hours = hours.toString();
+  minutes = minutes.toString();
+  seconds = seconds.toString();
+  ms = ms.toString();
 
-	if (hours.length == 1)
-		hours = "0" + hours;
-	if (minutes.length == 1)
-		minutes = "0" + minutes;
-	if (seconds.length == 1)
-		seconds = "0" + seconds;
+  if (hours.length == 1) hours = "0" + hours;
+  if (minutes.length == 1) minutes = "0" + minutes;
+  if (seconds.length == 1) seconds = "0" + seconds;
 
-	if (ms.length == 3)
-		ms = ms.substring(0, 2);
-	else if (ms.length == 2)
-		ms = "0" + ms.substring(0,1);
-	else if (ms.length == 1)
-		ms = "00";
+  if (ms.length == 3) ms = ms.substring(0, 2);
+  else if (ms.length == 2) ms = "0" + ms.substring(0, 1);
+  else if (ms.length == 1) ms = "00";
 
-	if (hours == "00")
-		return minutes + ":" + seconds + "." + ms;
-	else
-		return hours + ":" + minutes + ":" + seconds+ "." + ms;
+  if (hours == "00") return minutes + ":" + seconds + "." + ms;
+  else return hours + ":" + minutes + ":" + seconds + "." + ms;
 }
 
-function convertDateToHHMM(epochTime){
-	var d = new Date(epochTime);
+function convertDateToHHMM(epochTime) {
+  var d = new Date(epochTime);
 
-	var hours = d.getUTCHours().toString();
-	var minutes = d.getUTCMinutes().toString();
+  var hours = d.getUTCHours().toString();
+  var minutes = d.getUTCMinutes().toString();
 
-	if (hours.length == 1)
-		hours = "0" + hours;
-	if (minutes.length == 1)
-		minutes = "0" + minutes;
+  if (hours.length == 1) hours = "0" + hours;
+  if (minutes.length == 1) minutes = "0" + minutes;
 
-	return hours + ":" + minutes;
+  return hours + ":" + minutes;
 }
 
-function convertDateToHHMMSS(epochTime){
-	var d = new Date(epochTime);
+function convertDateToHHMMSS(epochTime) {
+  var d = new Date(epochTime);
 
-	var hours = d.getUTCHours().toString();
-	var minutes = d.getUTCMinutes().toString();
-	var seconds = d.getUTCSeconds().toString();
+  var hours = d.getUTCHours().toString();
+  var minutes = d.getUTCMinutes().toString();
+  var seconds = d.getUTCSeconds().toString();
 
-	if (hours.length == 1)
-		hours = "0" + hours;
-	if (minutes.length == 1)
-		minutes = "0" + minutes;
-	if (seconds.length == 1)
-		seconds = "0" + seconds;
-	return hours + ":" + minutes + ":" + seconds;
+  if (hours.length == 1) hours = "0" + hours;
+  if (minutes.length == 1) minutes = "0" + minutes;
+  if (seconds.length == 1) seconds = "0" + seconds;
+  return hours + ":" + minutes + ":" + seconds;
 }
 
 /* Takes in a string of format similar to 2011-02-07 02:59:57,
  * and converts this to epoch/posix time. */
-function convertDateToPosixTime(s){
+function convertDateToPosixTime(s) {
+  var datetime = s.split(" ");
 
-    var datetime = s.split(" ");
+  var date = datetime[0].split("-");
+  var time = datetime[1].split(":");
 
-    var date = datetime[0].split("-");
-    var time = datetime[1].split(":");
+  var year = date[0];
+  var month = date[1];
+  var day = date[2];
+  var hour = time[0];
+  var minute = time[1];
+  var sec = 0;
+  var msec = 0;
 
-	var year = date[0];
-	var month = date[1];
-	var day = date[2];
-	var hour = time[0];
-	var minute = time[1];
-    var sec = 0;
-    var msec = 0;
+  if (time[2].indexOf(".") != -1) {
+    var temp = time[2].split(".");
+    sec = temp[0];
+    msec = temp[1];
+  } else sec = time[2];
 
-    if (time[2].indexOf(".") != -1){
-        var temp = time[2].split(".");
-        sec = temp[0];
-        msec = temp[1];
-    } else
-        sec = time[2];
-
-	return Date.UTC(year, month-1, day, hour, minute, sec, msec);
+  return Date.UTC(year, month - 1, day, hour, minute, sec, msec);
 }
 
-function getFileExt(filename){
-    return filename.split('.').pop();
+function getFileExt(filename) {
+  return filename.split(".").pop();
 }
 
-function resizeImg(ele, targetWidth, targetHeight){
-    var img = $(ele);
+function resizeImg(ele, targetWidth, targetHeight) {
+  var img = $(ele);
 
-    var width = ele.width;
-    var height = ele.height;
+  var width = ele.width;
+  var height = ele.height;
 
-    // resize img proportionaly
-    if( width > height && width > targetWidth){
-        var ratio = targetWidth/width;
-        img.css("width", targetHeight+"px");
-        var newHeight = height * ratio;
-        img.css("height", newHeight+"px");
-    }else if( width < height && height > targetHeight){
-        var ratio = targetHeight/height;
-        img.css("height", targetHeight+"px");
-        var newWidth = width * ratio;
-        img.css("width", newWidth+"px");
-    }else if( width == height && width > targetWidth){
-        img.css("height", targetHeight+"px");
-        img.css("width", targetWidth+"px" );
-    }
+  // resize img proportionaly
+  if (width > height && width > targetWidth) {
+    var ratio = targetWidth / width;
+    img.css("width", targetHeight + "px");
+    var newHeight = height * ratio;
+    img.css("height", newHeight + "px");
+  } else if (width < height && height > targetHeight) {
+    var ratio = targetHeight / height;
+    img.css("height", targetHeight + "px");
+    var newWidth = width * ratio;
+    img.css("width", newWidth + "px");
+  } else if (width == height && width > targetWidth) {
+    img.css("height", targetHeight + "px");
+    img.css("width", targetWidth + "px");
+  }
 }
 
-function resizeToMaxHeight(ele, targetHeight){
-    var img = $(ele);
+function resizeToMaxHeight(ele, targetHeight) {
+  var img = $(ele);
 
-    var width = ele.width;
-    var height = ele.height;
+  var width = ele.width;
+  var height = ele.height;
 
-    // resize img proportionaly
-    if( height > targetHeight){
-        var ratio = targetHeight/height;
-        img.css("height", targetHeight+"px");
-        var newWidth = width * ratio;
-        img.css("width", newWidth+"px");
-    }
+  // resize img proportionaly
+  if (height > targetHeight) {
+    var ratio = targetHeight / height;
+    img.css("height", targetHeight + "px");
+    var newWidth = width * ratio;
+    img.css("width", newWidth + "px");
+  }
 }
 
 /* From http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport/#7557433 */
 function isInView(el) {
-    //special bonus for those using jQuery
-    if (typeof jQuery === "function" && el instanceof jQuery) {
-        el = el[0];
-    }
+  //special bonus for those using jQuery
+  if (typeof jQuery === "function" && el instanceof jQuery) {
+    el = el[0];
+  }
 
-    var rect = el.getBoundingClientRect();
+  var rect = el.getBoundingClientRect();
 
-    return (
+  return (
     rect.top >= 0 &&
     rect.left >= 0 &&
-    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
-    rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
-    );
+    rect.bottom <=
+      (window.innerHeight ||
+        document.documentElement.clientHeight) /*or $(window).height() */ &&
+    rect.right <=
+      (window.innerWidth ||
+        document.documentElement.clientWidth) /*or $(window).width() */
+  );
 }
diff --git a/legacy/public/js/airtime/dashboard/versiontooltip.js b/legacy/public/js/airtime/dashboard/versiontooltip.js
index b65e5339f..966599a31 100644
--- a/legacy/public/js/airtime/dashboard/versiontooltip.js
+++ b/legacy/public/js/airtime/dashboard/versiontooltip.js
@@ -2,149 +2,165 @@
  * Get the tooltip message to be displayed
  */
 function getContent() {
-    var link = getLatestLink();
-    var hasPatch = getHasPatch();
-    var hasMinor = getHasMinor();
-    var hasMajor = getHasMajor();
-    var hasMultiMajor = getHasMultiMajor();
-    var isPreRelease = getIsPreRelease();
+  var link = getLatestLink();
+  var hasPatch = getHasPatch();
+  var hasMinor = getHasMinor();
+  var hasMajor = getHasMajor();
+  var hasMultiMajor = getHasMultiMajor();
+  var isPreRelease = getIsPreRelease();
 
-    var msg = "";
-    // See file legacy/application/views/helpers/VersionNotify.php for more info
-    if(isUpToDate()) {
-        msg = $.i18n._("You are running the latest version");
-    } else {
-        msg = $.i18n._("New version available: ") + link + '<ul>';
-        if (isPreRelease) {
-            msg += '<li>'+$.i18n._("You have a pre-release version of LibreTime intalled.");
-        }
-        if (hasPatch) {
-            msg += '<li>'+$.i18n._("A patch update for your LibreTime installation is available.");
-        }
-        if (hasMinor) {
-            msg += '<li>'+$.i18n._("A feature update for your LibreTime installation is available.");
-        }
-        if (hasMajor && !hasMultiMajor) {
-            msg += '<li>'+$.i18n._("A major update for your LibreTime installation is available.");
-        }
-        if (hasMultiMajor) {
-            msg += '<li>'+$.i18n._("Multiple major updates for LibreTime installation are available. Please upgrade as soon as possible.");
-        }
-        msg += '</ul>';
+  var msg = "";
+  // See file legacy/application/views/helpers/VersionNotify.php for more info
+  if (isUpToDate()) {
+    msg = $.i18n._("You are running the latest version");
+  } else {
+    msg = $.i18n._("New version available: ") + link + "<ul>";
+    if (isPreRelease) {
+      msg +=
+        "<li>" +
+        $.i18n._("You have a pre-release version of LibreTime intalled.");
     }
+    if (hasPatch) {
+      msg +=
+        "<li>" +
+        $.i18n._(
+          "A patch update for your LibreTime installation is available."
+        );
+    }
+    if (hasMinor) {
+      msg +=
+        "<li>" +
+        $.i18n._(
+          "A feature update for your LibreTime installation is available."
+        );
+    }
+    if (hasMajor && !hasMultiMajor) {
+      msg +=
+        "<li>" +
+        $.i18n._(
+          "A major update for your LibreTime installation is available."
+        );
+    }
+    if (hasMultiMajor) {
+      msg +=
+        "<li>" +
+        $.i18n._(
+          "Multiple major updates for LibreTime installation are available. Please upgrade as soon as possible."
+        );
+    }
+    msg += "</ul>";
+  }
 
-    return msg;
+  return msg;
 }
 
 /**
  * Get if patch is available
  */
 function getHasPatch() {
-    return versionNotifyInfo.hasPatch;
-
+  return versionNotifyInfo.hasPatch;
 }
 
 /**
  * Get if minor update is available
  */
 function getHasMinor() {
-    return versionNotifyInfo.hasMinor;
+  return versionNotifyInfo.hasMinor;
 }
 
 /**
  * Get if major update is available
  */
 function getHasMajor() {
-    return versionNotifyInfo.hasMajor;
+  return versionNotifyInfo.hasMajor;
 }
 
 /**
  * Get if multiple major updates are available
  */
 function getHasMultiMajor() {
-    return versionNotifyInfo.hasMultiMajor;
+  return versionNotifyInfo.hasMultiMajor;
 }
 
 /**
  * Get if pre-release was installed
  */
 function getIsPreRelease() {
-    return versionNotifyInfo.isPreRelease;
+  return versionNotifyInfo.isPreRelease;
 }
 
-
-
-
 /**
  * Get the current version
  */
 function getCurrentVersion() {
-    return versionNotifyInfo.current;
+  return versionNotifyInfo.current;
 }
 
 /**
  * Get the latest version
  */
 function getLatestVersion() {
-    return versionNotifyInfo.latest;
+  return versionNotifyInfo.latest;
 }
 
 /**
  * Returns the download link to latest release in HTML
  */
 function getLatestLink() {
-    return "<a href='' onclick='openLatestLink();'>" + getLatestVersion() + "</a>";
+  return (
+    "<a href='' onclick='openLatestLink();'>" + getLatestVersion() + "</a>"
+  );
 }
 
 /**
  * Returns true if current version is up to date
  */
 function isUpToDate() {
-    return !getHasPatch() && !getHasMinor() && !getHasMajor();
+  return !getHasPatch() && !getHasMinor() && !getHasMajor();
 }
 
 /**
  * Opens the link in a new window
  */
 function openLatestLink() {
-    window.open(versionNotifyInfo.link);
+  window.open(versionNotifyInfo.link);
 }
 
 /**
  * Sets up the tooltip for version notification
  */
-function setupVersionQtip(){
-    var qtipElem = $('#version-icon');
-    if (qtipElem.length > 0){
-        qtipElem.qtip({
-            id: 'version',
-            content: {
-                text: getContent(),
-                title: {
-                    text: getCurrentVersion(),
-                    button: isUpToDate() ? false : true
-                }
-            },
-            hide: {
-                event: isUpToDate() ? 'mouseleave' : 'unfocus'
-            },
-            position: {
-                my: "top right",
-                at: "bottom left"
-            },
-            style: {
-                border: {
-                    width: 0,
-                    radius: 4
-                },
-                classes: "ui-tooltip-dark ui-tooltip-rounded"
-            }
-        });
-    }
+function setupVersionQtip() {
+  var qtipElem = $("#version-icon");
+  if (qtipElem.length > 0) {
+    qtipElem.qtip({
+      id: "version",
+      content: {
+        text: getContent(),
+        title: {
+          text: getCurrentVersion(),
+          button: isUpToDate() ? false : true,
+        },
+      },
+      hide: {
+        event: isUpToDate() ? "mouseleave" : "unfocus",
+      },
+      position: {
+        my: "top right",
+        at: "bottom left",
+      },
+      style: {
+        border: {
+          width: 0,
+          radius: 4,
+        },
+        classes: "ui-tooltip-dark ui-tooltip-rounded",
+      },
+    });
+  }
 }
 
-$(document).ready(function() {
-    if($('#version-icon').length > 0) {
-        setupVersionQtip();
-    }
+$(document).ready(function () {
+  if ($("#version-icon").length > 0) {
+    setupVersionQtip();
+  }
 });
diff --git a/legacy/public/js/airtime/library/events/library_playlistbuilder.js b/legacy/public/js/airtime/library/events/library_playlistbuilder.js
index beecff5c8..50f8a2f37 100644
--- a/legacy/public/js/airtime/library/events/library_playlistbuilder.js
+++ b/legacy/public/js/airtime/library/events/library_playlistbuilder.js
@@ -1,183 +1,204 @@
-var AIRTIME = (function(AIRTIME) {
-    var mod;
+var AIRTIME = (function (AIRTIME) {
+  var mod;
 
-    if (AIRTIME.library === undefined) {
-        AIRTIME.library = {};
+  if (AIRTIME.library === undefined) {
+    AIRTIME.library = {};
+  }
+
+  mod = AIRTIME.library;
+
+  mod.checkAddButton = function () {
+    var selected = mod.getChosenItemsLength(),
+      sortable = $(".spl_sortable:visible"),
+      check = false,
+      blockType = $("input[name=sp_type]:checked", "#smart-block-form").val();
+
+    // make sure audioclips are selected and a playlist or static block is currently open.
+    // static blocks have value of 0
+    // dynamic blocks have value of 1
+    if (selected !== 0 && (sortable.length !== 0 || blockType === "0")) {
+      check = true;
     }
 
-    mod = AIRTIME.library;
+    if (check === true) {
+      AIRTIME.button.enableButton("btn-group #library-plus", false);
+    } else {
+      AIRTIME.button.disableButton("btn-group #library-plus", false);
+    }
 
-    mod.checkAddButton = function() {
+    var objType = $(".obj_type").val(),
+      btnText;
+    if (objType === "playlist") {
+      btnText = " " + $.i18n._("Add to current playlist");
+    } else 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
+    );
+  };
 
-        var selected = mod.getChosenItemsLength(),
-            sortable = $('.spl_sortable:visible'),
-            check = false,
-            blockType = $('input[name=sp_type]:checked', '#smart-block-form').val();
+  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 if (aData.ftype === "block") {
+      $nRow.addClass("lib-block");
+    } else {
+      $nRow.addClass("lib-pl");
+    }
 
-        // make sure audioclips are selected and a playlist or static block is currently open.
-        // static blocks have value of 0
-        // dynamic blocks have value of 1
-        if (selected !== 0 && (sortable.length !== 0 || blockType === "0")) {
-            check = true;
+    $nRow
+      .attr("id", aData["tr_id"])
+      .data("aData", aData)
+      .data("screen", "playlist");
+
+    if (aData["bl_type"] !== undefined) {
+      $nRow.attr("bl_type", aData["bl_type"]);
+    }
+  };
+
+  mod.fnDrawCallback = function () {
+    mod.redrawChosen();
+    mod.checkToolBarIcons();
+
+    $(
+      "#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 (check === true) {
-            AIRTIME.button.enableButton("btn-group #library-plus", false);
+        if (selected === 1) {
+          message = $.i18n._("Adding 1 Item");
         } else {
-            AIRTIME.button.disableButton("btn-group #library-plus", false);
+          message = sprintf($.i18n._("Adding %s Items"), selected);
         }
 
-        var objType = $('.obj_type').val(),
-            btnText;
-        if (objType === 'playlist') {
-            btnText = ' '+$.i18n._('Add to current playlist');
-        } else 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);
-    };
+        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();
 
-    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 if (aData.ftype === "block") {
-            $nRow.addClass("lib-block");
-        } else {
-            $nRow.addClass("lib-pl");
+        return container;
+      },
+      cursor: "pointer",
+      cursorAt: {
+        top: 30,
+        left: 100,
+      },
+      connectToSortable: ".spl_sortable",
+    });
+  };
+
+  mod.dblClickAdd = function (data, type) {
+    var i,
+      aMediaIds = [];
+
+    // 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");
+    }
+  };
+
+  mod.setupLibraryToolbar = function () {
+    var $toolbar = $(".lib-content .fg-toolbar:first");
+
+    mod.createToolbarButtons();
+
+    $toolbar.append($menu);
+
+    // add to playlist button
+    $toolbar
+      .find(".icon-plus")
+      .parent()
+      .click(function () {
+        if (AIRTIME.button.isDisabled("btn-group #library-plus") === true) {
+          return;
         }
 
-        $nRow.attr("id", aData["tr_id"]).data("aData", aData).data("screen",
-                "playlist");
-
-        if (aData["bl_type"] !== undefined) {
-            $nRow.attr("bl_type", aData["bl_type"]);
-        }
-    };
-
-    mod.fnDrawCallback = function() {
-
-        mod.redrawChosen();
-        mod.checkToolBarIcons();
-
-        $('#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, aMediaIds = [];
+        var aData = AIRTIME.library.getSelectedData(),
+          i,
+          temp,
+          length,
+          aMediaIds = [];
 
         // 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');
+        for (i = 0, length = aData.length; i < length; i++) {
+          temp = aData[i];
+          if (
+            temp.ftype === "audioclip" ||
+            temp.ftype === "block" ||
+            (temp.ftype === "stream" && $(".obj_type").val() === "playlist")
+          ) {
+            aMediaIds.push(new Array(temp.id, temp.ftype));
+          }
         }
-    };
+        if (aMediaIds.length > 0) {
+          AIRTIME.playlist.fnAddItems(aMediaIds, undefined, "after");
+        } else {
+          if ($(".obj_type").val() == "block") {
+            alert($.i18n._("You can only add tracks to smart blocks."));
+          } else if ($(".obj_type").val() == "playlist") {
+            alert(
+              $.i18n._(
+                "You can only add tracks, smart blocks, and webstreams to playlists."
+              )
+            );
+          }
+        }
+      });
 
-    mod.setupLibraryToolbar = function() {
-        var $toolbar = $(".lib-content .fg-toolbar:first");
+    // delete from library.
+    $toolbar
+      .find(".icon-trash")
+      .parent()
+      .click(function () {
+        if (AIRTIME.button.isDisabled("icon-trash") === true) {
+          return;
+        }
 
-        mod.createToolbarButtons();
+        AIRTIME.library.fnDeleteSelectedItems();
+      });
 
-        $toolbar.append($menu);
+    mod.createToolbarDropDown();
+  };
 
-
-        // add to playlist button
-        $toolbar
-            .find('.icon-plus').parent()
-            .click(function() {
-
-                if (AIRTIME.button.isDisabled('btn-group #library-plus') === true) {
-                    return;
-                }
-
-                var aData = AIRTIME.library.getSelectedData(), i, temp, length, aMediaIds = [];
-
-                // process selected files/playlists.
-                for (i = 0, length = aData.length; i < length; i++) {
-                    temp = aData[i];
-                    if (temp.ftype === "audioclip"
-                            || temp.ftype === "block"
-                            || (temp.ftype === "stream" && $(
-                                    ".obj_type").val() === "playlist")) {
-                        aMediaIds.push(new Array(temp.id,
-                                temp.ftype));
-                    }
-                }
-                if (aMediaIds.length > 0) {
-                    AIRTIME.playlist.fnAddItems(aMediaIds,
-                            undefined, 'after');
-                } else {
-                    if ($('.obj_type').val() == 'block') {
-                        alert($.i18n._('You can only add tracks to smart blocks.'));
-                    } else if ($('.obj_type').val() == 'playlist') {
-                        alert($.i18n._('You can only add tracks, smart blocks, and webstreams to playlists.'));
-                    }
-                }
-            });
-
-        // delete from library.
-        $toolbar.find('.icon-trash').parent().click(function() {
-
-            if (AIRTIME.button.isDisabled('icon-trash') === true) {
-                return;
-            }
-
-            AIRTIME.library.fnDeleteSelectedItems();
-        });
-
-        mod.createToolbarDropDown();
-    };
-
-    return AIRTIME;
-
-}(AIRTIME || {}));
+  return AIRTIME;
+})(AIRTIME || {});
diff --git a/legacy/public/js/airtime/library/events/library_showbuilder.js b/legacy/public/js/airtime/library/events/library_showbuilder.js
index bdd94a0b5..62b2ac2df 100644
--- a/legacy/public/js/airtime/library/events/library_showbuilder.js
+++ b/legacy/public/js/airtime/library/events/library_showbuilder.js
@@ -1,391 +1,439 @@
-var AIRTIME = (function(AIRTIME) {
-    var mod;
+var AIRTIME = (function (AIRTIME) {
+  var mod;
 
-    if (AIRTIME.library === undefined) {
-        AIRTIME.library = {};
+  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;
     }
 
-    mod = AIRTIME.library;
+    var sortable = $(".spl_sortable");
+    if ($("#show_builder_table").is(":visible")) {
+      if (shows.length === 0) {
+        check = false;
+      }
 
-    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;
-        }
-
-        var sortable = $(".spl_sortable");
-        if ($("#show_builder_table").is(":visible")) {
-            if (shows.length === 0) {
-                check = false;
-            }
-
-            if ($cursor.length !== 0) {
-                btnText = $.i18n._('Add after selected items');
-            } else if (current.length !== 0) {
-                btnText = $.i18n._('Add to current show');
-            }
-        } else if (sortable.length > 0 && sortable.is(":visible")) {
-            var objType = $('.active-tab .obj_type').val();
-            if (objType === 'block') {
-                btnText = $.i18n._('Add to current smart block');
-            } else {
-                btnText = $.i18n._('Add to current playlist');
-            }
-        } else {
-            check = false;
-        }
-
-        if (check) {
-            AIRTIME.button.enableButton("btn-group #library-plus", false);
-        } else {
-            AIRTIME.button.disableButton("btn-group #library-plus", false);
-        }
-
-        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");
-    };
-
-    /**
-     * Draw a placeholder for the given table to show if it has no data.
-     *
-     * @param {Object} table jQuery object containing the table DOM node
-     */
-    mod.drawEmptyPlaceholder = function (table) {
-        var opts;
-        if (table instanceof AIRTIME.widgets.Table) {
-            opts = table.getEmptyPlaceholder();
-            table = table.getDatatable();
-            if (!table) {
-                return;
-            }
-        }
-        var emptyRow = table.find('tr:has(td.dataTables_empty)'),
-            wrapper = table.closest(".dataTables_wrapper"),
-            libEmpty = wrapper.find('.empty_placeholder');
-        if (emptyRow.length > 0) {
-            emptyRow.hide();
-            var mediaType = parseInt($('.media_type_selector.selected').data('selection-id')),
-                img = wrapper.find('.empty_placeholder_image');
-            if (!opts && isNaN(mediaType)) {
-                return;
-            }
-            // Remove all classes for when we change between empty media types
-            img.removeClass(function() { return $(this).attr("class"); });
-
-            if (opts) {
-                img.addClass("empty_placeholder_image " + opts.iconClass);
-                wrapper.find('.empty_placeholder_text').html(opts.html);
-            } else {
-                opts = AIRTIME.library.placeholder(mediaType);
-                img.addClass("empty_placeholder_image icon-white " + opts.icon);
-                wrapper.find('.empty_placeholder_text').html(
-                    $.i18n._("You haven't added any " + opts.media)
-                    + "<br/>" + $.i18n._(opts.subtext)
-                    + "<br/><a target='_blank' href='" + opts.href + "'>" + $.i18n._("Learn about " + opts.media) + "</a>"
-                );
-            }
-
-            libEmpty.show();
-        } else {
-            libEmpty.hide();
-        }
-    };
-
-    mod.fnDrawCallback = function fnLibDrawCallback() {
-        var table = $('#library_display'),
-            cb = table.find('th[class*="checkbox"]');
-        if (cb.find("input").length == 0) {
-            cb.append("<input id='super-checkbox' type='checkbox'>");
-        }
-
-        mod.redrawChosen();
-        mod.checkToolBarIcons();
-
-        mod.drawEmptyPlaceholder(table);
-
-        var sortable;
-
-        if ($("#show_builder_table").is(":visible")) {
-            sortable = "#show_builder_table";
-        } else {
-            sortable = ".active-tab .spl_sortable";
-        }
-
-        $('#library_display tr[class*="lib-"]')
-            .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;
-                },
-                create: function(event, ui) {
-                    $(this).draggable("option", "cursorAt", {
-                        top: 20,
-                        left: Math.floor($(this).outerWidth() / 2)
-                    });
-                },
-                tolerance: 'pointer',
-                cursor: 'move',
-                distance: 25, // min-distance for dragging
-                connectToSortable: sortable
-            });
-    };
-
-    mod.dblClickAdd = function(data, type) {
-        var i, length, temp, aMediaIds = [], aSchedIds = [], aData = [];
-
-        if ($("#show_builder_table").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 ($('.active-tab .obj_type').val() == 'playlist'
-                || $('.active-tab .obj_type').val() == 'block') {
-                AIRTIME.playlist.fnAddItems(aMediaIds, undefined, 'after');
-            }
-        }
-    };
-
-    function addToCurrentOrNext(arr) {
-        var el;
-        // Add to the end of the current or next show by getting the footer
-        el = $(".sb-footer.sb-future:first");
-        var data = el.prev().data("aData");
-
-        if (data === undefined) {
-            alert($.i18n._("Cannot schedule outside a show.\nTry creating a show first."));
-            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;
+      if ($cursor.length !== 0) {
+        btnText = $.i18n._("Add after selected items");
+      } else if (current.length !== 0) {
+        btnText = $.i18n._("Add to current show");
+      }
+    } else if (sortable.length > 0 && sortable.is(":visible")) {
+      var objType = $(".active-tab .obj_type").val();
+      if (objType === "block") {
+        btnText = $.i18n._("Add to current smart block");
+      } else {
+        btnText = $.i18n._("Add to current playlist");
+      }
+    } else {
+      check = false;
     }
 
-    mod.addToSchedule = function (selected) {
-        console.log(selected);
-        var aMediaIds = [], aSchedIds = [], aData = [];
+    if (check) {
+      AIRTIME.button.enableButton("btn-group #library-plus", false);
+    } else {
+      AIRTIME.button.disableButton("btn-group #library-plus", false);
+    }
 
-        $.each(selected, function () {
-            aMediaIds.push({
-                "id": this.id,
-                "type": this.ftype
-            });
-        });
+    AIRTIME.library.changeAddButtonText(
+      $(".btn-group #library-plus #lib-plus-text"),
+      btnText
+    );
+  };
 
-        // process selected files/playlists.
-        $("#show_builder_table").find("tr.sb-selected").each(function (i, el) {
-            aData.push($(el).data("aData"));
-        });
+  mod.fnRowCallback = function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
+    var $nRow = $(nRow);
 
-        // process selected schedule rows to add media after.
-        $.each(aData, function () {
-            aSchedIds.push({
-                "id": this.id,
-                "instance": this.instance,
-                "timestamp": this.timestamp
-            });
-        });
+    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");
+    }
 
-        if (aSchedIds.length == 0) {
-            if (!addToCurrentOrNext(aSchedIds)) {
-                return;
-            }
+    $nRow
+      .attr("id", aData["tr_id"])
+      .data("aData", aData)
+      .data("screen", "timeline");
+  };
+
+  /**
+   * Draw a placeholder for the given table to show if it has no data.
+   *
+   * @param {Object} table jQuery object containing the table DOM node
+   */
+  mod.drawEmptyPlaceholder = function (table) {
+    var opts;
+    if (table instanceof AIRTIME.widgets.Table) {
+      opts = table.getEmptyPlaceholder();
+      table = table.getDatatable();
+      if (!table) {
+        return;
+      }
+    }
+    var emptyRow = table.find("tr:has(td.dataTables_empty)"),
+      wrapper = table.closest(".dataTables_wrapper"),
+      libEmpty = wrapper.find(".empty_placeholder");
+    if (emptyRow.length > 0) {
+      emptyRow.hide();
+      var mediaType = parseInt(
+          $(".media_type_selector.selected").data("selection-id")
+        ),
+        img = wrapper.find(".empty_placeholder_image");
+      if (!opts && isNaN(mediaType)) {
+        return;
+      }
+      // Remove all classes for when we change between empty media types
+      img.removeClass(function () {
+        return $(this).attr("class");
+      });
+
+      if (opts) {
+        img.addClass("empty_placeholder_image " + opts.iconClass);
+        wrapper.find(".empty_placeholder_text").html(opts.html);
+      } else {
+        opts = AIRTIME.library.placeholder(mediaType);
+        img.addClass("empty_placeholder_image icon-white " + opts.icon);
+        wrapper
+          .find(".empty_placeholder_text")
+          .html(
+            $.i18n._("You haven't added any " + opts.media) +
+              "<br/>" +
+              $.i18n._(opts.subtext) +
+              "<br/><a target='_blank' href='" +
+              opts.href +
+              "'>" +
+              $.i18n._("Learn about " + opts.media) +
+              "</a>"
+          );
+      }
+
+      libEmpty.show();
+    } else {
+      libEmpty.hide();
+    }
+  };
+
+  mod.fnDrawCallback = function fnLibDrawCallback() {
+    var table = $("#library_display"),
+      cb = table.find('th[class*="checkbox"]');
+    if (cb.find("input").length == 0) {
+      cb.append("<input id='super-checkbox' type='checkbox'>");
+    }
+
+    mod.redrawChosen();
+    mod.checkToolBarIcons();
+
+    mod.drawEmptyPlaceholder(table);
+
+    var sortable;
+
+    if ($("#show_builder_table").is(":visible")) {
+      sortable = "#show_builder_table";
+    } else {
+      sortable = ".active-tab .spl_sortable";
+    }
+
+    $('#library_display tr[class*="lib-"]').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++;
         }
 
-        AIRTIME.showbuilder.fnAdd(aMediaIds, aSchedIds);
-    };
-
-    mod.setupLibraryToolbar = function() {
-        var $toolbar = $(".lib-content .fg-toolbar:first");
-
-        mod.createToolbarButtons();
-        //mod.moveSearchBarToHeader();
-        $("#advanced_search").click(function(e) {
-            e.stopPropagation();
-        });
-
-        if (localStorage.getItem('user-type') != 'G') {
-            $toolbar.append($menu);
-            // add to timeline button
-            $toolbar
-                .find('#library-plus')
-                .click(
-                function () {
-
-                    if (AIRTIME.button.isDisabled('btn-group #library-plus') === true) {
-                        return;
-                    }
-
-                    var selected = AIRTIME.library.getSelectedData(), aMediaIds = [];
-
-                    if ($("#show_builder_table").is(":visible")) {
-                        mod.addToSchedule(selected);
-                    } else {
-                        $.each(selected, function () {
-                            aMediaIds.push([this.id, this.ftype]);
-                        });
-
-                        // check if a playlist/block is open before adding items
-                        if ($('.active-tab .obj_type').val() == 'playlist'
-                            || $('.active-tab .obj_type').val() == 'block') {
-                            AIRTIME.playlist.fnAddItems(aMediaIds, undefined, 'after');
-                        }
-                    }
-                });
-
-            $toolbar.find('#publish-btn').click(function () {
-                if (AIRTIME.button.isDisabled('btn-group #publish-btn') === true) {
-                    return;
-                }
-
-                var selected = $(".lib-selected");
-
-                selected.each(function (i, el) {
-                    var data = $(el).data("aData");
-                    AIRTIME.publish.openPublishDialog(data.id);
-                });
-            });
-
-            // delete from library.
-            $toolbar.find('#sb-delete').click(function () {
-                if (AIRTIME.button.isDisabled('btn-group #sb-delete') === 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").data("selection-id");
-
-                if (selection == AIRTIME.library.MediaTypeIntegerEnum.PLAYLIST) {
-                    AIRTIME.playlist.fnNew();
-                } else if (selection == AIRTIME.library.MediaTypeIntegerEnum.BLOCK) {
-                    AIRTIME.playlist.fnNewBlock();
-                } else if (selection == AIRTIME.library.MediaTypeIntegerEnum.WEBSTREAM) {
-                    AIRTIME.playlist.fnWsNew();
-                }
-            });
-
-
-            $toolbar.find('#sb-edit').click(function () {
-                if (AIRTIME.button.isDisabled('btn-group #sb-edit') === true) {
-                    return;
-                }
-
-                var selected = $(".lib-selected");
-
-                selected.each(function (i, el) {
-                    var data = $(el).data("aData");
-
-                    if (data.ftype === "audioclip") {
-                        $.get(baseUrl + "library/edit-file-md/id/" + data.id, {format: "json"}, function (json) {
-                            AIRTIME.playlist.fileMdEdit(json, data.tr_id);
-                            //buildEditMetadataDialog(json);
-                        });
-                    } else if (data.ftype === "playlist" || data.ftype === "block") {
-                        AIRTIME.playlist.fnEdit(data, baseUrl + 'playlist/edit');
-                        AIRTIME.playlist.validatePlaylistElements();
-                    } else if (data.ftype === "stream") {
-                        AIRTIME.playlist.fnEdit(data, baseUrl + 'webstream/edit');
-                    }
-                });
-            });
-
-            mod.createToolbarDropDown();
+        if (selected === 1) {
+          message = $.i18n._("Adding 1 Item");
+        } else {
+          message = sprintf($.i18n._("Adding %s Items"), selected);
         }
-    };
 
-    return AIRTIME;
+        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();
 
-}(AIRTIME || {}));
+        return container;
+      },
+      create: function (event, ui) {
+        $(this).draggable("option", "cursorAt", {
+          top: 20,
+          left: Math.floor($(this).outerWidth() / 2),
+        });
+      },
+      tolerance: "pointer",
+      cursor: "move",
+      distance: 25, // min-distance for dragging
+      connectToSortable: sortable,
+    });
+  };
+
+  mod.dblClickAdd = function (data, type) {
+    var i,
+      length,
+      temp,
+      aMediaIds = [],
+      aSchedIds = [],
+      aData = [];
+
+    if ($("#show_builder_table").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 (
+        $(".active-tab .obj_type").val() == "playlist" ||
+        $(".active-tab .obj_type").val() == "block"
+      ) {
+        AIRTIME.playlist.fnAddItems(aMediaIds, undefined, "after");
+      }
+    }
+  };
+
+  function addToCurrentOrNext(arr) {
+    var el;
+    // Add to the end of the current or next show by getting the footer
+    el = $(".sb-footer.sb-future:first");
+    var data = el.prev().data("aData");
+
+    if (data === undefined) {
+      alert(
+        $.i18n._("Cannot schedule outside a show.\nTry creating a show first.")
+      );
+      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.addToSchedule = function (selected) {
+    console.log(selected);
+    var aMediaIds = [],
+      aSchedIds = [],
+      aData = [];
+
+    $.each(selected, function () {
+      aMediaIds.push({
+        id: this.id,
+        type: this.ftype,
+      });
+    });
+
+    // process selected files/playlists.
+    $("#show_builder_table")
+      .find("tr.sb-selected")
+      .each(function (i, el) {
+        aData.push($(el).data("aData"));
+      });
+
+    // process selected schedule rows to add media after.
+    $.each(aData, function () {
+      aSchedIds.push({
+        id: this.id,
+        instance: this.instance,
+        timestamp: this.timestamp,
+      });
+    });
+
+    if (aSchedIds.length == 0) {
+      if (!addToCurrentOrNext(aSchedIds)) {
+        return;
+      }
+    }
+
+    AIRTIME.showbuilder.fnAdd(aMediaIds, aSchedIds);
+  };
+
+  mod.setupLibraryToolbar = function () {
+    var $toolbar = $(".lib-content .fg-toolbar:first");
+
+    mod.createToolbarButtons();
+    //mod.moveSearchBarToHeader();
+    $("#advanced_search").click(function (e) {
+      e.stopPropagation();
+    });
+
+    if (localStorage.getItem("user-type") != "G") {
+      $toolbar.append($menu);
+      // add to timeline button
+      $toolbar.find("#library-plus").click(function () {
+        if (AIRTIME.button.isDisabled("btn-group #library-plus") === true) {
+          return;
+        }
+
+        var selected = AIRTIME.library.getSelectedData(),
+          aMediaIds = [];
+
+        if ($("#show_builder_table").is(":visible")) {
+          mod.addToSchedule(selected);
+        } else {
+          $.each(selected, function () {
+            aMediaIds.push([this.id, this.ftype]);
+          });
+
+          // check if a playlist/block is open before adding items
+          if (
+            $(".active-tab .obj_type").val() == "playlist" ||
+            $(".active-tab .obj_type").val() == "block"
+          ) {
+            AIRTIME.playlist.fnAddItems(aMediaIds, undefined, "after");
+          }
+        }
+      });
+
+      $toolbar.find("#publish-btn").click(function () {
+        if (AIRTIME.button.isDisabled("btn-group #publish-btn") === true) {
+          return;
+        }
+
+        var selected = $(".lib-selected");
+
+        selected.each(function (i, el) {
+          var data = $(el).data("aData");
+          AIRTIME.publish.openPublishDialog(data.id);
+        });
+      });
+
+      // delete from library.
+      $toolbar.find("#sb-delete").click(function () {
+        if (AIRTIME.button.isDisabled("btn-group #sb-delete") === 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").data("selection-id");
+
+        if (selection == AIRTIME.library.MediaTypeIntegerEnum.PLAYLIST) {
+          AIRTIME.playlist.fnNew();
+        } else if (selection == AIRTIME.library.MediaTypeIntegerEnum.BLOCK) {
+          AIRTIME.playlist.fnNewBlock();
+        } else if (
+          selection == AIRTIME.library.MediaTypeIntegerEnum.WEBSTREAM
+        ) {
+          AIRTIME.playlist.fnWsNew();
+        }
+      });
+
+      $toolbar.find("#sb-edit").click(function () {
+        if (AIRTIME.button.isDisabled("btn-group #sb-edit") === true) {
+          return;
+        }
+
+        var selected = $(".lib-selected");
+
+        selected.each(function (i, el) {
+          var data = $(el).data("aData");
+
+          if (data.ftype === "audioclip") {
+            $.get(
+              baseUrl + "library/edit-file-md/id/" + data.id,
+              { format: "json" },
+              function (json) {
+                AIRTIME.playlist.fileMdEdit(json, data.tr_id);
+                //buildEditMetadataDialog(json);
+              }
+            );
+          } else if (data.ftype === "playlist" || data.ftype === "block") {
+            AIRTIME.playlist.fnEdit(data, baseUrl + "playlist/edit");
+            AIRTIME.playlist.validatePlaylistElements();
+          } else if (data.ftype === "stream") {
+            AIRTIME.playlist.fnEdit(data, baseUrl + "webstream/edit");
+          }
+        });
+      });
+
+      mod.createToolbarDropDown();
+    }
+  };
+
+  return AIRTIME;
+})(AIRTIME || {});
diff --git a/legacy/public/js/airtime/library/library.js b/legacy/public/js/airtime/library/library.js
index 0640de2af..970c52b0c 100644
--- a/legacy/public/js/airtime/library/library.js
+++ b/legacy/public/js/airtime/library/library.js
@@ -1,985 +1,1333 @@
 var AIRTIME = (function (AIRTIME) {
-    var mod,
-        libraryInit,
-        oTable,
-        $libContent,
-        $libTable,
-        LIB_SELECTED_CLASS = "lib-selected",
-        chosenItems = {},
-        visibleChosenItems = {},
-        $previouslySelected,
-        flagForDeselection = false,
-        $datatables = {},
-        onDashboard = (window.location.href.indexOf("showbuilder") > -1);
+  var mod,
+    libraryInit,
+    oTable,
+    $libContent,
+    $libTable,
+    LIB_SELECTED_CLASS = "lib-selected",
+    chosenItems = {},
+    visibleChosenItems = {},
+    $previouslySelected,
+    flagForDeselection = false,
+    $datatables = {},
+    onDashboard = window.location.href.indexOf("showbuilder") > -1;
 
+  // we need to know whether the criteria value is string or
+  // numeric in order to provide a single textbox or range textboxes
+  // in the advanced search
+  // s => string
+  // n => numberic
+  var libraryColumnTypes = {
+    0: "",
+    album_title: "s",
+    artist_name: "s",
+    bit_rate: "n",
+    bpm: "n",
+    comments: "s",
+    composer: "s",
+    conductor: "s",
+    copyright: "s",
+    cuein: "n",
+    cueout: "n",
+    description: "s",
+    utime: "n",
+    mtime: "n",
+    lptime: "n",
+    disc_number: "n",
+    encoded_by: "s",
+    genre: "s",
+    isrc_number: "s",
+    label: "s",
+    language: "s",
+    length: "n",
+    lyricist: "s",
+    mime: "s",
+    mood: "s",
+    name: "s",
+    orchestra: "s",
+    rating: "n",
+    sample_rate: "n",
+    track_title: "s",
+    track_num: "n",
+    year: "n",
+    owner_id: "s",
+    info_url: "s",
+    replay_gain: "n",
+    artwork: "s",
+    track_type_id: "tt",
+  };
 
-    // we need to know whether the criteria value is string or
-    // numeric in order to provide a single textbox or range textboxes
-    // in the advanced search
-    // s => string
-    // n => numberic
-    var libraryColumnTypes = {
-        0: "",
-        "album_title": "s",
-        "artist_name": "s",
-        "bit_rate": "n",
-        "bpm": "n",
-        "comments": "s",
-        "composer": "s",
-        "conductor": "s",
-        "copyright": "s",
-        "cuein": "n",
-        "cueout": "n",
-        "description": "s",
-        "utime": "n",
-        "mtime": "n",
-        "lptime": "n",
-        "disc_number": "n",
-        "encoded_by": "s",
-        "genre": "s",
-        "isrc_number": "s",
-        "label": "s",
-        "language": "s",
-        "length": "n",
-        "lyricist": "s",
-        "mime": "s",
-        "mood": "s",
-        "name": "s",
-        "orchestra": "s",
-        "rating": "n",
-        "sample_rate": "n",
-        "track_title": "s",
-        "track_num": "n",
-        "year": "n",
-        "owner_id": "s",
-        "info_url": "s",
-        "replay_gain": "n",
-        "artwork": "s",
-        "track_type_id": "tt"
-    };
+  if (AIRTIME.library === undefined) {
+    AIRTIME.library = {};
+  }
+  mod = AIRTIME.library;
 
-    if (AIRTIME.library === undefined) {
-        AIRTIME.library = {};
-    }
-    mod = AIRTIME.library;
-
-    /*  ############################################
+  /*  ############################################
                        CONFIGURATION
         ############################################ */
 
-    mod.MediaTypeIntegerEnum = Object.freeze({
-        DEFAULT: 1,
-        FILE: 1,
-        PLAYLIST: 2,
-        BLOCK: 3,
-        WEBSTREAM: 4,
-        PODCAST: 5
-    });
+  mod.MediaTypeIntegerEnum = Object.freeze({
+    DEFAULT: 1,
+    FILE: 1,
+    PLAYLIST: 2,
+    BLOCK: 3,
+    WEBSTREAM: 4,
+    PODCAST: 5,
+  });
 
-    mod.MediaTypeStringEnum = Object.freeze({
-        FILE: "au",
-        PLAYLIST: "pl",
-        BLOCK: "bl",
-        WEBSTREAM: "ws",
-        PODCAST: "pc"
-    });
+  mod.MediaTypeStringEnum = Object.freeze({
+    FILE: "au",
+    PLAYLIST: "pl",
+    BLOCK: "bl",
+    WEBSTREAM: "ws",
+    PODCAST: "pc",
+  });
 
-    mod.MediaTypeFullToStringEnum = Object.freeze({
-        //FILE: "au",
-        "playlist": "pl",
-        "block": "bl",
-        "stream": "ws"
-    });
+  mod.MediaTypeFullToStringEnum = Object.freeze({
+    //FILE: "au",
+    playlist: "pl",
+    block: "bl",
+    stream: "ws",
+  });
 
-    mod.DataTableTypeEnum = Object.freeze({
-        LIBRARY: "library",
-        PODCAST: "podcast",
-    });
+  mod.DataTableTypeEnum = Object.freeze({
+    LIBRARY: "library",
+    PODCAST: "podcast",
+  });
 
-    mod.placeholder = function (mediaType) {
-        switch (mediaType) {
-            // TODO: remove duplication in a nice way?
-            case mod.MediaTypeIntegerEnum.FILE:
-                return {
-                    "media": "tracks",
-                    "icon": "icon-music",
-                    "subtext": "Click 'Upload' to add some now.",
-                    "href": "http://libretime.org/docs/dashboard/"
-                };
-            case mod.MediaTypeIntegerEnum.PLAYLIST:
-                return {
-                    "media": "playlists",
-                    "icon": "icon-list",
-                    "subtext": "Click 'New' to create one now.",
-                    "href": "http://libretime.org/docs/playlists/"
-                };
-            case mod.MediaTypeIntegerEnum.BLOCK:
-                return {
-                    "media": "smart blocks",
-                    "icon": "icon-time",
-                    "subtext": "Click 'New' to create one now.",
-                    "href": "http://libretime.org/docs/playlists/"
-                };
-            case mod.MediaTypeIntegerEnum.WEBSTREAM:
-                return {
-                    "media": "webstreams",
-                    "icon": "icon-random",
-                    "subtext": "Click 'New' to create one now.",
-                    "href": "http://libretime.org/docs/webstreams/"
-                };
-            case mod.MediaTypeIntegerEnum.PODCAST:
-                return {
-                    "media": "podcasts",
-                    "icon": "icon-headphones",
-                    "subtext": "Click 'Add' to create one now.",
-                    "href": "http://libretime.org/docs/podcasts"
-                };
-            default:
-                break;
-        }
-    };
+  mod.placeholder = function (mediaType) {
+    switch (mediaType) {
+      // TODO: remove duplication in a nice way?
+      case mod.MediaTypeIntegerEnum.FILE:
+        return {
+          media: "tracks",
+          icon: "icon-music",
+          subtext: "Click 'Upload' to add some now.",
+          href: "http://libretime.org/docs/dashboard/",
+        };
+      case mod.MediaTypeIntegerEnum.PLAYLIST:
+        return {
+          media: "playlists",
+          icon: "icon-list",
+          subtext: "Click 'New' to create one now.",
+          href: "http://libretime.org/docs/playlists/",
+        };
+      case mod.MediaTypeIntegerEnum.BLOCK:
+        return {
+          media: "smart blocks",
+          icon: "icon-time",
+          subtext: "Click 'New' to create one now.",
+          href: "http://libretime.org/docs/playlists/",
+        };
+      case mod.MediaTypeIntegerEnum.WEBSTREAM:
+        return {
+          media: "webstreams",
+          icon: "icon-random",
+          subtext: "Click 'New' to create one now.",
+          href: "http://libretime.org/docs/webstreams/",
+        };
+      case mod.MediaTypeIntegerEnum.PODCAST:
+        return {
+          media: "podcasts",
+          icon: "icon-headphones",
+          subtext: "Click 'Add' to create one now.",
+          href: "http://libretime.org/docs/podcasts",
+        };
+      default:
+        break;
+    }
+  };
 
-    /*  ############################################
+  /*  ############################################
                      END CONFIGURATION
         ############################################ */
 
-    mod.getChosenItemsLength = function () {
-        var cItem,
-            selected,
-            $trs;
+  mod.getChosenItemsLength = function () {
+    var cItem, selected, $trs;
 
-        // Get visible items and check if any chosenItems are visible
-        $trs = $libTable.find("tr");
-        $trs.each(function (i) {
-            for (cItem in chosenItems) {
-                if (cItem === $(this).attr("id")) {
-                    visibleChosenItems[cItem] = $(this).data('aData');
-                }
-            }
-        });
-
-        selected = Object.keys(visibleChosenItems).length;
-        visibleChosenItems = {};
-        return selected;
-    };
-
-    mod.getChosenAudioFilesLength = function () {
-        // var files = Object.keys(chosenItems),
-        var files,
-            $trs,
-            cItem,
-            i, length,
-            count = 0,
-            reAudio = /^(au|st|pl|bl)/;
-
-        // Get visible items and check if any chosenItems are visible
-        $trs = $libTable.find("tr");
-        $trs.each(function (i) {
-            for (cItem in chosenItems) {
-                if (cItem === $(this).attr("id")) {
-                    visibleChosenItems[cItem] = $(this).data('aData');
-                }
-            }
-        });
-
-        files = Object.keys(visibleChosenItems);
-
-        for (i = 0, length = files.length; i < length; i++) {
-
-            if (files[i].search(reAudio) !== -1) {
-                count++;
-            }
+    // Get visible items and check if any chosenItems are visible
+    $trs = $libTable.find("tr");
+    $trs.each(function (i) {
+      for (cItem in chosenItems) {
+        if (cItem === $(this).attr("id")) {
+          visibleChosenItems[cItem] = $(this).data("aData");
         }
-        visibleChosenItems = {};
-        return count;
-    };
+      }
+    });
 
-    mod.changeAddButtonText = function ($button, btnText) {
-        $button.text(btnText);
-    };
+    selected = Object.keys(visibleChosenItems).length;
+    visibleChosenItems = {};
+    return selected;
+  };
 
-    mod.createToolbarButtons = function () {
-        $menu = $("<div class='btn-toolbar' />");
-        if ($(".ui-dialog-content").length === 0) {
-            $menu
-                .append(
-                    "<div class='btn-group' title=" + $.i18n._('New') + ">" +
-                    "<button class='btn btn-small btn-new' id='sb-new'>" +
-                    "<i class='icon-white icon-plus'></i>" +
-                    "<span>" + $.i18n._('New') + "</span>" +
-                    "</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>" +
-                    "<span>" + $.i18n._('Edit') + "</span>" +
-                    "</button>" +
-                    "</div>"
-                );
+  mod.getChosenAudioFilesLength = function () {
+    // var files = Object.keys(chosenItems),
+    var files,
+      $trs,
+      cItem,
+      i,
+      length,
+      count = 0,
+      reAudio = /^(au|st|pl|bl)/;
+
+    // Get visible items and check if any chosenItems are visible
+    $trs = $libTable.find("tr");
+    $trs.each(function (i) {
+      for (cItem in chosenItems) {
+        if (cItem === $(this).attr("id")) {
+          visibleChosenItems[cItem] = $(this).data("aData");
         }
+      }
+    });
 
-        $menu
-            .append(
-                "<div class='btn-group'>" +
-                "<button class='btn btn-small' id='library-plus'>" +
-                "<i class='icon-white icon-plus'></i>" +
-                "<span id='lib-plus-text'></span>" +
-                "</button>" +
-                "</div>"
-            ).append(
-                "<div class='btn-group' title=" + $.i18n._('Delete') + ">" +
-                "<button class='btn btn-small btn-danger' id='sb-delete'>" +
-                "<i class='icon-white icon-trash'></i>" +
-                "<span>" + $.i18n._('Delete') + "</span>" +
-                "</button>" +
-                "</div>"
-            );
+    files = Object.keys(visibleChosenItems);
 
-        if (onDashboard) {
-            $menu.append(
-                "<div class='btn-group' title=" + $.i18n._('Publish') + ">" +
-                "<button class='btn btn-small' id='publish-btn'>" +
-                "<span>" + $.i18n._('Publish') + "</span>" +
-                "</button>" +
-                "</div>"
-            );
+    for (i = 0, length = files.length; i < length; i++) {
+      if (files[i].search(reAudio) !== -1) {
+        count++;
+      }
+    }
+    visibleChosenItems = {};
+    return count;
+  };
+
+  mod.changeAddButtonText = function ($button, btnText) {
+    $button.text(btnText);
+  };
+
+  mod.createToolbarButtons = function () {
+    $menu = $("<div class='btn-toolbar' />");
+    if ($(".ui-dialog-content").length === 0) {
+      $menu
+        .append(
+          "<div class='btn-group' title=" +
+            $.i18n._("New") +
+            ">" +
+            "<button class='btn btn-small btn-new' id='sb-new'>" +
+            "<i class='icon-white icon-plus'></i>" +
+            "<span>" +
+            $.i18n._("New") +
+            "</span>" +
+            "</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>" +
+            "<span>" +
+            $.i18n._("Edit") +
+            "</span>" +
+            "</button>" +
+            "</div>"
+        );
+    }
+
+    $menu
+      .append(
+        "<div class='btn-group'>" +
+          "<button class='btn btn-small' id='library-plus'>" +
+          "<i class='icon-white icon-plus'></i>" +
+          "<span id='lib-plus-text'></span>" +
+          "</button>" +
+          "</div>"
+      )
+      .append(
+        "<div class='btn-group' title=" +
+          $.i18n._("Delete") +
+          ">" +
+          "<button class='btn btn-small btn-danger' id='sb-delete'>" +
+          "<i class='icon-white icon-trash'></i>" +
+          "<span>" +
+          $.i18n._("Delete") +
+          "</span>" +
+          "</button>" +
+          "</div>"
+      );
+
+    if (onDashboard) {
+      $menu.append(
+        "<div class='btn-group' title=" +
+          $.i18n._("Publish") +
+          ">" +
+          "<button class='btn btn-small' id='publish-btn'>" +
+          "<span>" +
+          $.i18n._("Publish") +
+          "</span>" +
+          "</button>" +
+          "</div>"
+      );
+    }
+  };
+
+  mod.createToolbarDropDown = function () {
+    $("#sb-select-page").click(function () {
+      mod.selectCurrentPage();
+    });
+    $("#sb-dselect-page").click(function () {
+      mod.deselectCurrentPage();
+    });
+    $("#sb-dselect-all").click(function () {
+      mod.selectNone();
+    });
+  };
+
+  mod.checkDeleteButton = function () {
+    var selected = mod.getChosenItemsLength(),
+      check = false;
+
+    if (selected !== 0) {
+      check = true;
+    }
+
+    if (check === true) {
+      AIRTIME.button.enableButton("btn-group #sb-delete", false);
+    } else {
+      AIRTIME.button.disableButton("btn-group #sb-delete", 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").data("selection-id"),
+      check = false;
+
+    if (selected != AIRTIME.library.MediaTypeIntegerEnum.FILE) {
+      check = true;
+    }
+
+    if (check === true) {
+      AIRTIME.button.enableButton("btn-group #sb-new", false);
+    } else {
+      AIRTIME.button.disableButton("btn-group #sb-new", false);
+    }
+  };
+
+  mod.checkPublishButton = function () {
+    var selected = mod.getChosenItemsLength(),
+      mediaType = $(".media_type_selector.selected").data("selection-id"),
+      check = false;
+
+    if (
+      mediaType == AIRTIME.library.MediaTypeIntegerEnum.FILE &&
+      selected > 0
+    ) {
+      check = true;
+    }
+
+    if (check === true) {
+      AIRTIME.button.enableButton("btn-group #publish-btn", false);
+    } else {
+      AIRTIME.button.disableButton("btn-group #publish-btn", false);
+    }
+  };
+
+  mod.checkToolBarIcons = function () {
+    AIRTIME.library.checkAddButton();
+    AIRTIME.library.checkDeleteButton();
+    AIRTIME.library.checkEditButton();
+    AIRTIME.library.checkNewButton();
+    AIRTIME.library.checkPublishButton();
+  };
+
+  mod.getSelectedData = function () {
+    var id,
+      data = [],
+      cItem,
+      $trs;
+
+    //$.fn.reverse = [].reverse;
+    //$trs = $libTable.find("tr").reverse();
+
+    // Get visible items and check if any chosenItems are visible
+    $trs = $libTable.find("tr");
+    $trs.each(function (i) {
+      for (cItem in chosenItems) {
+        if (cItem === $(this).attr("id")) {
+          visibleChosenItems[cItem] = $(this).data("aData");
         }
-    };
+      }
+    });
 
-    mod.createToolbarDropDown = function () {
-        $('#sb-select-page').click(function () { mod.selectCurrentPage(); });
-        $('#sb-dselect-page').click(function () { mod.deselectCurrentPage(); });
-        $('#sb-dselect-all').click(function () { mod.selectNone(); });
-    };
+    for (id in visibleChosenItems) {
+      if (visibleChosenItems.hasOwnProperty(id)) {
+        data.push(visibleChosenItems[id]);
+      }
+    }
+    visibleChosenItems = {};
+    return data;
+  };
 
-    mod.checkDeleteButton = function () {
-        var selected = mod.getChosenItemsLength(),
-            check = false;
+  mod.redrawChosen = function () {
+    var ids = Object.keys(chosenItems),
+      i,
+      length,
+      $el;
 
-        if (selected !== 0) {
-            check = true;
-        }
+    for (i = 0, length = ids.length; i < length; i++) {
+      $el = $libTable.find("#" + ids[i]);
 
-        if (check === true) {
-            AIRTIME.button.enableButton("btn-group #sb-delete", false);
-        }
-        else {
-            AIRTIME.button.disableButton("btn-group #sb-delete", 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").data("selection-id"),
-            check = false;
-
-        if (selected != AIRTIME.library.MediaTypeIntegerEnum.FILE) {
-            check = true;
-        }
-
-        if (check === true) {
-            AIRTIME.button.enableButton("btn-group #sb-new", false);
-        }
-        else {
-            AIRTIME.button.disableButton("btn-group #sb-new", false);
-        }
-    };
-
-    mod.checkPublishButton = function () {
-        var selected = mod.getChosenItemsLength(),
-            mediaType = $(".media_type_selector.selected").data("selection-id"),
-            check = false;
-
-        if (mediaType == AIRTIME.library.MediaTypeIntegerEnum.FILE && selected > 0) {
-            check = true;
-        }
-
-        if (check === true) {
-            AIRTIME.button.enableButton("btn-group #publish-btn", false);
-        } else {
-            AIRTIME.button.disableButton("btn-group #publish-btn", false);
-        }
-    };
-
-    mod.checkToolBarIcons = function () {
-        AIRTIME.library.checkAddButton();
-        AIRTIME.library.checkDeleteButton();
-        AIRTIME.library.checkEditButton();
-        AIRTIME.library.checkNewButton();
-        AIRTIME.library.checkPublishButton();
-    };
-
-    mod.getSelectedData = function () {
-        var id,
-            data = [],
-            cItem,
-            $trs;
-
-        //$.fn.reverse = [].reverse;
-        //$trs = $libTable.find("tr").reverse();
-
-        // Get visible items and check if any chosenItems are visible
-        $trs = $libTable.find("tr");
-        $trs.each(function (i) {
-            for (cItem in chosenItems) {
-                if (cItem === $(this).attr("id")) {
-                    visibleChosenItems[cItem] = $(this).data('aData');
-                }
-            }
-        });
-
-        for (id in visibleChosenItems) {
-            if (visibleChosenItems.hasOwnProperty(id)) {
-                data.push(visibleChosenItems[id]);
-            }
-        }
-        visibleChosenItems = {};
-        return data;
-    };
-
-    mod.redrawChosen = function () {
-        var ids = Object.keys(chosenItems),
-            i, length,
-            $el;
-
-        for (i = 0, length = ids.length; i < length; i++) {
-            $el = $libTable.find("#" + ids[i]);
-
-            if ($el.length !== 0) {
-                mod.highlightItem($el);
-                mod.checkItem($el);
-            }
-        }
-    };
-
-    mod.isChosenItem = function ($el) {
-        var id = $el.attr("id"),
-            item = chosenItems[id];
-
-        return item !== undefined;
-    };
-
-    mod.addToChosen = function ($el) {
-        var id = $el.attr("id");
-
-        chosenItems[id] = $el.data('aData');
-    };
-
-    mod.removeFromChosen = function ($el) {
-        var id = $el.attr("id");
-
-        // used to not keep dragged items selected.
-        if (!$el.hasClass(LIB_SELECTED_CLASS)) {
-            delete chosenItems[id];
-        }
-    };
-
-    mod.checkItem = function ($el) {
-        $el.find(".library_checkbox > input").prop('checked', true);
-        $("#super-checkbox").prop("checked", true);
-    };
-
-    mod.uncheckItem = function ($el) {
-        $el.find(".library_checkbox > input").prop('checked', false);
-        if ($("." + LIB_SELECTED_CLASS).length == 0) {
-            $("#super-checkbox").prop("checked", false);
-        }
-    };
-
-    mod.highlightItem = function ($el) {
-        $el.addClass(LIB_SELECTED_CLASS);
-    };
-
-    mod.unHighlightItem = function ($el) {
-        $el.removeClass(LIB_SELECTED_CLASS);
-    };
-
-    mod.selectItem = function ($el) {
+      if ($el.length !== 0) {
         mod.highlightItem($el);
-        mod.addToChosen($el);
         mod.checkItem($el);
-        // Remember this row so we can properly multiselect
-        $previouslySelected = $el;
+      }
+    }
+  };
 
-        mod.checkToolBarIcons();
-    };
+  mod.isChosenItem = function ($el) {
+    var id = $el.attr("id"),
+      item = chosenItems[id];
 
-    mod.deselectItem = function ($el) {
-        mod.unHighlightItem($el);
-        mod.removeFromChosen($el);
-        mod.uncheckItem($el);
-        mod.checkToolBarIcons();
-    };
+    return item !== undefined;
+  };
 
-    mod.selectAll = function ($els) {
-        $els.each(function (i, el) {
-            mod.highlightItem($(el));
-            mod.addToChosen($(el));
-            mod.checkItem($(el));
-        });
-        $previouslySelected = $els.last();
-        mod.checkToolBarIcons();
-    };
+  mod.addToChosen = function ($el) {
+    var id = $el.attr("id");
 
-    mod.deselectAll = function ($els) {
-        $els.each(function (i, el) {
-            mod.unHighlightItem($(el));
-            mod.removeFromChosen($(el));
-            mod.uncheckItem($(el));
-        });
-        $previouslySelected = undefined;
-        mod.checkToolBarIcons();
-    };
+    chosenItems[id] = $el.data("aData");
+  };
 
-    /*
-     * selects all items which the user can currently see. (behaviour taken from
-     * gmail)
-     *
-     * by default the items are selected in reverse order so we need to reverse
-     * it back
-     */
-    mod.selectCurrentPage = function () {
-        $.fn.reverse = [].reverse;
-        var $trs = $libTable.find("tbody").find("tr").reverse();
-        mod.selectAll($trs);
-    };
+  mod.removeFromChosen = function ($el) {
+    var id = $el.attr("id");
 
-    /*
-     * deselects all items that the user can currently see. (behaviour taken
-     * from gmail)
-     */
-    mod.deselectCurrentPage = function () {
-        var $trs = $libTable.find("tr");
-        mod.deselectAll($trs);
-    };
+    // used to not keep dragged items selected.
+    if (!$el.hasClass(LIB_SELECTED_CLASS)) {
+      delete chosenItems[id];
+    }
+  };
+
+  mod.checkItem = function ($el) {
+    $el.find(".library_checkbox > input").prop("checked", true);
+    $("#super-checkbox").prop("checked", true);
+  };
+
+  mod.uncheckItem = function ($el) {
+    $el.find(".library_checkbox > input").prop("checked", false);
+    if ($("." + LIB_SELECTED_CLASS).length == 0) {
+      $("#super-checkbox").prop("checked", false);
+    }
+  };
+
+  mod.highlightItem = function ($el) {
+    $el.addClass(LIB_SELECTED_CLASS);
+  };
+
+  mod.unHighlightItem = function ($el) {
+    $el.removeClass(LIB_SELECTED_CLASS);
+  };
+
+  mod.selectItem = function ($el) {
+    mod.highlightItem($el);
+    mod.addToChosen($el);
+    mod.checkItem($el);
+    // Remember this row so we can properly multiselect
+    $previouslySelected = $el;
+
+    mod.checkToolBarIcons();
+  };
+
+  mod.deselectItem = function ($el) {
+    mod.unHighlightItem($el);
+    mod.removeFromChosen($el);
+    mod.uncheckItem($el);
+    mod.checkToolBarIcons();
+  };
+
+  mod.selectAll = function ($els) {
+    $els.each(function (i, el) {
+      mod.highlightItem($(el));
+      mod.addToChosen($(el));
+      mod.checkItem($(el));
+    });
+    $previouslySelected = $els.last();
+    mod.checkToolBarIcons();
+  };
+
+  mod.deselectAll = function ($els) {
+    $els.each(function (i, el) {
+      mod.unHighlightItem($(el));
+      mod.removeFromChosen($(el));
+      mod.uncheckItem($(el));
+    });
+    $previouslySelected = undefined;
+    mod.checkToolBarIcons();
+  };
+
+  /*
+   * selects all items which the user can currently see. (behaviour taken from
+   * gmail)
+   *
+   * by default the items are selected in reverse order so we need to reverse
+   * it back
+   */
+  mod.selectCurrentPage = function () {
+    $.fn.reverse = [].reverse;
+    var $trs = $libTable.find("tbody").find("tr").reverse();
+    mod.selectAll($trs);
+  };
+
+  /*
+   * deselects all items that the user can currently see. (behaviour taken
+   * from gmail)
+   */
+  mod.deselectCurrentPage = function () {
+    var $trs = $libTable.find("tr");
+    mod.deselectAll($trs);
+  };
+
+  mod.selectNone = function () {
+    var $trs = $libTable.find("tr");
+    chosenItems = {};
+    mod.deselectAll($trs);
+  };
+
+  mod.fnRedraw = function () {
+    oTable.fnStandingRedraw();
+  };
+
+  mod.fnDeleteItems = function (aMedia, podcastId) {
+    //Prevent the user from spamming the delete button while the AJAX request is in progress
+    AIRTIME.button.disableButton("btn-group #sb-delete", false);
+    var openTabObjectIds = $(".obj_id"),
+      mediaIds = [];
+    for (var i in aMedia) {
+      mediaIds.push(parseInt(aMedia[i].id));
+    }
+
+    openTabObjectIds.each(function (i, el) {
+      var v = parseInt($(el).val());
+      if ($.inArray(v, mediaIds) > -1) {
+        AIRTIME.tabs
+          .get($(el).closest(".pl-content").attr("data-tab-id"))
+          .close();
+      }
+    });
+
+    $.post(
+      baseUrl + "library/delete",
+      { format: "json", media: aMedia },
+      function (json) {
+        if (json.message !== undefined) {
+          alert(json.message);
+        }
 
-    mod.selectNone = function () {
-        var $trs = $libTable.find("tr");
         chosenItems = {};
-        mod.deselectAll($trs);
-    };
 
-    mod.fnRedraw = function () {
-        oTable.fnStandingRedraw();
-    };
-
-    mod.fnDeleteItems = function (aMedia, podcastId) {
-        //Prevent the user from spamming the delete button while the AJAX request is in progress
-        AIRTIME.button.disableButton("btn-group #sb-delete", false);
-        var openTabObjectIds = $(".obj_id"),
-            mediaIds = [];
-        for (var i in aMedia) {
-            mediaIds.push(parseInt(aMedia[i].id));
+        if (typeof podcastId === "undefined") {
+          oTable.fnStandingRedraw();
+        } else {
+          AIRTIME.podcast.episodeTables[podcastId].reload(this.podcast_id);
+          AIRTIME.podcast.episodeTables[podcastId].clearSelection();
         }
 
-        openTabObjectIds.each(function (i, el) {
-            var v = parseInt($(el).val());
-            if ($.inArray(v, mediaIds) > -1) {
-                AIRTIME.tabs.get($(el).closest(".pl-content").attr("data-tab-id")).close();
-            }
-        });
+        //Re-enable the delete button
+        AIRTIME.button.enableButton("btn-group #sb-delete", false);
+      }
+    );
+    mod.selectNone();
+  };
 
-        $.post(baseUrl + "library/delete",
-            { "format": "json", "media": aMedia },
-            function (json) {
-                if (json.message !== undefined) {
-                    alert(json.message);
-                }
+  mod.fnDeleteSelectedItems = function () {
+    if (
+      confirm($.i18n._("Are you sure you want to delete the selected item(s)?"))
+    ) {
+      var aData = AIRTIME.library.getSelectedData(),
+        item,
+        temp,
+        aMedia = [],
+        currentObjId = $(".side_playlist.active-tab").find(".obj_id").val(),
+        currentObjType = $(".side_playlist.active-tab").find(".obj_type").val(),
+        closeObj = false;
 
-                chosenItems = {};
-
-                if (typeof (podcastId) === "undefined") {
-                    oTable.fnStandingRedraw();
-                } else {
-                    AIRTIME.podcast.episodeTables[podcastId].reload(this.podcast_id);
-                    AIRTIME.podcast.episodeTables[podcastId].clearSelection();
-                }
-
-                //Re-enable the delete button
-                AIRTIME.button.enableButton("btn-group #sb-delete", false);
-            });
-        mod.selectNone();
-    };
-
-    mod.fnDeleteSelectedItems = function () {
-        if (confirm($.i18n._('Are you sure you want to delete the selected item(s)?'))) {
-            var aData = AIRTIME.library.getSelectedData(),
-                item,
-                temp,
-                aMedia = [],
-                currentObjId = $(".side_playlist.active-tab").find(".obj_id").val(),
-                currentObjType = $(".side_playlist.active-tab").find(".obj_type").val(),
-                closeObj = false;
-
-            // process selected files/playlists.
-            for (item in aData) {
-                temp = aData[item];
-                if (temp !== null && temp.hasOwnProperty('id')) {
-                    aMedia.push({ "id": temp.id, "type": temp.ftype });
-                    if ((temp.id == currentObjId && temp.ftype === currentObjType) ||
-                        temp.id == currentObjId && temp.ftype === "stream" && currentObjType === "webstream") {
-                        closeObj = true;
-                    }
-                }
-            }
-
-            AIRTIME.library.fnDeleteItems(aMedia);
+      // process selected files/playlists.
+      for (item in aData) {
+        temp = aData[item];
+        if (temp !== null && temp.hasOwnProperty("id")) {
+          aMedia.push({ id: temp.id, type: temp.ftype });
+          if (
+            (temp.id == currentObjId && temp.ftype === currentObjType) ||
+            (temp.id == currentObjId &&
+              temp.ftype === "stream" &&
+              currentObjType === "webstream")
+          ) {
+            closeObj = true;
+          }
         }
-    };
+      }
 
-    mod.handleAjaxError = function (r) {
-        // If the request was denied due to permissioning
-        if (r.status === 403) {
-            // Hide the processing div
-            var wrapper = $("#library_display_wrapper");
-            wrapper.find(".dt-process-rel").hide();
-            wrapper.find('.empty_placeholder_text').text($.i18n._("You don't have permission to view the library."));
-            wrapper.find('.empty_placeholder').show();
+      AIRTIME.library.fnDeleteItems(aMedia);
+    }
+  };
+
+  mod.handleAjaxError = function (r) {
+    // If the request was denied due to permissioning
+    if (r.status === 403) {
+      // Hide the processing div
+      var wrapper = $("#library_display_wrapper");
+      wrapper.find(".dt-process-rel").hide();
+      wrapper
+        .find(".empty_placeholder_text")
+        .text($.i18n._("You don't have permission to view the library."));
+      wrapper.find(".empty_placeholder").show();
+    }
+  };
+
+  libraryInit = function () {
+    $libContent = $("#library_content");
+
+    /*
+     * Icon hover states in the toolbar.
+     */
+
+    var colReorderMap = new Array();
+
+    $libTable = $("#library_display");
+
+    // put hidden columns at the top to insure they can never be visible
+    // on the table through column reordering.
+
+    //IMPORTANT: WHEN ADDING A NEW COLUMN PLEASE CONSULT WITH THE WIKI
+    // https://wiki.sourcefabric.org/display/CC/Adding+a+new+library+datatable+column
+    var cols = [
+      /* ftype */ {
+        sTitle: "",
+        mDataProp: "ftype",
+        bSearchable: false,
+        bVisible: false,
+      },
+      /* Checkbox */ {
+        sTitle: "",
+        mDataProp: "checkbox",
+        bSortable: false,
+        bSearchable: false,
+        sWidth: "16px",
+        sClass: "library_checkbox",
+      },
+      /* Type */ {
+        sTitle: "",
+        mDataProp: "image",
+        bSortable: false,
+        bSearchable: false,
+        sWidth: "16px",
+        sClass: "library_type",
+        iDataSort: 0,
+      },
+      /* Artwork */ {
+        sTitle: "",
+        mDataProp: "artwork",
+        bSortable: false,
+        bSearchable: false,
+        sWidth: "28px",
+        sClass: "library_artwork",
+        iDataSort: 0,
+      },
+      /* Is Scheduled */ {
+        sTitle: $.i18n._("Scheduled"),
+        mDataProp: "is_scheduled",
+        bVisible: false,
+        bSearchable: false,
+        sWidth: "90px",
+        sClass: "library_is_scheduled",
+      },
+      ///* Is Playlist */     { "sTitle" : $.i18n._("Playlist / Block")   , "mDataProp" : "is_playlist"  , "bSearchable" : false                 , "sWidth"      : "110px"                  , "sClass" : "library_is_playlist"}  ,
+      /* Title */ {
+        sTitle: $.i18n._("Title"),
+        mDataProp: "track_title",
+        sClass: "library_title",
+        sWidth: "170px",
+      },
+      /* Creator */ {
+        sTitle: $.i18n._("Creator"),
+        mDataProp: "artist_name",
+        sClass: "library_creator",
+        sWidth: "160px",
+      },
+      /* Album */ {
+        sTitle: $.i18n._("Album"),
+        mDataProp: "album_title",
+        bVisible: false,
+        sClass: "library_album",
+        sWidth: "150px",
+      },
+      /* Bit Rate */ {
+        sTitle: $.i18n._("Bit Rate"),
+        mDataProp: "bit_rate",
+        bVisible: false,
+        sClass: "library_bitrate",
+        sWidth: "80px",
+      },
+      /* BPM */ {
+        sTitle: $.i18n._("BPM"),
+        mDataProp: "bpm",
+        bVisible: false,
+        sClass: "library_bpm",
+        sWidth: "50px",
+      },
+      /* Composer */ {
+        sTitle: $.i18n._("Composer"),
+        mDataProp: "composer",
+        bVisible: false,
+        sClass: "library_composer",
+        sWidth: "150px",
+      },
+      /* Conductor */ {
+        sTitle: $.i18n._("Conductor"),
+        mDataProp: "conductor",
+        bVisible: false,
+        sClass: "library_conductor",
+        sWidth: "125px",
+      },
+      /* Copyright */ {
+        sTitle: $.i18n._("Copyright"),
+        mDataProp: "copyright",
+        bVisible: false,
+        sClass: "library_copyright",
+        sWidth: "125px",
+      },
+      /* Cue In */ {
+        sTitle: $.i18n._("Cue In"),
+        mDataProp: "cuein",
+        bVisible: false,
+        sClass: "library_length",
+        sWidth: "80px",
+      },
+      /* Cue Out */ {
+        sTitle: $.i18n._("Cue Out"),
+        mDataProp: "cueout",
+        bVisible: false,
+        sClass: "library_length",
+        sWidth: "80px",
+      },
+      /* Description */ {
+        sTitle: $.i18n._("Description"),
+        mDataProp: "description",
+        bVisible: false,
+        sClass: "library_description",
+        sWidth: "150px",
+      },
+      /* Encoded */ {
+        sTitle: $.i18n._("Encoded By"),
+        mDataProp: "encoded_by",
+        bVisible: false,
+        sClass: "library_encoded",
+        sWidth: "150px",
+      },
+      /* Track Type */ {
+        sTitle: $.i18n._("Type"),
+        mDataProp: "track_type_id",
+        sClass: "library_track_type",
+        sWidth: "60px",
+      },
+      /* Genre */ {
+        sTitle: $.i18n._("Genre"),
+        mDataProp: "genre",
+        sClass: "library_genre",
+        sWidth: "100px",
+      },
+      /* ISRC Number */ {
+        sTitle: $.i18n._("ISRC"),
+        mDataProp: "isrc_number",
+        bVisible: false,
+        sClass: "library_isrc",
+        sWidth: "150px",
+      },
+      /* Label */ {
+        sTitle: $.i18n._("Label"),
+        mDataProp: "label",
+        bVisible: false,
+        sClass: "library_label",
+        sWidth: "125px",
+      },
+      /* Language */ {
+        sTitle: $.i18n._("Language"),
+        mDataProp: "language",
+        bVisible: false,
+        sClass: "library_language",
+        sWidth: "125px",
+      },
+      /* Last Modified */ {
+        sTitle: $.i18n._("Last Modified"),
+        mDataProp: "mtime",
+        bVisible: false,
+        sClass: "library_modified_time",
+        sWidth: "155px",
+      },
+      /* Last Played */ {
+        sTitle: $.i18n._("Last Played"),
+        mDataProp: "lptime",
+        bVisible: false,
+        sClass: "library_modified_time",
+        sWidth: "155px",
+      },
+      /* Length */ {
+        sTitle: $.i18n._("Length"),
+        mDataProp: "length",
+        sClass: "library_length",
+        sWidth: "80px",
+      },
+      /* Mime */ {
+        sTitle: $.i18n._("Mime"),
+        mDataProp: "mime",
+        bVisible: false,
+        sClass: "library_mime",
+        sWidth: "80px",
+      },
+      /* Mood */ {
+        sTitle: $.i18n._("Mood"),
+        mDataProp: "mood",
+        bVisible: false,
+        sClass: "library_mood",
+        sWidth: "70px",
+      },
+      /* Owner */ {
+        sTitle: $.i18n._("Owner"),
+        mDataProp: "owner_id",
+        bVisible: false,
+        sClass: "library_language",
+        sWidth: "125px",
+      },
+      /* Replay Gain */ {
+        sTitle: $.i18n._("Replay Gain"),
+        mDataProp: "replay_gain",
+        bVisible: false,
+        sClass: "library_replay_gain",
+        sWidth: "125px",
+      },
+      /* Sample Rate */ {
+        sTitle: $.i18n._("Sample Rate"),
+        mDataProp: "sample_rate",
+        bVisible: false,
+        sClass: "library_sr",
+        sWidth: "125px",
+      },
+      /* Track Number */ {
+        sTitle: $.i18n._("Track Number"),
+        mDataProp: "track_number",
+        bVisible: false,
+        sClass: "library_track",
+        sWidth: "125px",
+      },
+      /* Upload Time */ {
+        sTitle: $.i18n._("Uploaded"),
+        mDataProp: "utime",
+        sClass: "library_upload_time",
+        sWidth: "155px",
+      },
+      /* Website */ {
+        sTitle: $.i18n._("Website"),
+        mDataProp: "info_url",
+        bVisible: false,
+        sClass: "library_url",
+        sWidth: "150px",
+      },
+      /* Year */ {
+        sTitle: $.i18n._("Year"),
+        mDataProp: "year",
+        bVisible: false,
+        sClass: "library_year",
+        sWidth: "60px",
+      },
+    ];
+
+    if (onDashboard) {
+      cols.push(
+        /* Context Menu */ {
+          sTitle: "",
+          mDataProp: "options",
+          bSortable: false,
+          bSearchable: false,
+          sWidth: "20px",
+          sClass: "library_actions",
         }
-    };
+      );
+    }
 
+    var colExclude = onDashboard ? [0, 1, 2, 3, 34] : [0, 1, 2];
 
-    libraryInit = function () {
-
-        $libContent = $("#library_content");
-
-        /*
-         * Icon hover states in the toolbar.
-         */
-
-        var colReorderMap = new Array();
-
-        $libTable = $("#library_display");
-
-        // put hidden columns at the top to insure they can never be visible
-        // on the table through column reordering.
-
-        //IMPORTANT: WHEN ADDING A NEW COLUMN PLEASE CONSULT WITH THE WIKI
-        // https://wiki.sourcefabric.org/display/CC/Adding+a+new+library+datatable+column
-        var cols = [
-            /* ftype */           { "sTitle": "", "mDataProp": "ftype", "bSearchable": false, "bVisible": false },
-            /* Checkbox */        { "sTitle": "", "mDataProp": "checkbox", "bSortable": false, "bSearchable": false, "sWidth": "16px", "sClass": "library_checkbox" },
-            /* Type */            { "sTitle": "", "mDataProp": "image", "bSortable": false, "bSearchable": false, "sWidth": "16px", "sClass": "library_type", "iDataSort": 0 },
-            /* Artwork */         { "sTitle": "", "mDataProp": "artwork", "bSortable": false, "bSearchable": false, "sWidth": "28px", "sClass": "library_artwork", "iDataSort": 0 },
-            /* Is Scheduled */    { "sTitle": $.i18n._("Scheduled"), "mDataProp": "is_scheduled", "bVisible": false, "bSearchable": false, "sWidth": "90px", "sClass": "library_is_scheduled" },
-            ///* Is Playlist */     { "sTitle" : $.i18n._("Playlist / Block")   , "mDataProp" : "is_playlist"  , "bSearchable" : false                 , "sWidth"      : "110px"                  , "sClass" : "library_is_playlist"}  ,
-            /* Title */           { "sTitle": $.i18n._("Title"), "mDataProp": "track_title", "sClass": "library_title", "sWidth": "170px" },
-            /* Creator */         { "sTitle": $.i18n._("Creator"), "mDataProp": "artist_name", "sClass": "library_creator", "sWidth": "160px" },
-            /* Album */           { "sTitle": $.i18n._("Album"), "mDataProp": "album_title", "bVisible": false, "sClass": "library_album", "sWidth": "150px" },
-            /* Bit Rate */        { "sTitle": $.i18n._("Bit Rate"), "mDataProp": "bit_rate", "bVisible": false, "sClass": "library_bitrate", "sWidth": "80px" },
-            /* BPM */             { "sTitle": $.i18n._("BPM"), "mDataProp": "bpm", "bVisible": false, "sClass": "library_bpm", "sWidth": "50px" },
-            /* Composer */        { "sTitle": $.i18n._("Composer"), "mDataProp": "composer", "bVisible": false, "sClass": "library_composer", "sWidth": "150px" },
-            /* Conductor */       { "sTitle": $.i18n._("Conductor"), "mDataProp": "conductor", "bVisible": false, "sClass": "library_conductor", "sWidth": "125px" },
-            /* Copyright */       { "sTitle": $.i18n._("Copyright"), "mDataProp": "copyright", "bVisible": false, "sClass": "library_copyright", "sWidth": "125px" },
-            /* Cue In */          { "sTitle": $.i18n._("Cue In"), "mDataProp": "cuein", "bVisible": false, "sClass": "library_length", "sWidth": "80px" },
-            /* Cue Out */         { "sTitle": $.i18n._("Cue Out"), "mDataProp": "cueout", "bVisible": false, "sClass": "library_length", "sWidth": "80px" },
-            /* Description */     { "sTitle": $.i18n._("Description"), "mDataProp": "description", "bVisible": false, "sClass": "library_description", "sWidth": "150px" },
-            /* Encoded */         { "sTitle": $.i18n._("Encoded By"), "mDataProp": "encoded_by", "bVisible": false, "sClass": "library_encoded", "sWidth": "150px" },
-            /* Track Type */      { "sTitle": $.i18n._("Type"), "mDataProp": "track_type_id", "sClass": "library_track_type", "sWidth": "60px" },
-            /* Genre */           { "sTitle": $.i18n._("Genre"), "mDataProp": "genre", "sClass": "library_genre", "sWidth": "100px" },
-            /* ISRC Number */     { "sTitle": $.i18n._("ISRC"), "mDataProp": "isrc_number", "bVisible": false, "sClass": "library_isrc", "sWidth": "150px" },
-            /* Label */           { "sTitle": $.i18n._("Label"), "mDataProp": "label", "bVisible": false, "sClass": "library_label", "sWidth": "125px" },
-            /* Language */        { "sTitle": $.i18n._("Language"), "mDataProp": "language", "bVisible": false, "sClass": "library_language", "sWidth": "125px" },
-            /* Last Modified */   { "sTitle": $.i18n._("Last Modified"), "mDataProp": "mtime", "bVisible": false, "sClass": "library_modified_time", "sWidth": "155px" },
-            /* Last Played */     { "sTitle": $.i18n._("Last Played"), "mDataProp": "lptime", "bVisible": false, "sClass": "library_modified_time", "sWidth": "155px" },
-            /* Length */          { "sTitle": $.i18n._("Length"), "mDataProp": "length", "sClass": "library_length", "sWidth": "80px" },
-            /* Mime */            { "sTitle": $.i18n._("Mime"), "mDataProp": "mime", "bVisible": false, "sClass": "library_mime", "sWidth": "80px" },
-            /* Mood */            { "sTitle": $.i18n._("Mood"), "mDataProp": "mood", "bVisible": false, "sClass": "library_mood", "sWidth": "70px" },
-            /* Owner */           { "sTitle": $.i18n._("Owner"), "mDataProp": "owner_id", "bVisible": false, "sClass": "library_language", "sWidth": "125px" },
-            /* Replay Gain */     { "sTitle": $.i18n._("Replay Gain"), "mDataProp": "replay_gain", "bVisible": false, "sClass": "library_replay_gain", "sWidth": "125px" },
-            /* Sample Rate */     { "sTitle": $.i18n._("Sample Rate"), "mDataProp": "sample_rate", "bVisible": false, "sClass": "library_sr", "sWidth": "125px" },
-            /* Track Number */    { "sTitle": $.i18n._("Track Number"), "mDataProp": "track_number", "bVisible": false, "sClass": "library_track", "sWidth": "125px" },
-            /* Upload Time */     { "sTitle": $.i18n._("Uploaded"), "mDataProp": "utime", "sClass": "library_upload_time", "sWidth": "155px" },
-            /* Website */         { "sTitle": $.i18n._("Website"), "mDataProp": "info_url", "bVisible": false, "sClass": "library_url", "sWidth": "150px" },
-            /* Year */            { "sTitle": $.i18n._("Year"), "mDataProp": "year", "bVisible": false, "sClass": "library_year", "sWidth": "60px" }
-        ];
-
-        if (onDashboard) {
-            cols.push(
-            /* Context Menu */    { "sTitle": "", "mDataProp": "options", "bSortable": false, "bSearchable": false, "sWidth": "20px", "sClass": "library_actions" }
-            );
-        }
-
-        var colExclude = onDashboard ? [0, 1, 2, 3, 34] : [0, 1, 2];
-
-        /*  ############################################
+    /*  ############################################
                             DATATABLES
             ############################################ */
 
-        mod.libraryDataTable = $libTable.dataTable({
+    mod.libraryDataTable = $libTable.dataTable({
+      // put hidden columns at the top to insure they can never be visible
+      // on the table through column reordering.
 
-            // put hidden columns at the top to insure they can never be visible
-            // on the table through column reordering.
-
-            //IMPORTANT: WHEN ADDING A NEW COLUMN PLEASE CONSULT WITH THE WIKI
-            // https://wiki.sourcefabric.org/display/CC/Adding+a+new+library+datatable+column
-            "aoColumns": cols,
-            "bProcessing": true,
-            "bServerSide": true,
-            "aLengthMenu": [25, 50, 100],
-            "bStateSave": true,
-            "fnStateSaveParams": function (oSettings, oData) {
-                // remove oData components we don't want to save.
-                delete oData.oSearch;
-                delete oData.aoSearchCols;
-            },
-            "fnStateSave": function (oSettings, oData) {
-                localStorage.setItem('datatables-library', JSON.stringify(oData));
-
-                // Sadly, this is necessary because we need to unscramble the colReorder map on the backend
-                $.ajax({
-                    url: baseUrl + "usersettings/set-library-datatable",
-                    type: "POST",
-                    data: { settings: oData, format: "json" },
-                    dataType: "json"
-                });
-
-                colReorderMap = oData.ColReorder;
-            },
-            "fnStateLoad": function fnLibStateLoad(oSettings) {
-                var settings = JSON.parse(localStorage.getItem('datatables-library'));
-
-                // local storage was empty lets get something from the backend
-                if (settings === null) {
-                    // we have a datatables implementation that is so old we need to async:false ;(
-                    // see http://legacy.datatables.net/usage/callbacks#fnStateLoad for info and
-                    // feel free to start trying to port this to a modern version ;)
-                    $.ajax({
-                        'url': baseUrl + 'usersettings/get-library-datatable',
-                        'async': false, // <<< every sane browser will warn that this is not nice
-                        'dataType': 'json',
-                        'success': function (oData) {
-                            localStorage.setItem('datatables-library', JSON.stringify(oData));
-                            settings = oData;
-                        }
-                    });
-                }
-                // Hacky; always set the visibility of the last column (actions buttons) to true
-                if (settings && settings.abVisCols) settings.abVisCols[settings.abVisCols.length - 1] = true;
-
-                return settings;
-            },
-            "fnStateLoadParams": function (oSettings, oData) {
-                var i,
-                    length,
-                    a = oData.abVisCols;
-
-                if (a) {
-                    // putting serialized data back into the correct js type to make
-                    // sure everything works properly.
-                    for (i = 0, length = a.length; i < length; i++) {
-                        if (typeof (a[i]) === "string") {
-                            a[i] = (a[i] === "true");
-                        }
-                    }
-                }
-
-                a = oData.ColReorder;
-                if (a) {
-                    for (i = 0, length = a.length; i < length; i++) {
-                        if (typeof (a[i]) === "string") {
-                            a[i] = parseInt(a[i], 10);
-                        }
-                    }
-                }
-
-                oData.iEnd = parseInt(oData.iEnd, 10);
-                oData.iLength = parseInt(oData.iLength, 10);
-                oData.iStart = parseInt(oData.iStart, 10);
-                oData.iCreate = parseInt(oData.iCreate, 10);
-            },
-
-            "sAjaxSource": baseUrl + "Library/contents-feed",
-            "sAjaxDataProp": "files",
-
-            "fnServerData": function (sSource, aoData, fnCallback) {
-                /*
-                 * The real validation check is done in
-                 * dataTables.columnFilter.js We also need to check it here
-                 * because datatable is redrawn everytime an action is performed
-                 * in the Library page. In order for datatable to redraw the
-                 * advanced search fields MUST all be valid.
-                 */
-                var advSearchFields = $("div#advanced_search").children(':visible');
-                var advSearchValid = validateAdvancedSearch(advSearchFields);
-                var type;
-                aoData.push({ name: "format", value: "json" });
-                aoData.push({ name: "advSearch", value: advSearchValid });
-
-                // push whether to search files/playlists or all.
-                type = $(".media_type_selector.selected").data("selection-id");
-                type = (type === undefined) ? AIRTIME.library.MediaTypeIntegerEnum.DEFAULT : type;
-                aoData.push({ name: "type", value: type });
-
-                $.ajax({
-                    "dataType": 'json',
-                    "type": "POST",
-                    "url": sSource,
-                    "data": aoData,
-                    "success": fnCallback,
-                    "error": mod.handleAjaxError
-                }).done(function (data) {
-                    var filterMessage = $libContent.find('.filter-message');
-                    if (data.iTotalRecords > data.iTotalDisplayRecords) {
-                        filterMessage.text(
-                            $.i18n._("Filtering out ") + (data.iTotalRecords - data.iTotalDisplayRecords)
-                            + $.i18n._(" of ") + data.iTotalRecords
-                            + $.i18n._(" records")
-                        );
-                        $('.empty_placeholder').hide();
-                        $libTable.find('tr:has(td.dataTables_empty)').show();
-                    } else {
-                        filterMessage.text("");
-                    }
-                    $libContent.find('.dataTables_filter input[type="text"]')
-                        .css('padding-right', $('#advanced-options').find('button').outerWidth());
-                    if (!($('#advanced_search input[type="text"]').is(":focus"))) {
-                        $libContent.find('.dataTables_filter input[type="text"]').focus();
-                    }
-                });
-            },
-            "fnRowCallback": AIRTIME.library.fnRowCallback,
-            "fnCreatedRow": function (nRow, aData, iDataIndex) {
-                // add checkbox
-                $(nRow).find('td.library_checkbox').html("<input type='checkbox' name='cb_" + aData.id + "'>");
-
-                if (onDashboard) {
-                    $(nRow).find('td.library_actions')
-                        .text("...")
-                        .on('click', function (e) {
-                            $(this).contextMenu({ x: $(e.target).offset().left, y: $(e.target).offset().top })
-                        }).html("<div class='library_actions_btn'>...</div>");
-
-                    if (aData.track_type_id == null || aData.track_type_id == undefined || aData.track_type_id == 0) {
-                        var has_type = false;
-                        var type_button = "";
-                    } else {
-                        var has_type = true;
-                        var type_button = "<div class='library_track_type_btn'>" + TRACKTYPES[aData.track_type_id].code + "</div>";
-                    }
-
-                    $(nRow).find('td.library_track_type')
-                        .on('click', function (e) {
-
-                            $.getJSON(
-                                baseUrl + "api/track-types",
-                                function (json) {
-                                    var type_enabled = false;
-                                    $.each(json, function (key, value) {
-                                        if (value['id'] == aData.track_type_id) {
-                                            $("#au_" + aData.id + " td.library_track_type div.library_track_type_btn").qtip({
-                                                overwrite: false,
-                                                content: {
-                                                    text: value['type_name']
-                                                },
-                                                style: {
-                                                    classes: 'track-type-tip',
-                                                    widget: true,
-                                                    def: false,
-                                                    position: {
-                                                        target: $("#au_" + aData.id + " td.library_track_type"), // my target
-                                                        my: 'bottom center',
-                                                        at: 'top center',
-                                                        adjust: {
-                                                            x: 50
-                                                        }
-                                                    },
-                                                    tip: {
-                                                        height: 5,
-                                                        width: 12,
-                                                        corner: 'bottom left',
-                                                        mimic: 'left'
-                                                    }
-                                                },
-                                                show: {
-                                                    ready: true
-                                                },
-                                                hide: {
-                                                    delay: 200,
-                                                    fixed: true,
-                                                }
-                                            });
-
-                                            type_enabled = true;
-                                        }
-                                    });
-
-                                    if (type_enabled == false && has_type == true) {
-                                        alert("This type is disabled.");
-                                    }
-                                });
-
-                        }).html(type_button);
-                }
-
-                // add audio preview image/button
-                if (aData.ftype === "audioclip") {
-                    $(nRow).find('td.library_type').html('<img title="' + $.i18n._("Track preview") + '" src="' + baseUrl + 'css/images/icon_audioclip.png">');
-                    if (aData.artwork_data) {
-                        $(nRow).find('td.library_artwork').html('<img class="img_small" id="' + aData.id + '" width="28" height="28" src="' + aData.artwork_data + '">');
-                    } else {
-                        $(nRow).find('td.library_artwork').html('<img class="img_small" width="28" height="28" src="' + baseUrl + 'css/images/no-cover.jpg">');
-                    }
-                } else if (aData.ftype === "playlist") {
-                    $(nRow).find('td.library_type').html('<img title="' + $.i18n._("Playlist preview") + '" src="' + baseUrl + 'css/images/icon_playlist.png">');
-                } else if (aData.ftype === "block") {
-                    $(nRow).find('td.library_type').html('<img title="' + $.i18n._("Smart Block") + '" src="' + baseUrl + 'css/images/icon_smart-block.png">');
-                } else if (aData.ftype === "stream") {
-                    $(nRow).find('td.library_type').html('<img title="' + $.i18n._("Webstream preview") + '" src="' + baseUrl + 'css/images/icon_webstream.png">');
-                }
-
-                if (aData.is_scheduled) {
-                    $(nRow).find("td.library_is_scheduled").html('<span class="small-icon is_scheduled"></span>');
-                } else if (!aData.is_scheduled) {
-                    $(nRow).find("td.library_is_scheduled").html('');
-                }
-                if (aData.is_playlist) {
-                    $(nRow).find("td.library_is_playlist").html('<span class="small-icon is_playlist"></span>');
-                } else if (!aData.is_playlist) {
-                    $(nRow).find("td.library_is_playlist").html('');
-                }
-            },
-            // remove any selected nodes before the draw.
-            "fnPreDrawCallback": function (oSettings) {
-
-                // make sure any dragging helpers are removed or else they'll be
-                // stranded on the screen.
-                $("#draggingContainer").remove();
-            },
-            "fnDrawCallback": AIRTIME.library.fnDrawCallback,
-
-            "aaSorting": [[29, 'desc']],
-            "sPaginationType": "full_numbers",
-            "bJQueryUI": true,
-            "bAutoWidth": false,
-            "oLanguage": getLibraryDatatableStrings(),
-
-            // z = ColResize, R = ColReorder, C = ColVis
-            "sDom": 'Rf<"dt-process-rel"r><"H"<"library_toolbar"C>><"dataTables_scrolling"t<".empty_placeholder"<".empty_placeholder_image"><".empty_placeholder_text">>><"F"lip>>',
-
-            "oColVis": {
-                "sAlign": "right",
-                "aiExclude": colExclude,
-                "sSize": "css",
-                "fnStateChange": setFilterElement,
-                "buttonText": $.i18n._("Columns"),
-                "iOverlayFade": 0
-            },
-
-            "oColReorder": {
-                "iFixedColumnsRight": 1,
-                "iFixedColumns": 3
-            },
-
-            "bScrollCollapse": false
+      //IMPORTANT: WHEN ADDING A NEW COLUMN PLEASE CONSULT WITH THE WIKI
+      // https://wiki.sourcefabric.org/display/CC/Adding+a+new+library+datatable+column
+      aoColumns: cols,
+      bProcessing: true,
+      bServerSide: true,
+      aLengthMenu: [25, 50, 100],
+      bStateSave: true,
+      fnStateSaveParams: function (oSettings, oData) {
+        // remove oData components we don't want to save.
+        delete oData.oSearch;
+        delete oData.aoSearchCols;
+      },
+      fnStateSave: function (oSettings, oData) {
+        localStorage.setItem("datatables-library", JSON.stringify(oData));
 
+        // Sadly, this is necessary because we need to unscramble the colReorder map on the backend
+        $.ajax({
+          url: baseUrl + "usersettings/set-library-datatable",
+          type: "POST",
+          data: { settings: oData, format: "json" },
+          dataType: "json",
         });
 
-        $datatables[mod.DataTableTypeEnum.LIBRARY] = mod.libraryDataTable;
+        colReorderMap = oData.ColReorder;
+      },
+      fnStateLoad: function fnLibStateLoad(oSettings) {
+        var settings = JSON.parse(localStorage.getItem("datatables-library"));
 
-        /*  ############################################
-                          END DATATABLES
-            ############################################ */
+        // local storage was empty lets get something from the backend
+        if (settings === null) {
+          // we have a datatables implementation that is so old we need to async:false ;(
+          // see http://legacy.datatables.net/usage/callbacks#fnStateLoad for info and
+          // feel free to start trying to port this to a modern version ;)
+          $.ajax({
+            url: baseUrl + "usersettings/get-library-datatable",
+            async: false, // <<< every sane browser will warn that this is not nice
+            dataType: "json",
+            success: function (oData) {
+              localStorage.setItem("datatables-library", JSON.stringify(oData));
+              settings = oData;
+            },
+          });
+        }
+        // Hacky; always set the visibility of the last column (actions buttons) to true
+        if (settings && settings.abVisCols)
+          settings.abVisCols[settings.abVisCols.length - 1] = true;
 
-        function getTableHeight() {
-            return $libContent.height() - 175;
+        return settings;
+      },
+      fnStateLoadParams: function (oSettings, oData) {
+        var i,
+          length,
+          a = oData.abVisCols;
+
+        if (a) {
+          // putting serialized data back into the correct js type to make
+          // sure everything works properly.
+          for (i = 0, length = a.length; i < length; i++) {
+            if (typeof a[i] === "string") {
+              a[i] = a[i] === "true";
+            }
+          }
         }
 
-        function setColumnFilter(oTable) {
-            // TODO : remove this dirty hack once js is refactored
-            if (!oTable.fnSettings()) { return; }
-            var aoCols = oTable.fnSettings().aoColumns;
-            var colsForAdvancedSearch = new Array();
-            var advanceSearchDiv = $("div#advanced_search");
-            advanceSearchDiv.empty();
-            $.each(aoCols, function (i, ele) {
-                if (ele.bSearchable) {
-                    var currentColId = ele._ColReorder_iOrigCol;
-
-                    var inputClass = 'filter_column filter_number_text';
-                    var labelStyle = "style='margin-right:35px;'";
-                    if (libraryColumnTypes[ele.mDataProp] == "n" || libraryColumnTypes[ele.mDataProp] == "i") {
-                        inputClass = 'filterColumn filter_number_range';
-                        labelStyle = "";
-                    } else if (libraryColumnTypes[ele.mDataProp] == "tt") {
-                        inputClass = 'filterColumn filter_track_type_select';
-                        labelStyle = "";
-                    }
-
-                    if (ele.bVisible) {
-                        advanceSearchDiv.append(
-                            "<div id='advanced_search_col_" + currentColId + "' class='control-group'>" +
-                            "<label class='control-label'" + labelStyle + ">" + ele.sTitle + "</label>" +
-                            "<div id='" + ele.mDataProp + "' class='controls " + inputClass + "'></div>" +
-                            "</div>");
-                    } else {
-                        advanceSearchDiv.append(
-                            "<div id='advanced_search_col_" + currentColId + "' class='control-group' style='display:none;'>" +
-                            "<label class='control-label'" + labelStyle + ">" + ele.sTitle + "</label>" +
-                            "<div id='" + ele.mDataProp + "' class='controls " + inputClass + "'></div>" +
-                            "</div>");
-                    }
-
-                    if (libraryColumnTypes[ele.mDataProp] == "s") {
-                        var obj = { sSelector: "#" + ele.mDataProp }
-                    } else if (libraryColumnTypes[ele.mDataProp] == "tt") {
-                        var obj = { sSelector: "#" + ele.mDataProp, type: "select" }
-                    } else {
-                        var obj = { sSelector: "#" + ele.mDataProp, type: "number-range" }
-                    }
-                    colsForAdvancedSearch.push(obj);
-                } else {
-                    colsForAdvancedSearch.push(null);
-                }
-            });
-
-            oTable.columnFilter({
-                aoColumns: colsForAdvancedSearch,
-                bUseColVis: true,
-                sPlaceHolder: "head:before"
+        a = oData.ColReorder;
+        if (a) {
+          for (i = 0, length = a.length; i < length; i++) {
+            if (typeof a[i] === "string") {
+              a[i] = parseInt(a[i], 10);
             }
+          }
+        }
+
+        oData.iEnd = parseInt(oData.iEnd, 10);
+        oData.iLength = parseInt(oData.iLength, 10);
+        oData.iStart = parseInt(oData.iStart, 10);
+        oData.iCreate = parseInt(oData.iCreate, 10);
+      },
+
+      sAjaxSource: baseUrl + "Library/contents-feed",
+      sAjaxDataProp: "files",
+
+      fnServerData: function (sSource, aoData, fnCallback) {
+        /*
+         * The real validation check is done in
+         * dataTables.columnFilter.js We also need to check it here
+         * because datatable is redrawn everytime an action is performed
+         * in the Library page. In order for datatable to redraw the
+         * advanced search fields MUST all be valid.
+         */
+        var advSearchFields = $("div#advanced_search").children(":visible");
+        var advSearchValid = validateAdvancedSearch(advSearchFields);
+        var type;
+        aoData.push({ name: "format", value: "json" });
+        aoData.push({ name: "advSearch", value: advSearchValid });
+
+        // push whether to search files/playlists or all.
+        type = $(".media_type_selector.selected").data("selection-id");
+        type =
+          type === undefined
+            ? AIRTIME.library.MediaTypeIntegerEnum.DEFAULT
+            : type;
+        aoData.push({ name: "type", value: type });
+
+        $.ajax({
+          dataType: "json",
+          type: "POST",
+          url: sSource,
+          data: aoData,
+          success: fnCallback,
+          error: mod.handleAjaxError,
+        }).done(function (data) {
+          var filterMessage = $libContent.find(".filter-message");
+          if (data.iTotalRecords > data.iTotalDisplayRecords) {
+            filterMessage.text(
+              $.i18n._("Filtering out ") +
+                (data.iTotalRecords - data.iTotalDisplayRecords) +
+                $.i18n._(" of ") +
+                data.iTotalRecords +
+                $.i18n._(" records")
+            );
+            $(".empty_placeholder").hide();
+            $libTable.find("tr:has(td.dataTables_empty)").show();
+          } else {
+            filterMessage.text("");
+          }
+          $libContent
+            .find('.dataTables_filter input[type="text"]')
+            .css(
+              "padding-right",
+              $("#advanced-options").find("button").outerWidth()
+            );
+          if (!$('#advanced_search input[type="text"]').is(":focus")) {
+            $libContent.find('.dataTables_filter input[type="text"]').focus();
+          }
+        });
+      },
+      fnRowCallback: AIRTIME.library.fnRowCallback,
+      fnCreatedRow: function (nRow, aData, iDataIndex) {
+        // add checkbox
+        $(nRow)
+          .find("td.library_checkbox")
+          .html("<input type='checkbox' name='cb_" + aData.id + "'>");
+
+        if (onDashboard) {
+          $(nRow)
+            .find("td.library_actions")
+            .text("...")
+            .on("click", function (e) {
+              $(this).contextMenu({
+                x: $(e.target).offset().left,
+                y: $(e.target).offset().top,
+              });
+            })
+            .html("<div class='library_actions_btn'>...</div>");
+
+          if (
+            aData.track_type_id == null ||
+            aData.track_type_id == undefined ||
+            aData.track_type_id == 0
+          ) {
+            var has_type = false;
+            var type_button = "";
+          } else {
+            var has_type = true;
+            var type_button =
+              "<div class='library_track_type_btn'>" +
+              TRACKTYPES[aData.track_type_id].code +
+              "</div>";
+          }
+
+          $(nRow)
+            .find("td.library_track_type")
+            .on("click", function (e) {
+              $.getJSON(baseUrl + "api/track-types", function (json) {
+                var type_enabled = false;
+                $.each(json, function (key, value) {
+                  if (value["id"] == aData.track_type_id) {
+                    $(
+                      "#au_" +
+                        aData.id +
+                        " td.library_track_type div.library_track_type_btn"
+                    ).qtip({
+                      overwrite: false,
+                      content: {
+                        text: value["type_name"],
+                      },
+                      style: {
+                        classes: "track-type-tip",
+                        widget: true,
+                        def: false,
+                        position: {
+                          target: $(
+                            "#au_" + aData.id + " td.library_track_type"
+                          ), // my target
+                          my: "bottom center",
+                          at: "top center",
+                          adjust: {
+                            x: 50,
+                          },
+                        },
+                        tip: {
+                          height: 5,
+                          width: 12,
+                          corner: "bottom left",
+                          mimic: "left",
+                        },
+                      },
+                      show: {
+                        ready: true,
+                      },
+                      hide: {
+                        delay: 200,
+                        fixed: true,
+                      },
+                    });
+
+                    type_enabled = true;
+                  }
+                });
+
+                if (type_enabled == false && has_type == true) {
+                  alert("This type is disabled.");
+                }
+              });
+            })
+            .html(type_button);
+        }
+
+        // add audio preview image/button
+        if (aData.ftype === "audioclip") {
+          $(nRow)
+            .find("td.library_type")
+            .html(
+              '<img title="' +
+                $.i18n._("Track preview") +
+                '" src="' +
+                baseUrl +
+                'css/images/icon_audioclip.png">'
+            );
+          if (aData.artwork_data) {
+            $(nRow)
+              .find("td.library_artwork")
+              .html(
+                '<img class="img_small" id="' +
+                  aData.id +
+                  '" width="28" height="28" src="' +
+                  aData.artwork_data +
+                  '">'
+              );
+          } else {
+            $(nRow)
+              .find("td.library_artwork")
+              .html(
+                '<img class="img_small" width="28" height="28" src="' +
+                  baseUrl +
+                  'css/images/no-cover.jpg">'
+              );
+          }
+        } else if (aData.ftype === "playlist") {
+          $(nRow)
+            .find("td.library_type")
+            .html(
+              '<img title="' +
+                $.i18n._("Playlist preview") +
+                '" src="' +
+                baseUrl +
+                'css/images/icon_playlist.png">'
+            );
+        } else if (aData.ftype === "block") {
+          $(nRow)
+            .find("td.library_type")
+            .html(
+              '<img title="' +
+                $.i18n._("Smart Block") +
+                '" src="' +
+                baseUrl +
+                'css/images/icon_smart-block.png">'
+            );
+        } else if (aData.ftype === "stream") {
+          $(nRow)
+            .find("td.library_type")
+            .html(
+              '<img title="' +
+                $.i18n._("Webstream preview") +
+                '" src="' +
+                baseUrl +
+                'css/images/icon_webstream.png">'
             );
         }
 
-        function setFilterElement(iColumn, bVisible) {
-            var actualId = colReorderMap[iColumn];
-            var selector = "div#advanced_search_col_" + actualId;
-            var $el = $(selector);
-
-            if (bVisible) {
-                $el.show();
-            } else {
-                $el.hide();
-            }
+        if (aData.is_scheduled) {
+          $(nRow)
+            .find("td.library_is_scheduled")
+            .html('<span class="small-icon is_scheduled"></span>');
+        } else if (!aData.is_scheduled) {
+          $(nRow).find("td.library_is_scheduled").html("");
         }
+        if (aData.is_playlist) {
+          $(nRow)
+            .find("td.library_is_playlist")
+            .html('<span class="small-icon is_playlist"></span>');
+        } else if (!aData.is_playlist) {
+          $(nRow).find("td.library_is_playlist").html("");
+        }
+      },
+      // remove any selected nodes before the draw.
+      fnPreDrawCallback: function (oSettings) {
+        // make sure any dragging helpers are removed or else they'll be
+        // stranded on the screen.
+        $("#draggingContainer").remove();
+      },
+      fnDrawCallback: AIRTIME.library.fnDrawCallback,
 
-        function getLibraryDatatableStrings() {
-            //Set up the datatables string translation table with different strings depending on
-            //whether you're viewing files, playlists, smart blocks, etc.
-            var type = parseInt($(".media_type_selector.selected").data("selection-id"));
-            type = (type === undefined) ? AIRTIME.library.MediaTypeIntegerEnum.DEFAULT : type;
+      aaSorting: [[29, "desc"]],
+      sPaginationType: "full_numbers",
+      bJQueryUI: true,
+      bAutoWidth: false,
+      oLanguage: getLibraryDatatableStrings(),
 
-            //FIXME: The code that calls this function doesn't work as intended because you can't
-            //       change the oLanguage property of a datatable dynamically. :(
+      // z = ColResize, R = ColReorder, C = ColVis
+      sDom: 'Rf<"dt-process-rel"r><"H"<"library_toolbar"C>><"dataTables_scrolling"t<".empty_placeholder"<".empty_placeholder_image"><".empty_placeholder_text">>><"F"lip>>',
 
-            switch (type) {
-                /*
+      oColVis: {
+        sAlign: "right",
+        aiExclude: colExclude,
+        sSize: "css",
+        fnStateChange: setFilterElement,
+        buttonText: $.i18n._("Columns"),
+        iOverlayFade: 0,
+      },
+
+      oColReorder: {
+        iFixedColumnsRight: 1,
+        iFixedColumns: 3,
+      },
+
+      bScrollCollapse: false,
+    });
+
+    $datatables[mod.DataTableTypeEnum.LIBRARY] = mod.libraryDataTable;
+
+    /*  ############################################
+                          END DATATABLES
+            ############################################ */
+
+    function getTableHeight() {
+      return $libContent.height() - 175;
+    }
+
+    function setColumnFilter(oTable) {
+      // TODO : remove this dirty hack once js is refactored
+      if (!oTable.fnSettings()) {
+        return;
+      }
+      var aoCols = oTable.fnSettings().aoColumns;
+      var colsForAdvancedSearch = new Array();
+      var advanceSearchDiv = $("div#advanced_search");
+      advanceSearchDiv.empty();
+      $.each(aoCols, function (i, ele) {
+        if (ele.bSearchable) {
+          var currentColId = ele._ColReorder_iOrigCol;
+
+          var inputClass = "filter_column filter_number_text";
+          var labelStyle = "style='margin-right:35px;'";
+          if (
+            libraryColumnTypes[ele.mDataProp] == "n" ||
+            libraryColumnTypes[ele.mDataProp] == "i"
+          ) {
+            inputClass = "filterColumn filter_number_range";
+            labelStyle = "";
+          } else if (libraryColumnTypes[ele.mDataProp] == "tt") {
+            inputClass = "filterColumn filter_track_type_select";
+            labelStyle = "";
+          }
+
+          if (ele.bVisible) {
+            advanceSearchDiv.append(
+              "<div id='advanced_search_col_" +
+                currentColId +
+                "' class='control-group'>" +
+                "<label class='control-label'" +
+                labelStyle +
+                ">" +
+                ele.sTitle +
+                "</label>" +
+                "<div id='" +
+                ele.mDataProp +
+                "' class='controls " +
+                inputClass +
+                "'></div>" +
+                "</div>"
+            );
+          } else {
+            advanceSearchDiv.append(
+              "<div id='advanced_search_col_" +
+                currentColId +
+                "' class='control-group' style='display:none;'>" +
+                "<label class='control-label'" +
+                labelStyle +
+                ">" +
+                ele.sTitle +
+                "</label>" +
+                "<div id='" +
+                ele.mDataProp +
+                "' class='controls " +
+                inputClass +
+                "'></div>" +
+                "</div>"
+            );
+          }
+
+          if (libraryColumnTypes[ele.mDataProp] == "s") {
+            var obj = { sSelector: "#" + ele.mDataProp };
+          } else if (libraryColumnTypes[ele.mDataProp] == "tt") {
+            var obj = { sSelector: "#" + ele.mDataProp, type: "select" };
+          } else {
+            var obj = { sSelector: "#" + ele.mDataProp, type: "number-range" };
+          }
+          colsForAdvancedSearch.push(obj);
+        } else {
+          colsForAdvancedSearch.push(null);
+        }
+      });
+
+      oTable.columnFilter({
+        aoColumns: colsForAdvancedSearch,
+        bUseColVis: true,
+        sPlaceHolder: "head:before",
+      });
+    }
+
+    function setFilterElement(iColumn, bVisible) {
+      var actualId = colReorderMap[iColumn];
+      var selector = "div#advanced_search_col_" + actualId;
+      var $el = $(selector);
+
+      if (bVisible) {
+        $el.show();
+      } else {
+        $el.hide();
+      }
+    }
+
+    function getLibraryDatatableStrings() {
+      //Set up the datatables string translation table with different strings depending on
+      //whether you're viewing files, playlists, smart blocks, etc.
+      var type = parseInt(
+        $(".media_type_selector.selected").data("selection-id")
+      );
+      type =
+        type === undefined
+          ? AIRTIME.library.MediaTypeIntegerEnum.DEFAULT
+          : type;
+
+      //FIXME: The code that calls this function doesn't work as intended because you can't
+      //       change the oLanguage property of a datatable dynamically. :(
+
+      switch (type) {
+        /*
                  case 0:
                  return getDatatablesStrings({
                  "sEmptyTable": $.i18n._("No files found"),
@@ -995,614 +1343,717 @@ var AIRTIME = (function (AIRTIME) {
                  "sEmptyTable": $.i18n._("No smart blocks found"),
                  });
                  break;*/
-                default:
-                    return getDatatablesStrings({
-                        "sEmptyTable": $.i18n._(""),
-                        "sZeroRecords": $.i18n._("No matching results found.")
-                    });
-                    break;
+        default:
+          return getDatatablesStrings({
+            sEmptyTable: $.i18n._(""),
+            sZeroRecords: $.i18n._("No matching results found."),
+          });
+          break;
+      }
+    }
+
+    var selected = $("a[href$='" + location.hash + "']"),
+      table;
+    if (
+      selected.parent().data("selection-id") ==
+      AIRTIME.library.MediaTypeIntegerEnum.PODCAST
+    ) {
+      table = mod.DataTableTypeEnum.PODCAST;
+    } else {
+      table = mod.DataTableTypeEnum.LIBRARY;
+    }
+
+    AIRTIME.library.setCurrentTable(table, false);
+    oTable = $datatables[table];
+    setColumnFilter(oTable);
+    oTable.fnSetFilteringDelay(350);
+
+    var simpleSearchText;
+
+    $libContent.on("click", "legend", function () {
+      $simpleSearch = $libContent.find("#library_display_filter label");
+      var $fs = $(this).parents("fieldset"),
+        searchHeight,
+        tableHeight = getTableHeight(),
+        height;
+
+      if ($fs.hasClass("closed")) {
+        $fs.removeClass("closed");
+        searchHeight = $fs.height();
+
+        //keep value of simple search for when user switches back to it
+        simpleSearchText = $simpleSearch.find("input").val();
+
+        // clear the simple search text field and reset datatable
+        $(".dataTables_filter input").val("").keyup();
+
+        $simpleSearch.addClass("sp-invisible");
+      } else {
+        // clear the advanced search fields
+        var divs = $("div#advanced_search").children(":visible");
+        $.each(divs, function (i, div) {
+          fields = $(div).children().find("input");
+          $.each(fields, function (i, field) {
+            if ($(field).val() !== "") {
+              $(field).val("");
+              // we need to reset the results when removing
+              // an advanced search field
+              $(field).keyup();
+            }
+          });
+        });
+
+        //reset datatable with previous simple search results (if any)
+        $(".dataTables_filter input").val(simpleSearchText).keyup();
+
+        $simpleSearch.removeClass("sp-invisible");
+        $fs.addClass("closed");
+      }
+    });
+
+    AIRTIME.library.setupLibraryToolbar(oTable);
+
+    $libTable
+      .find("tbody")
+      .on(
+        "dblclick",
+        "tr[class*='lib'] > td:not(.dataTables_empty)",
+        function (ev) {
+          var tr = $(this).parent(),
+            data = tr.data("aData");
+          AIRTIME.library.dblClickAdd(data, data.ftype);
+        }
+      );
+
+    $libTable
+      .find("tbody")
+      .on("mousedown", "tr[class*='lib'] > td.library_checkbox", function (ev) {
+        var $tr = $(this).parent(),
+          // Get the ID of the selected row
+          $rowId = $tr.attr("id");
+
+        if (!$tr.hasClass(LIB_SELECTED_CLASS)) {
+          if (ev.shiftKey && $previouslySelected !== undefined) {
+            if ($previouslySelected.attr("id") == $rowId) {
+              return;
             }
 
-        }
-
-        var selected = $("a[href$='" + location.hash + "']"), table;
-        if (selected.parent().data("selection-id") == AIRTIME.library.MediaTypeIntegerEnum.PODCAST) {
-            table = mod.DataTableTypeEnum.PODCAST;
+            // If the selected row comes before the previously selected row,
+            // we want to select previous rows, otherwise we select next
+            if ($previouslySelected.prevAll("#" + $rowId).length !== 0) {
+              $previouslySelected.prevUntil($tr).each(function (i, el) {
+                mod.selectItem($(el));
+              });
+            } else {
+              $previouslySelected.nextUntil($tr).each(function (i, el) {
+                mod.selectItem($(el));
+              });
+            }
+          }
+          mod.selectItem($tr);
         } else {
-            table = mod.DataTableTypeEnum.LIBRARY;
+          flagForDeselection = true;
         }
+      });
 
-        AIRTIME.library.setCurrentTable(table, false);
-        oTable = $datatables[table];
-        setColumnFilter(oTable);
-        oTable.fnSetFilteringDelay(350);
+    // add the play function to the library_type td
+    $libTable.on("click", "td.library_type", function () {
+      var aData = $(this).parent().data().aData;
 
-        var simpleSearchText;
+      if (aData.ftype === "playlist" && aData.length !== "0.0") {
+        open_playlist_preview(aData.audioFile, 0);
+      } else if (aData.ftype === "audioclip") {
+        if (isAudioSupported(aData.mime)) {
+          open_audio_preview(aData.ftype, aData.id);
+        }
+      } else if (aData.ftype == "stream") {
+        if (isAudioSupported(aData.mime)) {
+          open_audio_preview(aData.ftype, aData.id);
+        }
+      } else if (aData.ftype == "block" && aData.bl_type == "static") {
+        open_block_preview(aData.audioFile, 0);
+      }
+      return false;
+    });
 
-        $libContent.on("click", "legend", function () {
-            $simpleSearch = $libContent.find("#library_display_filter label");
-            var $fs = $(this).parents("fieldset"),
-                searchHeight,
-                tableHeight = getTableHeight(),
-                height;
+    $libTable
+      .find("tbody")
+      .on(
+        "mousedown",
+        "tr[class*='lib'] > td:not(.library_checkbox, .dataTables_empty)",
+        function (ev) {
+          var $tr = $(this).parent(),
+            // Get the ID of the selected row
+            $rowId = $tr.attr("id");
 
-            if ($fs.hasClass("closed")) {
-                $fs.removeClass("closed");
-                searchHeight = $fs.height();
+          if (ev.which === 3 /* Right click */) {
+            mod.selectNone();
+            mod.selectItem($tr);
+            return;
+          }
 
-                //keep value of simple search for when user switches back to it
-                simpleSearchText = $simpleSearch.find('input').val();
-
-                // clear the simple search text field and reset datatable
-                $(".dataTables_filter input").val("").keyup();
-
-                $simpleSearch.addClass("sp-invisible");
-            }
-            else {
-                // clear the advanced search fields
-                var divs = $("div#advanced_search").children(':visible');
-                $.each(divs, function (i, div) {
-                    fields = $(div).children().find('input');
-                    $.each(fields, function (i, field) {
-                        if ($(field).val() !== "") {
-                            $(field).val("");
-                            // we need to reset the results when removing
-                            // an advanced search field
-                            $(field).keyup();
-                        }
-                    });
-                });
-
-                //reset datatable with previous simple search results (if any)
-                $(".dataTables_filter input").val(simpleSearchText).keyup();
-
-                $simpleSearch.removeClass("sp-invisible");
-                $fs.addClass("closed");
-            }
-        });
-
-        AIRTIME.library.setupLibraryToolbar(oTable);
-
-        $libTable.find("tbody").on("dblclick", "tr[class*='lib'] > td:not(.dataTables_empty)", function (ev) {
-            var tr = $(this).parent(), data = tr.data("aData");
-            AIRTIME.library.dblClickAdd(data, data.ftype);
-        });
-
-        $libTable.find("tbody").on("mousedown", "tr[class*='lib'] > td.library_checkbox", function (ev) {
-            var $tr = $(this).parent(),
-                // Get the ID of the selected row
-                $rowId = $tr.attr("id");
-
-            if (!$tr.hasClass(LIB_SELECTED_CLASS)) {
-                if (ev.shiftKey && $previouslySelected !== undefined) {
-                    if ($previouslySelected.attr("id") == $rowId) {
-                        return;
-                    }
-
-                    // If the selected row comes before the previously selected row,
-                    // we want to select previous rows, otherwise we select next
-                    if ($previouslySelected.prevAll("#" + $rowId).length !== 0) {
-                        $previouslySelected.prevUntil($tr).each(function (i, el) {
-                            mod.selectItem($(el));
-                        });
-                    } else {
-                        $previouslySelected.nextUntil($tr).each(function (i, el) {
-                            mod.selectItem($(el));
-                        });
-                    }
-                }
-                mod.selectItem($tr);
-            } else {
-                flagForDeselection = true;
-            }
-        });
-
-        // add the play function to the library_type td
-        $libTable.on("click", "td.library_type", function () {
-            var aData = $(this).parent().data().aData;
-
-            if (aData.ftype === 'playlist' && aData.length !== '0.0') {
-                open_playlist_preview(aData.audioFile, 0);
-            } else if (aData.ftype === 'audioclip') {
-                if (isAudioSupported(aData.mime)) {
-                    open_audio_preview(aData.ftype, aData.id);
-                }
-            } else if (aData.ftype == 'stream') {
-                if (isAudioSupported(aData.mime)) {
-                    open_audio_preview(aData.ftype, aData.id);
-                }
-            } else if (aData.ftype == 'block' && aData.bl_type == 'static') {
-                open_block_preview(aData.audioFile, 0);
-            }
-            return false;
-        });
-
-        $libTable.find("tbody").on("mousedown", "tr[class*='lib'] > td:not(.library_checkbox, .dataTables_empty)", function (ev) {
-            var $tr = $(this).parent(),
-                // Get the ID of the selected row
-                $rowId = $tr.attr("id");
-
-            if (ev.which === 3 /* Right click */) {
-                mod.selectNone();
-                mod.selectItem($tr);
+          if (!$tr.hasClass(LIB_SELECTED_CLASS)) {
+            if (ev.shiftKey && $previouslySelected !== undefined) {
+              if ($previouslySelected.attr("id") == $rowId) {
                 return;
-            }
+              }
 
-            if (!$tr.hasClass(LIB_SELECTED_CLASS)) {
-                if (ev.shiftKey && $previouslySelected !== undefined) {
-                    if ($previouslySelected.attr("id") == $rowId) {
-                        return;
-                    }
-
-                    // If the selected row comes before the previously selected row,
-                    // we want to select previous rows, otherwise we select next
-                    if ($previouslySelected.prevAll("#" + $rowId).length !== 0) {
-                        $previouslySelected.prevUntil($tr).each(function (i, el) {
-                            mod.selectItem($(el));
-                        });
-                    } else {
-                        $previouslySelected.nextUntil($tr).each(function (i, el) {
-                            mod.selectItem($(el));
-                        });
-                    }
-                } else if (!ev.ctrlKey) {
-                    mod.selectNone();
-                }
-
-                mod.selectItem($tr);
-            } else if (ev.ctrlKey) {
-                flagForDeselection = true;
-            }
-        });
-
-        $libTable.find("tbody").on("click", "tr > td.library_checkbox", function () {
-            var tr = $(this).parent();
-            if (flagForDeselection) {
-                flagForDeselection = false;
-                $previouslySelected = undefined;
-                mod.deselectItem(tr);
-            } else {
-                mod.checkItem(tr);
-            }
-        });
-
-        $libTable.find("tbody").on("click", "tr > td:not(.library_checkbox, .dataTables_empty)", function (e) {
-            var tr = $(this).parent();
-            if (flagForDeselection) {
-                flagForDeselection = false;
-                $previouslySelected = undefined;
-                mod.deselectItem(tr);
-            } else if (!(e.shiftKey || e.ctrlKey)) {
-                mod.selectNone();
-                mod.selectItem(tr);
-            }
-        });
-
-        $libTable.find("thead").on("click", "th > input[type='checkbox']", function () {
-            if ($(this).is(":checked")) {
-                AIRTIME.library.selectCurrentPage();
-                $(this).prop("checked", true);
-            } else {
-                AIRTIME.library.selectNone();
-                $(this).prop("checked", false);
-            }
-        });
-
-        $('#sb-actions').on("click", function (e) {
-            $("#library_display tr:has(td)").contextMenu({ x: $(e.target).offset().left, y: $(e.target).offset().top });
-        });
-
-        // begin context menu initialization.
-        AIRTIME.library.ctxMenu = !onDashboard ? {} : $.contextMenu({
-            selector: "#library_display tr[class*='lib']:has(td)",
-            //trigger: "left",
-            trigger: "custom",
-
-            build: function ($el, e) {
-                var data, screen, items, callback, $tr;
-
-                $tr = $el;
-                data = $tr.data("aData");
-                screen = $tr.data("screen");
-
-                function processMenuItems(oItems) {
-
-                    // define an add to playlist callback.
-                    if (oItems.pl_add !== undefined) {
-                        var aItems = [];
-
-                        callback = function () {
-                            aItems.push(new Array(data.id, data.ftype));
-                            AIRTIME.playlist.fnAddItems(aItems, undefined, 'after');
-                        };
-
-                        oItems.pl_add.callback = callback;
-                    }
-
-                    // define an edit callback.
-                    if (oItems.edit !== undefined) {
-                        if (data.ftype === "audioclip") {
-                            callback = function () {
-                                $.get(oItems.edit.url, { format: "json" }, function (json) {
-                                    AIRTIME.playlist.fileMdEdit(json, data.tr_id);
-                                });
-                            };
-                        } else if (data.ftype === "playlist" || data.ftype === "block") {
-                            callback = function () {
-                                AIRTIME.playlist.fnEdit(data, baseUrl + 'playlist/edit');
-                                AIRTIME.playlist.validatePlaylistElements();
-                            };
-                        } else if (data.ftype === "stream") {
-                            callback = function () {
-                                AIRTIME.playlist.fnEdit(data, baseUrl + 'webstream/edit');
-                            }
-                        } else {
-                            throw new Exception($.i18n._("Unknown type: ") + data.ftype);
-                        }
-                        oItems.edit.callback = callback;
-                    }
-
-                    // define a play callback.
-                    if (oItems.play !== undefined) {
-
-                        if (oItems.play.mime !== undefined) {
-                            if (!isAudioSupported(oItems.play.mime)) {
-                                oItems.play.disabled = true;
-                            }
-                        }
-
-                        callback = function () {
-                            if (data.ftype === 'playlist' && data.length !== '0.0') {
-                                playlistIndex = $(this).attr('id').substring(3); // remove the pl_
-                                open_playlist_preview(playlistIndex, 0);
-                            } else if (data.ftype === 'audioclip' || data.ftype === 'stream') {
-                                open_audio_preview(data.ftype, data.id);
-                            } else if (data.ftype === 'block') {
-                                blockIndex = $(this).attr('id').substring(3); // remove the pl_
-                                open_block_preview(blockIndex, 0);
-                            }
-                        };
-                        oItems.play.callback = callback;
-                    }
-
-                    // define a delete callback.
-                    if (oItems.del !== undefined) {
-
-                        // delete through the playlist controller, will reset
-                        // playlist screen if this is the currently edited
-                        // playlist.
-                        if ((data.ftype === "playlist" || data.ftype === "block") && screen === "playlist") {
-                            callback = function () {
-                                aMedia = [];
-                                aMedia.push({ "id": data.id, "type": data.ftype });
-                                if (confirm($.i18n._('Are you sure you want to delete the selected item?'))) {
-                                    AIRTIME.library.fnDeleteItems(aMedia);
-                                }
-                            };
-                        }
-                        else {
-                            callback = function () {
-                                var media = [];
-
-                                if (confirm($.i18n._('Are you sure you want to delete the selected item?'))) {
-
-                                    media.push({ "id": data.id, "type": data.ftype });
-                                    $.post(oItems.del.url, { format: "json", media: media }, function (json) {
-                                        var oTable;
-
-                                        if (json.message) {
-                                            alert(json.message);
-                                        }
-
-                                        oTable = $("#library_display").dataTable();
-                                        oTable.fnDeleteRow($tr[0]);
-                                    });
-                                }
-                            };
-                        }
-
-                        oItems.del.callback = callback;
-                    }
-
-                    // Publish.
-                    if (oItems.publish !== undefined) {
-                        if (data.ftype === "audioclip") {
-                            callback = function () {
-                                AIRTIME.publish.openPublishDialog(data.id);
-                            };
-                        }
-                        oItems.publish.callback = callback;
-                    }
-
-
-                    // define a download callback.
-                    if (oItems.download !== undefined) {
-
-                        callback = function () {
-                            document.location.href = oItems.download.url;
-                        };
-                        oItems.download.callback = callback;
-                    }
-                    // add callbacks for duplicate menu items.
-                    if (oItems.duplicate !== undefined) {
-                        var url = oItems.duplicate.url;
-                        callback = function () {
-                            $.post(url, { format: "json", id: data.id }, function (json) {
-                                oTable.fnStandingRedraw();
-                            });
-                        };
-                        oItems.duplicate.callback = callback;
-                    }
-                    // remove 'Add to smart block' option if the current
-                    // block is dynamic
-                    if ($('input:radio[name=sp_type]:checked').val() === "0") {
-                        delete oItems.pl_add;
-                    }
-                    items = oItems;
-                }
-
-                request = $.ajax({
-                    url: baseUrl + "library/context-menu",
-                    type: "GET",
-                    data: { id: data.id, type: data.ftype, format: "json", "screen": screen },
-                    dataType: "json",
-                    async: false,
-                    success: function (json) {
-                        processMenuItems(json.items);
-                    }
+              // If the selected row comes before the previously selected row,
+              // we want to select previous rows, otherwise we select next
+              if ($previouslySelected.prevAll("#" + $rowId).length !== 0) {
+                $previouslySelected.prevUntil($tr).each(function (i, el) {
+                  mod.selectItem($(el));
                 });
+              } else {
+                $previouslySelected.nextUntil($tr).each(function (i, el) {
+                  mod.selectItem($(el));
+                });
+              }
+            } else if (!ev.ctrlKey) {
+              mod.selectNone();
+            }
 
-                return {
-                    items: items
+            mod.selectItem($tr);
+          } else if (ev.ctrlKey) {
+            flagForDeselection = true;
+          }
+        }
+      );
+
+    $libTable
+      .find("tbody")
+      .on("click", "tr > td.library_checkbox", function () {
+        var tr = $(this).parent();
+        if (flagForDeselection) {
+          flagForDeselection = false;
+          $previouslySelected = undefined;
+          mod.deselectItem(tr);
+        } else {
+          mod.checkItem(tr);
+        }
+      });
+
+    $libTable
+      .find("tbody")
+      .on(
+        "click",
+        "tr > td:not(.library_checkbox, .dataTables_empty)",
+        function (e) {
+          var tr = $(this).parent();
+          if (flagForDeselection) {
+            flagForDeselection = false;
+            $previouslySelected = undefined;
+            mod.deselectItem(tr);
+          } else if (!(e.shiftKey || e.ctrlKey)) {
+            mod.selectNone();
+            mod.selectItem(tr);
+          }
+        }
+      );
+
+    $libTable
+      .find("thead")
+      .on("click", "th > input[type='checkbox']", function () {
+        if ($(this).is(":checked")) {
+          AIRTIME.library.selectCurrentPage();
+          $(this).prop("checked", true);
+        } else {
+          AIRTIME.library.selectNone();
+          $(this).prop("checked", false);
+        }
+      });
+
+    $("#sb-actions").on("click", function (e) {
+      $("#library_display tr:has(td)").contextMenu({
+        x: $(e.target).offset().left,
+        y: $(e.target).offset().top,
+      });
+    });
+
+    // begin context menu initialization.
+    AIRTIME.library.ctxMenu = !onDashboard
+      ? {}
+      : $.contextMenu({
+          selector: "#library_display tr[class*='lib']:has(td)",
+          //trigger: "left",
+          trigger: "custom",
+
+          build: function ($el, e) {
+            var data, screen, items, callback, $tr;
+
+            $tr = $el;
+            data = $tr.data("aData");
+            screen = $tr.data("screen");
+
+            function processMenuItems(oItems) {
+              // define an add to playlist callback.
+              if (oItems.pl_add !== undefined) {
+                var aItems = [];
+
+                callback = function () {
+                  aItems.push(new Array(data.id, data.ftype));
+                  AIRTIME.playlist.fnAddItems(aItems, undefined, "after");
                 };
+
+                oItems.pl_add.callback = callback;
+              }
+
+              // define an edit callback.
+              if (oItems.edit !== undefined) {
+                if (data.ftype === "audioclip") {
+                  callback = function () {
+                    $.get(oItems.edit.url, { format: "json" }, function (json) {
+                      AIRTIME.playlist.fileMdEdit(json, data.tr_id);
+                    });
+                  };
+                } else if (
+                  data.ftype === "playlist" ||
+                  data.ftype === "block"
+                ) {
+                  callback = function () {
+                    AIRTIME.playlist.fnEdit(data, baseUrl + "playlist/edit");
+                    AIRTIME.playlist.validatePlaylistElements();
+                  };
+                } else if (data.ftype === "stream") {
+                  callback = function () {
+                    AIRTIME.playlist.fnEdit(data, baseUrl + "webstream/edit");
+                  };
+                } else {
+                  throw new Exception($.i18n._("Unknown type: ") + data.ftype);
+                }
+                oItems.edit.callback = callback;
+              }
+
+              // define a play callback.
+              if (oItems.play !== undefined) {
+                if (oItems.play.mime !== undefined) {
+                  if (!isAudioSupported(oItems.play.mime)) {
+                    oItems.play.disabled = true;
+                  }
+                }
+
+                callback = function () {
+                  if (data.ftype === "playlist" && data.length !== "0.0") {
+                    playlistIndex = $(this).attr("id").substring(3); // remove the pl_
+                    open_playlist_preview(playlistIndex, 0);
+                  } else if (
+                    data.ftype === "audioclip" ||
+                    data.ftype === "stream"
+                  ) {
+                    open_audio_preview(data.ftype, data.id);
+                  } else if (data.ftype === "block") {
+                    blockIndex = $(this).attr("id").substring(3); // remove the pl_
+                    open_block_preview(blockIndex, 0);
+                  }
+                };
+                oItems.play.callback = callback;
+              }
+
+              // define a delete callback.
+              if (oItems.del !== undefined) {
+                // delete through the playlist controller, will reset
+                // playlist screen if this is the currently edited
+                // playlist.
+                if (
+                  (data.ftype === "playlist" || data.ftype === "block") &&
+                  screen === "playlist"
+                ) {
+                  callback = function () {
+                    aMedia = [];
+                    aMedia.push({ id: data.id, type: data.ftype });
+                    if (
+                      confirm(
+                        $.i18n._(
+                          "Are you sure you want to delete the selected item?"
+                        )
+                      )
+                    ) {
+                      AIRTIME.library.fnDeleteItems(aMedia);
+                    }
+                  };
+                } else {
+                  callback = function () {
+                    var media = [];
+
+                    if (
+                      confirm(
+                        $.i18n._(
+                          "Are you sure you want to delete the selected item?"
+                        )
+                      )
+                    ) {
+                      media.push({ id: data.id, type: data.ftype });
+                      $.post(
+                        oItems.del.url,
+                        { format: "json", media: media },
+                        function (json) {
+                          var oTable;
+
+                          if (json.message) {
+                            alert(json.message);
+                          }
+
+                          oTable = $("#library_display").dataTable();
+                          oTable.fnDeleteRow($tr[0]);
+                        }
+                      );
+                    }
+                  };
+                }
+
+                oItems.del.callback = callback;
+              }
+
+              // Publish.
+              if (oItems.publish !== undefined) {
+                if (data.ftype === "audioclip") {
+                  callback = function () {
+                    AIRTIME.publish.openPublishDialog(data.id);
+                  };
+                }
+                oItems.publish.callback = callback;
+              }
+
+              // define a download callback.
+              if (oItems.download !== undefined) {
+                callback = function () {
+                  document.location.href = oItems.download.url;
+                };
+                oItems.download.callback = callback;
+              }
+              // add callbacks for duplicate menu items.
+              if (oItems.duplicate !== undefined) {
+                var url = oItems.duplicate.url;
+                callback = function () {
+                  $.post(url, { format: "json", id: data.id }, function (json) {
+                    oTable.fnStandingRedraw();
+                  });
+                };
+                oItems.duplicate.callback = callback;
+              }
+              // remove 'Add to smart block' option if the current
+              // block is dynamic
+              if ($("input:radio[name=sp_type]:checked").val() === "0") {
+                delete oItems.pl_add;
+              }
+              items = oItems;
             }
-        });
 
-    };
-
-    /**
-     * Show the given table in the left-hand pane of the dashboard and give it internal focus
-     *
-     * @param {string} table            the string name of the table to show
-     * @param {boolean} [redraw=true]   whether or not to redraw the table
-     */
-    mod.setCurrentTable = function (table, redraw) {
-        if (typeof redraw === 'undefined') {
-            redraw = true;
-        }
-        var dt = $datatables[table],
-            wrapper = $(dt).closest(".dataTables_wrapper");
-        if (dt && typeof dt.fnClearTable === 'function') {
-            dt.fnClearTable(false);
-        }
-        // Don't redraw if we're switching to another hash for the library table
-        $.when(redraw ? dt.fnDraw() : function () { }).done(function () {
-            $("#library_content").find(".dataTables_wrapper").hide();
-            wrapper.show();
-        });
-        oTable = dt;
-    };
-
-    mod.getCurrentTable = function () {
-        return oTable;
-    };
-
-    mod.openPodcastEpisodeDialog = function (podcastId) {
-        var episode = AIRTIME.podcast.episodeTables[podcastId].getSelectedRows()[0];
-        $("body").append("<div id='podcast_episode_dialog'></div>");
-        var dialog = $("#podcast_episode_dialog").html(episode.description);
-        dialog.html(dialog.text());
-        dialog.dialog({
-            title: episode.title,
-            width: "auto",
-            height: "auto",
-            modal: true,
-            resizable: false,
-            dialogClass: "podcast-episode-dialog",
-            open: function () {
-                // Sometimes the dialog scrolls down partway if there are elements that need to render,
-                // like images or video, so scroll it back up on open.
-                $(this).parent().scrollTop(0);
-            },
-            close: function () {
-                $(this).dialog('destroy').remove();
-            }
-        });
-    };
-
-    /**
-     * Create the podcast datatable widget
-     *
-     * XXX: should this be moved to podcast.js
-     */
-    mod.initPodcastDatatable = function () {
-        var aoColumns = [
-            /* Title */          { "sTitle": $.i18n._("Title"), "mDataProp": "title", "sClass": "library_title", "sWidth": "170px" },
-            /* Creator */        { "sTitle": $.i18n._("Creator"), "mDataProp": "creator", "sClass": "library_creator", "sWidth": "160px" },
-            /* Website */        { "sTitle": $.i18n._("Description"), "mDataProp": "description", "bVisible": false, "sWidth": "150px" },
-            /* Year */           { "sTitle": $.i18n._("Owner"), "mDataProp": "owner", "bVisible": false, "sWidth": "60px" },
-            /* URL */            { "sTitle": $.i18n._("Feed URL"), "mDataProp": "url", "bVisible": false, "sWidth": "60px" },
-            /* Import Date */    { "sTitle": $.i18n._("Import Date"), "mDataProp": "auto_ingest_timestamp", "bVisible": true, "sWidth": "60px" },
-        ],
-            ajaxSourceURL = baseUrl + "rest/podcast",
-            podcastToolbarButtons = AIRTIME.widgets.Table.getStandardToolbarButtons();
-
-        $.extend(true, podcastToolbarButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.NEW],
-            {
-                title: $.i18n._('Add'),  //"New" Podcast is misleading
-                eventHandlers: {
-                    click: AIRTIME.podcast.createUrlDialog
-                },
-                validateConstraints: function () { return true; }
-            });
-        $.extend(true, podcastToolbarButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.EDIT],
-            {
-                title: $.i18n._('Edit'),
-                iconClass: "icon-pencil",
-                eventHandlers: {
-                    click: AIRTIME.podcast.editSelectedPodcasts
-                },
-                validateConstraints: function () {
-                    return this.getSelectedRows().length >= 1;
-                }
-            });
-        $.extend(true, podcastToolbarButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.DELETE],
-            {
-                eventHandlers: {
-                    click: AIRTIME.podcast.deleteSelectedPodcasts
-                },
-                validateConstraints: function () {
-                    return this.getSelectedRows().length >= 1;
-                }
+            request = $.ajax({
+              url: baseUrl + "library/context-menu",
+              type: "GET",
+              data: {
+                id: data.id,
+                type: data.ftype,
+                format: "json",
+                screen: screen,
+              },
+              dataType: "json",
+              async: false,
+              success: function (json) {
+                processMenuItems(json.items);
+              },
             });
 
-        //Set up the div with id "podcast_table" as a datatable.
-        mod.podcastTableWidget = new AIRTIME.widgets.Table(
-            $('#podcast_table'), //DOM node to create the table inside.
-            true,                //Enable item selection
-            podcastToolbarButtons, //Toolbar buttons
-            {                    //Datatables overrides.
-                aoColumns: aoColumns,
-                sAjaxSource: ajaxSourceURL,
-                oColReorder: {
-                    iFixedColumns: 1  // Checkbox
-                },
-                fnDrawCallback: function () {
-                    AIRTIME.library.drawEmptyPlaceholder(this);
-                }
-            });
-
-        // Edit podcast in right-side pane upon double click
-        mod.podcastTableWidget.assignDblClickHandler(function () {
-            AIRTIME.podcast.editSelectedPodcasts();
+            return {
+              items: items,
+            };
+          },
         });
+  };
 
-        mod.podcastDataTable = mod.podcastTableWidget.getDatatable();
-        $datatables[mod.DataTableTypeEnum.PODCAST] = mod.podcastDataTable;
-    };
+  /**
+   * Show the given table in the left-hand pane of the dashboard and give it internal focus
+   *
+   * @param {string} table            the string name of the table to show
+   * @param {boolean} [redraw=true]   whether or not to redraw the table
+   */
+  mod.setCurrentTable = function (table, redraw) {
+    if (typeof redraw === "undefined") {
+      redraw = true;
+    }
+    var dt = $datatables[table],
+      wrapper = $(dt).closest(".dataTables_wrapper");
+    if (dt && typeof dt.fnClearTable === "function") {
+      dt.fnClearTable(false);
+    }
+    // Don't redraw if we're switching to another hash for the library table
+    $.when(redraw ? dt.fnDraw() : function () {}).done(function () {
+      $("#library_content").find(".dataTables_wrapper").hide();
+      wrapper.show();
+    });
+    oTable = dt;
+  };
 
-    mod.libraryInit = libraryInit;
+  mod.getCurrentTable = function () {
+    return oTable;
+  };
 
-    return AIRTIME;
+  mod.openPodcastEpisodeDialog = function (podcastId) {
+    var episode = AIRTIME.podcast.episodeTables[podcastId].getSelectedRows()[0];
+    $("body").append("<div id='podcast_episode_dialog'></div>");
+    var dialog = $("#podcast_episode_dialog").html(episode.description);
+    dialog.html(dialog.text());
+    dialog.dialog({
+      title: episode.title,
+      width: "auto",
+      height: "auto",
+      modal: true,
+      resizable: false,
+      dialogClass: "podcast-episode-dialog",
+      open: function () {
+        // Sometimes the dialog scrolls down partway if there are elements that need to render,
+        // like images or video, so scroll it back up on open.
+        $(this).parent().scrollTop(0);
+      },
+      close: function () {
+        $(this).dialog("destroy").remove();
+      },
+    });
+  };
 
-}(AIRTIME || {}));
+  /**
+   * Create the podcast datatable widget
+   *
+   * XXX: should this be moved to podcast.js
+   */
+  mod.initPodcastDatatable = function () {
+    var aoColumns = [
+        /* Title */ {
+          sTitle: $.i18n._("Title"),
+          mDataProp: "title",
+          sClass: "library_title",
+          sWidth: "170px",
+        },
+        /* Creator */ {
+          sTitle: $.i18n._("Creator"),
+          mDataProp: "creator",
+          sClass: "library_creator",
+          sWidth: "160px",
+        },
+        /* Website */ {
+          sTitle: $.i18n._("Description"),
+          mDataProp: "description",
+          bVisible: false,
+          sWidth: "150px",
+        },
+        /* Year */ {
+          sTitle: $.i18n._("Owner"),
+          mDataProp: "owner",
+          bVisible: false,
+          sWidth: "60px",
+        },
+        /* URL */ {
+          sTitle: $.i18n._("Feed URL"),
+          mDataProp: "url",
+          bVisible: false,
+          sWidth: "60px",
+        },
+        /* Import Date */ {
+          sTitle: $.i18n._("Import Date"),
+          mDataProp: "auto_ingest_timestamp",
+          bVisible: true,
+          sWidth: "60px",
+        },
+      ],
+      ajaxSourceURL = baseUrl + "rest/podcast",
+      podcastToolbarButtons = AIRTIME.widgets.Table.getStandardToolbarButtons();
+
+    $.extend(
+      true,
+      podcastToolbarButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.NEW],
+      {
+        title: $.i18n._("Add"), //"New" Podcast is misleading
+        eventHandlers: {
+          click: AIRTIME.podcast.createUrlDialog,
+        },
+        validateConstraints: function () {
+          return true;
+        },
+      }
+    );
+    $.extend(
+      true,
+      podcastToolbarButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.EDIT],
+      {
+        title: $.i18n._("Edit"),
+        iconClass: "icon-pencil",
+        eventHandlers: {
+          click: AIRTIME.podcast.editSelectedPodcasts,
+        },
+        validateConstraints: function () {
+          return this.getSelectedRows().length >= 1;
+        },
+      }
+    );
+    $.extend(
+      true,
+      podcastToolbarButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.DELETE],
+      {
+        eventHandlers: {
+          click: AIRTIME.podcast.deleteSelectedPodcasts,
+        },
+        validateConstraints: function () {
+          return this.getSelectedRows().length >= 1;
+        },
+      }
+    );
+
+    //Set up the div with id "podcast_table" as a datatable.
+    mod.podcastTableWidget = new AIRTIME.widgets.Table(
+      $("#podcast_table"), //DOM node to create the table inside.
+      true, //Enable item selection
+      podcastToolbarButtons, //Toolbar buttons
+      {
+        //Datatables overrides.
+        aoColumns: aoColumns,
+        sAjaxSource: ajaxSourceURL,
+        oColReorder: {
+          iFixedColumns: 1, // Checkbox
+        },
+        fnDrawCallback: function () {
+          AIRTIME.library.drawEmptyPlaceholder(this);
+        },
+      }
+    );
+
+    // Edit podcast in right-side pane upon double click
+    mod.podcastTableWidget.assignDblClickHandler(function () {
+      AIRTIME.podcast.editSelectedPodcasts();
+    });
+
+    mod.podcastDataTable = mod.podcastTableWidget.getDatatable();
+    $datatables[mod.DataTableTypeEnum.PODCAST] = mod.podcastDataTable;
+  };
+
+  mod.libraryInit = libraryInit;
+
+  return AIRTIME;
+})(AIRTIME || {});
 
 /*
  * This function is called from dataTables.columnFilter.js
  */
 function validateAdvancedSearch(divs) {
-    var valid,
-        allValid = true,
-        fieldName,
-        fields,
-        searchTerm = Array(),
-        searchTermType,
-        regExpr,
-        timeRegEx = "\\d{2}[:]([0-5]){1}([0-9]){1}[:]([0-5]){1}([0-9]){1}([.]\\d{1,6})?",
-        dateRegEx = "\\d{4}[-]\\d{2}[-]\\d{2}?",
-        integerRegEx = "^\\d+$",
-        numericRegEx = "^\\d+[.]?\\d*$";
+  var valid,
+    allValid = true,
+    fieldName,
+    fields,
+    searchTerm = Array(),
+    searchTermType,
+    regExpr,
+    timeRegEx =
+      "\\d{2}[:]([0-5]){1}([0-9]){1}[:]([0-5]){1}([0-9]){1}([.]\\d{1,6})?",
+    dateRegEx = "\\d{4}[-]\\d{2}[-]\\d{2}?",
+    integerRegEx = "^\\d+$",
+    numericRegEx = "^\\d+[.]?\\d*$";
 
-    searchTerm[0] = "";
-    searchTerm[1] = "";
-    $.each(divs, function (i, div) {
-        fieldName = $(div).children('div').attr('id');
-        fields = $(div).children().find('input');
-        searchTermType = validationTypes[fieldName];
-        valid = true;
+  searchTerm[0] = "";
+  searchTerm[1] = "";
+  $.each(divs, function (i, div) {
+    fieldName = $(div).children("div").attr("id");
+    fields = $(div).children().find("input");
+    searchTermType = validationTypes[fieldName];
+    valid = true;
 
-        $.each(fields, function (i, field) {
-            searchTerm[i] = $(field).val();
+    $.each(fields, function (i, field) {
+      searchTerm[i] = $(field).val();
 
-            if (searchTerm[i] !== "") {
+      if (searchTerm[i] !== "") {
+        if (searchTermType === "l") {
+          regExpr = new RegExp("^" + timeRegEx + "$");
+        } else if (searchTermType === "t") {
+          var pieces = searchTerm[i].split(" ");
+          if (pieces.length === 2) {
+            regExpr = new RegExp("^" + dateRegEx + " " + timeRegEx + "$");
+          } else if (pieces.length === 1) {
+            regExpr = new RegExp("^" + dateRegEx + "$");
+          }
+        } else if (searchTermType === "i") {
+          regExpr = new RegExp(integerRegEx);
+        } else if (searchTermType === "n") {
+          regExpr = new RegExp(numericRegEx);
+          if (searchTerm[i].charAt(0) === "-") {
+            searchTerm[i] = searchTerm[i].substr(1);
+          }
+        }
 
-                if (searchTermType === "l") {
-                    regExpr = new RegExp("^" + timeRegEx + "$");
-                } else if (searchTermType === "t") {
-                    var pieces = searchTerm[i].split(" ");
-                    if (pieces.length === 2) {
-                        regExpr = new RegExp("^" + dateRegEx + " " + timeRegEx + "$");
-                    } else if (pieces.length === 1) {
-                        regExpr = new RegExp("^" + dateRegEx + "$");
-                    }
-                } else if (searchTermType === "i") {
-                    regExpr = new RegExp(integerRegEx);
-                } else if (searchTermType === "n") {
-                    regExpr = new RegExp(numericRegEx);
-                    if (searchTerm[i].charAt(0) === "-") {
-                        searchTerm[i] = searchTerm[i].substr(1);
-                    }
-                }
+        // string fields do not need validation
+        if (searchTermType !== "s") {
+          valid = regExpr.test(searchTerm[i]);
+          if (!valid) allValid = false;
+        }
 
-                // string fields do not need validation
-                if (searchTermType !== "s") {
-                    valid = regExpr.test(searchTerm[i]);
-                    if (!valid) allValid = false;
-                }
+        addRemoveValidationIcons(valid, $(field), searchTermType);
 
-                addRemoveValidationIcons(valid, $(field), searchTermType);
+        /*
+         * Empty fields should not have valid/invalid indicator Range values
+         * are considered valid even if only the 'From' value is provided.
+         * Therefore, if the 'To' value is empty but the 'From' value is not
+         * empty we need to keep the validation icon on screen.
+         */
+      } else if (
+        (searchTerm[0] === "" && searchTerm[1] !== "") ||
+        (searchTerm[0] === "" && searchTerm[1] === "")
+      ) {
+        if (
+          $(field).closest("div").prev().hasClass("checked-icon") ||
+          $(field).closest("div").prev().hasClass("not-available-icon")
+        ) {
+          $(field).closest("div").prev().remove();
+        }
+      }
 
-                /*
-                 * Empty fields should not have valid/invalid indicator Range values
-                 * are considered valid even if only the 'From' value is provided.
-                 * Therefore, if the 'To' value is empty but the 'From' value is not
-                 * empty we need to keep the validation icon on screen.
-                 */
-            } else if (searchTerm[0] === "" && searchTerm[1] !== "" ||
-                searchTerm[0] === "" && searchTerm[1] === "") {
-                if ($(field).closest('div').prev().hasClass('checked-icon') ||
-                    $(field).closest('div').prev().hasClass('not-available-icon')) {
-                    $(field).closest('div').prev().remove();
-                }
-            }
-
-            if (!valid) {
-                return false;
-            }
-        });
+      if (!valid) {
+        return false;
+      }
     });
+  });
 
-    return allValid;
+  return allValid;
 }
 
 function addRemoveValidationIcons(valid, field, searchTermType) {
-    var title = '';
-    if (searchTermType === 'i') {
-        title = $.i18n._('Input must be a positive number');
-    } else if (searchTermType === 'n') {
-        title = $.i18n._('Input must be a number');
-    } else if (searchTermType === 't') {
-        title = $.i18n._('Input must be in the format: yyyy-mm-dd');
-    } else if (searchTermType === 'l') {
-        title = $.i18n._('Input must be in the format: hh:mm:ss.t');
-    }
+  var title = "";
+  if (searchTermType === "i") {
+    title = $.i18n._("Input must be a positive number");
+  } else if (searchTermType === "n") {
+    title = $.i18n._("Input must be a number");
+  } else if (searchTermType === "t") {
+    title = $.i18n._("Input must be in the format: yyyy-mm-dd");
+  } else if (searchTermType === "l") {
+    title = $.i18n._("Input must be in the format: hh:mm:ss.t");
+  }
 
-    var validIndicator = " <span class='checked-icon sp-checked-icon'></span>",
-        invalidIndicator = " <span title='" + title + "' class='not-available-icon sp-checked-icon'></span>";
+  var validIndicator = " <span class='checked-icon sp-checked-icon'></span>",
+    invalidIndicator =
+      " <span title='" +
+      title +
+      "' class='not-available-icon sp-checked-icon'></span>";
 
-    if (valid) {
-        if (!field.closest('div').prev().hasClass('checked-icon')) {
-            // remove invalid icon before adding valid icon
-            if (field.closest('div').prev().hasClass('not-available-icon')) {
-                field.closest('div').prev().remove();
-            }
-            field.closest('div').before(validIndicator);
-        }
-    } else {
-        if (!field.closest('div').prev().hasClass('not-available-icon')) {
-            // remove valid icon before adding invalid icon
-            if (field.closest('div').prev().hasClass('checked-icon')) {
-                field.closest('div').prev().remove();
-            }
-            field.closest('div').before(invalidIndicator);
-        }
+  if (valid) {
+    if (!field.closest("div").prev().hasClass("checked-icon")) {
+      // remove invalid icon before adding valid icon
+      if (field.closest("div").prev().hasClass("not-available-icon")) {
+        field.closest("div").prev().remove();
+      }
+      field.closest("div").before(validIndicator);
     }
+  } else {
+    if (!field.closest("div").prev().hasClass("not-available-icon")) {
+      // remove valid icon before adding invalid icon
+      if (field.closest("div").prev().hasClass("checked-icon")) {
+        field.closest("div").prev().remove();
+      }
+      field.closest("div").before(invalidIndicator);
+    }
+  }
 }
 
 function resizeAdvancedSearch() {
-    var s = $("#advanced_search");
-    s.css("max-height", $(window).height() / 4);
-    s.css("overflow", "auto");
+  var s = $("#advanced_search");
+  s.css("max-height", $(window).height() / 4);
+  s.css("overflow", "auto");
 }
 
 /*
@@ -1610,250 +2061,246 @@ function resizeAdvancedSearch() {
  * whole/decimals) t => timestamp l => length
  */
 var validationTypes = {
-    "album_title": "s",
-    "artist_name": "s",
-    "bit_rate": "i",
-    "bpm": "i",
-    "comments": "s",
-    "composer": "s",
-    "conductor": "s",
-    "copyright": "s",
-    "cuein": "l",
-    "cueout": "l",
-    "description": "s",
-    "encoded_by": "s",
-    "utime": "t",
-    "mtime": "t",
-    "lptime": "t",
-    "disc_number": "i",
-    "genre": "s",
-    "isrc_number": "s",
-    "label": "s",
-    "language": "s",
-    "length": "l",
-    "lyricist": "s",
-    "mood": "s",
-    "mime": "s",
-    "name": "s",
-    "orchestra": "s",
-    "owner_id": "s",
-    "rating": "i",
-    "replay_gain": "n",
-    "sample_rate": "n",
-    "track_title": "s",
-    "track_number": "i",
-    "info_url": "s",
-    "artwork": "s",
-    "track_type_id": "s",
-    "year": "i"
+  album_title: "s",
+  artist_name: "s",
+  bit_rate: "i",
+  bpm: "i",
+  comments: "s",
+  composer: "s",
+  conductor: "s",
+  copyright: "s",
+  cuein: "l",
+  cueout: "l",
+  description: "s",
+  encoded_by: "s",
+  utime: "t",
+  mtime: "t",
+  lptime: "t",
+  disc_number: "i",
+  genre: "s",
+  isrc_number: "s",
+  label: "s",
+  language: "s",
+  length: "l",
+  lyricist: "s",
+  mood: "s",
+  mime: "s",
+  name: "s",
+  orchestra: "s",
+  owner_id: "s",
+  rating: "i",
+  replay_gain: "n",
+  sample_rate: "n",
+  track_title: "s",
+  track_number: "i",
+  info_url: "s",
+  artwork: "s",
+  track_type_id: "s",
+  year: "i",
 };
 
-function airtimeScheduleJsonpError(jqXHR, textStatus, errorThrown) {
-}
+function airtimeScheduleJsonpError(jqXHR, textStatus, errorThrown) {}
 
 function tracktypesJson() {
-    $(function () {
-        jQuery.getJSON(
-            baseUrl + "api/track-types",
-            function (json) {
-                var ttSelect = $('#track_type_id .filter_select .select_filter');
-                $.each(json, function (key, value) {
-                    var option = $("<option/>", {
-                        value: value['id'],
-                        text: value['type_name']
-                    });
-                    ttSelect.append(option);
-                });
-            });
+  $(function () {
+    jQuery.getJSON(baseUrl + "api/track-types", function (json) {
+      var ttSelect = $("#track_type_id .filter_select .select_filter");
+      $.each(json, function (key, value) {
+        var option = $("<option/>", {
+          value: value["id"],
+          text: value["type_name"],
+        });
+        ttSelect.append(option);
+      });
     });
+  });
 }
 
 function readArtworkURL(input, id) {
-
-    if (input.files && input.files[0]) {
-        var reader = new FileReader();
-        reader.onload = function (e) {
-            $('.artwork-preview-' + id).css('background-image', 'url(' + e.target.result + ')');
-            $('.artwork-preview-' + id).hide();
-            $('.artwork-preview-' + id).fadeIn(500);
-            $('.set_artwork_' + id).val(function () {
-                return e.target.result;
-            });
-        }
-        reader.readAsDataURL(input.files[0]);
-    }
+  if (input.files && input.files[0]) {
+    var reader = new FileReader();
+    reader.onload = function (e) {
+      $(".artwork-preview-" + id).css(
+        "background-image",
+        "url(" + e.target.result + ")"
+      );
+      $(".artwork-preview-" + id).hide();
+      $(".artwork-preview-" + id).fadeIn(500);
+      $(".set_artwork_" + id).val(function () {
+        return e.target.result;
+      });
+    };
+    reader.readAsDataURL(input.files[0]);
+  }
 }
 
 // Resample Artwork
 var resampleImg = (function (canvas) {
-
-    function resampleImg(img, width, height, onresample) {
-        var load = typeof img == "string",
-            i = load || img;
-        if (load) {
-            i = new Image;
-            i.onload = onload;
-            i.onerror = onerror;
-        }
-        i._onresample = onresample;
-        i._width = width;
-        i._height = height;
-        load ? (i.src = img) : onload.call(img);
+  function resampleImg(img, width, height, onresample) {
+    var load = typeof img == "string",
+      i = load || img;
+    if (load) {
+      i = new Image();
+      i.onload = onload;
+      i.onerror = onerror;
     }
+    i._onresample = onresample;
+    i._width = width;
+    i._height = height;
+    load ? (i.src = img) : onload.call(img);
+  }
 
-    function onerror() {
-        throw ("not found: " + this.src);
-    }
+  function onerror() {
+    throw "not found: " + this.src;
+  }
 
-    function onload() {
-        var img = this,
-            width = img._width,
-            height = img._height,
-            onresample = img._onresample;
+  function onload() {
+    var img = this,
+      width = img._width,
+      height = img._height,
+      onresample = img._onresample;
 
-        var minValue = Math.min(img.height, img.width);
-        width == null && (width = round(img.width * height / img.height));
-        height == null && (height = round(img.height * width / img.width));
+    var minValue = Math.min(img.height, img.width);
+    width == null && (width = round((img.width * height) / img.height));
+    height == null && (height = round((img.height * width) / img.width));
 
-        delete img._onresample;
-        delete img._width;
-        delete img._height;
-        canvas.width = width;
-        canvas.height = height;
-        context.drawImage(img, 0, 0, minValue, minValue, 0, 0, width, height);
-        onresample(canvas.toDataURL("image/jpeg"));
-    }
+    delete img._onresample;
+    delete img._width;
+    delete img._height;
+    canvas.width = width;
+    canvas.height = height;
+    context.drawImage(img, 0, 0, minValue, minValue, 0, 0, width, height);
+    onresample(canvas.toDataURL("image/jpeg"));
+  }
 
-    var context = canvas.getContext("2d"),
-        round = Math.round;
-
-    return resampleImg;
-
-}(this.document.createElement("canvas")));
+  var context = canvas.getContext("2d"),
+    round = Math.round;
 
+  return resampleImg;
+})(this.document.createElement("canvas"));
 
 $(document).ready(function () {
-    tracktypesJson();
+  tracktypesJson();
 
-    if (window.location.href.indexOf("showbuilder") > -1) {
-        AIRTIME.library.initPodcastDatatable();
-    }
+  if (window.location.href.indexOf("showbuilder") > -1) {
+    AIRTIME.library.initPodcastDatatable();
+  }
 
-    $("#advanced-options").on("click", function () {
-        resizeAdvancedSearch();
+  $("#advanced-options").on("click", function () {
+    resizeAdvancedSearch();
+  });
+
+  $(window).resize(function () {
+    resizeAdvancedSearch();
+  });
+
+  // delete artwork
+  $(document).on("click", ".delete-artwork", function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    var id = $(this).attr("data-id");
+    $(".artwork-preview-" + id).css(
+      "background-image",
+      "url(" + baseUrl + "css/images/no-cover.jpg)"
+    );
+    $(".artwork-preview-" + id).hide();
+    $(".artwork-preview-" + id).fadeIn(500);
+    $(".artwork_" + id).val(function () {
+      return "";
     });
-
-    $(window).resize(function () {
-        resizeAdvancedSearch();
+    $(".set_artwork_" + id).val(function () {
+      return "";
     });
+    $(".remove_artwork_" + id).val(function () {
+      return 1;
+    });
+  });
 
-    // delete artwork
-    $(document).on('click', '.delete-artwork', function (event) {
-        event.preventDefault();
-        event.stopPropagation();
-        var id = $(this).attr('data-id');
-        $('.artwork-preview-' + id).css('background-image', 'url(' + baseUrl + 'css/images/no-cover.jpg)');
-        $('.artwork-preview-' + id).hide();
-        $('.artwork-preview-' + id).fadeIn(500);
-        $('.artwork_' + id).val(function () {
-            return "";
+  // image upload by clicking on the artwork container
+  $(document).on("change", ".artworkUpload", "input", function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    var id = $(this).attr("data-id");
+    readArtworkURL(this, id);
+  });
+
+  // image upload by dragging onto the artwork container
+  $.event.props.push("dataTransfer");
+  (function () {
+    var s;
+    var Artwork = {
+      settings: {
+        body: $("body"),
+      },
+      init: function () {
+        s = Artwork.settings;
+        Artwork.bindUIActions();
+      },
+      bindUIActions: function () {
+        var timer;
+        s.body.on("dragover", ".artwork-upload", function (event) {
+          event.preventDefault();
+          event.stopPropagation();
+          clearTimeout(timer);
+          Artwork.showDroppableArea();
+          return false;
         });
-        $('.set_artwork_' + id).val(function () {
-            return "";
+        s.body.on("dragleave", ".artwork-upload", function (event) {
+          event.preventDefault();
+          event.stopPropagation();
+          timer = setTimeout(function () {
+            Artwork.hideDroppableArea();
+          }, 200);
         });
-        $('.remove_artwork_' + id).val(function () {
-            return 1;
+        s.body.on("drop", ".artwork-upload", function (event) {
+          event.preventDefault();
+          event.stopPropagation();
+          var id = $(this).attr("data-id");
+          Artwork.handleDrop(event.dataTransfer.files, id);
         });
-    });
-
-    // image upload by clicking on the artwork container
-    $(document).on('change', '.artworkUpload', 'input', function (event) {
-        event.preventDefault();
-        event.stopPropagation();
-        var id = $(this).attr('data-id');
-        readArtworkURL(this, id);
-    });
-
-    // image upload by dragging onto the artwork container
-    $.event.props.push('dataTransfer');
-    (function () {
-
-        var s;
-        var Artwork = {
-            settings: {
-                body: $("body")
-            },
-            init: function () {
-                s = Artwork.settings;
-                Artwork.bindUIActions();
-            },
-            bindUIActions: function () {
-
-                var timer;
-                s.body.on('dragover', '.artwork-upload', function (event) {
-
-                    event.preventDefault();
-                    event.stopPropagation();
-                    clearTimeout(timer);
-                    Artwork.showDroppableArea();
-                    return false;
-                });
-                s.body.on('dragleave', '.artwork-upload', function (event) {
-
-                    event.preventDefault();
-                    event.stopPropagation();
-                    timer = setTimeout(function () {
-                        Artwork.hideDroppableArea();
-                    }, 200);
-                });
-                s.body.on('drop', '.artwork-upload', function (event) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    var id = $(this).attr('data-id');
-                    Artwork.handleDrop(event.dataTransfer.files, id);
-                });
-
-            },
-            showDroppableArea: function () {
-                s.body.addClass("droppable");
-            },
-            hideDroppableArea: function () {
-                s.body.removeClass("droppable");
-            },
-            handleDrop: function (files, id) {
-                Artwork.hideDroppableArea();
-                var file = files[0];
-                if (typeof file !== 'undefined' && file.type.match('image.*')) {
-                    Artwork.resizeImage(file, 512, function (data) {
-                        Artwork.placeImage(data, id);
-                    });
-                } else {
-                    alert("The file is not an image.");
-                }
-            },
-            resizeImage: function (file, size, callback) {
-                var fileTracker = new FileReader;
-                fileTracker.onload = function () {
-                    resampleImg(this.result, size, size, callback);
-                }
-                fileTracker.readAsDataURL(file);
-                fileTracker.onabort = function () {
-                    alert("Upload aborted!");
-                }
-                fileTracker.onerror = function () {
-                    alert("File could not be read.");
-                }
-            },
-            placeImage: function (data, id) {
-                $('.artwork-preview-' + id).css('background-image', 'url(' + data + ')');
-                $('.artwork-preview-' + id).hide();
-                $('.artwork-preview-' + id).fadeIn(500);
-                $('.set_artwork_' + id).val(function () {
-                    return data;
-                });
-            }
+      },
+      showDroppableArea: function () {
+        s.body.addClass("droppable");
+      },
+      hideDroppableArea: function () {
+        s.body.removeClass("droppable");
+      },
+      handleDrop: function (files, id) {
+        Artwork.hideDroppableArea();
+        var file = files[0];
+        if (typeof file !== "undefined" && file.type.match("image.*")) {
+          Artwork.resizeImage(file, 512, function (data) {
+            Artwork.placeImage(data, id);
+          });
+        } else {
+          alert("The file is not an image.");
         }
-        Artwork.init();
-    })();
-
+      },
+      resizeImage: function (file, size, callback) {
+        var fileTracker = new FileReader();
+        fileTracker.onload = function () {
+          resampleImg(this.result, size, size, callback);
+        };
+        fileTracker.readAsDataURL(file);
+        fileTracker.onabort = function () {
+          alert("Upload aborted!");
+        };
+        fileTracker.onerror = function () {
+          alert("File could not be read.");
+        };
+      },
+      placeImage: function (data, id) {
+        $(".artwork-preview-" + id).css(
+          "background-image",
+          "url(" + data + ")"
+        );
+        $(".artwork-preview-" + id).hide();
+        $(".artwork-preview-" + id).fadeIn(500);
+        $(".set_artwork_" + id).val(function () {
+          return data;
+        });
+      },
+    };
+    Artwork.init();
+  })();
 });
diff --git a/legacy/public/js/airtime/library/plupload.js b/legacy/public/js/airtime/library/plupload.js
index 35efd2d8f..0fd4a06ab 100644
--- a/legacy/public/js/airtime/library/plupload.js
+++ b/legacy/public/js/airtime/library/plupload.js
@@ -1,219 +1,237 @@
 $(document).ready(function () {
+  var uploadProgress;
+  var self = this;
+  self.uploadFilter = "all";
 
-    var uploadProgress;
-    var self = this;
-    self.uploadFilter = "all";
+  self.IMPORT_STATUS_CODES = {
+    0: { message: $.i18n._("Successfully imported") },
+    1: { message: $.i18n._("Pending import") },
+    2: { message: $.i18n._("Import failed.") },
+    UNKNOWN: { message: $.i18n._("Unknown") },
+  };
+  if (Object.freeze) {
+    Object.freeze(self.IMPORT_STATUS_CODES);
+  }
 
-    self.IMPORT_STATUS_CODES = {
-        0: {message: $.i18n._("Successfully imported")},
-        1: {message: $.i18n._("Pending import")},
-        2: {message: $.i18n._("Import failed.")},
-        UNKNOWN: {message: $.i18n._("Unknown")}
-    };
-    if (Object.freeze) {
-        Object.freeze(self.IMPORT_STATUS_CODES);
+  Dropzone.options.addMediaDropzone = {
+    url: "/rest/media",
+    //clickable: false,
+    acceptedFiles: acceptedMimeTypes.join(),
+    addRemoveLinks: true,
+    dictRemoveFile: $.i18n._("Remove"),
+    maxFilesize: LIBRETIME_PLUPLOAD_MAX_FILE_SIZE, //Megabytes
+    init: function () {
+      this.on("sending", function (file, xhr, data) {
+        data.append("csrf_token", $("#csrf").val());
+      });
+
+      this.on("addedfile", function (file, xhr, data) {
+        var el = $(file.previewElement);
+        uploadProgress = true;
+        el.find(".dz-remove").prependTo(el.find(".dz-details"));
+        el.find(".dz-error-message").appendTo(el.find(".dz-error-mark"));
+      });
+
+      this.on("success", function (file, xhr, data) {
+        //Refresh the upload table:
+        self.recentUploadsTable.fnDraw(); //Only works because we're using bServerSide
+        //In DataTables 1.10 and greater, we can use .fnAjaxReload()
+      });
+
+      this.on("queuecomplete", function () {
+        uploadProgress = false;
+      });
+    },
+  };
+
+  $(window).bind("beforeunload", function () {
+    if (uploadProgress) {
+      return sprintf(
+        $.i18n._(
+          "You are currently uploading files. %sGoing to another screen will cancel the upload process. %sAre you sure you want to leave the page?"
+        ),
+        "\n",
+        "\n"
+      );
+    }
+  });
+
+  self.renderImportStatus = function (data, type, full) {
+    if (typeof data !== "number") {
+      console.log("Invalid data type for the import_status.");
+      return;
+    }
+    var statusStr = self.IMPORT_STATUS_CODES.UNKNOWN.message;
+    var importStatusCode = data;
+    if (self.IMPORT_STATUS_CODES[importStatusCode]) {
+      statusStr = self.IMPORT_STATUS_CODES[importStatusCode].message;
     }
 
-    Dropzone.options.addMediaDropzone = {
-        url: '/rest/media',
-        //clickable: false,
-        acceptedFiles: acceptedMimeTypes.join(),
-        addRemoveLinks: true,
-        dictRemoveFile: $.i18n._("Remove"),
-        maxFilesize:LIBRETIME_PLUPLOAD_MAX_FILE_SIZE, //Megabytes
-        init: function () {
-            this.on("sending", function (file, xhr, data) {
-                data.append("csrf_token", $("#csrf").val());
-            });
+    return statusStr;
+  };
 
-            this.on("addedfile", function (file, xhr, data) {
-                var el = $(file.previewElement);
-                uploadProgress = true;
-                el.find(".dz-remove").prependTo(el.find(".dz-details"));
-                el.find(".dz-error-message").appendTo(el.find(".dz-error-mark"));
-            });
+  self.renderFileActions = function (data, type, full) {
+    if (full.import_status == 0) {
+      return (
+        '<a class="deleteFileAction">' +
+        $.i18n._("Delete from Library") +
+        "</a>"
+      );
+    } else if (full.import_status == 1) {
+      //No actions for pending files
+      return $.i18n._("N/A");
+    } else {
+      //Failed downloads
+      return '<a class="deleteFileAction">' + $.i18n._("Clear") + "</a>";
+    }
+  };
 
-            this.on("success", function (file, xhr, data) {
-                //Refresh the upload table:
-                self.recentUploadsTable.fnDraw(); //Only works because we're using bServerSide
-                //In DataTables 1.10 and greater, we can use .fnAjaxReload()
-            });
+  $("#recent_uploads_table").on("click", "a.deleteFileAction", function () {
+    //Grab the file object for the row that was clicked.
+    // Some tips from the DataTables forums:
+    //   fnGetData is used to get the object behind the row - you can also use
+    //   fnGetPosition if you need to get the index instead
+    file = $("#recent_uploads_table")
+      .dataTable()
+      .fnGetData($(this).closest("tr")[0]);
 
-            this.on("queuecomplete", function() {
-                uploadProgress = false;
-            });
-        }
-    };
-
-    $(window).bind('beforeunload', function () {
-        if (uploadProgress) {
-            return sprintf($.i18n._("You are currently uploading files. %sGoing to another screen will cancel the upload process. %sAre you sure you want to leave the page?"),
-                "\n", "\n");
-        }
+    $.ajax({
+      type: "DELETE",
+      url: "rest/media/" + file.id + "?csrf_token=" + $("#csrf").attr("value"),
+      success: function (resp) {
+        self.recentUploadsTable.fnDraw();
+      },
+      error: function () {
+        alert(
+          $.i18n._(
+            "Error: The file could not be deleted. Please try again later."
+          )
+        );
+      },
     });
+  });
 
-    self.renderImportStatus = function (data, type, full) {
-        if (typeof data !== "number") {
-            console.log("Invalid data type for the import_status.");
-            return;
-        }
-        var statusStr = self.IMPORT_STATUS_CODES.UNKNOWN.message;
-        var importStatusCode = data;
-        if (self.IMPORT_STATUS_CODES[importStatusCode]) {
-            statusStr = self.IMPORT_STATUS_CODES[importStatusCode].message;
-        }
-
-        return statusStr;
-    };
-
-    self.renderFileActions = function (data, type, full) {
-        if (full.import_status == 0) {
-            return '<a class="deleteFileAction">' + $.i18n._('Delete from Library') + '</a>';
-        } else if (full.import_status == 1) {
-            //No actions for pending files
-            return $.i18n._('N/A');
-        } else { //Failed downloads
-            return '<a class="deleteFileAction">' + $.i18n._('Clear') + '</a>';
-        }
-    };
-
-    $("#recent_uploads_table").on("click", "a.deleteFileAction", function () {
-        //Grab the file object for the row that was clicked.
-        // Some tips from the DataTables forums:
-        //   fnGetData is used to get the object behind the row - you can also use
-        //   fnGetPosition if you need to get the index instead
-        file = $("#recent_uploads_table").dataTable().fnGetData($(this).closest("tr")[0]);
-
-        $.ajax({
-            type: 'DELETE',
-            url: 'rest/media/' + file.id + "?csrf_token=" + $("#csrf").attr('value'),
-            success: function (resp) {
-                self.recentUploadsTable.fnDraw();
-            },
-            error: function () {
-                alert($.i18n._("Error: The file could not be deleted. Please try again later."));
+  self.setupRecentUploadsTable = function () {
+    return $("#recent_uploads_table").dataTable({
+      bJQueryUI: true,
+      bProcessing: false,
+      bServerSide: true,
+      sAjaxSource: "/plupload/recent-uploads/format/json",
+      sAjaxDataProp: "files",
+      bSearchable: false,
+      bInfo: true,
+      //"sScrollY": "200px",
+      bFilter: false,
+      bSort: false,
+      //"sDom": '<"H">frtip<"F"l>',
+      sDom: '<"dataTables_scrolling"frt><"F"lip>',
+      bPaginate: true,
+      sPaginationType: "full_numbers",
+      oLanguage: getDatatablesStrings({
+        sEmptyTable: $.i18n._("No files have been uploaded yet."),
+        sInfoEmpty: $.i18n._("Showing 0 to 0 of 0 uploads"),
+        sInfo: $.i18n._("Showing _START_ to _END_ of _TOTAL_ uploads"),
+        sInfoFiltered: $.i18n._("(filtered from _MAX_ total uploads)"),
+      }),
+      aoColumns: [
+        { mData: "artist_name", sTitle: $.i18n._("Creator") },
+        { mData: "track_title", sTitle: $.i18n._("Title") },
+        {
+          mData: "import_status",
+          sTitle: $.i18n._("Import Status"),
+          mRender: self.renderImportStatus,
+        },
+        { mData: "utime", sTitle: $.i18n._("Uploaded") },
+        {
+          mData: "id",
+          sTitle: $.i18n._("Actions"),
+          mRender: self.renderFileActions,
+        },
+      ],
+      fnServerData: function (sSource, aoData, fnCallback) {
+        /* Add some extra data to the sender */
+        aoData.push({ name: "uploadFilter", value: self.uploadFilter });
+        $.getJSON(sSource, aoData, function (json) {
+          fnCallback(json);
+          if (json.files) {
+            var areAnyFileImportsPending = false;
+            for (var i = 0; i < json.files.length; i++) {
+              //console.log(file);
+              var file = json.files[i];
+              if (file.import_status == 1) {
+                areAnyFileImportsPending = true;
+              }
             }
+
+            if (areAnyFileImportsPending) {
+              //alert("pending uploads, starting refresh on timer");
+              self.startRefreshingRecentUploads();
+            } else if (self.isRecentUploadsRefreshTimerActive) {
+              self.stopRefreshingRecentUploads();
+              self.recentUploadsTable.fnDraw();
+            }
+
+            // Update usability hint - in common.js
+            getUsabilityHint();
+          }
         });
+      },
     });
+  };
 
-    self.setupRecentUploadsTable = function () {
-        return $("#recent_uploads_table").dataTable({
-            "bJQueryUI": true,
-            "bProcessing": false,
-            "bServerSide": true,
-            "sAjaxSource": '/plupload/recent-uploads/format/json',
-            "sAjaxDataProp": 'files',
-            "bSearchable": false,
-            "bInfo": true,
-            //"sScrollY": "200px",
-            "bFilter": false,
-            "bSort": false,
-            //"sDom": '<"H">frtip<"F"l>',
-            "sDom": '<"dataTables_scrolling"frt><"F"lip>',
-            "bPaginate": true,
-            "sPaginationType": "full_numbers",
-            "oLanguage": getDatatablesStrings({
-                "sEmptyTable": $.i18n._("No files have been uploaded yet."),
-                "sInfoEmpty": $.i18n._("Showing 0 to 0 of 0 uploads"),
-                "sInfo": $.i18n._("Showing _START_ to _END_ of _TOTAL_ uploads"),
-                "sInfoFiltered": $.i18n._("(filtered from _MAX_ total uploads)"),
-            }),
-            "aoColumns": [
-                {"mData": "artist_name", "sTitle": $.i18n._("Creator")},
-                {"mData": "track_title", "sTitle": $.i18n._("Title")},
-                {
-                    "mData": "import_status", "sTitle": $.i18n._("Import Status"),
-                    "mRender": self.renderImportStatus
-                },
-                {"mData": "utime", "sTitle": $.i18n._("Uploaded")},
-                {
-                    "mData": "id", "sTitle": $.i18n._("Actions"),
-                    "mRender": self.renderFileActions
-                }
-            ],
-            "fnServerData": function (sSource, aoData, fnCallback) {
-                /* Add some extra data to the sender */
-                aoData.push({"name": "uploadFilter", "value": self.uploadFilter});
-                $.getJSON(sSource, aoData, function (json) {
-                    fnCallback(json);
-                    if (json.files) {
-                        var areAnyFileImportsPending = false;
-                        for (var i = 0; i < json.files.length; i++) {
-                            //console.log(file);
-                            var file = json.files[i];
-                            if (file.import_status == 1) {
-                                areAnyFileImportsPending = true;
-                            }
-                        }
+  $("#recent_uploads").addTitles("td");
 
-                        if (areAnyFileImportsPending) {
-                            //alert("pending uploads, starting refresh on timer");
-                            self.startRefreshingRecentUploads();
-                        } else if (self.isRecentUploadsRefreshTimerActive) {
-                            self.stopRefreshingRecentUploads();
-                            self.recentUploadsTable.fnDraw();
-                        }
+  self.isRecentUploadsRefreshTimerActive = false;
 
-                        // Update usability hint - in common.js
-                        getUsabilityHint();
-                    }
-                });
-            }
-        });
-    };
-
-    $("#recent_uploads").addTitles("td");
+  self.startRefreshingRecentUploads = function () {
+    if (!self.isRecentUploadsRefreshTimerActive) {
+      //Prevent multiple timers from running
+      self.recentUploadsRefreshTimer = setInterval(function () {
+        self.recentUploadsTable.fnDraw();
+      }, 3000);
+      self.isRecentUploadsRefreshTimerActive = true;
+    }
+  };
 
+  self.stopRefreshingRecentUploads = function () {
+    clearInterval(self.recentUploadsRefreshTimer);
     self.isRecentUploadsRefreshTimerActive = false;
+  };
 
-    self.startRefreshingRecentUploads = function () {
-        if (!self.isRecentUploadsRefreshTimerActive) { //Prevent multiple timers from running
-            self.recentUploadsRefreshTimer = setInterval(function() {
-                self.recentUploadsTable.fnDraw();
-            }, 3000);
-            self.isRecentUploadsRefreshTimerActive = true;
-        }
-    };
+  $("#upload_status_all").click(function () {
+    if (self.uploadFilter !== "all") {
+      self.uploadFilter = "all";
+      self.recentUploadsTable.fnPageChange(0).fnDraw();
+    }
+  });
+  $("#upload_status_pending").click(function () {
+    if (self.uploadFilter !== "pending") {
+      self.uploadFilter = "pending";
+      self.recentUploadsTable.fnPageChange(0).fnDraw();
+    }
+  });
+  $("#upload_status_failed").click(function () {
+    if (self.uploadFilter !== "failed") {
+      self.uploadFilter = "failed";
+      self.recentUploadsTable.fnPageChange(0).fnDraw();
+    }
+  });
 
-    self.stopRefreshingRecentUploads = function () {
-        clearInterval(self.recentUploadsRefreshTimer);
-        self.isRecentUploadsRefreshTimerActive = false;
-    };
+  //Create the recent uploads table.
+  self.recentUploadsTable = self.setupRecentUploadsTable();
 
-    $("#upload_status_all").click(function () {
-        if (self.uploadFilter !== "all") {
-            self.uploadFilter = "all";
-            self.recentUploadsTable.fnPageChange(0).fnDraw();
-        }
-    });
-    $("#upload_status_pending").click(function () {
-        if (self.uploadFilter !== "pending") {
-            self.uploadFilter = "pending";
-            self.recentUploadsTable.fnPageChange(0).fnDraw();
-        }
-    });
-    $("#upload_status_failed").click(function () {
-        if (self.uploadFilter !== "failed") {
-            self.uploadFilter = "failed";
-            self.recentUploadsTable.fnPageChange(0).fnDraw();
-        }
-    });
+  //$("#recent_uploads_table.div.fg-toolbar").prepend('<b>Custom tool bar! Text/images etc.</b>');
 
-    //Create the recent uploads table.
-    self.recentUploadsTable = self.setupRecentUploadsTable();
-
-    //$("#recent_uploads_table.div.fg-toolbar").prepend('<b>Custom tool bar! Text/images etc.</b>');
-
-    $("#select_type").on("change",function(){
-        var ttValue = $("#select_type").val();
-        var ttText = $('#select_type option[value="'+ttValue+'"]').text();
-        if (ttValue != ""){
-            $("#upload_type").text(" " + ttText);
-            $("#upload_type").css("color", "#ff611f");
-        } else {
-            $("#upload_type").text(" Tracks");
-            $("#upload_type").css("color", "#ffffff");
-        }
-        Cookies.set('tt_upload', ttValue);
-    });
+  $("#select_type").on("change", function () {
+    var ttValue = $("#select_type").val();
+    var ttText = $('#select_type option[value="' + ttValue + '"]').text();
+    if (ttValue != "") {
+      $("#upload_type").text(" " + ttText);
+      $("#upload_type").css("color", "#ff611f");
+    } else {
+      $("#upload_type").text(" Tracks");
+      $("#upload_type").css("color", "#ffffff");
+    }
+    Cookies.set("tt_upload", ttValue);
+  });
 });
diff --git a/legacy/public/js/airtime/library/podcast.js b/legacy/public/js/airtime/library/podcast.js
index 6c26166e8..c308eb664 100644
--- a/legacy/public/js/airtime/library/podcast.js
+++ b/legacy/public/js/airtime/library/podcast.js
@@ -1,849 +1,1072 @@
 var AIRTIME = (function (AIRTIME) {
-    var mod;
+  var mod;
 
-    if (AIRTIME.podcast === undefined) {
-        AIRTIME.podcast = {};
-    }
+  if (AIRTIME.podcast === undefined) {
+    AIRTIME.podcast = {};
+  }
 
-    mod = AIRTIME.podcast;
-    mod.episodeTables = {};
+  mod = AIRTIME.podcast;
+  mod.episodeTables = {};
 
-    var endpoint = '/rest/podcast/', PodcastEpisodeTable;
+  var endpoint = "/rest/podcast/",
+    PodcastEpisodeTable;
+
+  /**
+   * PodcastController constructor.
+   *
+   * @param {angular.scope}   $scope           angular scope service object
+   * @param {angular.http}    $http            angular http service object
+   * @param {Object}          podcast          podcast metadata object
+   * @param {int}             podcast.id       podcast unique identifier
+   * @param {string}          podcast.title    podcast metadata title
+   * @param {Tab}             tab              Tab object the controller is being bootstrapped in
+   *
+   * @constructor
+   */
+  function PodcastController($scope, $http, podcast, tab) {
+    // We need to pass in the tab object and the episodes table object so we can reference them
+    var self = this,
+      view = tab ? tab.contents : $(document);
+
+    //We take a podcast object in as a parameter rather fetching the podcast by ID here because
+    //when you're creating a new podcast, we already have the object from the result of the POST. We're saving
+    //a roundtrip by not fetching it again here.
+    $scope.podcast = podcast;
+    $scope.tab = tab;
+    $scope.csrf = jQuery("#csrf").val();
+    view.find("table").attr("id", "podcast_episodes_" + podcast.id);
+
+    self.onSaveCallback = function () {
+      var successMsg = $(".active-tab .btn-toolbar .success");
+      successMsg.text($.i18n._("Podcast settings saved")).show("fast");
+      setTimeout(function () {
+        successMsg.hide("fast");
+      }, 5000);
+      AIRTIME.library.podcastDataTable.fnDraw();
+      self.$scope.tab.setName(self.$scope.podcast.title);
+    };
 
     /**
-     * PodcastController constructor.
-     *
-     * @param {angular.scope}   $scope           angular scope service object
-     * @param {angular.http}    $http            angular http service object
-     * @param {Object}          podcast          podcast metadata object
-     * @param {int}             podcast.id       podcast unique identifier
-     * @param {string}          podcast.title    podcast metadata title
-     * @param {Tab}             tab              Tab object the controller is being bootstrapped in
-     *
-     * @constructor
+     * Save and update the podcast object.
      */
-    function PodcastController($scope, $http, podcast, tab) {
-        // We need to pass in the tab object and the episodes table object so we can reference them
-        var self = this,
-            view = tab ? tab.contents : $(document);
-
-        //We take a podcast object in as a parameter rather fetching the podcast by ID here because
-        //when you're creating a new podcast, we already have the object from the result of the POST. We're saving
-        //a roundtrip by not fetching it again here.
-        $scope.podcast = podcast;
-        $scope.tab = tab;
-        $scope.csrf = jQuery("#csrf").val();
-        view.find("table").attr("id", "podcast_episodes_" + podcast.id);
-
-        self.onSaveCallback = function () {
-            var successMsg = $('.active-tab .btn-toolbar .success')
-            successMsg.text($.i18n._("Podcast settings saved")).show("fast");
-            setTimeout(function () {
-                successMsg.hide("fast");
-            }, 5000);
-            AIRTIME.library.podcastDataTable.fnDraw();
-            self.$scope.tab.setName(self.$scope.podcast.title);
-        };
-
-        /**
-         * Save and update the podcast object.
-         */
-        $scope.savePodcast = function () {
-            $http.put(endpoint + $scope.podcast.id, {csrf_token: $scope.csrf, podcast: $scope.podcast})
-                .success(function () {
-                    self.onSaveCallback();
-                });
-        };
-
-
-        /**
-         * Generate a smartblock and playlist for this smartblock.
-         */
-        $scope.createSmartblock =  function () {
-            // send smarblock creation instruction to API
-            $.post(
-                endpoint + "smartblock",
-                {
-                    csrf_token: $("#csrf").val(),
-                    id: $scope.podcast.id,
-                    title: $scope.podcast.title
-                },
-                function() {
-                    // show success message
-                    var successMsg = $('.active-tab .pc-sb-success')
-                    successMsg.show("fast");
-                    setTimeout(function(){
-                        successMsg.hide("fast");
-                    }, 5000);
-
-                    // save podcast but do not display notification beside save button below
-                    $http.put(endpoint + $scope.podcast.id,
-                        {
-                            csrf_token: $scope.csrf,
-                            podcast: $scope.podcast
-                        })
-                        .success(function () {
-                            AIRTIME.library.podcastDataTable.fnDraw();
-                            self.$scope.tab.setName(self.$scope.podcast.title);
-                        });
-
-                    // redraw list of smartblocks just in case they have it visible on the left
-                    dt = $('table[id="library_display"]').dataTable();
-                    dt.fnStandingRedraw();
-                }
-            );
-        };
-        /**
-         * Close the tab and discard any changes made to the podcast data.
-         */
-        $scope.discard = function () {
-            !tab || tab.close();
-            $scope.podcast = {};
-        };
-
-        self.$scope = $scope;
-        self.$http = $http;
-        self.initialize();
-
-        return self;
-    }
-
-
-
-
-    /**
-     * Initialize the controller.
-     *
-     * Sets up the internal datatable.
-     */
-    PodcastController.prototype.initialize = function() {
-        var self = this;
-        // TODO: this solves a race condition, but we should look for the root cause
-        AIRTIME.tabs.onResize();
-        self.$scope.tab.setName(self.$scope.podcast.title);
-        // Add an onclose hook to the tab to remove the table object and the
-        // import listener so we don't cause memory leaks.
-        var podcastId = self.$scope.podcast.id.toString();
-        self.$scope.tab.assignOnCloseHandler(function () {
-            if ( AIRTIME.podcast.episodeTables.hasOwnProperty(podcastId) ) {
-                AIRTIME.podcast.episodeTables[podcastId].destroy();
-                AIRTIME.podcast.episodeTables[podcastId] = null;
-                self.$scope.$destroy();
-            }
+    $scope.savePodcast = function () {
+      $http
+        .put(endpoint + $scope.podcast.id, {
+          csrf_token: $scope.csrf,
+          podcast: $scope.podcast,
+        })
+        .success(function () {
+          self.onSaveCallback();
         });
     };
 
     /**
-     * StationPodcastController constructor.
-     *
-     * @param {angular.scope}   $scope          angular scope service object
-     * @param {angular.http}    $http           angular http service object
-     * @param {Object}          podcast         podcast metadata object
-     * @param {int}             podcast.id      podcast unique identifier
-     * @param {string}          podcast.title   podcast metadata title
-     * @param {Tab}             tab             Tab object the controller is being bootstrapped in
-     *
-     * @constructor
+     * Generate a smartblock and playlist for this smartblock.
      */
-    function StationPodcastController($scope, $http, podcast, tab) {
-        // Super call to parent controller
-        PodcastController.call(this, $scope, $http, podcast, tab);
-        this.onSaveCallback = function () {
-            $http({
-                method: 'POST',
-                url: '/preference/station-podcast-settings',
-                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
-                data: { stationPodcastPrivacy: $("#podcast-settings").find("input:checked").val() }
-            }).success(function (data) {
-                jQuery.extend($scope.podcast, data);
-                $(".success").text($.i18n._("Podcast settings saved")).slideDown("fast");
-                setTimeout(function () {
-                    $(".success").slideUp("fast");
-                }, 2000);
+    $scope.createSmartblock = function () {
+      // send smarblock creation instruction to API
+      $.post(
+        endpoint + "smartblock",
+        {
+          csrf_token: $("#csrf").val(),
+          id: $scope.podcast.id,
+          title: $scope.podcast.title,
+        },
+        function () {
+          // show success message
+          var successMsg = $(".active-tab .pc-sb-success");
+          successMsg.show("fast");
+          setTimeout(function () {
+            successMsg.hide("fast");
+          }, 5000);
+
+          // save podcast but do not display notification beside save button below
+          $http
+            .put(endpoint + $scope.podcast.id, {
+              csrf_token: $scope.csrf,
+              podcast: $scope.podcast,
+            })
+            .success(function () {
+              AIRTIME.library.podcastDataTable.fnDraw();
+              self.$scope.tab.setName(self.$scope.podcast.title);
             });
-        };
-        return this;
-    }
 
+          // redraw list of smartblocks just in case they have it visible on the left
+          dt = $('table[id="library_display"]').dataTable();
+          dt.fnStandingRedraw();
+        }
+      );
+    };
     /**
-     * Subclass the PodcastController object.
-     *
-     * @type {PodcastController}
+     * Close the tab and discard any changes made to the podcast data.
      */
-    StationPodcastController.prototype = Object.create(PodcastController.prototype);
+    $scope.discard = function () {
+      !tab || tab.close();
+      $scope.podcast = {};
+    };
 
-    /**
-     * Remove the selected episodes from the station podcast feed.
-     */
-    StationPodcastController.prototype.unpublishSelectedEpisodes = function () {
-        var self = this, $scope = self.$scope,
-            episodes = self.episodeTable.getSelectedRows();
-        jQuery.each(episodes, function () {
-            self.$http.delete(endpoint + $scope.podcast.id + '/episodes/' + this.id + '?csrf_token=' + $scope.csrf)
-                .success(function () {
-                    self.reloadEpisodeTable();
-                });
+    self.$scope = $scope;
+    self.$http = $http;
+    self.initialize();
+
+    return self;
+  }
+
+  /**
+   * Initialize the controller.
+   *
+   * Sets up the internal datatable.
+   */
+  PodcastController.prototype.initialize = function () {
+    var self = this;
+    // TODO: this solves a race condition, but we should look for the root cause
+    AIRTIME.tabs.onResize();
+    self.$scope.tab.setName(self.$scope.podcast.title);
+    // Add an onclose hook to the tab to remove the table object and the
+    // import listener so we don't cause memory leaks.
+    var podcastId = self.$scope.podcast.id.toString();
+    self.$scope.tab.assignOnCloseHandler(function () {
+      if (AIRTIME.podcast.episodeTables.hasOwnProperty(podcastId)) {
+        AIRTIME.podcast.episodeTables[podcastId].destroy();
+        AIRTIME.podcast.episodeTables[podcastId] = null;
+        self.$scope.$destroy();
+      }
+    });
+  };
+
+  /**
+   * StationPodcastController constructor.
+   *
+   * @param {angular.scope}   $scope          angular scope service object
+   * @param {angular.http}    $http           angular http service object
+   * @param {Object}          podcast         podcast metadata object
+   * @param {int}             podcast.id      podcast unique identifier
+   * @param {string}          podcast.title   podcast metadata title
+   * @param {Tab}             tab             Tab object the controller is being bootstrapped in
+   *
+   * @constructor
+   */
+  function StationPodcastController($scope, $http, podcast, tab) {
+    // Super call to parent controller
+    PodcastController.call(this, $scope, $http, podcast, tab);
+    this.onSaveCallback = function () {
+      $http({
+        method: "POST",
+        url: "/preference/station-podcast-settings",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        data: {
+          stationPodcastPrivacy: $("#podcast-settings")
+            .find("input:checked")
+            .val(),
+        },
+      }).success(function (data) {
+        jQuery.extend($scope.podcast, data);
+        $(".success")
+          .text($.i18n._("Podcast settings saved"))
+          .slideDown("fast");
+        setTimeout(function () {
+          $(".success").slideUp("fast");
+        }, 2000);
+      });
+    };
+    return this;
+  }
+
+  /**
+   * Subclass the PodcastController object.
+   *
+   * @type {PodcastController}
+   */
+  StationPodcastController.prototype = Object.create(
+    PodcastController.prototype
+  );
+
+  /**
+   * Remove the selected episodes from the station podcast feed.
+   */
+  StationPodcastController.prototype.unpublishSelectedEpisodes = function () {
+    var self = this,
+      $scope = self.$scope,
+      episodes = self.episodeTable.getSelectedRows();
+    jQuery.each(episodes, function () {
+      self.$http
+        .delete(
+          endpoint +
+            $scope.podcast.id +
+            "/episodes/" +
+            this.id +
+            "?csrf_token=" +
+            $scope.csrf
+        )
+        .success(function () {
+          self.reloadEpisodeTable();
         });
-    };
+    });
+  };
 
-    /**
-     * Initialize the Station podcast episode table.
-     *
-     * @private
-     */
-    StationPodcastController.prototype._initTable = function() {
-        var self = this, $scope = this.$scope,
-            buttons = {
-                deleteBtn: {
-                    title           : $.i18n._('Unpublish'),
-                    iconClass       : 'icon-trash',
-                    extraBtnClass   : 'btn-danger',
-                    elementId       : '',
-                    eventHandlers   : {
-                        click: self.unpublishSelectedEpisodes.bind(self)
-                    },
-                    validateConstraints: function () {
-                        return this.getSelectedRows().length >= 1;
-                    }
-                }
-            },
-            params = {
-                sAjaxSource : endpoint + $scope.podcast.id + '/episodes',
-                aoColumns: [
-                    // TODO: it might be wrong to use CcFiles here? We should alias this instead
-                    /* Title */             { "sTitle" : $.i18n._("Title")             , "mDataProp" : "CcFiles.track_title"    , "sClass" : "podcast_episodes_title"       , "sWidth" : "170px" },
-                    /* Description */       { "sTitle" : $.i18n._("Description")       , "mDataProp" : "CcFiles.description"    , "sClass" : "podcast_episodes_description" , "sWidth" : "300px" }
-                ]
-            };
+  /**
+   * Initialize the Station podcast episode table.
+   *
+   * @private
+   */
+  StationPodcastController.prototype._initTable = function () {
+    var self = this,
+      $scope = this.$scope,
+      buttons = {
+        deleteBtn: {
+          title: $.i18n._("Unpublish"),
+          iconClass: "icon-trash",
+          extraBtnClass: "btn-danger",
+          elementId: "",
+          eventHandlers: {
+            click: self.unpublishSelectedEpisodes.bind(self),
+          },
+          validateConstraints: function () {
+            return this.getSelectedRows().length >= 1;
+          },
+        },
+      },
+      params = {
+        sAjaxSource: endpoint + $scope.podcast.id + "/episodes",
+        aoColumns: [
+          // TODO: it might be wrong to use CcFiles here? We should alias this instead
+          /* Title */ {
+            sTitle: $.i18n._("Title"),
+            mDataProp: "CcFiles.track_title",
+            sClass: "podcast_episodes_title",
+            sWidth: "170px",
+          },
+          /* Description */ {
+            sTitle: $.i18n._("Description"),
+            mDataProp: "CcFiles.description",
+            sClass: "podcast_episodes_description",
+            sWidth: "300px",
+          },
+        ],
+      };
 
-        this.episodeTable = AIRTIME.podcast.initPodcastEpisodeDatatable(
-            $('.podcast_episodes'),
-            params,
-            buttons,
-            {
-                hideIngestCheckboxes: true,
-                podcastId: $scope.podcast.id,
-                emptyPlaceholder: {
-                    iconClass: "icon-white icon-th-list",
-                    html: $.i18n._("You haven't published any episodes!")
-                    + "<br/>" + $.i18n._("You can publish your uploaded content from the 'Tracks' view.")
-                    + "<br/><a target='_parent' href='/showbuilder#tracks'>" + $.i18n._("Try it now") + "</a>"
-                }
-            }
-        );
+    this.episodeTable = AIRTIME.podcast.initPodcastEpisodeDatatable(
+      $(".podcast_episodes"),
+      params,
+      buttons,
+      {
+        hideIngestCheckboxes: true,
+        podcastId: $scope.podcast.id,
+        emptyPlaceholder: {
+          iconClass: "icon-white icon-th-list",
+          html:
+            $.i18n._("You haven't published any episodes!") +
+            "<br/>" +
+            $.i18n._(
+              "You can publish your uploaded content from the 'Tracks' view."
+            ) +
+            "<br/><a target='_parent' href='/showbuilder#tracks'>" +
+            $.i18n._("Try it now") +
+            "</a>",
+        },
+      }
+    );
 
-        mod.stationPodcastTable = this.episodeTable.getDatatable();
-    };
+    mod.stationPodcastTable = this.episodeTable.getDatatable();
+  };
 
-    /**
-     * Initialize the Station podcast.
-     */
-    StationPodcastController.prototype.initialize = function() {
-        // We want to override the default tab name behaviour and use "My Podcast" for clarity
-        this._initTable();
-    };
+  /**
+   * Initialize the Station podcast.
+   */
+  StationPodcastController.prototype.initialize = function () {
+    // We want to override the default tab name behaviour and use "My Podcast" for clarity
+    this._initTable();
+  };
+
+  /**
+   * @override
+   *
+   * Reload the Station podcast episode table.
+   */
+  StationPodcastController.prototype.reloadEpisodeTable = function () {
+    this.episodeTable.getDatatable().fnDraw();
+  };
+
+  /**
+   * AngularJS app for podcast functionality.
+   *
+   * Bootstrapped for each podcast or Station podcast tab.
+   */
+  mod.podcastApp = angular
+    .module("podcast", [])
+    .controller("Podcast", [
+      "$scope",
+      "$http",
+      "podcast",
+      "tab",
+      PodcastController,
+    ])
+    .controller("StationPodcast", [
+      "$scope",
+      "$http",
+      "podcast",
+      "tab",
+      StationPodcastController,
+    ]);
+
+  /**
+   * Implement bulk editing of podcasts in order to accommodate the existing selection
+   * mechanisms on the frontend.
+   *
+   * Bulk methods use a POST request because we need to send data in the request body.
+   *
+   * @param selectedData the data to operate on
+   * @param method HTTP request method type
+   * @param callback function to run upon success
+   * @private
+   */
+  function _bulkAction(selectedData, method, callback) {
+    var ids = [];
+    selectedData.forEach(function (el) {
+      var uid = AIRTIME.library.MediaTypeStringEnum.PODCAST + "_" + el.id,
+        t = AIRTIME.tabs.get(uid);
+      if (t && method == HTTPMethods.DELETE) {
+        t.close();
+      }
+      if (!(t && method == HTTPMethods.GET)) {
+        ids.push(el.id);
+      } else if (t != AIRTIME.tabs.getActiveTab()) {
+        t.switchTo();
+      }
+    });
+
+    if (ids.length > 0) {
+      $.post(
+        endpoint + "bulk",
+        { csrf_token: $("#csrf").val(), method: method, ids: ids },
+        callback
+      );
+    }
+  }
+
+  /**
+   * Bootstrap and initialize the Angular app for the podcast being opened.
+   *
+   * @param podcast podcast JSON object to pass to the angular app
+   * @param tab Tab object the angular app will be initialized in
+   * @private
+   */
+  function _bootstrapAngularApp(podcast, tab) {
+    mod.podcastApp.value("podcast", podcast);
+    mod.podcastApp.value("tab", tab);
+    var wrapper = tab.contents.find(".angular_wrapper");
+    angular.bootstrap(wrapper.get(0), ["podcast"]);
+  }
+
+  /**
+   * Initialization function for a podcast tab.
+   * Called when editing one or more podcasts.
+   *
+   * @param data JSON data returned from the server.
+   *             Contains a JSON encoded podcast object and tab
+   *             content HTML and has the following form:
+   *             {
+   *                 podcast: '{
+   *                              ...
+   *                          }'
+   *                 html:    '<...>'
+   *             }
+   * @private
+   */
+  function _initAppFromResponse(data) {
+    var podcast = JSON.parse(data.podcast),
+      uid = AIRTIME.library.MediaTypeStringEnum.PODCAST + "_" + podcast.id,
+      tab = AIRTIME.tabs.openTab(data.html, uid, null);
+    _bootstrapAngularApp(podcast, tab);
+
+    $(".album_names.help_icon").qtip({
+      content: {
+        text: $.i18n._(
+          'Overwrite downloaded podcast episodes\' "Album" and "Creator" metadata tag with the Podcast Name specified above and set the track title to the title of the Podcast Episode. This album name can then be used as a search criteria by a smartblock. '
+        ),
+      },
+      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",
+      },
+    });
+
+    // Add podcast episode table in right-side panel below podcast edit form
+    var episodeTable =
+      AIRTIME.podcast.initPodcastEpisodeDatatableWithButtonEvents(
+        $("#podcast_episodes_" + podcast.id),
+        podcast.id.toString()
+      );
+    episodeTable.reload(podcast.id);
+    episodeTable.clearSelection();
+  }
+
+  /**
+   * Initialize the PodcastTable subclass object (from Table).
+   *
+   * Do this in its own function to avoid unnecessary reinitialization of the object.
+   *
+   * @private
+   */
+  function _initPodcastEpisodeTable() {
+    PodcastEpisodeTable = function (
+      wrapperDOMNode,
+      bItemSelection,
+      toolbarButtons,
+      dataTablesOptions,
+      config
+    ) {
+      this.config = config; // Internal configuration object
+      this._setupImportListener();
+      // Call the superconstructor
+      return AIRTIME.widgets.Table.call(
+        this,
+        wrapperDOMNode,
+        bItemSelection,
+        toolbarButtons,
+        dataTablesOptions,
+        config.emptyPlaceholder
+      );
+    }; // Subclass AIRTIME.widgets.Table
+    PodcastEpisodeTable.prototype = Object.create(
+      AIRTIME.widgets.Table.prototype
+    );
+    PodcastEpisodeTable.prototype.constructor = PodcastEpisodeTable;
+    PodcastEpisodeTable.prototype._SELECTORS = Object.freeze({
+      SELECTION_CHECKBOX: ".airtime_table_checkbox:has(input)",
+      SELECTION_TABLE_ROW: "tr:has(td.airtime_table_checkbox > input)",
+    });
 
     /**
      * @override
      *
-     * Reload the Station podcast episode table.
+     * Override the checkbox delegate function in the Table object to change
+     * the row's checkbox and import status columns depending on the status
+     * of the episode (unimported: 0, imported: 1, pending import: -1).
+     *
+     * @param rowData
+     * @param callType
+     * @param dataToSave
+     *
+     * @returns {string}
+     * @private
      */
-    StationPodcastController.prototype.reloadEpisodeTable = function() {
-        this.episodeTable.getDatatable().fnDraw();
+    PodcastEpisodeTable.prototype._datatablesCheckboxDataDelegate = function (
+      rowData,
+      callType,
+      dataToSave
+    ) {
+      var defaultIcon = "<span class='icon icon-circle-arrow-down'></span>",
+        importIcon =
+          "<span class='sp-checked-icon checked-icon imported-flag'></span>",
+        pendingIcon = "<span class='loading-icon'></span>";
+      if (
+        this.config.hideIngestCheckboxes &&
+        rowData.ingested &&
+        rowData.ingested != 0
+      ) {
+        return rowData.ingested > 0 ? importIcon : pendingIcon;
+      }
+      rowData.importIcon =
+        rowData.ingested != 0
+          ? rowData.ingested > 0
+            ? importIcon
+            : pendingIcon
+          : defaultIcon;
+      return AIRTIME.widgets.Table.prototype._datatablesCheckboxDataDelegate.call(
+        this,
+        rowData,
+        callType,
+        dataToSave
+      );
     };
 
     /**
-     * AngularJS app for podcast functionality.
+     * Reload the episode table.
+     * Since we're sometimes using a static source, define a separate function to fetch and reload the table data.
+     * We use this when we save the Podcast because we need to flag rows the user is ingesting.
      *
-     * Bootstrapped for each podcast or Station podcast tab.
+     * @param [id] optional podcast identifier
      */
-    mod.podcastApp = angular.module('podcast', [])
-        .controller('Podcast', ['$scope', '$http', 'podcast', 'tab', PodcastController])
-        .controller('StationPodcast', ['$scope', '$http', 'podcast', 'tab', StationPodcastController]);
+    PodcastEpisodeTable.prototype.reload = function (id) {
+      // When using static source data, we instantiate an empty table
+      // and pass this function the ID of the podcast we want to display.
+      if (id) this.config.podcastId = id;
+      var self = this,
+        dt = self._datatable;
+      dt.block({
+        message: "",
+        theme: true,
+        applyPlatformOpacityRules: false,
+      });
+      $.get(endpoint + self.config.podcastId + "/episodes", function (json) {
+        dt.fnClearTable(false);
+        dt.fnAddData(JSON.parse(json));
+      }).done(function () {
+        dt.unblock();
+      });
+    };
 
     /**
-     * Implement bulk editing of podcasts in order to accommodate the existing selection
-     * mechanisms on the frontend.
+     * Setup an interval that checks for any pending imports and reloads
+     * the table once imports are finished.
      *
-     * Bulk methods use a POST request because we need to send data in the request body.
-     *
-     * @param selectedData the data to operate on
-     * @param method HTTP request method type
-     * @param callback function to run upon success
-     * @private
-     */
-    function _bulkAction(selectedData, method, callback) {
-        var ids = [];
-        selectedData.forEach(function(el) {
-            var uid = AIRTIME.library.MediaTypeStringEnum.PODCAST+"_"+el.id,
-                t = AIRTIME.tabs.get(uid);
-            if (t && method == HTTPMethods.DELETE) {
-                t.close();
-            }
-            if (!(t && method == HTTPMethods.GET)) {
-                ids.push(el.id);
-            } else if (t != AIRTIME.tabs.getActiveTab()) {
-                t.switchTo();
-            }
-        });
-
-        if (ids.length > 0) {
-            $.post(endpoint + "bulk", {csrf_token: $("#csrf").val(), method: method, ids: ids}, callback);
-        }
-    }
-
-    /**
-     * Bootstrap and initialize the Angular app for the podcast being opened.
-     *
-     * @param podcast podcast JSON object to pass to the angular app
-     * @param tab Tab object the angular app will be initialized in
-     * @private
-     */
-    function _bootstrapAngularApp(podcast, tab) {
-        mod.podcastApp.value('podcast', podcast);
-        mod.podcastApp.value('tab', tab);
-        var wrapper = tab.contents.find(".angular_wrapper");
-        angular.bootstrap(wrapper.get(0), ["podcast"]);
-    }
-
-    /**
-     * Initialization function for a podcast tab.
-     * Called when editing one or more podcasts.
-     *
-     * @param data JSON data returned from the server.
-     *             Contains a JSON encoded podcast object and tab
-     *             content HTML and has the following form:
-     *             {
-     *                 podcast: '{
-     *                              ...
-     *                          }'
-     *                 html:    '<...>'
-     *             }
-     * @private
-     */
-    function _initAppFromResponse(data) {
-        var podcast = JSON.parse(data.podcast),
-            uid = AIRTIME.library.MediaTypeStringEnum.PODCAST+"_"+podcast.id,
-            tab = AIRTIME.tabs.openTab(data.html, uid, null);
-        _bootstrapAngularApp(podcast, tab);
-
-        $(".album_names.help_icon").qtip({
-            content: {
-                text: $.i18n._('Overwrite downloaded podcast episodes\' "Album" and "Creator" metadata tag with the Podcast Name specified above and set the track title to the title of the Podcast Episode. This album name can then be used as a search criteria by a smartblock. ')
-            },
-            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"
-            }
-        });
-
-        // Add podcast episode table in right-side panel below podcast edit form
-        var episodeTable = AIRTIME.podcast.initPodcastEpisodeDatatableWithButtonEvents(
-            $("#podcast_episodes_" + podcast.id),
-            podcast.id.toString()
-        );
-        episodeTable.reload(podcast.id);
-        episodeTable.clearSelection()
-    }
-
-    /**
-     * Initialize the PodcastTable subclass object (from Table).
-     *
-     * Do this in its own function to avoid unnecessary reinitialization of the object.
+     * TODO: remember selection; make this more elegant?
      *
      * @private
      */
-    function _initPodcastEpisodeTable() {
-        PodcastEpisodeTable = function(wrapperDOMNode, bItemSelection, toolbarButtons, dataTablesOptions, config) {
-            this.config = config;  // Internal configuration object
-            this._setupImportListener();
-            // Call the superconstructor
-            return AIRTIME.widgets.Table.call(this, wrapperDOMNode, bItemSelection, toolbarButtons, dataTablesOptions, config.emptyPlaceholder);
-        };  // Subclass AIRTIME.widgets.Table
-        PodcastEpisodeTable.prototype = Object.create(AIRTIME.widgets.Table.prototype);
-        PodcastEpisodeTable.prototype.constructor = PodcastEpisodeTable;
-        PodcastEpisodeTable.prototype._SELECTORS = Object.freeze({
-            SELECTION_CHECKBOX: ".airtime_table_checkbox:has(input)",
-            SELECTION_TABLE_ROW: "tr:has(td.airtime_table_checkbox > input)"
-        });
-
-        /**
-         * @override
-         *
-         * Override the checkbox delegate function in the Table object to change
-         * the row's checkbox and import status columns depending on the status
-         * of the episode (unimported: 0, imported: 1, pending import: -1).
-         *
-         * @param rowData
-         * @param callType
-         * @param dataToSave
-         *
-         * @returns {string}
-         * @private
-         */
-        PodcastEpisodeTable.prototype._datatablesCheckboxDataDelegate = function(rowData, callType, dataToSave) {
-            var defaultIcon = "<span class='icon icon-circle-arrow-down'></span>",
-                importIcon = "<span class='sp-checked-icon checked-icon imported-flag'></span>",
-                pendingIcon = "<span class='loading-icon'></span>";
-            if (this.config.hideIngestCheckboxes && rowData.ingested && rowData.ingested != 0) {
-                return rowData.ingested > 0 ? importIcon : pendingIcon;
-            }
-            rowData.importIcon = (rowData.ingested != 0) ? (rowData.ingested > 0 ? importIcon : pendingIcon) : defaultIcon;
-            return AIRTIME.widgets.Table.prototype._datatablesCheckboxDataDelegate.call(this, rowData, callType, dataToSave);
-        };
-
-        /**
-         * Reload the episode table.
-         * Since we're sometimes using a static source, define a separate function to fetch and reload the table data.
-         * We use this when we save the Podcast because we need to flag rows the user is ingesting.
-         *
-         * @param [id] optional podcast identifier
-         */
-        PodcastEpisodeTable.prototype.reload = function (id) {
-            // When using static source data, we instantiate an empty table
-            // and pass this function the ID of the podcast we want to display.
-            if (id) this.config.podcastId = id;
-            var self = this, dt = self._datatable;
-            dt.block({
-                message: "",
-                theme: true,
-                applyPlatformOpacityRules: false
-            });
-            $.get(endpoint + self.config.podcastId + '/episodes', function (json) {
-                dt.fnClearTable(false);
-                dt.fnAddData(JSON.parse(json));
-            }).done(function () {
-                dt.unblock();
-            });
-        };
-
-        /**
-         * Setup an interval that checks for any pending imports and reloads
-         * the table once imports are finished.
-         *
-         * TODO: remember selection; make this more elegant?
-         *
-         * @private
-         */
-        PodcastEpisodeTable.prototype._setupImportListener = function () {
-            var self = this;
-            self.importListener = setInterval(function () {
-                var podcastId = self.config.podcastId, pendingRows = [];
-            if (!podcastId) return false;
-                var dt = self.getDatatable(), data = dt.fnGetData();
-                // Iterate over the table data to check for any rows pending import
-                $.each(data, function () {
-                    if (this.ingested == -1) {
-                        pendingRows.push(this.guid);
-                    }
-                });
-                if (pendingRows.length > 0) {
-                    // Manually trigger the Celery task to update the internal
-                    // task reference because the upload will often finish quickly
-                    $.get('/api/poll-celery');
-                    // Fetch the table data if there are pending rows,
-                    // then check if any of the pending rows have
-                    // succeeded or failed before reloading the table.
-                    $.get(endpoint + podcastId + '/episodes', function (json) {
-                        data = JSON.parse(json);
-                        var delta = false;
-                        $.each(data, function () {
-                            var idx = pendingRows.indexOf(this.guid);
-                            if (idx > -1 && this.ingested != -1) {
-                                delta = true;
-                                pendingRows.slice(idx, 0);
-                            }
-                        });
-                        if (delta) {  // Has there been a change?
-                            // We already have the data, so there's no reason to call
-                            // reload() here; this also provides a smoother transition
-                            dt.fnClearTable(false);
-                            dt.fnAddData(data);
-                        }
-                    });
-                }
-            }, 5000);  // Run every 5 seconds
-        };
-
-        /**
-         * Explicit destructor
-         */
-        PodcastEpisodeTable.prototype.destroy = function () {
-            clearInterval(this.importListener);
-        }
-    }
-
-    /**
-     * Create and show the URL dialog for podcast creation.
-     */
-    mod.createUrlDialog = function () {
-        $.get('/render/podcast-url-dialog', function(json) {
-            $(document.body).append(json.html);
-            $("#podcast_url_dialog").dialog({
-                title: $.i18n._("Add New Podcast"),
-                resizable: false,
-                modal: true,
-                width: '450px',
-                height: 129,
-                close: function () {
-                    $(this).remove();
-                }
-            });
-        });
-    };
-
-    /**
-     * Find the URL in the podcast creation dialog and POST it to the server
-     * to store the feed as a Podcast object.
-     *
-     * FIXME: we should probably be passing the serialized form into this function instead
-     */
-    mod.addPodcast = function () {
-        $.post(endpoint, $("#podcast_url_dialog").find("form").serialize(), function(json) {
-            // Refresh left-side library pane to show newly created podcast
-            AIRTIME.library.podcastDataTable.fnDraw();
-
-            // close modal
-            $("#podcast_url_dialog").dialog("close");
-
-            // open newly created podcast in right-side edit pane
-            _initAppFromResponse(json);
-        }).fail(function (e) {
-            var errors = $("#podcast_url_dialog").find(".errors");
-            errors.show(200).text(e.responseText);
-            setTimeout(function () {
-                errors.hide(200);
-            }, 3000);
-        });
-    };
-
-    /**
-     * Create a bulk request to edit all currently selected podcasts.
-     */
-    mod.editSelectedPodcasts = function () {
-        _bulkAction(AIRTIME.library.podcastTableWidget.getSelectedRows(), HTTPMethods.GET, function(json) {
-            json.forEach(function(data) {
-                _initAppFromResponse(data);
-            });
-        });
-    };
-
-    /**
-     * Create a bulk request to delete all currently selected podcasts.
-     */
-    mod.deleteSelectedPodcasts = function () {
-        if (confirm($.i18n._("Are you sure you want to delete the selected podcasts from your library?"))) {
-            _bulkAction(AIRTIME.library.podcastTableWidget.getSelectedRows(), HTTPMethods.DELETE, function () {
-                AIRTIME.library.podcastDataTable.fnDraw();
-            });
-        }
-    };
-
-    /**
-     * Open metadata editor tabs for each of the selected episodes.
-     *
-     * @param {Array} episodes the array of selected episodes
-     */
-    mod.editSelectedEpisodes = function (episodes) {
-        $.each(episodes, function () {
-            if (this.file && !Object.keys(this.file).length > 0) return false;
-            var fileId = this.file_id || this.file.id, uid = AIRTIME.library.MediaTypeStringEnum.FILE + "_" + fileId;
-            $.get(baseUrl + "library/edit-file-md/id/" + fileId, {format: "json"}, function (json) {
-                AIRTIME.playlist.fileMdEdit(json, uid);
-            });
-        });
-    };
-
-    /**
-     * Import one or more podcast episodes.
-     *
-     * @param {Array} episodes          array of episode data to be imported
-     * @param {PodcastEpisodeTable} dt  PodcastEpisode table containing the data
-     */
-    mod.importSelectedEpisodes = function (episodes, dt) {
-        $.each(episodes, function () {
-            // remainingDiskSpace is defined in layout.phtml
-            if (this.enclosure.length > remainingDiskSpace) {
-                alert("You don't have enough disk space to import " + this.title);
-                return false;
-            }
-            if (this.file && Object.keys(this.file).length > 0) return false;
-            $.post(endpoint + this.podcast_id + '/episodes', JSON.stringify({
-                csrf_token: $("#csrf").val(),
-                episode: this
-            }), function () {
-                dt.reload(dt.config.podcastId);
-            });
-
-            remainingDiskSpace -= this.enclosure.length;
-        });
-
-        dt.clearSelection();
-    };
-
-    /**
-     * Delete one or more podcast episodes.
-     *
-     * @param {id:string, type:string}[] data  Array of data objects to be deleted
-     * @param podcastId:string
-     */
-    mod.deleteSelectedEpisodes = function (data, podcastId) {
+    PodcastEpisodeTable.prototype._setupImportListener = function () {
+      var self = this;
+      self.importListener = setInterval(function () {
+        var podcastId = self.config.podcastId,
+          pendingRows = [];
+        if (!podcastId) return false;
+        var dt = self.getDatatable(),
+          data = dt.fnGetData();
+        // Iterate over the table data to check for any rows pending import
         $.each(data, function () {
-            AIRTIME.library.fnDeleteItems(data, podcastId);
+          if (this.ingested == -1) {
+            pendingRows.push(this.guid);
+          }
         });
-    };
-
-    /**
-     * Initialize the podcast episode table with working buttons
-     */
-    mod.initPodcastEpisodeDatatableWithButtonEvents = function (domNode, podcastId) {
-
-        /**
-         * Check the import statuses of each selected episode to see which
-         * buttons should be enabled or disabled.
-         *
-         * @param shouldBeImported whether or not the selected item(s)
-         *        should be imported to obtain a valid result.
-         *
-         * @returns {boolean} true if all selected episodes are valid and
-         *                    the button should be enabled, otherwise false.
-         */
-        var checkSelectedEpisodeImportStatus = function (shouldBeImported) {
-            var selected = this.getSelectedRows(), isValid = true;
-            if (selected.length == 0) return false;
-            $.each(selected, function () {
-                if (this.ingested < 0) isValid = false;
-                var isImported  = !$.isEmptyObject(this.file);
-                if (shouldBeImported ? !isImported : isImported) {
-                    isValid = false;
-                }
+        if (pendingRows.length > 0) {
+          // Manually trigger the Celery task to update the internal
+          // task reference because the upload will often finish quickly
+          $.get("/api/poll-celery");
+          // Fetch the table data if there are pending rows,
+          // then check if any of the pending rows have
+          // succeeded or failed before reloading the table.
+          $.get(endpoint + podcastId + "/episodes", function (json) {
+            data = JSON.parse(json);
+            var delta = false;
+            $.each(data, function () {
+              var idx = pendingRows.indexOf(this.guid);
+              if (idx > -1 && this.ingested != -1) {
+                delta = true;
+                pendingRows.slice(idx, 0);
+              }
             });
-            return isValid;
-        };
-
-        // Setup the default buttons (new, edit, delete)
-        podcastEpisodeButtons = AIRTIME.widgets.Table.getStandardToolbarButtons();
-        $.extend(true, podcastEpisodeButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.NEW],
-            {
-                title: $.i18n._("Import"),
-                eventHandlers: {
-                    click: function () {
-                        var episodes = mod.episodeTables[podcastId].getSelectedRows();
-                        AIRTIME.podcast.importSelectedEpisodes(episodes, mod.episodeTables[podcastId]);
-                    }
-                },
-                validateConstraints: function () {
-                    return checkSelectedEpisodeImportStatus.call(this, false);
-                }
-            });
-        $.extend(true, podcastEpisodeButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.EDIT],
-            {
-                eventHandlers: {
-                    click: function () {
-                        var episodes = mod.episodeTables[podcastId].getSelectedRows();
-                        AIRTIME.podcast.editSelectedEpisodes(episodes);
-                    }
-                },
-                validateConstraints: function () {
-                    return checkSelectedEpisodeImportStatus.call(this, true);
-                }
-            });
-        $.extend(true, podcastEpisodeButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.DELETE],
-            {
-                eventHandlers: {
-                    click: function () {
-                        var data = [], episodes = mod.episodeTables[podcastId].getSelectedRows();
-                        $.each(episodes, function () {
-                            data.push({id: this.file.id, type: this.file.ftype});
-                        });
-                        AIRTIME.podcast.deleteSelectedEpisodes(data, podcastId);
-                    }
-                },
-                validateConstraints: function () {
-                    return checkSelectedEpisodeImportStatus.call(this, true);
-                }
-            });
-
-        // Reassign these because integer keys take precedence in iteration order - we want to order based on insertion
-        // FIXME: this is a pretty flimsy way to try to set up iteration order (possibly not xbrowser compatible?)
-        podcastEpisodeButtons = {
-            newBtn : podcastEpisodeButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.NEW],
-            editBtn: podcastEpisodeButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.EDIT],
-            delBtn : podcastEpisodeButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.DELETE]
-        };
-
-        $.extend(true, podcastEpisodeButtons, {
-            addToScheduleBtn: {
-                title           : $.i18n._('Add to Schedule'),
-                iconClass       : 'icon-plus',
-                extraBtnClass   : 'btn-small',
-                elementId       : '',
-                eventHandlers   : {
-                    click: function () {
-                        var data = [], selected = AIRTIME.podcast.episodeTables[podcastId].getSelectedRows();
-                        $.each(selected, function () { data.push(this.file); });
-                        AIRTIME.library.addToSchedule(data);
-                    }
-                },
-                validateConstraints: function () {
-                    // TODO: change text + behaviour for playlists, smart blocks, etc.
-                    return checkSelectedEpisodeImportStatus.call(this, true);
-                }
-            },
-            viewDescBtn: {
-                title : $.i18n._("View"),
-                iconClass : "icon-globe",
-                extraBtnClass : "btn-small",
-                elementId : "",
-                eventHandlers : {
-                    click: function () {
-                        AIRTIME.library.openPodcastEpisodeDialog(podcastId);
-                    }
-                },
-                validateConstraints: function () {
-                    return this.getSelectedRows().length == 1;
-                }
+            if (delta) {
+              // Has there been a change?
+              // We already have the data, so there's no reason to call
+              // reload() here; this also provides a smoother transition
+              dt.fnClearTable(false);
+              dt.fnAddData(data);
             }
-        });
-
-        mod.episodeTables[podcastId] = AIRTIME.podcast.initPodcastEpisodeDatatable(
-            domNode,
-            {},
-            podcastEpisodeButtons,
-            {
-                hideIngestCheckboxes: false,
-                emptyPlaceholder: {
-                    iconClass: "icon-white icon-th-list",
-                    html: $.i18n._("This podcast doesn't have any episodes!")
-                    + "<br/>" + $.i18n._("Make sure the RSS feed contains audio items (with enclosure tags).")
-                    + "<br/><a target='_blank' href='http://www.apple.com/ca/itunes/podcasts/specs.html'>" + $.i18n._("Learn about podcasts") + "</a>"
-                }
-            }
-        );
-
-        mod.podcastEpisodeDataTable = mod.episodeTables[podcastId].getDatatable();
-        mod.episodeTables[podcastId].assignDblClickHandler(function () {
-            var data = mod.podcastEpisodeDataTable.fnGetData(this);
-            if (!$.isEmptyObject(data.file)) {
-                mod.dblClickAdd(data.file, data.file.ftype);
-            } else {
-                if (data.ingested >= 0) {  // Only import if the file isn't pending
-                    AIRTIME.podcast.importSelectedEpisodes([data], mod.episodeTables[podcastId]);
-                }
-            }
-        });
-
-        return mod.episodeTables[podcastId];
-    };
-
-    /**
-     * Initialize the internal datatable for the podcast editor view to hold episode data passed back from the server.
-     *
-     * Selection for the internal table represents episodes marked for ingest and is disabled for ingested episodes.
-     *
-     * @param {jQuery}  domNode   the jQuery DOM node to create the table inside.
-     * @param {Object}  buttons   JSON object containing datatables button parameters
-     * @param {Object}  config    JSON object containing internal PodcastEpisodeTable parameters
-     * @param {boolean} config.hideIngestCheckboxes flag denoting whether or not to hide checkboxes for ingested items
-     *
-     * @returns {Table} the created Table object
-     */
-    mod.initPodcastEpisodeDatatable = function (domNode, params, buttons, config) {
-        params = $.extend(true, params, {
-            aoColumns   : [
-                /* GUID */              { "sTitle" : ""                            , "mDataProp" : "guid"           , "sClass" : "podcast_episodes_guid"        , "bVisible" : false },
-                /* Ingested */          { "sTitle" : $.i18n._("Imported?")         , "mDataProp" : "importIcon"     , "sClass" : "podcast_episodes_imported"    , "sWidth" : "120px" },
-                /* Title */             { "sTitle" : $.i18n._("Title")             , "mDataProp" : "title"          , "sClass" : "podcast_episodes_title"       , "sWidth" : "170px" },
-                /* Author */            { "sTitle" : $.i18n._("Author")            , "mDataProp" : "author"         , "sClass" : "podcast_episodes_author"      , "sWidth" : "170px" },
-                /* Description */       { "sTitle" : $.i18n._("Description")       , "mDataProp" : "description"    , "sClass" : "podcast_episodes_description" , "sWidth" : "300px" },
-                /* Link */              { "sTitle" : $.i18n._("Link")              , "mDataProp" : "link"           , "sClass" : "podcast_episodes_link"        , "sWidth" : "170px" },
-                /* Publication Date */  { "sTitle" : $.i18n._("Publication Date")  , "mDataProp" : "pub_date"       , "sClass" : "podcast_episodes_pub_date"    , "sWidth" : "170px" }
-            ],
-            bServerSide : false,
-            sAjaxSource : null,
-            // Initialize the table with empty data so we can defer loading
-            // If we load sequentially there's a delay before the table appears
-            aaData      : {},
-            oColVis     : {
-                buttonText: $.i18n._("Columns"),
-                iOverlayFade: 0,
-                aiExclude: [0, 1, 2]
-            },
-            bDeferRender: true,
-            oColReorder: {
-                iFixedColumns: 3  // Checkbox + imported
-            },
-            fnCreatedRow: function(nRow, aData, iDataIndex) {
-                var self = this;
-                if (aData.file && Object.keys(aData.file).length > 0) {
-                    $(nRow).draggable({
-                        helper: function () {
-                            var $row = $(this), data = self._datatable.fnGetData(nRow);
-                            $row.data("aData", data.file);
-                            self.selectRow(this, data, self.SELECTION_MODE.SINGLE, $row.index());
-                            var selected = self.getSelectedRows().length, container,
-                                width = self._$wrapperDOMNode.closest(".dataTables_wrapper").outerWidth(), message;
-
-                            message = sprintf($.i18n._(selected > 1 ? "Adding %s Items" : "Adding %s Item"), selected);
-                            container = $('<div/>').attr('id', 'draggingContainer').append('<tr/>')
-                                .find("tr").append('<td/>').find("td")
-                                .attr("colspan", 100).width(width).css("max-width", "none")
-                                .addClass("ui-state-highlight").append(message).end().end();
-
-                            return container;
-                        },
-                        tolerance: 'pointer',
-                        cursor: 'move',
-                        cursorAt: {
-                            top: 20,
-                            left: Math.floor(self._datatable.outerWidth() / 2)
-                        },
-                        distance: 25, // min-distance for dragging
-                        connectToSortable: $("#show_builder_table, .active-tab .spl_sortable")
-                    });
-                }
-            },
-            fnDrawCallback: function () {
-                AIRTIME.library.drawEmptyPlaceholder(this);
-                // Hide the processing div
-                var dt = this.getDatatable();
-                !dt || dt.closest(".dataTables_wrapper").find(".dataTables_processing").css("visibility", "hidden");
-            }
-        });
-
-        if (typeof PodcastEpisodeTable === 'undefined') {
-            _initPodcastEpisodeTable();
+          });
         }
-
-        var podcastEpisodeTableObj = new PodcastEpisodeTable(
-            domNode, // DOM node to create the table inside.
-            true,    // Enable item selection
-            buttons, // Toolbar buttons
-            params,  // Datatables overrides.
-            config   // Internal config
-        );
-
-        podcastEpisodeTableObj.getDatatable().addTitles("td");
-        return podcastEpisodeTableObj;
+      }, 5000); // Run every 5 seconds
     };
 
-    return AIRTIME;
-}(AIRTIME || {}));
+    /**
+     * Explicit destructor
+     */
+    PodcastEpisodeTable.prototype.destroy = function () {
+      clearInterval(this.importListener);
+    };
+  }
 
-$(document).ready(function() {
-    $(document).on("submit", "#podcast_url_form", function (e) {
-        e.preventDefault();
-        AIRTIME.podcast.addPodcast();
+  /**
+   * Create and show the URL dialog for podcast creation.
+   */
+  mod.createUrlDialog = function () {
+    $.get("/render/podcast-url-dialog", function (json) {
+      $(document.body).append(json.html);
+      $("#podcast_url_dialog").dialog({
+        title: $.i18n._("Add New Podcast"),
+        resizable: false,
+        modal: true,
+        width: "450px",
+        height: 129,
+        close: function () {
+          $(this).remove();
+        },
+      });
     });
+  };
+
+  /**
+   * Find the URL in the podcast creation dialog and POST it to the server
+   * to store the feed as a Podcast object.
+   *
+   * FIXME: we should probably be passing the serialized form into this function instead
+   */
+  mod.addPodcast = function () {
+    $.post(
+      endpoint,
+      $("#podcast_url_dialog").find("form").serialize(),
+      function (json) {
+        // Refresh left-side library pane to show newly created podcast
+        AIRTIME.library.podcastDataTable.fnDraw();
+
+        // close modal
+        $("#podcast_url_dialog").dialog("close");
+
+        // open newly created podcast in right-side edit pane
+        _initAppFromResponse(json);
+      }
+    ).fail(function (e) {
+      var errors = $("#podcast_url_dialog").find(".errors");
+      errors.show(200).text(e.responseText);
+      setTimeout(function () {
+        errors.hide(200);
+      }, 3000);
+    });
+  };
+
+  /**
+   * Create a bulk request to edit all currently selected podcasts.
+   */
+  mod.editSelectedPodcasts = function () {
+    _bulkAction(
+      AIRTIME.library.podcastTableWidget.getSelectedRows(),
+      HTTPMethods.GET,
+      function (json) {
+        json.forEach(function (data) {
+          _initAppFromResponse(data);
+        });
+      }
+    );
+  };
+
+  /**
+   * Create a bulk request to delete all currently selected podcasts.
+   */
+  mod.deleteSelectedPodcasts = function () {
+    if (
+      confirm(
+        $.i18n._(
+          "Are you sure you want to delete the selected podcasts from your library?"
+        )
+      )
+    ) {
+      _bulkAction(
+        AIRTIME.library.podcastTableWidget.getSelectedRows(),
+        HTTPMethods.DELETE,
+        function () {
+          AIRTIME.library.podcastDataTable.fnDraw();
+        }
+      );
+    }
+  };
+
+  /**
+   * Open metadata editor tabs for each of the selected episodes.
+   *
+   * @param {Array} episodes the array of selected episodes
+   */
+  mod.editSelectedEpisodes = function (episodes) {
+    $.each(episodes, function () {
+      if (this.file && !Object.keys(this.file).length > 0) return false;
+      var fileId = this.file_id || this.file.id,
+        uid = AIRTIME.library.MediaTypeStringEnum.FILE + "_" + fileId;
+      $.get(
+        baseUrl + "library/edit-file-md/id/" + fileId,
+        { format: "json" },
+        function (json) {
+          AIRTIME.playlist.fileMdEdit(json, uid);
+        }
+      );
+    });
+  };
+
+  /**
+   * Import one or more podcast episodes.
+   *
+   * @param {Array} episodes          array of episode data to be imported
+   * @param {PodcastEpisodeTable} dt  PodcastEpisode table containing the data
+   */
+  mod.importSelectedEpisodes = function (episodes, dt) {
+    $.each(episodes, function () {
+      // remainingDiskSpace is defined in layout.phtml
+      if (this.enclosure.length > remainingDiskSpace) {
+        alert("You don't have enough disk space to import " + this.title);
+        return false;
+      }
+      if (this.file && Object.keys(this.file).length > 0) return false;
+      $.post(
+        endpoint + this.podcast_id + "/episodes",
+        JSON.stringify({
+          csrf_token: $("#csrf").val(),
+          episode: this,
+        }),
+        function () {
+          dt.reload(dt.config.podcastId);
+        }
+      );
+
+      remainingDiskSpace -= this.enclosure.length;
+    });
+
+    dt.clearSelection();
+  };
+
+  /**
+   * Delete one or more podcast episodes.
+   *
+   * @param {id:string, type:string}[] data  Array of data objects to be deleted
+   * @param podcastId:string
+   */
+  mod.deleteSelectedEpisodes = function (data, podcastId) {
+    $.each(data, function () {
+      AIRTIME.library.fnDeleteItems(data, podcastId);
+    });
+  };
+
+  /**
+   * Initialize the podcast episode table with working buttons
+   */
+  mod.initPodcastEpisodeDatatableWithButtonEvents = function (
+    domNode,
+    podcastId
+  ) {
+    /**
+     * Check the import statuses of each selected episode to see which
+     * buttons should be enabled or disabled.
+     *
+     * @param shouldBeImported whether or not the selected item(s)
+     *        should be imported to obtain a valid result.
+     *
+     * @returns {boolean} true if all selected episodes are valid and
+     *                    the button should be enabled, otherwise false.
+     */
+    var checkSelectedEpisodeImportStatus = function (shouldBeImported) {
+      var selected = this.getSelectedRows(),
+        isValid = true;
+      if (selected.length == 0) return false;
+      $.each(selected, function () {
+        if (this.ingested < 0) isValid = false;
+        var isImported = !$.isEmptyObject(this.file);
+        if (shouldBeImported ? !isImported : isImported) {
+          isValid = false;
+        }
+      });
+      return isValid;
+    };
+
+    // Setup the default buttons (new, edit, delete)
+    podcastEpisodeButtons = AIRTIME.widgets.Table.getStandardToolbarButtons();
+    $.extend(
+      true,
+      podcastEpisodeButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.NEW],
+      {
+        title: $.i18n._("Import"),
+        eventHandlers: {
+          click: function () {
+            var episodes = mod.episodeTables[podcastId].getSelectedRows();
+            AIRTIME.podcast.importSelectedEpisodes(
+              episodes,
+              mod.episodeTables[podcastId]
+            );
+          },
+        },
+        validateConstraints: function () {
+          return checkSelectedEpisodeImportStatus.call(this, false);
+        },
+      }
+    );
+    $.extend(
+      true,
+      podcastEpisodeButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.EDIT],
+      {
+        eventHandlers: {
+          click: function () {
+            var episodes = mod.episodeTables[podcastId].getSelectedRows();
+            AIRTIME.podcast.editSelectedEpisodes(episodes);
+          },
+        },
+        validateConstraints: function () {
+          return checkSelectedEpisodeImportStatus.call(this, true);
+        },
+      }
+    );
+    $.extend(
+      true,
+      podcastEpisodeButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.DELETE],
+      {
+        eventHandlers: {
+          click: function () {
+            var data = [],
+              episodes = mod.episodeTables[podcastId].getSelectedRows();
+            $.each(episodes, function () {
+              data.push({ id: this.file.id, type: this.file.ftype });
+            });
+            AIRTIME.podcast.deleteSelectedEpisodes(data, podcastId);
+          },
+        },
+        validateConstraints: function () {
+          return checkSelectedEpisodeImportStatus.call(this, true);
+        },
+      }
+    );
+
+    // Reassign these because integer keys take precedence in iteration order - we want to order based on insertion
+    // FIXME: this is a pretty flimsy way to try to set up iteration order (possibly not xbrowser compatible?)
+    podcastEpisodeButtons = {
+      newBtn:
+        podcastEpisodeButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.NEW],
+      editBtn:
+        podcastEpisodeButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.EDIT],
+      delBtn:
+        podcastEpisodeButtons[
+          AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.DELETE
+        ],
+    };
+
+    $.extend(true, podcastEpisodeButtons, {
+      addToScheduleBtn: {
+        title: $.i18n._("Add to Schedule"),
+        iconClass: "icon-plus",
+        extraBtnClass: "btn-small",
+        elementId: "",
+        eventHandlers: {
+          click: function () {
+            var data = [],
+              selected =
+                AIRTIME.podcast.episodeTables[podcastId].getSelectedRows();
+            $.each(selected, function () {
+              data.push(this.file);
+            });
+            AIRTIME.library.addToSchedule(data);
+          },
+        },
+        validateConstraints: function () {
+          // TODO: change text + behaviour for playlists, smart blocks, etc.
+          return checkSelectedEpisodeImportStatus.call(this, true);
+        },
+      },
+      viewDescBtn: {
+        title: $.i18n._("View"),
+        iconClass: "icon-globe",
+        extraBtnClass: "btn-small",
+        elementId: "",
+        eventHandlers: {
+          click: function () {
+            AIRTIME.library.openPodcastEpisodeDialog(podcastId);
+          },
+        },
+        validateConstraints: function () {
+          return this.getSelectedRows().length == 1;
+        },
+      },
+    });
+
+    mod.episodeTables[podcastId] = AIRTIME.podcast.initPodcastEpisodeDatatable(
+      domNode,
+      {},
+      podcastEpisodeButtons,
+      {
+        hideIngestCheckboxes: false,
+        emptyPlaceholder: {
+          iconClass: "icon-white icon-th-list",
+          html:
+            $.i18n._("This podcast doesn't have any episodes!") +
+            "<br/>" +
+            $.i18n._(
+              "Make sure the RSS feed contains audio items (with enclosure tags)."
+            ) +
+            "<br/><a target='_blank' href='http://www.apple.com/ca/itunes/podcasts/specs.html'>" +
+            $.i18n._("Learn about podcasts") +
+            "</a>",
+        },
+      }
+    );
+
+    mod.podcastEpisodeDataTable = mod.episodeTables[podcastId].getDatatable();
+    mod.episodeTables[podcastId].assignDblClickHandler(function () {
+      var data = mod.podcastEpisodeDataTable.fnGetData(this);
+      if (!$.isEmptyObject(data.file)) {
+        mod.dblClickAdd(data.file, data.file.ftype);
+      } else {
+        if (data.ingested >= 0) {
+          // Only import if the file isn't pending
+          AIRTIME.podcast.importSelectedEpisodes(
+            [data],
+            mod.episodeTables[podcastId]
+          );
+        }
+      }
+    });
+
+    return mod.episodeTables[podcastId];
+  };
+
+  /**
+   * Initialize the internal datatable for the podcast editor view to hold episode data passed back from the server.
+   *
+   * Selection for the internal table represents episodes marked for ingest and is disabled for ingested episodes.
+   *
+   * @param {jQuery}  domNode   the jQuery DOM node to create the table inside.
+   * @param {Object}  buttons   JSON object containing datatables button parameters
+   * @param {Object}  config    JSON object containing internal PodcastEpisodeTable parameters
+   * @param {boolean} config.hideIngestCheckboxes flag denoting whether or not to hide checkboxes for ingested items
+   *
+   * @returns {Table} the created Table object
+   */
+  mod.initPodcastEpisodeDatatable = function (
+    domNode,
+    params,
+    buttons,
+    config
+  ) {
+    params = $.extend(true, params, {
+      aoColumns: [
+        /* GUID */ {
+          sTitle: "",
+          mDataProp: "guid",
+          sClass: "podcast_episodes_guid",
+          bVisible: false,
+        },
+        /* Ingested */ {
+          sTitle: $.i18n._("Imported?"),
+          mDataProp: "importIcon",
+          sClass: "podcast_episodes_imported",
+          sWidth: "120px",
+        },
+        /* Title */ {
+          sTitle: $.i18n._("Title"),
+          mDataProp: "title",
+          sClass: "podcast_episodes_title",
+          sWidth: "170px",
+        },
+        /* Author */ {
+          sTitle: $.i18n._("Author"),
+          mDataProp: "author",
+          sClass: "podcast_episodes_author",
+          sWidth: "170px",
+        },
+        /* Description */ {
+          sTitle: $.i18n._("Description"),
+          mDataProp: "description",
+          sClass: "podcast_episodes_description",
+          sWidth: "300px",
+        },
+        /* Link */ {
+          sTitle: $.i18n._("Link"),
+          mDataProp: "link",
+          sClass: "podcast_episodes_link",
+          sWidth: "170px",
+        },
+        /* Publication Date */ {
+          sTitle: $.i18n._("Publication Date"),
+          mDataProp: "pub_date",
+          sClass: "podcast_episodes_pub_date",
+          sWidth: "170px",
+        },
+      ],
+      bServerSide: false,
+      sAjaxSource: null,
+      // Initialize the table with empty data so we can defer loading
+      // If we load sequentially there's a delay before the table appears
+      aaData: {},
+      oColVis: {
+        buttonText: $.i18n._("Columns"),
+        iOverlayFade: 0,
+        aiExclude: [0, 1, 2],
+      },
+      bDeferRender: true,
+      oColReorder: {
+        iFixedColumns: 3, // Checkbox + imported
+      },
+      fnCreatedRow: function (nRow, aData, iDataIndex) {
+        var self = this;
+        if (aData.file && Object.keys(aData.file).length > 0) {
+          $(nRow).draggable({
+            helper: function () {
+              var $row = $(this),
+                data = self._datatable.fnGetData(nRow);
+              $row.data("aData", data.file);
+              self.selectRow(
+                this,
+                data,
+                self.SELECTION_MODE.SINGLE,
+                $row.index()
+              );
+              var selected = self.getSelectedRows().length,
+                container,
+                width = self._$wrapperDOMNode
+                  .closest(".dataTables_wrapper")
+                  .outerWidth(),
+                message;
+
+              message = sprintf(
+                $.i18n._(selected > 1 ? "Adding %s Items" : "Adding %s Item"),
+                selected
+              );
+              container = $("<div/>")
+                .attr("id", "draggingContainer")
+                .append("<tr/>")
+                .find("tr")
+                .append("<td/>")
+                .find("td")
+                .attr("colspan", 100)
+                .width(width)
+                .css("max-width", "none")
+                .addClass("ui-state-highlight")
+                .append(message)
+                .end()
+                .end();
+
+              return container;
+            },
+            tolerance: "pointer",
+            cursor: "move",
+            cursorAt: {
+              top: 20,
+              left: Math.floor(self._datatable.outerWidth() / 2),
+            },
+            distance: 25, // min-distance for dragging
+            connectToSortable: $(
+              "#show_builder_table, .active-tab .spl_sortable"
+            ),
+          });
+        }
+      },
+      fnDrawCallback: function () {
+        AIRTIME.library.drawEmptyPlaceholder(this);
+        // Hide the processing div
+        var dt = this.getDatatable();
+        !dt ||
+          dt
+            .closest(".dataTables_wrapper")
+            .find(".dataTables_processing")
+            .css("visibility", "hidden");
+      },
+    });
+
+    if (typeof PodcastEpisodeTable === "undefined") {
+      _initPodcastEpisodeTable();
+    }
+
+    var podcastEpisodeTableObj = new PodcastEpisodeTable(
+      domNode, // DOM node to create the table inside.
+      true, // Enable item selection
+      buttons, // Toolbar buttons
+      params, // Datatables overrides.
+      config // Internal config
+    );
+
+    podcastEpisodeTableObj.getDatatable().addTitles("td");
+    return podcastEpisodeTableObj;
+  };
+
+  return AIRTIME;
+})(AIRTIME || {});
+
+$(document).ready(function () {
+  $(document).on("submit", "#podcast_url_form", function (e) {
+    e.preventDefault();
+    AIRTIME.podcast.addPodcast();
+  });
 });
diff --git a/legacy/public/js/airtime/library/publish.js b/legacy/public/js/airtime/library/publish.js
index 6ad330f24..4c4edcd2c 100644
--- a/legacy/public/js/airtime/library/publish.js
+++ b/legacy/public/js/airtime/library/publish.js
@@ -1,114 +1,128 @@
-
 var AIRTIME = (function (AIRTIME) {
-    var mod;
+  var mod;
 
-    if (AIRTIME.publish === undefined) {
-        AIRTIME.publish = {};
-    }
+  if (AIRTIME.publish === undefined) {
+    AIRTIME.publish = {};
+  }
 
-    mod = AIRTIME.publish;
+  mod = AIRTIME.publish;
 
-    var endpoint = 'rest/media/';
-    var dialogUrl = 'library/publish-dialog';
-    var PUBLISH_APP_NAME = 'publish';
+  var endpoint = "rest/media/";
+  var dialogUrl = "library/publish-dialog";
+  var PUBLISH_APP_NAME = "publish";
 
-    //AngularJS app
-    var publishApp = angular.module(PUBLISH_APP_NAME, [])
-        .controller('Publish', function ($sce, $scope, $http, mediaId, tab) {
-            $scope.publishData = {};
-            var sourceInterval;
+  //AngularJS app
+  var publishApp = angular
+    .module(PUBLISH_APP_NAME, [])
+    .controller("Publish", function ($sce, $scope, $http, mediaId, tab) {
+      $scope.publishData = {};
+      var sourceInterval;
 
-            tab.contents.on("click", "input[type='checkbox']", function () {
-                var noSourcesChecked = true;
-                $.each(tab.contents.find("input[type='checkbox']"), function () {
-                    if ($(this).is(":checked")) {
-                        noSourcesChecked = false;
-                    }
-                });
-                tab.contents.find(".publish-btn").prop("disabled", noSourcesChecked);
+      tab.contents.on("click", "input[type='checkbox']", function () {
+        var noSourcesChecked = true;
+        $.each(tab.contents.find("input[type='checkbox']"), function () {
+          if ($(this).is(":checked")) {
+            noSourcesChecked = false;
+          }
+        });
+        tab.contents.find(".publish-btn").prop("disabled", noSourcesChecked);
+      });
+
+      function fetchSourceData() {
+        var csrfToken = jQuery("#csrf").val();
+        $http
+          .get(endpoint + mediaId, { csrf_token: csrfToken })
+          .success(function (json) {
+            $scope.media = json;
+            tab.setName($scope.media.track_title);
+          });
+
+        // Get an object containing all sources, their translated labels,
+        // and their publication state for the file with the given ID
+        $http
+          .get(endpoint + mediaId + "/publish-sources", {
+            csrf_token: csrfToken,
+          })
+          .success(function (json) {
+            $scope.sources = { toPublish: [], published: [] };
+            $.each(json, function () {
+              if (Math.abs(this.status) == 1) {
+                $scope.sources.published.push(this);
+              } else {
+                $scope.sources.toPublish.push(this);
+              }
             });
+          });
+      }
 
-            function fetchSourceData() {
-                var csrfToken = jQuery("#csrf").val();
-                $http.get(endpoint + mediaId, {csrf_token: csrfToken})
-                    .success(function (json) {
-                        $scope.media = json;
-                        tab.setName($scope.media.track_title);
-                    });
+      function init() {
+        fetchSourceData();
+        sourceInterval = setInterval(function () {
+          fetchSourceData();
+        }, 5000);
 
-                // Get an object containing all sources, their translated labels,
-                // and their publication state for the file with the given ID
-                $http.get(endpoint + mediaId + '/publish-sources', {csrf_token: csrfToken})
-                    .success(function (json) {
-                        $scope.sources = { toPublish: [], published: []};
-                        $.each(json, function () {
-                            if (Math.abs(this.status) == 1) {
-                                $scope.sources.published.push(this);
-                            } else {
-                                $scope.sources.toPublish.push(this);
-                            }
-                        });
-                    });
-            }
+        tab.assignOnCloseHandler(function () {
+          clearInterval(sourceInterval);
+          $scope.$destroy();
+        });
+      }
 
-            function init() {
-                fetchSourceData();
-                sourceInterval = setInterval(function() {
-                    fetchSourceData();
-                }, 5000);
+      $scope.openEditDialog = function () {
+        var uid = AIRTIME.library.MediaTypeStringEnum.FILE + "_" + mediaId;
+        $.get(
+          baseUrl + "library/edit-file-md/id/" + mediaId,
+          { format: "json" },
+          function (json) {
+            AIRTIME.playlist.fileMdEdit(json, uid);
+          }
+        );
+      };
 
-                tab.assignOnCloseHandler(function () {
-                    clearInterval(sourceInterval);
-                    $scope.$destroy();
-                });
-            }
-
-
-            $scope.openEditDialog = function() {
-                var uid = AIRTIME.library.MediaTypeStringEnum.FILE + "_" + mediaId;
-                $.get(baseUrl + "library/edit-file-md/id/" + mediaId, {format: "json"}, function (json) {
-                    AIRTIME.playlist.fileMdEdit(json, uid);
-                });
-            };
-
-            $scope.publish = function () {
-                var data = {};
-                jQuery.each($scope.publishData, function (k, v) {
-                    if (v) {
-                       data[k] = 'publish';  // FIXME: should be more robust
-                    }
-                });
-
-                if (data && Object.keys(data).length > 0) {
-                    $http.put(endpoint + mediaId + '/publish', {csrf_token: jQuery("#csrf").val(), sources: data})
-                        .success(function () {
-                            tab.contents.find(".publish-btn").prop("disabled", true);
-                            fetchSourceData();
-                            $scope.publishData = {};  // Reset the publishData in case the user publishes
-                                                      // and unpublishes without closing the tab
-                        });
-                }
-            };
-
-            $scope.remove = function (source) {
-                var data = {};
-                data[source] = 'unpublish';  // FIXME: should be more robust
-                $http.put(endpoint + mediaId + '/publish', {csrf_token: jQuery("#csrf").val(), sources: data})
-                    .success(function () {
-                        fetchSourceData();
-                });
-            };
-
-            $scope.discard = function () {
-                tab.close();
-                $scope.media = {};
-            };
-
-            init();
+      $scope.publish = function () {
+        var data = {};
+        jQuery.each($scope.publishData, function (k, v) {
+          if (v) {
+            data[k] = "publish"; // FIXME: should be more robust
+          }
         });
 
+        if (data && Object.keys(data).length > 0) {
+          $http
+            .put(endpoint + mediaId + "/publish", {
+              csrf_token: jQuery("#csrf").val(),
+              sources: data,
+            })
+            .success(function () {
+              tab.contents.find(".publish-btn").prop("disabled", true);
+              fetchSourceData();
+              $scope.publishData = {}; // Reset the publishData in case the user publishes
+              // and unpublishes without closing the tab
+            });
+        }
+      };
 
-    /*
+      $scope.remove = function (source) {
+        var data = {};
+        data[source] = "unpublish"; // FIXME: should be more robust
+        $http
+          .put(endpoint + mediaId + "/publish", {
+            csrf_token: jQuery("#csrf").val(),
+            sources: data,
+          })
+          .success(function () {
+            fetchSourceData();
+          });
+      };
+
+      $scope.discard = function () {
+        tab.close();
+        $scope.media = {};
+      };
+
+      init();
+    });
+
+  /*
     var selected = $("#podcast_table").find(".selected"),
         ids = [];
     var selectedData = AIRTIME.library.podcastTableWidget.getSelectedRows();
@@ -116,15 +130,15 @@ var AIRTIME = (function (AIRTIME) {
         ids.push(el.id);
     });*/
 
-    function _bootstrapAngularApp(mediaId, tab) {
-        publishApp.value('mediaId', mediaId);
-        publishApp.value('tab', tab);
-        var wrapper = AIRTIME.tabs.getActiveTab().contents.find(".angular_wrapper");
-        angular.bootstrap(wrapper.get(0), [PUBLISH_APP_NAME]);
-    }
+  function _bootstrapAngularApp(mediaId, tab) {
+    publishApp.value("mediaId", mediaId);
+    publishApp.value("tab", tab);
+    var wrapper = AIRTIME.tabs.getActiveTab().contents.find(".angular_wrapper");
+    angular.bootstrap(wrapper.get(0), [PUBLISH_APP_NAME]);
+  }
 
-    mod.publishSelectedTracks = function() {
-        /*
+  mod.publishSelectedTracks = function () {
+    /*
         _bulkAction("GET", function(json) {
             json.forEach(function(el) {
                 var uid = AIRTIME.library.MediaTypeStringEnum.FILE+"_"+el.id;
@@ -138,18 +152,21 @@ var AIRTIME = (function (AIRTIME) {
                     });
             });
         });*/
+  };
 
-    };
+  mod.openPublishDialog = function (mediaId) {
+    jQuery
+      .get(dialogUrl, { csrf_token: jQuery("#csrf").val() })
+      .success(function (html) {
+        var tab = AIRTIME.tabs.openTab(
+          html,
+          PUBLISH_APP_NAME + "_" + mediaId,
+          null
+        );
+        _bootstrapAngularApp(mediaId, tab);
+      });
 
-    mod.openPublishDialog = function(mediaId) {
-
-        jQuery.get(dialogUrl, { csrf_token: jQuery("#csrf").val() })
-            .success(function(html) {
-                var tab = AIRTIME.tabs.openTab(html, PUBLISH_APP_NAME+"_"+mediaId, null);
-                _bootstrapAngularApp(mediaId, tab);
-            });
-
-        /*
+    /*
         _bulkAction("GET", function(json) {
             json.forEach(function(el) {
                 var uid = AIRTIME.library.MediaTypeStringEnum.FILE+"_"+el.id;
@@ -162,7 +179,7 @@ var AIRTIME = (function (AIRTIME) {
                     });
             });
         });*/
-    };
+  };
 
-    return AIRTIME;
-}(AIRTIME || {}));
+  return AIRTIME;
+})(AIRTIME || {});
diff --git a/legacy/public/js/airtime/library/spl.js b/legacy/public/js/airtime/library/spl.js
index cc91366c3..0017cf6b2 100644
--- a/legacy/public/js/airtime/library/spl.js
+++ b/legacy/public/js/airtime/library/spl.js
@@ -2,1546 +2,1702 @@
 // Playlist Functions
 //--------------------------------------------------------------------------------------------------------------------------------
 
-var AIRTIME = (function(AIRTIME){
+var AIRTIME = (function (AIRTIME) {
+  if (AIRTIME.playlist === undefined) {
+    AIRTIME.playlist = {};
+  }
 
-    if (AIRTIME.playlist === undefined) {
-        AIRTIME.playlist = {};
+  var mod = AIRTIME.playlist,
+    viewport,
+    $lib,
+    $pl,
+    widgetHeight;
+
+  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("^[0-9]+(\\.\\d+)?$");
+
+    return regExpr.test(fade);
+  }
+
+  function playlistError(json) {
+    alert(json.error);
+  }
+
+  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 = mod.getModified(),
+      type = $pl.find(".obj_type").val();
+
+    if (!isTimeValid(cueIn)) {
+      showError(span, $.i18n._("please put in a time '00:00:00 (.0)'"));
+      return;
     }
-
-    var mod = AIRTIME.playlist,
-        viewport,
-        $lib,
-        $pl,
-        widgetHeight;
-
-    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("^[0-9]+(\\.\\d+)?$");
-
-        return regExpr.test(fade);
-    }
-
-    function playlistError(json) {
-        alert(json.error);
-    }
-
-    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 = mod.getModified(),
-            type = $pl.find('.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;
         }
-        $.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.active-tab 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 = mod.getModified(),
-            type = $pl.find('.obj_type').val();
-
-        if (!isTimeValid(cueOut)){
-            showError(span, $.i18n._("please put in a time '00:00:00 (.0)'"));
-            return;
+        if (json.cue_error !== undefined) {
+          showError(span, json.cue_error);
+          return;
         }
 
-        $.post(url,
-            {format: "json", cueOut: cueOut, id: id, modified: lastMod, type: type},
-            function(json){
+        setPlaylistContent(json);
 
-                if (json.error !== undefined){
-                    playlistError(json);
-                    return;
-                }
-                if (json.cue_error !== undefined) {
-                    showError(span, json.cue_error);
-                    return;
-                }
-
-                setPlaylistContent(json);
-
-                li = $('.side_playlist.active-tab 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 = mod.getModified(),
-            type = $pl.find('.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.active-tab 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.active-tab 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 = mod.getModified(),
-            type = $pl.find('.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 = $pl.find('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 = mod.getModified(),
-            type = $pl.find('.obj_type').val();
-
-        if (!isFadeValid(fadeIn)){
-            showError(span, $.i18n._("Please enter a valid time in seconds. Eg. 0.5"));
-            return;
-        } else {
-            hideError(span);
-        }
-
-        $.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 = $pl.find('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 = mod.getModified(),
-            type = $pl.find('.obj_type').val();
-
-        if (!isFadeValid(fadeOut)){
-            showError(span, $.i18n._("Please enter a valid time in seconds. Eg. 0.5"));
-            return;
-        } else {
-            hideError(span);
-        }
-
-        $.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 = $pl.find('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 = $(".side_playlist.active-tab li[unqid=" + unqid + "]");
         li.find(".cue-edit").toggle();
+        highlightActive(li);
+        highlightActive(li.find(".spl_cue"));
+      }
+    );
+  }
 
-        if (li.hasClass("ui-state-active")) {
-            unHighlightActive(li);
-            unHighlightActive(icon);
+  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 = mod.getModified(),
+      type = $pl.find(".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;
         }
-        else {
-            highlightActive(li);
-            highlightActive(icon);
-        }
-    }
-
-    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);
-        $pl.find('.obj_length')
-            .empty()
-            .append(json.length);
-        $('#fieldset-metadate_change textarea')
-            .empty()
-            .val(json.description);
-
-        $pl.find('.spl_sortable').off('focusout keydown');
-        $pl.find('.spl_sortable')
-        .empty()
-        .append($html);
-        setCueEvents();
-        setFadeEvents();
-        mod.setModified(json.modified);
-        AIRTIME.tabs.getActiveTab().setName(json.name);
-
-        AIRTIME.playlist.validatePlaylistElements();
-        redrawLib();
-    }
-
-    mod.setFadeIcon = function() {
-        var contents = $pl.find(".spl_sortable");
-        var show = contents.is(":visible");
-        var empty = $pl.find(".spl_empty");
-
-        if (!show || empty.length > 0) {
-            $pl.find("#spl_crossfade").attr("disabled", "disabled");
-        } 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) {
-                $pl.find("#spl_crossfade").attr("disabled", "disabled");
-            } else {
-                $pl.find("#spl_crossfade").removeAttr("disabled");
-            }
+        if (json.cue_error !== undefined) {
+          showError(span, json.cue_error);
+          return;
         }
 
-        $('.zend_form + .spl-no-margin > div:has(*:visible):last').css('margin-left', 0);
+        setPlaylistContent(json);
+
+        li = $(".side_playlist.active-tab 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 = mod.getModified(),
+      type = $pl.find(".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();
     }
 
-    mod.getId = function(pl) {
-        pl = (pl === undefined) ? $pl : pl;
-        return parseInt(pl.find(".obj_id").val(), 10);
-    };
-
-    mod.getModified = function(pl) {
-        pl = (pl === undefined) ? $pl : pl;
-        return parseInt(pl.find(".obj_lastMod").val(), 10);
-    };
-
-    mod.setModified = function(modified) {
-        $pl.find(".obj_lastMod").val(modified);
-    };
-
-    function setTitleLabel(title) {
-        $pl.find(".title_obj_name").text(title);
+    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();
     }
 
-    function openPlaylistPanel() {
-        viewport = AIRTIME.utilities.findViewportDimensions();
-        var screenWidth = Math.floor(viewport.width - 40);
-        widgetHeight = viewport.height - 185;
+    $.post(
+      url,
+      {
+        format: "json",
+        cueIn: cueIn,
+        cueOut: cueOut,
+        id: id,
+        modified: lastMod,
+        type: type,
+      },
+      function (json) {
+        $el.dialog("destroy");
+        $el.remove();
 
-        $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 = $('.active-tab .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"));
+        if (json.error !== undefined) {
+          playlistError(json);
+          return;
         }
-    }
+        if (json.cue_error !== undefined) {
+          li = $(".side_playlist.active-tab li[unqid=" + id + "]");
 
-    //sets events dynamically for the fade editor.
-    function setFadeEvents() {
-        var temp = $('.active-tab .spl_sortable');
-        temp.on("focusout", ".spl_fade_in span", changeFadeIn);
-        temp.on("keydown", ".spl_fade_in span", submitOnEnter);
+          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);
+          }
 
-        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"));
+          return;
         }
+
+        setPlaylistContent(json);
+
+        li = $(".side_playlist.active-tab 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 = mod.getModified(),
+      type = $pl.find(".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 = $pl.find("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 = mod.getModified(),
+      type = $pl.find(".obj_type").val();
+
+    if (!isFadeValid(fadeIn)) {
+      showError(
+        span,
+        $.i18n._("Please enter a valid time in seconds. Eg. 0.5")
+      );
+      return;
+    } else {
+      hideError(span);
     }
 
-    function initialEvents() {
-        var cachedDescription;
+    $.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;
+        }
 
-        //main playlist fades events
-        $pl.on("click", "#spl_crossfade", function() {
-            var lastMod = mod.getModified(),
-                type = $pl.find('.obj_type').val();
+        setPlaylistContent(json);
 
-            if ($(this).hasClass("ui-state-active")) {
-                $(this).removeClass("ui-state-active");
-                $pl.find("#crossfade_main").hide();
-            }
-            else {
-                $(this).addClass("ui-state-active");
+        li = $pl.find("li[unqid=" + unqid + "]");
+        li.find(".crossfade").toggle();
+        highlightActive(li.find(".spl_fade_control"));
+      }
+    );
+  }
 
-                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("input.spl_main_fade_in");
-                            var fadeOut = $pl.find("input.spl_main_fade_out");
-                            if (json.fadeIn == null) {
-                                fadeIn.parent().prev().hide();
-                                fadeIn.hide();
-                            } else {
-                                fadeIn.parent().prev().show();
-                                fadeIn.show();
-                                fadeIn.val(json.fadeIn);
-                                fadeIn.text(json.fadeIn);
-                            }
-                            if (json.fadeOut == null) {
-                                fadeOut.parent().prev().hide();
-                                fadeOut.hide();
-                            } else {
-                                fadeOut.parent().prev().show();
-                                fadeOut.show();
-                                fadeOut.val(json.fadeOut);
-                                fadeOut.text(json.fadeOut);
-                            }
-                            if (json.fadeIn != null || json.fadeOut != null) {
-                                $pl.find("#crossfade_main").show();
-                            }
-                        }
-                    });
-            }
-        });
+  function changeFadeOut(event) {
+    event.stopPropagation();
 
-        $pl.on("blur", "input.spl_main_fade_in", function(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 = mod.getModified(),
+      type = $pl.find(".obj_type").val();
 
-            var url = baseUrl+"playlist/set-playlist-fades",
-                input = $(this),
-                fadeIn = $.trim(input.val()),
-                lastMod = mod.getModified(),
-                type = $pl.find('.obj_type').val();
+    if (!isFadeValid(fadeOut)) {
+      showError(
+        span,
+        $.i18n._("Please enter a valid time in seconds. Eg. 0.5")
+      );
+      return;
+    } else {
+      hideError(span);
+    }
 
-            if (!isFadeValid(fadeIn)){
-                showError(input, $.i18n._("Please enter a valid time in seconds. Eg. 0.5"));
-                return;
-            } else {
-                hideError(input);
-            }
-            $.post(url,
-                {format: "json", fadeIn: fadeIn, modified: lastMod, type: type},
-                function(json){
-                    hideError(input);
-                    if (json.modified !== undefined) {
-                        mod.setModified(json.modified);
-                    }
-                });
-        });
+    $.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;
+        }
 
-        $pl.on("blur", "input.spl_main_fade_out", function(event){
-            event.stopPropagation();
+        setPlaylistContent(json);
 
-            var url = baseUrl+"playlist/set-playlist-fades",
-                input = $(this),
-                fadeOut = $.trim(input.val()),
-                lastMod = mod.getModified(),
-                type = $pl.find('.obj_type').val();
+        li = $pl.find("li[unqid=" + unqid + "]");
+        li.find(".crossfade").toggle();
+        highlightActive(li.find(".spl_fade_control"));
+      }
+    );
+  }
 
-            if (!isFadeValid(fadeOut)){
-                showError(input, $.i18n._("Please enter a valid time in seconds. Eg. 0.5"));
-                return;
-            } else {
-                hideError(input);
-            }
+  function submitOnEnter(event) {
+    //enter was pressed
+    if (event.keyCode === 13) {
+      event.preventDefault();
+      $(this).blur();
+    }
+  }
 
-            $.post(url,
-                {format: "json", fadeOut: fadeOut, modified: lastMod, type: type},
-                function(json){
-                    hideError(input);
-                    if (json.modified !== undefined) {
-                        mod.setModified(json.modified);
-                    }
-                });
-        });
+  function openFadeEditor(event) {
+    var li;
 
-        $pl.on("keydown", "span.spl_main_fade_in, span.spl_main_fade_out", submitOnEnter);
+    event.stopPropagation();
 
-        $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.
+    li = $(this).parents("li");
+    li.find(".crossfade").toggle();
 
-        //edit playlist name event
-        $pl.on("keydown", ".playlist_name_display", submitOnEnter);
-        //$pl.on("blur", ".playlist_name_display", editName);
+    if ($(this).hasClass("ui-state-active")) {
+      unHighlightActive(this);
+    } else {
+      highlightActive(this);
+    }
+  }
 
-        //edit playlist description events
-        $pl.on("click", "legend", function(){
-            var $fs = $(this).parents("fieldset");
+  function openCueEditor(event) {
+    var li, icon;
 
-            if ($fs.hasClass("closed")) {
-                cachedDescription = $fs.find("textarea").val();
-                $fs.removeClass("closed");
-            }
-            else {
-                $fs.addClass("closed");
-            }
-        });
+    event.stopPropagation();
 
+    icon = $(this);
+    li = $(this).parents("li");
+    li.find(".cue-edit").toggle();
 
-        $pl.on("click", 'button[id="playlist_shuffle_button"]', function(){
-            obj_id = $pl.find('.obj_id').val();
-            url = baseUrl+"playlist/shuffle";
-            enableLoadingIcon();
-            $.post(url, {format: "json", obj_id: obj_id}, function(json){
+    if (li.hasClass("ui-state-active")) {
+      unHighlightActive(li);
+      unHighlightActive(icon);
+    } else {
+      highlightActive(li);
+      highlightActive(icon);
+    }
+  }
 
-                if (json.error !== undefined) {
-                    alert(json.error);
-                } else {
-                    if (json.result == "0") {
-                        $pl.find('.success').text($.i18n._('Playlist shuffled'));
-                        $pl.find('.success').show();
-                        mod.playlistResponse(json);
-                    }
-                }
-                disableLoadingIcon();
-                setTimeout(removeSuccessMsg, 5000);
-            });
-        });
+  function redrawLib() {
+    var dt = $lib.find("#library_display").dataTable();
 
-        $pl.find("#webstream_save").on("click", 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").val();
+    dt.fnStandingRedraw();
+    AIRTIME.library.redrawChosen();
+  }
 
-            //hide any previous errors (if any)
-            $(".side_playlist.active-tab .errors").empty().hide();
+  function setPlaylistContent(json) {
+    var $html = $(json.html);
 
-            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];
+    $("#spl_name > a").empty().append(json.name);
+    $pl.find(".obj_length").empty().append(json.length);
+    $("#fieldset-metadate_change textarea").empty().val(json.description);
 
-                            if (!field[0]) {
-                                var elemId = "#"+s+"-error";
-                                var $div = $(".side_playlist.active-tab " + elemId).text(field[1]).show();
-                            }
-                        }
-                    } else {
-                        var $status = $(".side_playlist.active-tab .status");
-                        $status.html(json.statusMessage);
-                        $status.show();
-                        setTimeout(function(){$status.fadeOut("slow", function(){$status.empty()})}, 5000);
+    $pl.find(".spl_sortable").off("focusout keydown");
+    $pl.find(".spl_sortable").empty().append($html);
+    setCueEvents();
+    setFadeEvents();
+    mod.setModified(json.modified);
+    AIRTIME.tabs.getActiveTab().setName(json.name);
 
-                        $pl.find(".title_obj_name").val(name);
-                        AIRTIME.tabs.getActiveTab().setName(json.name).close();
+    AIRTIME.playlist.validatePlaylistElements();
+    redrawLib();
+  }
 
-                        var $ws_id = $(".active-tab .obj_id");
-                        $ws_id.attr("value", json.streamId);
+  mod.setFadeIcon = function () {
+    var contents = $pl.find(".spl_sortable");
+    var show = contents.is(":visible");
+    var empty = $pl.find(".spl_empty");
 
-                        var $ws_id = $("#ws_delete");
-                        $ws_id.show();
+    if (!show || empty.length > 0) {
+      $pl.find("#spl_crossfade").attr("disabled", "disabled");
+    } else {
+      //get list of playlist contents
+      var list = contents.children();
 
-                        var length = $(".side_playlist.active-tab .ws_length");
-                        length.text(json.length);
+      //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
+      ) {
+        $pl.find("#spl_crossfade").attr("disabled", "disabled");
+      } else {
+        $pl.find("#spl_crossfade").removeAttr("disabled");
+      }
+    }
 
-                        //redraw the library to show the new webstream
-                        redrawLib();
-                    }
+    $(".zend_form + .spl-no-margin > div:has(*:visible):last").css(
+      "margin-left",
+      0
+    );
+  };
 
-                });
+  mod.getId = function (pl) {
+    pl = pl === undefined ? $pl : pl;
+    return parseInt(pl.find(".obj_id").val(), 10);
+  };
 
+  mod.getModified = function (pl) {
+    pl = pl === undefined ? $pl : pl;
+    return parseInt(pl.find(".obj_lastMod").val(), 10);
+  };
 
-        });
+  mod.setModified = function (modified) {
+    $pl.find(".obj_lastMod").val(modified);
+  };
 
-        $pl.find("#webstream_cancel, #cancel_button").on("click", function() {
-            var tabId = $pl.attr("data-tab-id");
-            $("li[data-tab-id=" + tabId + "] .lib_pl_close").click();
-        });
+  function setTitleLabel(title) {
+    $pl.find(".title_obj_name").text(title);
+  }
 
-        $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"
-            });
-        });
-
-        // Unbind so each tab is only handled by its own close button
-        $(".lib_pl_close").unbind().click(function(e) {
-            e.preventDefault();
-            e.stopPropagation();
-
-            $(this).unbind("click"); // Prevent repeated clicks in quick succession from closing multiple tabs
-
-            var tabId = $(this).closest("li").attr("data-tab-id"),
-                tab = AIRTIME.tabs.get(tabId);
-
-            // 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();
-
-            var playlistNameElem = tab.tab.find('.tab-name');
-            var name = playlistNameElem.text().trim();
-
-            // TODO: refactor - this code is pretty finicky...
-            if ((name == $.i18n._("Untitled Playlist")
-                || name == $.i18n._("Untitled Smart Block"))
-                && tab.contents.find(".spl_sortable .spl_empty").length == 1) {
-                mod.fnDelete(undefined, tab);
-            }
-
-            tab.close();
-
-            // save settings if we are not closing the "Scheduled Shows" tab
-            if (tabId != "0") {
-                $.ajax( {
-                    url : baseUrl+"usersettings/set-library-screen-settings",
-                    type : "POST",
-                    data : {
-                        settings : {
-                            playlist : false
-                        },
-                        format : "json"
-                    },
-                    dataType : "json"
-                });
-            }
-        });
-
-        $pl.find("#save_button").unbind().on("click", function(event) {
-            /* Smart blocks: get name, description, and criteria
-             * Playlists: get name, description
-             */
-            var criteria = $pl.find('form').serializeArray(),
-                block_name = $pl.find('.playlist_name_display').val(),
-                block_desc = $pl.find('textarea[name="description"]').val(),
-                save_action = baseUrl+'playlist/save',
-                obj_id = $pl.find(".obj_id").val(),
-                obj_type = $pl.find('.obj_type').val(),
-                lastMod = mod.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);
-                        } else {
-
-                            setTitleLabel(json.name);
-                            AIRTIME.tabs.getActiveTab().setName(json.name);
-                            mod.setModified(json.modified);
-
-                            if (obj_type == "block") {
-                                callback(json, "save");
-                            } else {
-                                $pl.find('.success').text($.i18n._('Playlist saved.'));
-                                $pl.find('.success').show();
-                                setTimeout(removeSuccessMsg, 5000);
-                                dt.fnStandingRedraw();
-                            }
-                        }
-                        mod.setFadeIcon();
-                        disableLoadingIcon();
-                    }
-            );
-        });
-
-        $pl.find("#pl-bl-clear-content").unbind().on("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++) {
-                    //console.log(aSelected[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);
-                    ui.placeholder.css('min-height', 56);
-                },
-                axis: "y",
-                containment: "document",
-                receive: fnReceive,
-                update: fnUpdate
-            };
-        }());
-
-        $pl.find(".spl_sortable").sortable(sortableConf);
-        AIRTIME.playlist.validatePlaylistElements();
-    }
-
-    mod._initPlaylistTabEvents = function(newTab) {
-        newTab.assignTabClickHandler(function() {
-            if (!$(this).hasClass('active')) {
-                newTab.switchTo();
-                var type = newTab.contents.find(".obj_type").val();
-                if (type == "playlist" || type == "block") {
-                    $.post(baseUrl + 'playlist/edit', { format: "json", id: newTab.contents.find(".obj_id").val(), type: type });
-                }
-            }
-        });
-
-        mod.init();
-
-        // functions in smart_blockbuilder.js
-        setupUI();
-        appendAddButton();
-        appendModAddButton();
-        removeButtonCheck();
-        mod.setFadeIcon();
-    };
-
-    mod._initFileMdEvents = function(newTab) {
-        var fileId = newTab.wrapper.find('#file_id').val();
-
-        newTab.contents.find(".md-cancel").on("click", function() {
-            newTab.close();
-        });
-
-        newTab.contents.find(".md-save").on("click", function() {
-            var data = newTab.wrapper.find(".edit-md-dialog form").serializeArray();
-            $.post(baseUrl+'library/edit-file-md', {format: "json", id: fileId, data: data}, function() {
-                // don't redraw the library table if we are on calendar page
-                // we would be on calendar if viewing recorded file metadata
-                if ($("#schedule_calendar").length === 0) {
-                    oTable.fnStandingRedraw();
-                }
-            });
-
-            newTab.close();
-        });
-
-        newTab.contents.find(".md-publish").on("click", function() {
-            AIRTIME.publish.openPublishDialog(fileId);
-        });
-
-        newTab.wrapper.find('.edit-md-dialog').on("keyup", function(event) {
-            // Don't submit if the user hits enter in a textarea (description)
-            if ($(event.target).is('input') && event.keyCode === 13) {
-                newTab.wrapper.find('.md-save').click();
-            }
-        });
-
-        mod.setupEventListeners();
-    };
-
-    mod.fnNew = function() {
-        var url = baseUrl+'playlist/new';
-
-        stopAudioPreview();
-
-        $.post(url,
-            {format: "json", type: 'playlist'},
-            function(json) {
-                var uid = AIRTIME.library.MediaTypeStringEnum.PLAYLIST+"_"+json.id;
-                AIRTIME.tabs.openTab(json.html, uid, AIRTIME.playlist._initPlaylistTabEvents);
-                redrawLib();
-            });
-    };
-
-    mod.fnWsNew = function() {
-        var url = baseUrl+'webstream/new';
-
-        stopAudioPreview();
-
-        $.post(url,
-            {format: "json"},
-            function(json) {
-                var uid = AIRTIME.library.MediaTypeStringEnum.WEBSTREAM+"_"+json.id;
-                AIRTIME.tabs.openTab(json.html, uid, AIRTIME.playlist._initPlaylistTabEvents);
-                redrawLib();
-            });
-    };
-
-
-    mod.fnNewBlock = function() {
-        var url = baseUrl+'playlist/new';
-
-        stopAudioPreview();
-
-        $.post(url,
-            {format: "json", type: 'block'},
-            function(json){
-                var uid = AIRTIME.library.MediaTypeStringEnum.BLOCK+"_"+json.id;
-                AIRTIME.tabs.openTab(json.html, uid, AIRTIME.playlist._initPlaylistTabEvents);
-                redrawLib();
-            });
-    };
-
-    mod.fileMdEdit = function(json, uid) {
-        AIRTIME.tabs.openTab(json.html, uid, AIRTIME.playlist._initFileMdEvents);
-    };
-
-    mod.fnEdit = function(data, url) {
-        stopAudioPreview();
-
-        $.post(url,
-            {format: "json", id: data.id, type: data.ftype},
-            function(json) {
-                AIRTIME.tabs.openTab(json.html, data.tr_id, AIRTIME.playlist._initPlaylistTabEvents);
-                redrawLib();
-            });
-    };
-
-
-    mod.fnDelete = function(plid, tab) {
-        var url, id, lastMod, type, pl = tab.contents;
-
-        stopAudioPreview();
-        id = (plid === undefined) ? mod.getId(pl) : plid;
-        lastMod = mod.getModified(pl);
-        type = pl.find('.obj_type').val();
-        url = baseUrl+'playlist/delete';
-
-        $.post(url,
-            {format: "json", ids: id, modified: lastMod, type: type},
-            function(json) {
-                redrawLib();
-            });
-    };
-
-    mod.fnWsDelete = function(wsid) {
-        var url, id, lastMod;
-
-        stopAudioPreview();
-        id = (wsid === undefined) ? mod.getId() : wsid;
-        lastMod = mod.getModified();
-        type = $pl.find('.obj_type').val();
-        url = baseUrl+'webstream/delete';
-
-        $.post(url,
-            {format: "json", ids: id, modified: lastMod, type: type},
-            function(json){
-                var uid = AIRTIME.library.MediaTypeStringEnum.WEBSTREAM+"_"+id;
-                AIRTIME.tabs.openTab(json.html, uid, AIRTIME.playlist._initPlaylistTabEvents);
-                redrawLib();
-            });
-    };
-
-    mod.disableUI = function() {
-
-        $lib.block({
-            message: "",
-            theme: true,
-            applyPlatformOpacityRules: false
-        });
-
-        $pl.block({
-            message: "",
-            theme: true,
-            applyPlatformOpacityRules: false
-        });
-    };
-
-    mod.enableUI = function() {
-        $lib.unblock();
-        $pl.unblock();
-
-        setupUI();
-    };
-
-    mod.playlistResponse = function(json){
-        if (json.error !== undefined ||
-            (json.result !== undefined && json.result != 0)) {
-            if (json.error) {
-                playlistError(json);
-            }
-            AIRTIME.playlist.replaceForm(json);
-            AIRTIME.playlist.init();
-        }
-        else {
-            setPlaylistContent(json);
-            mod.setFadeIcon();
-            $pl.find('.errors').hide();
-        }
-
-        mod.enableUI();
-    };
-
-    mod.replaceForm = function(json){
-        $pl.find('.editor_pane_wrapper').html(json.html);
-        var uid = AIRTIME.library.MediaTypeStringEnum.BLOCK+"_"+json.id;
-        AIRTIME.tabs.openTab(json.html, uid, AIRTIME.playlist._initPlaylistTabEvents);
-    };
-
-
-    function playlistRequest(sUrl, oData) {
-        var lastMod,
-            obj_type = $pl.find('.obj_type').val();
-
-        mod.disableUI();
-
-        lastMod = mod.getModified();
-
-        oData["modified"] = lastMod;
-        oData["obj_type"] = obj_type;
-        oData["format"] = "json";
-
-        $.post(
-            sUrl,
-            oData,
-            mod.playlistResponse
-        );
-    }
-
-    mod.fnAddItems = function(aItems, iAfter, sAddType) {
-        AIRTIME.library.selectNone();
-        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.setupEventListeners = function() {
-        initialEvents();
-    };
-
-    mod.setCurrent = function(pl) {
-        $pl = pl;
-
-        var type = $pl.find('.obj_type').val();
-        if ($.inArray(type, Object.keys(AIRTIME.library.MediaTypeFullToStringEnum)) > -1) {
-            $.post(baseUrl + "playlist/change-playlist", {
-                id: mod.getId($pl),
-                type: type
-            });
-        }
-    };
-
-    mod.init = function() {
-        if (!$pl) return;
-
-        $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();
-        mod.setFadeIcon();
-
-        initialEvents();
-        setUpPlaylist();
-
-        $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"
+  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",
-                my: "left top",
-                viewport: $(window)
+              },
+            });
+          }
+        }
+      } 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: {
-                classes: "ui-tooltip-dark"
+              border: {
+                width: 0,
+                radius: 4,
+              },
+              classes: "ui-tooltip-dark ui-tooltip-rounded",
             },
-            show: 'mouseover',
-            hide: 'mouseout'
+            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 = $(".active-tab .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 = $(".active-tab .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 = mod.getModified(),
+        type = $pl.find(".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("input.spl_main_fade_in");
+              var fadeOut = $pl.find("input.spl_main_fade_out");
+              if (json.fadeIn == null) {
+                fadeIn.parent().prev().hide();
+                fadeIn.hide();
+              } else {
+                fadeIn.parent().prev().show();
+                fadeIn.show();
+                fadeIn.val(json.fadeIn);
+                fadeIn.text(json.fadeIn);
+              }
+              if (json.fadeOut == null) {
+                fadeOut.parent().prev().hide();
+                fadeOut.hide();
+              } else {
+                fadeOut.parent().prev().show();
+                fadeOut.show();
+                fadeOut.val(json.fadeOut);
+                fadeOut.text(json.fadeOut);
+              }
+              if (json.fadeIn != null || json.fadeOut != null) {
+                $pl.find("#crossfade_main").show();
+              }
+            }
+          }
+        );
+      }
+    });
+
+    $pl.on("blur", "input.spl_main_fade_in", function (event) {
+      event.stopPropagation();
+
+      var url = baseUrl + "playlist/set-playlist-fades",
+        input = $(this),
+        fadeIn = $.trim(input.val()),
+        lastMod = mod.getModified(),
+        type = $pl.find(".obj_type").val();
+
+      if (!isFadeValid(fadeIn)) {
+        showError(
+          input,
+          $.i18n._("Please enter a valid time in seconds. Eg. 0.5")
+        );
+        return;
+      } else {
+        hideError(input);
+      }
+      $.post(
+        url,
+        { format: "json", fadeIn: fadeIn, modified: lastMod, type: type },
+        function (json) {
+          hideError(input);
+          if (json.modified !== undefined) {
+            mod.setModified(json.modified);
+          }
+        }
+      );
+    });
+
+    $pl.on("blur", "input.spl_main_fade_out", function (event) {
+      event.stopPropagation();
+
+      var url = baseUrl + "playlist/set-playlist-fades",
+        input = $(this),
+        fadeOut = $.trim(input.val()),
+        lastMod = mod.getModified(),
+        type = $pl.find(".obj_type").val();
+
+      if (!isFadeValid(fadeOut)) {
+        showError(
+          input,
+          $.i18n._("Please enter a valid time in seconds. Eg. 0.5")
+        );
+        return;
+      } else {
+        hideError(input);
+      }
+
+      $.post(
+        url,
+        { format: "json", fadeOut: fadeOut, modified: lastMod, type: type },
+        function (json) {
+          hideError(input);
+          if (json.modified !== undefined) {
+            mod.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 = $pl.find(".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);
+        } else {
+          if (json.result == "0") {
+            $pl.find(".success").text($.i18n._("Playlist shuffled"));
+            $pl.find(".success").show();
+            mod.playlistResponse(json);
+          }
+        }
+        disableLoadingIcon();
+        setTimeout(removeSuccessMsg, 5000);
+      });
+    });
+
+    $pl.find("#webstream_save").on("click", 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").val();
+
+      //hide any previous errors (if any)
+      $(".side_playlist.active-tab .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.active-tab " + elemId)
+                  .text(field[1])
+                  .show();
+              }
+            }
+          } else {
+            var $status = $(".side_playlist.active-tab .status");
+            $status.html(json.statusMessage);
+            $status.show();
+            setTimeout(function () {
+              $status.fadeOut("slow", function () {
+                $status.empty();
+              });
+            }, 5000);
+
+            $pl.find(".title_obj_name").val(name);
+            AIRTIME.tabs.getActiveTab().setName(json.name).close();
+
+            var $ws_id = $(".active-tab .obj_id");
+            $ws_id.attr("value", json.streamId);
+
+            var $ws_id = $("#ws_delete");
+            $ws_id.show();
+
+            var length = $(".side_playlist.active-tab .ws_length");
+            length.text(json.length);
+
+            //redraw the library to show the new webstream
+            redrawLib();
+          }
+        }
+      );
+    });
+
+    $pl.find("#webstream_cancel, #cancel_button").on("click", function () {
+      var tabId = $pl.attr("data-tab-id");
+      $("li[data-tab-id=" + tabId + "] .lib_pl_close").click();
+    });
+
+    $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",
+      });
+    });
+
+    // Unbind so each tab is only handled by its own close button
+    $(".lib_pl_close")
+      .unbind()
+      .click(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        $(this).unbind("click"); // Prevent repeated clicks in quick succession from closing multiple tabs
+
+        var tabId = $(this).closest("li").attr("data-tab-id"),
+          tab = AIRTIME.tabs.get(tabId);
+
+        // 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();
+
+        var playlistNameElem = tab.tab.find(".tab-name");
+        var name = playlistNameElem.text().trim();
+
+        // TODO: refactor - this code is pretty finicky...
+        if (
+          (name == $.i18n._("Untitled Playlist") ||
+            name == $.i18n._("Untitled Smart Block")) &&
+          tab.contents.find(".spl_sortable .spl_empty").length == 1
+        ) {
+          mod.fnDelete(undefined, tab);
+        }
+
+        tab.close();
+
+        // save settings if we are not closing the "Scheduled Shows" tab
+        if (tabId != "0") {
+          $.ajax({
+            url: baseUrl + "usersettings/set-library-screen-settings",
+            type: "POST",
+            data: {
+              settings: {
+                playlist: false,
+              },
+              format: "json",
+            },
+            dataType: "json",
+          });
+        }
+      });
+
+    $pl
+      .find("#save_button")
+      .unbind()
+      .on("click", function (event) {
+        /* Smart blocks: get name, description, and criteria
+         * Playlists: get name, description
+         */
+        var criteria = $pl.find("form").serializeArray(),
+          block_name = $pl.find(".playlist_name_display").val(),
+          block_desc = $pl.find('textarea[name="description"]').val(),
+          save_action = baseUrl + "playlist/save",
+          obj_id = $pl.find(".obj_id").val(),
+          obj_type = $pl.find(".obj_type").val(),
+          lastMod = mod.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);
+            } else {
+              setTitleLabel(json.name);
+              AIRTIME.tabs.getActiveTab().setName(json.name);
+              mod.setModified(json.modified);
+
+              if (obj_type == "block") {
+                callback(json, "save");
+              } else {
+                $pl.find(".success").text($.i18n._("Playlist saved."));
+                $pl.find(".success").show();
+                setTimeout(removeSuccessMsg, 5000);
+                dt.fnStandingRedraw();
+              }
+            }
+            mod.setFadeIcon();
+            disableLoadingIcon();
+          }
+        );
+      });
+
+    $pl
+      .find("#pl-bl-clear-content")
+      .unbind()
+      .on("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++) {
+          //console.log(aSelected[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);
+          ui.placeholder.css("min-height", 56);
+        },
+        axis: "y",
+        containment: "document",
+        receive: fnReceive,
+        update: fnUpdate,
+      };
+    })();
+
+    $pl.find(".spl_sortable").sortable(sortableConf);
+    AIRTIME.playlist.validatePlaylistElements();
+  }
+
+  mod._initPlaylistTabEvents = function (newTab) {
+    newTab.assignTabClickHandler(function () {
+      if (!$(this).hasClass("active")) {
+        newTab.switchTo();
+        var type = newTab.contents.find(".obj_type").val();
+        if (type == "playlist" || type == "block") {
+          $.post(baseUrl + "playlist/edit", {
+            format: "json",
+            id: newTab.contents.find(".obj_id").val(),
+            type: type,
+          });
+        }
+      }
+    });
+
+    mod.init();
+
+    // functions in smart_blockbuilder.js
+    setupUI();
+    appendAddButton();
+    appendModAddButton();
+    removeButtonCheck();
+    mod.setFadeIcon();
+  };
+
+  mod._initFileMdEvents = function (newTab) {
+    var fileId = newTab.wrapper.find("#file_id").val();
+
+    newTab.contents.find(".md-cancel").on("click", function () {
+      newTab.close();
+    });
+
+    newTab.contents.find(".md-save").on("click", function () {
+      var data = newTab.wrapper.find(".edit-md-dialog form").serializeArray();
+      $.post(
+        baseUrl + "library/edit-file-md",
+        { format: "json", id: fileId, data: data },
+        function () {
+          // don't redraw the library table if we are on calendar page
+          // we would be on calendar if viewing recorded file metadata
+          if ($("#schedule_calendar").length === 0) {
+            oTable.fnStandingRedraw();
+          }
+        }
+      );
+
+      newTab.close();
+    });
+
+    newTab.contents.find(".md-publish").on("click", function () {
+      AIRTIME.publish.openPublishDialog(fileId);
+    });
+
+    newTab.wrapper.find(".edit-md-dialog").on("keyup", function (event) {
+      // Don't submit if the user hits enter in a textarea (description)
+      if ($(event.target).is("input") && event.keyCode === 13) {
+        newTab.wrapper.find(".md-save").click();
+      }
+    });
+
+    mod.setupEventListeners();
+  };
+
+  mod.fnNew = function () {
+    var url = baseUrl + "playlist/new";
+
+    stopAudioPreview();
+
+    $.post(url, { format: "json", type: "playlist" }, function (json) {
+      var uid = AIRTIME.library.MediaTypeStringEnum.PLAYLIST + "_" + json.id;
+      AIRTIME.tabs.openTab(
+        json.html,
+        uid,
+        AIRTIME.playlist._initPlaylistTabEvents
+      );
+      redrawLib();
+    });
+  };
+
+  mod.fnWsNew = function () {
+    var url = baseUrl + "webstream/new";
+
+    stopAudioPreview();
+
+    $.post(url, { format: "json" }, function (json) {
+      var uid = AIRTIME.library.MediaTypeStringEnum.WEBSTREAM + "_" + json.id;
+      AIRTIME.tabs.openTab(
+        json.html,
+        uid,
+        AIRTIME.playlist._initPlaylistTabEvents
+      );
+      redrawLib();
+    });
+  };
+
+  mod.fnNewBlock = function () {
+    var url = baseUrl + "playlist/new";
+
+    stopAudioPreview();
+
+    $.post(url, { format: "json", type: "block" }, function (json) {
+      var uid = AIRTIME.library.MediaTypeStringEnum.BLOCK + "_" + json.id;
+      AIRTIME.tabs.openTab(
+        json.html,
+        uid,
+        AIRTIME.playlist._initPlaylistTabEvents
+      );
+      redrawLib();
+    });
+  };
+
+  mod.fileMdEdit = function (json, uid) {
+    AIRTIME.tabs.openTab(json.html, uid, AIRTIME.playlist._initFileMdEvents);
+  };
+
+  mod.fnEdit = function (data, url) {
+    stopAudioPreview();
+
+    $.post(
+      url,
+      { format: "json", id: data.id, type: data.ftype },
+      function (json) {
+        AIRTIME.tabs.openTab(
+          json.html,
+          data.tr_id,
+          AIRTIME.playlist._initPlaylistTabEvents
+        );
+        redrawLib();
+      }
+    );
+  };
+
+  mod.fnDelete = function (plid, tab) {
+    var url,
+      id,
+      lastMod,
+      type,
+      pl = tab.contents;
+
+    stopAudioPreview();
+    id = plid === undefined ? mod.getId(pl) : plid;
+    lastMod = mod.getModified(pl);
+    type = pl.find(".obj_type").val();
+    url = baseUrl + "playlist/delete";
+
+    $.post(
+      url,
+      { format: "json", ids: id, modified: lastMod, type: type },
+      function (json) {
+        redrawLib();
+      }
+    );
+  };
+
+  mod.fnWsDelete = function (wsid) {
+    var url, id, lastMod;
+
+    stopAudioPreview();
+    id = wsid === undefined ? mod.getId() : wsid;
+    lastMod = mod.getModified();
+    type = $pl.find(".obj_type").val();
+    url = baseUrl + "webstream/delete";
+
+    $.post(
+      url,
+      { format: "json", ids: id, modified: lastMod, type: type },
+      function (json) {
+        var uid = AIRTIME.library.MediaTypeStringEnum.WEBSTREAM + "_" + id;
+        AIRTIME.tabs.openTab(
+          json.html,
+          uid,
+          AIRTIME.playlist._initPlaylistTabEvents
+        );
+        redrawLib();
+      }
+    );
+  };
+
+  mod.disableUI = function () {
+    $lib.block({
+      message: "",
+      theme: true,
+      applyPlatformOpacityRules: false,
+    });
+
+    $pl.block({
+      message: "",
+      theme: true,
+      applyPlatformOpacityRules: false,
+    });
+  };
+
+  mod.enableUI = function () {
+    $lib.unblock();
+    $pl.unblock();
+
+    setupUI();
+  };
+
+  mod.playlistResponse = function (json) {
+    if (
+      json.error !== undefined ||
+      (json.result !== undefined && json.result != 0)
+    ) {
+      if (json.error) {
+        playlistError(json);
+      }
+      AIRTIME.playlist.replaceForm(json);
+      AIRTIME.playlist.init();
+    } else {
+      setPlaylistContent(json);
+      mod.setFadeIcon();
+      $pl.find(".errors").hide();
+    }
+
+    mod.enableUI();
+  };
+
+  mod.replaceForm = function (json) {
+    $pl.find(".editor_pane_wrapper").html(json.html);
+    var uid = AIRTIME.library.MediaTypeStringEnum.BLOCK + "_" + json.id;
+    AIRTIME.tabs.openTab(
+      json.html,
+      uid,
+      AIRTIME.playlist._initPlaylistTabEvents
+    );
+  };
+
+  function playlistRequest(sUrl, oData) {
+    var lastMod,
+      obj_type = $pl.find(".obj_type").val();
+
+    mod.disableUI();
+
+    lastMod = mod.getModified();
+
+    oData["modified"] = lastMod;
+    oData["obj_type"] = obj_type;
+    oData["format"] = "json";
+
+    $.post(sUrl, oData, mod.playlistResponse);
+  }
+
+  mod.fnAddItems = function (aItems, iAfter, sAddType) {
+    AIRTIME.library.selectNone();
+    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",
         });
-    };
 
-    mod.onReady = function() {
-        $lib = $("#library_content");
+        playlistEditor = new PlaylistEditor();
+        playlistEditor.setConfig(config);
+        playlistEditor.init(tracks);
+      },
+      close: removeDialog,
+      resizeStop: function (event, ui) {
+        playlistEditor.resize();
+      },
+    });
+  };
 
-        $('#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();});
+  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;
 
-        AIRTIME.playlist.init();
-    };
+    function removeDialog() {
+      playlistEditor.stop();
 
-    return AIRTIME;
+      $html.dialog("destroy");
+      $html.remove();
+    }
 
-}(AIRTIME || {}));
+    $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.setupEventListeners = function () {
+    initialEvents();
+  };
+
+  mod.setCurrent = function (pl) {
+    $pl = pl;
+
+    var type = $pl.find(".obj_type").val();
+    if (
+      $.inArray(type, Object.keys(AIRTIME.library.MediaTypeFullToStringEnum)) >
+      -1
+    ) {
+      $.post(baseUrl + "playlist/change-playlist", {
+        id: mod.getId($pl),
+        type: type,
+      });
+    }
+  };
+
+  mod.init = function () {
+    if (!$pl) return;
+
+    $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();
+    mod.setFadeIcon();
+
+    initialEvents();
+    setUpPlaylist();
+
+    $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.onReady = function () {
+    $lib = $("#library_content");
+
+    $("#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();
+    });
+
+    AIRTIME.playlist.init();
+  };
+
+  return AIRTIME;
+})(AIRTIME || {});
 
 $(document).ready(AIRTIME.playlist.onReady);
diff --git a/legacy/public/js/airtime/listenerstat/listenerstat.js b/legacy/public/js/airtime/listenerstat/listenerstat.js
index 6ac14d462..180aef1a7 100644
--- a/legacy/public/js/airtime/listenerstat/listenerstat.js
+++ b/legacy/public/js/airtime/listenerstat/listenerstat.js
@@ -1,194 +1,229 @@
-$(document).ready(function() {
-    listenerstat_content = $("#listenerstat_content")
-    dateStartId = "#his_date_start",
-    timeStartId = "#his_time_start",
-    dateEndId = "#his_date_end",
-    timeEndId = "#his_time_end";
+$(document).ready(function () {
+  listenerstat_content = $("#listenerstat_content");
+  (dateStartId = "#his_date_start"),
+    (timeStartId = "#his_time_start"),
+    (dateEndId = "#his_date_end"),
+    (timeEndId = "#his_time_end");
 
-    // set width dynamically
-    var width = $("#listenerstat_content").width();
-    width = width * .91;
-    $("#listenerstat_content").find("#flot_placeholder").width(width);
-    $("#listenerstat_content").find("#legend").width(width);
+  // set width dynamically
+  var width = $("#listenerstat_content").width();
+  width = width * 0.91;
+  $("#listenerstat_content").find("#flot_placeholder").width(width);
+  $("#listenerstat_content").find("#legend").width(width);
 
-    getDataAndPlot();
+  getDataAndPlot();
 
-    listenerstat_content.find("#his_submit").click(function(){
-    	var oRange = AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId, dateEndId, timeEndId);
-   	 	var start = oRange.start;
-        var end = oRange.end;
-        getDataAndPlot(start, end);
-    });
+  listenerstat_content.find("#his_submit").click(function () {
+    var oRange = AIRTIME.utilities.fnGetScheduleRange(
+      dateStartId,
+      timeStartId,
+      dateEndId,
+      timeEndId
+    );
+    var start = oRange.start;
+    var end = oRange.end;
+    getDataAndPlot(start, end);
+  });
 });
 
 /**
  * Toggle a spinner overlay so the user knows the page is processing
  */
 function toggleOverlay() {
-    $('#flot_placeholder').toggleClass('processing');
+  $("#flot_placeholder").toggleClass("processing");
 }
 
 function getDataAndPlot(startTimestamp, endTimestamp) {
-    // Turn on the processing overlay
-    toggleOverlay();
+  // Turn on the processing overlay
+  toggleOverlay();
 
-    // get data
-    $.get(baseUrl+'Listenerstat/get-data', {start: startTimestamp, end: endTimestamp}, function(data){
-        out = new Object();
-        $.each(data, function(mpName, v){
-            plotData = new Object();
-            plotData.data = new Array();
-            $.each(v, function(i, ele){
-                plotData.label = mpName;
-                var d = new Date(0);
-                d.setUTCSeconds(ele.timestamp);
-                plotData.data.push([d, ele.listener_count]);
-            })
-            out[mpName] = plotData;
+  // get data
+  $.get(
+    baseUrl + "Listenerstat/get-data",
+    { start: startTimestamp, end: endTimestamp },
+    function (data) {
+      out = new Object();
+      $.each(data, function (mpName, v) {
+        plotData = new Object();
+        plotData.data = new Array();
+        $.each(v, function (i, ele) {
+          plotData.label = mpName;
+          var d = new Date(0);
+          d.setUTCSeconds(ele.timestamp);
+          plotData.data.push([d, ele.listener_count]);
         });
-        plot(out);
-        // Turn off the processing overlay
-        toggleOverlay();
-    })
+        out[mpName] = plotData;
+      });
+      plot(out);
+      // Turn off the processing overlay
+      toggleOverlay();
+    }
+  );
 }
 
-function plot(datasets){
-    var plot;
-    data = null;
-    function plotByChoice(doAll)
-    {
-        // largest date object that you can set
-        firstTimestamp = new Date(8640000000000000);
-        // smallest
-        lastTimestamp = new Date(0);
+function plot(datasets) {
+  var plot;
+  data = null;
+  function plotByChoice(doAll) {
+    // largest date object that you can set
+    firstTimestamp = new Date(8640000000000000);
+    // smallest
+    lastTimestamp = new Date(0);
 
-        data = [];
-        if (doAll != null)
-        {
-            $.each(datasets, function(key, val) {
-                if (firstTimestamp.getTime() > val.data[0][0].getTime()) {
-                    firstTimestamp = val.data[0][0];
-                }
-                if (lastTimestamp.getTime() < val.data[val.data.length-1][0].getTime()) {
-                    lastTimestamp = val.data[val.data.length-1][0];
-                }
-                data.push(val);
-            });
+    data = [];
+    if (doAll != null) {
+      $.each(datasets, function (key, val) {
+        if (firstTimestamp.getTime() > val.data[0][0].getTime()) {
+          firstTimestamp = val.data[0][0];
         }
-        else
-        {
-            $('#legend .legendCB').each(
-                function(){
-                    if (this.checked)
-                    {
-                         data.push(datasets[this.id]);
-                         if (firstTimestamp.getTime() > datasets[this.id].data[0][0].getTime()) {
-                             firstTimestamp = datasets[this.id].data[0][0];
-                         }
-                         if (lastTimestamp.getTime() < datasets[this.id].data[datasets[this.id].data.length-1][0].getTime()) {
-                             lastTimestamp = datasets[this.id].data[datasets[this.id].data.length-1][0];
-                         }
-                    }
-                    else
-                    {
-                         data.push({label: this.id, data: []})
-                    }
-                }
-            );
+        if (
+          lastTimestamp.getTime() < val.data[val.data.length - 1][0].getTime()
+        ) {
+          lastTimestamp = val.data[val.data.length - 1][0];
         }
-
-        numOfTicks = 10;
-        tickSize = (lastTimestamp.getTime() - firstTimestamp.getTime())/1000/numOfTicks;
-
-        plot = $.plot($("#flot_placeholder"), data, {
-            yaxis: { min: 0, tickDecimals: 0, color: '#d6d6d6', tickColor: '#d6d6d6' },
-            xaxis: { mode: "time", timeformat:"%y/%m/%0d %H:%M", tickSize: [tickSize, "second"],
-                    color: '#d6d6d6', tickColor: '#d6d6d6' },
-            grid: {
-                hoverable: true,
-                backgroundColor: { colors: ["#333", "#555"] }
-            },
-            series: {
-                lines: {
-                    show: true,
-                    fill: 0.3
-                },
-                points: { show: true }
-            },
-            legend: {
-                container: $('#legend'),
-                noColumns: 5,
-                color: '#c0c0c0',
-                labelFormatter: function (label, series) {
-                    var cb = '<input style="float:left;" class="legendCB" type="checkbox" ';
-                    if (series.data.length > 0){
-                        cb += 'checked="true" ';
-                    }
-                    cb += 'id="'+label+'" /> ';
-                    cb += label;
-                    return cb;
-                 }
-            }
-        });
-
-        function showTooltip(x, y, contents) {
-            $('<div id="tooltip">' + contents + '</div>').css( {
-                position: 'absolute',
-                display: 'none',
-                top: y + 5,
-                left: x + 5,
-                border: '1px solid #fdd',
-                padding: '2px',
-                'background-color': '#fee',
-                opacity: 0.80
-            }).appendTo("body").fadeIn(200);
+        data.push(val);
+      });
+    } else {
+      $("#legend .legendCB").each(function () {
+        if (this.checked) {
+          data.push(datasets[this.id]);
+          if (
+            firstTimestamp.getTime() > datasets[this.id].data[0][0].getTime()
+          ) {
+            firstTimestamp = datasets[this.id].data[0][0];
+          }
+          if (
+            lastTimestamp.getTime() <
+            datasets[this.id].data[
+              datasets[this.id].data.length - 1
+            ][0].getTime()
+          ) {
+            lastTimestamp =
+              datasets[this.id].data[datasets[this.id].data.length - 1][0];
+          }
+        } else {
+          data.push({ label: this.id, data: [] });
         }
-
-        var previousPoint = null;
-        $("#flot_placeholder").bind("plothover", function (event, pos, item) {
-            if (item) {
-                if (previousPoint != item.dataIndex) {
-                    previousPoint = item.dataIndex;
-
-                    $("#tooltip").remove();
-                    var y = item.datapoint[1].toFixed(2);
-
-                    showTooltip(item.pageX, item.pageY,
-                                sprintf($.i18n._("Listener Count on %s: %s"), item.series.label, Math.floor(y)));
-                }
-            }
-            else {
-                $("#tooltip").remove();
-                previousPoint = null;
-            }
-        });
-
-        $('#legend').find("input").click(function(){setTimeout(plotByChoice,100);});
+      });
     }
 
-    plotByChoice(true);
-    oBaseDatePickerSettings = {
-        dateFormat: 'yy-mm-dd',
-        //i18n_months, i18n_days_short are in common.js
-        monthNames: i18n_months,
-        dayNamesMin: i18n_days_short,
-        onSelect: function(sDate, oDatePicker) {
-            $(this).datepicker( "setDate", sDate );
+    numOfTicks = 10;
+    tickSize =
+      (lastTimestamp.getTime() - firstTimestamp.getTime()) / 1000 / numOfTicks;
+
+    plot = $.plot($("#flot_placeholder"), data, {
+      yaxis: {
+        min: 0,
+        tickDecimals: 0,
+        color: "#d6d6d6",
+        tickColor: "#d6d6d6",
+      },
+      xaxis: {
+        mode: "time",
+        timeformat: "%y/%m/%0d %H:%M",
+        tickSize: [tickSize, "second"],
+        color: "#d6d6d6",
+        tickColor: "#d6d6d6",
+      },
+      grid: {
+        hoverable: true,
+        backgroundColor: { colors: ["#333", "#555"] },
+      },
+      series: {
+        lines: {
+          show: true,
+          fill: 0.3,
+        },
+        points: { show: true },
+      },
+      legend: {
+        container: $("#legend"),
+        noColumns: 5,
+        color: "#c0c0c0",
+        labelFormatter: function (label, series) {
+          var cb =
+            '<input style="float:left;" class="legendCB" type="checkbox" ';
+          if (series.data.length > 0) {
+            cb += 'checked="true" ';
+          }
+          cb += 'id="' + label + '" /> ';
+          cb += label;
+          return cb;
+        },
+      },
+    });
+
+    function showTooltip(x, y, contents) {
+      $('<div id="tooltip">' + contents + "</div>")
+        .css({
+          position: "absolute",
+          display: "none",
+          top: y + 5,
+          left: x + 5,
+          border: "1px solid #fdd",
+          padding: "2px",
+          "background-color": "#fee",
+          opacity: 0.8,
+        })
+        .appendTo("body")
+        .fadeIn(200);
+    }
+
+    var previousPoint = null;
+    $("#flot_placeholder").bind("plothover", function (event, pos, item) {
+      if (item) {
+        if (previousPoint != item.dataIndex) {
+          previousPoint = item.dataIndex;
+
+          $("#tooltip").remove();
+          var y = item.datapoint[1].toFixed(2);
+
+          showTooltip(
+            item.pageX,
+            item.pageY,
+            sprintf(
+              $.i18n._("Listener Count on %s: %s"),
+              item.series.label,
+              Math.floor(y)
+            )
+          );
         }
-    };
+      } else {
+        $("#tooltip").remove();
+        previousPoint = null;
+      }
+    });
 
-    oBaseTimePickerSettings = {
-        showPeriodLabels: false,
-        showCloseButton: true,
-        closeButtonText: $.i18n._("Done"),
-        showLeadingZero: false,
-        defaultTime: '0:00',
-        hourText: $.i18n._("Hour"),
-        minuteText: $.i18n._("Minute")
-    };
+    $("#legend")
+      .find("input")
+      .click(function () {
+        setTimeout(plotByChoice, 100);
+      });
+  }
 
-    listenerstat_content.find(dateStartId).datepicker(oBaseDatePickerSettings);
-    listenerstat_content.find(timeStartId).timepicker(oBaseTimePickerSettings);
-    listenerstat_content.find(dateEndId).datepicker(oBaseDatePickerSettings);
-    listenerstat_content.find(timeEndId).timepicker(oBaseTimePickerSettings);
+  plotByChoice(true);
+  oBaseDatePickerSettings = {
+    dateFormat: "yy-mm-dd",
+    //i18n_months, i18n_days_short are in common.js
+    monthNames: i18n_months,
+    dayNamesMin: i18n_days_short,
+    onSelect: function (sDate, oDatePicker) {
+      $(this).datepicker("setDate", sDate);
+    },
+  };
+
+  oBaseTimePickerSettings = {
+    showPeriodLabels: false,
+    showCloseButton: true,
+    closeButtonText: $.i18n._("Done"),
+    showLeadingZero: false,
+    defaultTime: "0:00",
+    hourText: $.i18n._("Hour"),
+    minuteText: $.i18n._("Minute"),
+  };
+
+  listenerstat_content.find(dateStartId).datepicker(oBaseDatePickerSettings);
+  listenerstat_content.find(timeStartId).timepicker(oBaseTimePickerSettings);
+  listenerstat_content.find(dateEndId).datepicker(oBaseDatePickerSettings);
+  listenerstat_content.find(timeEndId).timepicker(oBaseTimePickerSettings);
 }
diff --git a/legacy/public/js/airtime/listenerstat/showlistenerstat.js b/legacy/public/js/airtime/listenerstat/showlistenerstat.js
index 7b8f7e227..d6064ce3f 100644
--- a/legacy/public/js/airtime/listenerstat/showlistenerstat.js
+++ b/legacy/public/js/airtime/listenerstat/showlistenerstat.js
@@ -1,127 +1,171 @@
-$(document).ready(function() {
-    showlistenerstat_content = $("#showlistenerstat_content")
-    dateStartId = "#his_date_start",
-        timeStartId = "#his_time_start",
-        dateEndId = "#his_date_end",
-        timeEndId = "#his_time_end",
-        show_id = "#his_show_filter";
+$(document).ready(function () {
+  showlistenerstat_content = $("#showlistenerstat_content");
+  (dateStartId = "#his_date_start"),
+    (timeStartId = "#his_time_start"),
+    (dateEndId = "#his_date_end"),
+    (timeEndId = "#his_time_end"),
+    (show_id = "#his_show_filter");
 
-    // set width dynamically
-    var width = $("#showlistenerstat_content").width();
-    width = width * .91;
-    addDatePicker();
+  // set width dynamically
+  var width = $("#showlistenerstat_content").width();
+  width = width * 0.91;
+  addDatePicker();
 
-    showlistenerstat_content.find("#his_submit").click(function(){
-//        var show_id = $("#sb_show_filter").val();
-        var oRange = AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId, dateEndId, timeEndId);
-        var start = oRange.start;
-        var end = oRange.end;
-        showListenerDataTable();
-    });
+  showlistenerstat_content.find("#his_submit").click(function () {
+    //        var show_id = $("#sb_show_filter").val();
+    var oRange = AIRTIME.utilities.fnGetScheduleRange(
+      dateStartId,
+      timeStartId,
+      dateEndId,
+      timeEndId
+    );
+    var start = oRange.start;
+    var end = oRange.end;
+    showListenerDataTable();
+  });
 });
 
 function getShowData(startTimestamp, endTimestamp, show_id) {
-    // get data
-    $.get(baseUrl+'Listenerstat/get-all-show-data', {start: startTimestamp, end: endTimestamp }, function(data) {
-        return data;
-    });
+  // get data
+  $.get(
+    baseUrl + "Listenerstat/get-all-show-data",
+    { start: startTimestamp, end: endTimestamp },
+    function (data) {
+      return data;
+    }
+  );
 }
 
 function addDatePicker() {
+  oBaseDatePickerSettings = {
+    dateFormat: "yy-mm-dd",
+    //i18n_months, i18n_days_short are in common.js
+    monthNames: i18n_months,
+    dayNamesMin: i18n_days_short,
+    onSelect: function (sDate, oDatePicker) {
+      $(this).datepicker("setDate", sDate);
+    },
+    onClose: validateTimeRange,
+  };
+  oBaseTimePickerSettings = {
+    showPeriodLabels: false,
+    showCloseButton: true,
+    closeButtonText: $.i18n._("Done"),
+    showLeadingZero: false,
+    defaultTime: "0:00",
+    hourText: $.i18n._("Hour"),
+    minuteText: $.i18n._("Minute"),
+    onClose: validateTimeRange,
+  };
 
-    oBaseDatePickerSettings = {
-        dateFormat: 'yy-mm-dd',
-        //i18n_months, i18n_days_short are in common.js
-        monthNames: i18n_months,
-        dayNamesMin: i18n_days_short,
-        onSelect: function(sDate, oDatePicker) {
-            $(this).datepicker( "setDate", sDate );
-        },
-        onClose: validateTimeRange
-    };
-    oBaseTimePickerSettings = {
-        showPeriodLabels: false,
-        showCloseButton: true,
-        closeButtonText: $.i18n._("Done"),
-        showLeadingZero: false,
-        defaultTime: '0:00',
-        hourText: $.i18n._("Hour"),
-        minuteText: $.i18n._("Minute"),
-        onClose: validateTimeRange
-    };
-
-    showlistenerstat_content.find(dateStartId).datepicker(oBaseDatePickerSettings).blur(validateTimeRange());
-    showlistenerstat_content.find(timeStartId).timepicker(oBaseTimePickerSettings).blur(validateTimeRange());
-    showlistenerstat_content.find(dateEndId).datepicker(oBaseDatePickerSettings).blur(validateTimeRange());
-    showlistenerstat_content.find(timeEndId).timepicker(oBaseTimePickerSettings).blur(validateTimeRange());
+  showlistenerstat_content
+    .find(dateStartId)
+    .datepicker(oBaseDatePickerSettings)
+    .blur(validateTimeRange());
+  showlistenerstat_content
+    .find(timeStartId)
+    .timepicker(oBaseTimePickerSettings)
+    .blur(validateTimeRange());
+  showlistenerstat_content
+    .find(dateEndId)
+    .datepicker(oBaseDatePickerSettings)
+    .blur(validateTimeRange());
+  showlistenerstat_content
+    .find(timeEndId)
+    .timepicker(oBaseTimePickerSettings)
+    .blur(validateTimeRange());
 }
 
 function getStartEnd() {
-
-    return AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId, dateEndId, timeEndId);
+  return AIRTIME.utilities.fnGetScheduleRange(
+    dateStartId,
+    timeStartId,
+    dateEndId,
+    timeEndId
+  );
 }
 
 function validateTimeRange() {
-    var oRange,
-        inputs = $('.date_form > input'),
-        error_window = $('.error_window'),
-        start, end;
+  var oRange,
+    inputs = $(".date_form > input"),
+    error_window = $(".error_window"),
+    start,
+    end;
 
-    oRange = AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId, dateEndId, timeEndId);
+  oRange = AIRTIME.utilities.fnGetScheduleRange(
+    dateStartId,
+    timeStartId,
+    dateEndId,
+    timeEndId
+  );
 
-    start = oRange.start;
-    end = oRange.end;
+  start = oRange.start;
+  end = oRange.end;
 
-    if (end >= start) {
-        error_window.removeClass('error');
-        $('.error_window').html('');
-    }
-    else {
-        error_window.addClass('error');
-        console.log('bad')
-        $('.error_window').html('Your start date time is after your end date time');
-    }
+  if (end >= start) {
+    error_window.removeClass("error");
+    $(".error_window").html("");
+  } else {
+    error_window.addClass("error");
+    console.log("bad");
+    $(".error_window").html("Your start date time is after your end date time");
+  }
 
-    return {
-        start: start,
-        end: end,
-        isValid: end >= start
-    };
+  return {
+    start: start,
+    end: end,
+    isValid: end >= start,
+  };
 }
 
 function showListenerDataTable() {
-    var oRange = AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId, dateEndId, timeEndId);
-    var start = oRange.start;
-    var lengthMenu = [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, $.i18n._("All")]];
-    var end = oRange.end;
-    var sDom = 'l<"dt-process-rel"r><"H"T><"dataTables_scrolling"t><"F"ip>';
-    var show_id = $("#sb_show_filter").val();
-    var dt = $('#show_stats_datatable');
-    info = getStartEnd();
-    dt.dataTable({
-        "aoColumns": [
-            /* first name */ {"sName": "show", "mDataProp": "show"},
-            /* air date */   {"sName": "time", "mDataProp": "time"},
-            /* last name */  {"sName": "average_number_of_listeners", "mDataProp": "average_number_of_listeners"},
-            /* last name */  {"sName": "maximum_number_of_listeners", "mDataProp": "maximum_number_of_listeners"}],
-        "sAjaxSource":         baseUrl+'Listenerstat/get-all-show-data',
-        "sAjaxDataProp": "",
-        "bDestroy": true,
-        "aLengthMenu": lengthMenu,
-        "iDisplayLength": 25,
-        "sPaginationType": "full_numbers",
-        "bJQueryUI": true,
-        "bAutoWidth": true,
-        "sDom": sDom,
-        "fnServerData": function ( sSource, aoData, fnCallback ) {
-            aoData.push({"start": start, "end": end});
-          $.ajax( {
-                "dataType": 'json',
-                "type": "POST",
-                "url": sSource,
-                "data": {"start": start, "end": end},
-                "success": fnCallback
-            } );
-        },
-    });
+  var oRange = AIRTIME.utilities.fnGetScheduleRange(
+    dateStartId,
+    timeStartId,
+    dateEndId,
+    timeEndId
+  );
+  var start = oRange.start;
+  var lengthMenu = [
+    [10, 25, 50, 100, 500, -1],
+    [10, 25, 50, 100, 500, $.i18n._("All")],
+  ];
+  var end = oRange.end;
+  var sDom = 'l<"dt-process-rel"r><"H"T><"dataTables_scrolling"t><"F"ip>';
+  var show_id = $("#sb_show_filter").val();
+  var dt = $("#show_stats_datatable");
+  info = getStartEnd();
+  dt.dataTable({
+    aoColumns: [
+      /* first name */ { sName: "show", mDataProp: "show" },
+      /* air date */ { sName: "time", mDataProp: "time" },
+      /* last name */ {
+        sName: "average_number_of_listeners",
+        mDataProp: "average_number_of_listeners",
+      },
+      /* last name */ {
+        sName: "maximum_number_of_listeners",
+        mDataProp: "maximum_number_of_listeners",
+      },
+    ],
+    sAjaxSource: baseUrl + "Listenerstat/get-all-show-data",
+    sAjaxDataProp: "",
+    bDestroy: true,
+    aLengthMenu: lengthMenu,
+    iDisplayLength: 25,
+    sPaginationType: "full_numbers",
+    bJQueryUI: true,
+    bAutoWidth: true,
+    sDom: sDom,
+    fnServerData: function (sSource, aoData, fnCallback) {
+      aoData.push({ start: start, end: end });
+      $.ajax({
+        dataType: "json",
+        type: "POST",
+        url: sSource,
+        data: { start: start, end: end },
+        success: fnCallback,
+      });
+    },
+  });
 }
diff --git a/legacy/public/js/airtime/login/login.js b/legacy/public/js/airtime/login/login.js
index a0a15f0cc..f02df164c 100644
--- a/legacy/public/js/airtime/login/login.js
+++ b/legacy/public/js/airtime/login/login.js
@@ -1,9 +1,9 @@
-$(window).load(function() {
-    $("#username").focus();
+$(window).load(function () {
+  $("#username").focus();
 });
 
-$(document).ready(function() {
-    $("#submit").click(function() {
-        Cookies.set('airtime_locale', $('#locale').val(), {path: '/'});
-    });
+$(document).ready(function () {
+  $("#submit").click(function () {
+    Cookies.set("airtime_locale", $("#locale").val(), { path: "/" });
+  });
 });
diff --git a/legacy/public/js/airtime/nowplaying/lang-timezone-setup.js b/legacy/public/js/airtime/nowplaying/lang-timezone-setup.js
index a9f7d50a3..c23703d9b 100644
--- a/legacy/public/js/airtime/nowplaying/lang-timezone-setup.js
+++ b/legacy/public/js/airtime/nowplaying/lang-timezone-setup.js
@@ -1,17 +1,16 @@
-$(document).ready(function() {
+$(document).ready(function () {
+  var dialog = $("#lang-timezone-popup");
 
-    var dialog = $("#lang-timezone-popup");
-
-    dialog.dialog({
-            autoOpen: false,
-            width: 500,
-            resizable: false,
-            modal: true,
-            closeOnEscape: false,
-            position:['center','center'],
-            dialogClass: 'no-close',
-            buttons: [
-                /* Testing removing the Not Now button for higher engagement
+  dialog.dialog({
+    autoOpen: false,
+    width: 500,
+    resizable: false,
+    modal: true,
+    closeOnEscape: false,
+    position: ["center", "center"],
+    dialogClass: "no-close",
+    buttons: [
+      /* Testing removing the Not Now button for higher engagement
                 {
                     id: "setup-later",
                     text: $.i18n._("Not Now"),
@@ -20,32 +19,32 @@ $(document).ready(function() {
                         $(this).dialog("close");
                     }
                 },*/
-                {
-                    id: "help_airtime",
-                    text: $.i18n._("OK"),
-                    "class": "btn",
-                    click: function() {
-                        $("#lang-timezone-form").submit();
-                    }
-                }
-            ]
-    });
+      {
+        id: "help_airtime",
+        text: $.i18n._("OK"),
+        class: "btn",
+        click: function () {
+          $("#lang-timezone-form").submit();
+        },
+      },
+    ],
+  });
 
-    var language = window.navigator.userLanguage || window.navigator.language;
-    if (language === undefined) {
-        language = "en_CA";
-    }
-    language = language.replace("-", "_");
-    $("#setup_language").val(language);
+  var language = window.navigator.userLanguage || window.navigator.language;
+  if (language === undefined) {
+    language = "en_CA";
+  }
+  language = language.replace("-", "_");
+  $("#setup_language").val(language);
 
-    dayjs.extend(utc)
-    dayjs.extend(timezone)
+  dayjs.extend(utc);
+  dayjs.extend(timezone);
 
-    var timezone_name = dayjs.tz.guess();
-    if (timezone_name === undefined) {
-        timezone_name = "America/Toronto";
-    }
-    $("#setup_timezone").val(timezone_name);
+  var timezone_name = dayjs.tz.guess();
+  if (timezone_name === undefined) {
+    timezone_name = "America/Toronto";
+  }
+  $("#setup_timezone").val(timezone_name);
 
-    dialog.dialog('open');
+  dialog.dialog("open");
 });
diff --git a/legacy/public/js/airtime/nowplaying/register.js b/legacy/public/js/airtime/nowplaying/register.js
index e5176b095..db914ae23 100644
--- a/legacy/public/js/airtime/nowplaying/register.js
+++ b/legacy/public/js/airtime/nowplaying/register.js
@@ -1,175 +1,177 @@
-$(document).ready(function(){
-
-    function doNotShowPopup(){
-        $.get(baseUrl+"Usersettings/donotshowregistrationpopup", {format:"json"});
-    }
-
-    var dialog = $("#register_popup");
-
-    dialog.dialog({
-        autoOpen: false,
-        width: 500,
-        resizable: false,
-        modal: true,
-        position:['center',50],
-        close: doNotShowPopup,
-        buttons: [
-            {
-                id: "remind_me",
-                text: $.i18n._("Remind me in 1 week"),
-                "class": "btn",
-                click: function() {
-                    var url = baseUrl+'Usersettings/remindme';
-                    $.ajax({
-                        url: url,
-                        data: {format:"json"}
-                    });
-                    $(this).dialog("close");
-                }
-            },
-            {
-                id: "remind_never",
-                text: $.i18n._("Remind me never"),
-                "class": "btn",
-                click: function() {
-                    var url =baseUrl+'Usersettings/remindme-never';
-                    $.ajax({
-                        url: url,
-                        data: {format:"json"}
-                    });
-                    $(this).dialog("close");
-                }
-            },
-            {
-                id: "help_airtime",
-                text: sprintf($.i18n._("Yes, help %s"), PRODUCT_NAME),
-                "class": "btn",
-                click: function() {
-                    $("#register-form").submit();
-                }
-            }
-         ]
+$(document).ready(function () {
+  function doNotShowPopup() {
+    $.get(baseUrl + "Usersettings/donotshowregistrationpopup", {
+      format: "json",
     });
+  }
 
+  var dialog = $("#register_popup");
+
+  dialog.dialog({
+    autoOpen: false,
+    width: 500,
+    resizable: false,
+    modal: true,
+    position: ["center", 50],
+    close: doNotShowPopup,
+    buttons: [
+      {
+        id: "remind_me",
+        text: $.i18n._("Remind me in 1 week"),
+        class: "btn",
+        click: function () {
+          var url = baseUrl + "Usersettings/remindme";
+          $.ajax({
+            url: url,
+            data: { format: "json" },
+          });
+          $(this).dialog("close");
+        },
+      },
+      {
+        id: "remind_never",
+        text: $.i18n._("Remind me never"),
+        class: "btn",
+        click: function () {
+          var url = baseUrl + "Usersettings/remindme-never";
+          $.ajax({
+            url: url,
+            data: { format: "json" },
+          });
+          $(this).dialog("close");
+        },
+      },
+      {
+        id: "help_airtime",
+        text: sprintf($.i18n._("Yes, help %s"), PRODUCT_NAME),
+        class: "btn",
+        click: function () {
+          $("#register-form").submit();
+        },
+      },
+    ],
+  });
+
+  var button = $("#help_airtime");
+
+  if ($("#link_to_terms_and_condition").length > 0) {
+    button.removeAttr("disabled").removeClass("ui-state-disabled");
+  } else {
+    button.attr("disabled", "disabled").addClass("ui-state-disabled");
+  }
+  dialog.dialog("open");
+
+  $(".collapsible-header")
+    .live("click", function () {
+      $(this).next().toggle("fast");
+      $(this).toggleClass("close");
+      return false;
+    })
+    .next()
+    .hide();
+
+  $("#SupportFeedback").live("click", function () {
+    var pub = $("#Publicise");
+    var privacy = $("#Privacy");
     var button = $("#help_airtime");
-
-    if($("#link_to_terms_and_condition").length > 0 ){
-        button.removeAttr('disabled').removeClass('ui-state-disabled');
-    }else{
-        button.attr('disabled', 'disabled' ).addClass('ui-state-disabled');
+    if (!$(this).is(":checked")) {
+      pub.removeAttr("checked");
+      pub.attr("disabled", true);
+      $("#public-info").hide();
+      button.attr("disabled", "disabled").addClass("ui-state-disabled");
+    } else {
+      pub.removeAttr("disabled");
+      if (privacy.length == 0 || privacy.is(":checked")) {
+        button.removeAttr("disabled").removeClass("ui-state-disabled");
+      }
     }
-    dialog.dialog('open');
+  });
 
-
-    $('.collapsible-header').live('click',function() {
-        $(this).next().toggle('fast');
-        $(this).toggleClass("close");
-        return false;
-    }).next().hide();
-
-    $("#SupportFeedback").live('click', function(){
-        var pub = $("#Publicise");
-        var privacy = $("#Privacy");
-        var button = $("#help_airtime");
-        if( !$(this).is(':checked') ){
-            pub.removeAttr("checked");
-            pub.attr("disabled", true);
-            $("#public-info").hide();
-            button.attr('disabled', 'disabled' ).addClass('ui-state-disabled');
-        }else{
-            pub.removeAttr("disabled");
-            if(privacy.length == 0 || privacy.is(':checked')){
-                button.removeAttr('disabled').removeClass('ui-state-disabled');
-            }
-        }
-    });
-
-    var promote = $("#Publicise");
-    promote.live('click', function(){
-        if($(this).is(':checked')){
-            $("#public-info").show();
-        }else{
-            $("#public-info").hide();
-        }
-    });
-    if( promote.is(":checked")){
-        $("#public-info").show();
+  var promote = $("#Publicise");
+  promote.live("click", function () {
+    if ($(this).is(":checked")) {
+      $("#public-info").show();
+    } else {
+      $("#public-info").hide();
     }
+  });
+  if (promote.is(":checked")) {
+    $("#public-info").show();
+  }
 
-    $("#Privacy").live('click', function(){
-        var support = $("#SupportFeedback");
-        var button = $("#help_airtime");
-        if($(this).is(':checked') && support.is(':checked')){
-            button.removeAttr('disabled').removeClass('ui-state-disabled');
-        }else{
-            button.attr('disabled', 'disabled' ).addClass('ui-state-disabled');
-        }
-    });
-
-    if($("#SupportFeedback").is(':checked') && ($("#Privacy").length == 0 || $("#Privacy").is(':checked'))){
-        button.removeAttr('disabled').removeClass('ui-state-disabled');
-    }else{
-        button.attr('disabled', 'disabled' ).addClass('ui-state-disabled');
+  $("#Privacy").live("click", function () {
+    var support = $("#SupportFeedback");
+    var button = $("#help_airtime");
+    if ($(this).is(":checked") && support.is(":checked")) {
+      button.removeAttr("disabled").removeClass("ui-state-disabled");
+    } else {
+      button.attr("disabled", "disabled").addClass("ui-state-disabled");
     }
+  });
 
-    $('.toggle legend').live('click',function() {
-        $('.toggle').toggleClass('closed');
-        return false;
-    });
+  if (
+    $("#SupportFeedback").is(":checked") &&
+    ($("#Privacy").length == 0 || $("#Privacy").is(":checked"))
+  ) {
+    button.removeAttr("disabled").removeClass("ui-state-disabled");
+  } else {
+    button.attr("disabled", "disabled").addClass("ui-state-disabled");
+  }
 
-    $("#Logo").live('change', function(ev){
-        var content, res, logoEl;
+  $(".toggle legend").live("click", function () {
+    $(".toggle").toggleClass("closed");
+    return false;
+  });
 
-        content = $(this).val();
-        res = content.match(/(jpg|jpeg|png|gif)$/gi);
-        logoEl = $("#Logo-element");
+  $("#Logo").live("change", function (ev) {
+    var content, res, logoEl;
 
-        //not an accepted image extension.
-        if (!res) {
-            var ul, li;
+    content = $(this).val();
+    res = content.match(/(jpg|jpeg|png|gif)$/gi);
+    logoEl = $("#Logo-element");
 
-            ul = logoEl.find('.errors');
-            li = $("<li/>").append($.i18n._("Image must be one of jpg, jpeg, png, or gif"));
+    //not an accepted image extension.
+    if (!res) {
+      var ul, li;
 
-            //errors ul has already been created.
-            if (ul.length > 0) {
-                ul.empty()
-                    .append(li);
-            }
-            else {
-                logoEl
-                    .append('<ul class="errors"></ul>')
-                    .find(".errors")
-                        .append(li);
-            }
+      ul = logoEl.find(".errors");
+      li = $("<li/>").append(
+        $.i18n._("Image must be one of jpg, jpeg, png, or gif")
+      );
 
-            $(this).val("");
-        }
-        else {
-            logoEl.find(".errors").remove();
-        }
-    });
+      //errors ul has already been created.
+      if (ul.length > 0) {
+        ul.empty().append(li);
+      } else {
+        logoEl.append('<ul class="errors"></ul>').find(".errors").append(li);
+      }
+
+      $(this).val("");
+    } else {
+      logoEl.find(".errors").remove();
+    }
+  });
 });
 
-function resizeImg(ele, targetWidth, targetHeight){
-    var img = $(ele);
+function resizeImg(ele, targetWidth, targetHeight) {
+  var img = $(ele);
 
-    var width = ele.width;
-    var height = ele.height;
+  var width = ele.width;
+  var height = ele.height;
 
-    // resize img proportionaly
-    if( width > height && width > targetWidth){
-        var ratio = targetWidth/width;
-        img.css("width", targetHeight+"px");
-        var newHeight = height * ratio;
-        img.css("height", newHeight);
-    }else if( width < height && height > targetHeight){
-        var ratio = targetHeight/height;
-        img.css("height", targetHeight+"px");
-        var newWidth = width * ratio;
-        img.css("width", newWidth);
-    }else if( width == height && width > targetWidth){
-        img.css("height", targetHeight+"px");
-        img.css("width", targetWidth+"px" );
-    }
+  // resize img proportionaly
+  if (width > height && width > targetWidth) {
+    var ratio = targetWidth / width;
+    img.css("width", targetHeight + "px");
+    var newHeight = height * ratio;
+    img.css("height", newHeight);
+  } else if (width < height && height > targetHeight) {
+    var ratio = targetHeight / height;
+    img.css("height", targetHeight + "px");
+    var newWidth = width * ratio;
+    img.css("width", newWidth);
+  } else if (width == height && width > targetWidth) {
+    img.css("height", targetHeight + "px");
+    img.css("width", targetWidth + "px");
+  }
 }
diff --git a/legacy/public/js/airtime/player/player.js b/legacy/public/js/airtime/player/player.js
index 90ed63ccd..4cf2f5a11 100644
--- a/legacy/public/js/airtime/player/player.js
+++ b/legacy/public/js/airtime/player/player.js
@@ -1,93 +1,90 @@
-function updateEmbedSrcParams()
-{
-    var $embedCodeParams = "?";
-    var $streamMode = getStreamMode();
-    if ($streamMode == "manual") {
-        var $stream = $("input[name=player_stream_url]:radio:checked").val();
-        $embedCodeParams += "stream="+$stream;
-    } else if ($streamMode == "auto") {
-        $embedCodeParams += "stream=auto";
-    }
+function updateEmbedSrcParams() {
+  var $embedCodeParams = "?";
+  var $streamMode = getStreamMode();
+  if ($streamMode == "manual") {
+    var $stream = $("input[name=player_stream_url]:radio:checked").val();
+    $embedCodeParams += "stream=" + $stream;
+  } else if ($streamMode == "auto") {
+    $embedCodeParams += "stream=auto";
+  }
 
-    $embedCodeParams += "&title="+getPlayerTitle();
+  $embedCodeParams += "&title=" + getPlayerTitle();
 
-    $embedCodeParams += "\"";
+  $embedCodeParams += '"';
 
-    $("textarea[name=player_embed_src]").val(function(index, value) {
-        return value.replace(/\?.*?"/, $embedCodeParams);
-    });
+  $("textarea[name=player_embed_src]").val(function (index, value) {
+    return value.replace(/\?.*?"/, $embedCodeParams);
+  });
 
-    updatePlayerIframeSrc($("textarea[name=player_embed_src]").val());
+  updatePlayerIframeSrc($("textarea[name=player_embed_src]").val());
 }
 
 function updatePlayerIframeSrc(iframe_text) {
-    var $player_iframe = $("#player_form iframe");
-    var player_iframe_src = iframe_text.match(/http.*?"/)[0].slice(0, -1);
-    $player_iframe.attr('src', player_iframe_src);
+  var $player_iframe = $("#player_form iframe");
+  var player_iframe_src = iframe_text.match(/http.*?"/)[0].slice(0, -1);
+  $player_iframe.attr("src", player_iframe_src);
 }
 
 function getStreamMode() {
-    return $("input[name=player_stream_mode]:radio:checked").val();
+  return $("input[name=player_stream_mode]:radio:checked").val();
 }
 
 function getPlayerTitle() {
-    return $("input[name=player_title]").val();
+  return $("input[name=player_title]").val();
 }
 
-$(document).ready(function() {
+$(document).ready(function () {
+  $("#player_stream_url-element").hide();
 
-    $("#player_stream_url-element").hide();
+  // stream mode change event
+  $("#player_stream_mode-element").change(function () {
+    var $streamMode = getStreamMode();
 
-    // stream mode change event
-    $("#player_stream_mode-element").change(function() {
-        var $streamMode = getStreamMode();
+    if ($streamMode == "auto") {
+      $("#player_stream_url-element").hide();
+    } else if ($streamMode == "manual") {
+      $("#player_stream_url-element").show();
 
-        if ($streamMode == "auto") {
-            $("#player_stream_url-element").hide();
-
-        } else if ($streamMode == "manual") {
-            $("#player_stream_url-element").show();
-
-            $("input[name=player_stream_url]").each(function(i, obj) {
-                if ($(this).parent().text().toLowerCase().indexOf("opus") >= 0) {
-                    $(this).attr("disabled", "disabled");
-                }
-            });
+      $("input[name=player_stream_url]").each(function (i, obj) {
+        if ($(this).parent().text().toLowerCase().indexOf("opus") >= 0) {
+          $(this).attr("disabled", "disabled");
         }
+      });
+    }
 
-        updateEmbedSrcParams();
-    });
+    updateEmbedSrcParams();
+  });
 
-    // stream url change event
-    $("#player_stream_url-element").change(function() {
-        updateEmbedSrcParams();
-    });
+  // stream url change event
+  $("#player_stream_url-element").change(function () {
+    updateEmbedSrcParams();
+  });
 
-    // display title checkbox change event
-    $("#player_display_title").change(function() {
-        if ($(this).prop("checked")) {
-            $("#player_title-label").show();
-            $("#player_title-element").show();
-        } else {
-            $("#player_title-label").hide();
-            $("#player_title-element").hide();
-        }
-        updateEmbedSrcParams();
-    });
+  // display title checkbox change event
+  $("#player_display_title").change(function () {
+    if ($(this).prop("checked")) {
+      $("#player_title-label").show();
+      $("#player_title-element").show();
+    } else {
+      $("#player_title-label").hide();
+      $("#player_title-element").hide();
+    }
+    updateEmbedSrcParams();
+  });
 
-    // title textbox change event
-    // setup before functions
-    var typingTimer;
-    var doneTypingInterval = 3000;
+  // title textbox change event
+  // setup before functions
+  var typingTimer;
+  var doneTypingInterval = 3000;
 
-    // on keyup, start the countdown
-    $("input[name=player_title]").keyup(function(){
-        clearTimeout(typingTimer);
-        typingTimer = setTimeout(updateEmbedSrcParams, doneTypingInterval);
-    });
+  // on keyup, start the countdown
+  $("input[name=player_title]").keyup(function () {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(updateEmbedSrcParams, doneTypingInterval);
+  });
 
-    // on keydown, clear the countdown
-    $("input[name=player_title]").keydown(function(){
-        clearTimeout(typingTimer);
-    });
+  // on keydown, clear the countdown
+  $("input[name=player_title]").keydown(function () {
+    clearTimeout(typingTimer);
+  });
 });
diff --git a/legacy/public/js/airtime/player/playerhtml5.js b/legacy/public/js/airtime/player/playerhtml5.js
index d4125f476..3f13624f8 100644
--- a/legacy/public/js/airtime/player/playerhtml5.js
+++ b/legacy/public/js/airtime/player/playerhtml5.js
@@ -1,19 +1,37 @@
 function getRandomIdPlayer(max) {
-  return "playerHtml5Libretime_"+Math.floor(Math.random() * Math.floor(max));
+  return "playerHtml5Libretime_" + Math.floor(Math.random() * Math.floor(max));
 }
 
-function playerhtml5_insert(settings)
-  {
-  atp='';
-  if(settings.autoplay==true) atp='autoplay';
-  if(settings.forceHTTPS==true&&settings.url.indexOf('https')==-1) settings.url=settings.url.replace(/http/g, 'https');
-  if(settings.replacePort!=''&&settings.replacePort!=false&&settings.replacePort!='false')
-    {
-    if(settings.replacePortTo!='') settings.replacePortTo=':'+settings.replacePortTo;
-    settings.url=settings.url.replace(':'+settings.replacePort, settings.replacePortTo);
-    }
-  if(settings.codec=='mp3') settings.codec='mpeg';
-  document.getElementById('html5player_skin').innerHTML += '<div id="div_'+settings.elementId+'" style="" ><audio loop controls id="'+settings.elementId+'" src="'+settings.url+'" '+atp+' type="audio/'+settings.codec+'" >'
-    +'Ihr Browser unterstützt das Element <code>audio</code> nicht.'
-    +'<\/audio><\/div>';
+function playerhtml5_insert(settings) {
+  atp = "";
+  if (settings.autoplay == true) atp = "autoplay";
+  if (settings.forceHTTPS == true && settings.url.indexOf("https") == -1)
+    settings.url = settings.url.replace(/http/g, "https");
+  if (
+    settings.replacePort != "" &&
+    settings.replacePort != false &&
+    settings.replacePort != "false"
+  ) {
+    if (settings.replacePortTo != "")
+      settings.replacePortTo = ":" + settings.replacePortTo;
+    settings.url = settings.url.replace(
+      ":" + settings.replacePort,
+      settings.replacePortTo
+    );
   }
+  if (settings.codec == "mp3") settings.codec = "mpeg";
+  document.getElementById("html5player_skin").innerHTML +=
+    '<div id="div_' +
+    settings.elementId +
+    '" style="" ><audio loop controls id="' +
+    settings.elementId +
+    '" src="' +
+    settings.url +
+    '" ' +
+    atp +
+    ' type="audio/' +
+    settings.codec +
+    '" >' +
+    "Ihr Browser unterstützt das Element <code>audio</code> nicht." +
+    "</audio></div>";
+}
diff --git a/legacy/public/js/airtime/playlist/smart_blockbuilder.js b/legacy/public/js/airtime/playlist/smart_blockbuilder.js
index ba769381e..a456d0b15 100644
--- a/legacy/public/js/airtime/playlist/smart_blockbuilder.js
+++ b/legacy/public/js/airtime/playlist/smart_blockbuilder.js
@@ -1,408 +1,487 @@
 $(document).ready(function () {
-    setSmartBlockEvents();
+  setSmartBlockEvents();
 });
 
 function setSmartBlockEvents() {
-    var activeTab = $('.active-tab'),
-        form = activeTab.find('.smart-block-form');
-
-    /********** ADD CRITERIA ROW **********/
-    form.find('#criteria_add').live('click', function () {
-
-        var div = $('dd[id="sp_criteria-element"]').children('div:visible:last');
-
-        if (div.length == 0) {
-            div = $('dd[id="sp_criteria-element"]').children('div:first');
-            div.children().removeAttr('disabled');
-            div.show();
-
-            appendAddButton();
-            appendModAddButton();
-            removeButtonCheck();
-            disableAndHideDateTimeDropdown(newRowVal);
-
-
-        } else {
-
-            div.find('.db-logic-label').text('and').css('display', 'table');
-            div.removeClass('search-row-or').addClass('search-row-and');
-
-            div = div.next().show();
-
-            div.children().removeAttr('disabled');
-            div.find(".modifier_add_link").show();
-
-            div = div.next();
-            if (div.length === 0) {
-                $(this).hide();
-            }
-
-            appendAddButton();
-            appendModAddButton();
-            removeButtonCheck();
-            // disableAndHideDateTimeDropdown(newRowVal);
-            groupCriteriaRows();
-
-        }
-    });
-
-    /********** ADD MODIFIER ROW **********/
-    form.find('a[id^="modifier_add"]').live('click', function () {
-        var criteria_value = $(this).siblings('select[name^="sp_criteria_field"]').val();
-
-
-        //make new modifier row
-        var newRow = $(this).parent().clone(),
-            newRowCrit = newRow.find('select[name^="sp_criteria_field"]'),
-            newRowMod = newRow.find('select[name^="sp_criteria_modifier"]'),
-            newRowVal = newRow.find('input[name^="sp_criteria_value"]'),
-            newRowExtra = newRow.find('input[name^="sp_criteria_extra"]'),
-            newRowRemove = newRow.find('a[id^="criteria_remove"]');
-
-        //remove error msg
-        if (newRow.children().hasClass('errors sp-errors')) {
-            newRow.find('span[class="errors sp-errors"]').remove();
-        }
-
-        //hide the critieria field select box
-        newRowCrit.addClass('sp-invisible');
-
-        //keep criteria value the same
-        newRowCrit.val(criteria_value);
-
-        //reset all other values
-        newRowMod.val('0');
-        newRowVal.val('');
-        newRowExtra.val('');
-        disableAndHideExtraField(newRowVal);
-        disableAndHideDateTimeDropdown(newRowVal);
-        disableAndHideExtraDateTimeDropdown(newRowVal);
-        sizeTextBoxes(newRowVal, 'sp_extra_input_text', 'sp_input_text');
-
-        //remove the 'criteria add' button from new modifier row
-        newRow.find('#criteria_add').remove();
-
-        $(this).parent().after(newRow);
-
-        // remove extra spacing from previous row
-        newRow.prev().removeClass('search-row-and').addClass('search-row-or');
-
-        reindexElements();
-        appendAddButton();
-        appendModAddButton();
-        removeButtonCheck();
-        groupCriteriaRows();
-    });
-
-    /********** REMOVE ROW **********/
-    form.find('a[id^="criteria_remove"]').live('click', function () {
-        var curr = $(this).parent();
-        var curr_pos = curr.index();
-        var list = curr.parent();
-        var list_length = list.find("div:visible").length;
-        var count = list_length - curr_pos;
-        var next = curr.next();
-        var item_to_hide;
-        var prev;
-        var index;
-        //remove error message from current row, if any
-        var error_element = curr.find('span[class="errors sp-errors"]');
-        if (error_element.is(':visible')) {
-            error_element.remove();
-        }
-
-        /* In the case that there is only one element we need to remove the
-         * date_select drop down.
-         */
-
-        if (count == 0) {
-            disableAndHideDateTimeDropdown(curr.find(':first-child'), index);
-            disableAndHideExtraDateTimeDropdown(curr.find(':first-child'), index);
-            disableAndHideExtraField(curr.find(':first-child'), index);
-        }
-
-        /* assign next row to current row for all rows below and including
-         * the row getting removed
-         */
-
-
-        for (var i = 0; i < count; i++) {
-            index = getRowIndex(curr);
-
-            var criteria = next.find('[name^="sp_criteria_field"]').val();
-            curr.find('[name^="sp_criteria_field"]').val(criteria);
-
-            var modifier = next.find('[name^="sp_criteria_modifier"]').val();
-            populateModifierSelect(curr.find('[name^="sp_criteria_field"]'), false);
-            curr.find('[name^="sp_criteria_modifier"]').val(modifier);
-
-            var criteria_value = next.find('[name^="sp_criteria_value"]').val();
-            curr.find('[name^="sp_criteria_value"]').val(criteria_value);
-
-
-
-            /* if current and next row have the extra criteria value
-             * (for 'is in the range' modifier), then assign the next
-             * extra value to current and remove that element from
-             * next row
-             */
-            if (curr.find('[name^="sp_criteria_extra"]').attr("disabled") != "disabled"
-                && next.find('#extra_criteria').is(':visible')) {
-
-                var criteria_extra = next.find('[name^="sp_criteria_extra"]').val();
-                curr.find('[name^="sp_criteria_extra"]').val(criteria_extra);
-                disableAndHideExtraField(next.find(':first-child'), getRowIndex(next));
-
-                /* if only the current row has the extra criteria value,
-                 * then just remove the current row's extra criteria element
-                 */
-            } else if (curr.find('[name^="sp_criteria_extra"]').attr("disabled") != "disabled"
-                && next.find('#extra_criteria').not(':visible')) {
-                disableAndHideExtraField(curr.find(':first-child'), index);
-
-                /* if only the next row has the extra criteria value,
-                 * then add the extra criteria element to current row
-                 * and assign next row's value to it
-                 */
-            } else if (next.find('#extra_criteria').is(':visible')) {
-                criteria_extra = next.find('[name^="sp_criteria_extra"]').val();
-                enableAndShowExtraField(curr.find(':first-child'), index);
-                curr.find('[name^="sp_criteria_extra"]').val(criteria_extra);
-            }
-
-
-
-            /* if current and next row have the date_time_select_criteria visible
-             * then show the current and it from the next row
-             */
-            if (curr.find('[name^="sp_criteria_datetime_select"]').attr("disabled") != "disabled"
-                && next.find('#datetime_select').is(':visible')) {
-
-                var criteria_datetime = next.find('[name^="sp_criteria_datetime_select"]').val();
-                curr.find('[name^="sp_criteria_datetime_select"]').val(criteria_datetime);
-                disableAndHideDateTimeDropdown(next.find('first-child'), getRowIndex(next));
-                /* if only the current row has the extra criteria value,
-                 * then just remove the current row's extra criteria element
-                 */
-            } else if (curr.find('[name^="sp_criteria_datetime_select"]').attr("disabled") != "disabled"
-                && next.find('#datetime_select').not(':visible')) {
-                disableAndHideDateTimeDropdown(curr.find(':first-child'), index);
-                /* if only the next row has date_time_select then just enable it on the current row
-                 */
-            } else if (next.find('#datetime_select').is(':visible')) {
-                criteria_datetime = next.find('[name^="sp_criteria_datetime_select"]').val();
-                enableAndShowDateTimeDropdown(curr.find(':first-child'), index);
-                curr.find('[name^="sp_criteria_datetime_select"]').val(criteria_datetime);
-            }
-
-            /* if current and next row have the extra_date_time_select_criteria visible
-             * then show the current and it from the next row
-             */
-            if (curr.find('[name^="sp_criteria_extra_datetime_select"]').attr("disabled") != "disabled"
-                && next.find('#extra_datetime_select').is(':visible')) {
-
-                var extra_criteria_datetime = next.find('[name^="sp_criteria_extra_datetime_select"]').val();
-                curr.find('[name^="sp_criteria_extra_datetime_select"]').val(extra_criteria_datetime);
-                disableAndHideExtraDateTimeDropdown(next.find('first-child'), getRowIndex(next));
-                /* if only the current row has the extra criteria value,
-                 * then just remove the current row's extra criteria element
-                 */
-            } else if (curr.find('[name^="sp_criteria_extra_datetime_select"]').attr("disabled") != "disabled"
-                && next.find('#extra_datetime_select').not(':visible')) {
-                disableAndHideExtraDateTimeDropdown(curr.find(':first-child'), index);
-                /* if only the next row has date_time_select then just enable it on the current row
-                 */
-            } else if (next.find('#datetime_select').is(':visible')) {
-                criteria_datetime = next.find('[name^="sp_criteria_extra_datetime_select"]').val();
-                enableAndShowExtraDateTimeDropdown(curr.find(':first-child'), index);
-                curr.find('[name^="sp_criteria_extra_datetime_select"]').val(criteria_datetime);
-            }
-
-            /* determine if current row is a modifier row
-             * if it is, make the criteria select invisible
-             */
-            prev = curr.prev();
-            if (curr.find('[name^="sp_criteria_field"]').val() == prev.find('[name^="sp_criteria_field"]').val()) {
-                if (!curr.find('select[name^="sp_criteria_field"]').hasClass('sp-invisible')) {
-                    curr.find('select[name^="sp_criteria_field"]').addClass('sp-invisible');
-                }
-            } else {
-                if (curr.find('select[name^="sp_criteria_field"]').hasClass('sp-invisible')) {
-                    curr.find('select[name^="sp_criteria_field"]').removeClass('sp-invisible');
-                }
-            }
-
-            curr = next;
-            next = curr.next();
-
-        }
-
-        /* Disable the last visible row since it holds the values the user removed
-         * Reset the values to empty and resize the criteria value textbox
-         * in case the row had the extra criteria textbox
-         */
-        item_to_hide = list.find('div:visible:last');
-        item_to_hide.children().attr('disabled', 'disabled');
-        item_to_hide.find('[name^="sp_criteria_datetime_select"]').attr('disabled', 'disabled');
-        item_to_hide.find('[name^="sp_criteria_extra"]').attr('disabled', 'disabled');
-        item_to_hide.find('[name^="sp_criteria_extra_datetime_select"]').attr('disabled', 'disabled');
-        if (item_to_hide.find('select[name^="sp_criteria_field"]').hasClass('sp-invisible')) {
-            item_to_hide.find('select[name^="sp_criteria_field"]').removeClass('sp-invisible');
-        }
-        item_to_hide.find('[name^="sp_criteria_field"]').val(0).end()
-            .find('[name^="sp_criteria_modifier"]').val(0).end()
-            .find('[name^="sp_criteria_datetime_select"]').end()
-            .find('[name^="sp_criteria_value"]').val('').end()
-            .find('[name^="sp_criteria_extra"]').val('')
-            .find('[name^="sp_criteria_extra_datetime_select"]').end();
-
-        sizeTextBoxes(item_to_hide.find('[name^="sp_criteria_value"]'), 'sp_extra_input_text', 'sp_input_text');
-        item_to_hide.hide();
-
-        list.next().show();
-
-        //check if last row is a modifier row
-        var last_row = list.find('div:visible:last');
-        if (last_row.find('[name^="sp_criteria_field"]').val() == last_row.prev().find('[name^="sp_criteria_field"]').val()) {
-            if (!last_row.find('select[name^="sp_criteria_field"]').hasClass('sp-invisible')) {
-                last_row.find('select[name^="sp_criteria_field"]').addClass('sp-invisible');
-            }
-        }
-
-        // always put '+' button on the last enabled row
-        appendAddButton();
-
-        reindexElements();
-
-        // always put '+' button on the last modifier row
-        appendModAddButton();
-
-        // remove the 'x' button if only one row is enabled
-        removeButtonCheck();
-
-        groupCriteriaRows();
-
-    });
-
-    /********** SAVE ACTION **********/
-    // moved to spl.js
-
-    /********** GENERATE ACTION **********/
-    activeTab.find('button[id="generate_button"]').live("click", function () {
-        buttonClickAction('generate', 'playlist/smart-block-generate');
-    });
-
-    /********** SHUFFLE ACTION **********/
-    activeTab.find('button[id="shuffle_button"]').live("click", function () {
-        buttonClickAction('shuffle', 'playlist/smart-block-shuffle');
-    });
-
-    /********** CHANGE PLAYLIST TYPE **********/
-    form.find('dd[id="sp_type-element"]').live("change", function () {
-        //buttonClickAction('generate', 'playlist/empty-content');
-        $(".active-tab").find('button[id="save_button"]').click();
-        setupUI();
-        AIRTIME.library.checkAddButton();
-    });
-
-    /********** LIMIT CHANGE *************/
-    form.find('select[id="sp_limit_options"]').live("change", function () {
-        var limVal = form.find('input[id="sp_limit_value"]');
-        if ($(this).val() === 'remaining') {
-            disableAndHideLimitValue();
-        }
-        else {
-            enableAndShowLimitValue();
-        }
-    });
-
-
-    /********** CRITERIA CHANGE **********/
-    form.find('select[id^="sp_criteria"]:not([id^="sp_criteria_modifier"]):not([id^="sp_criteria_datetime"]):not([id^="sp_criteria_extra_datetime"]):not([id^="sp_criteria_value"])').live("change", function () {
-        var index = getRowIndex($(this).parent());
-        //need to change the criteria value for any modifier rows
-        var critVal = $(this).val();
-        var divs = $(this).parent().nextAll(':visible');
-        $.each(divs, function (i, div) {
-            var critSelect = $(div).children('select[id^="sp_criteria_field"]');
-            if (critSelect.hasClass('sp-invisible')) {
-                critSelect.val(critVal);
-                /* If the select box is visible we know the modifier rows
-                 * have ended
-                 */
-            } else {
-                return false;
-            }
-        });
-
-        // disable extra field and hide the span
-        disableAndHideExtraField($(this), index);
-        disableAndHideDateTimeDropdown($(this), index);
-        disableAndHideExtraDateTimeDropdown($(this), index);
-
-        if ($("#sp_criteria_field_" + index + " option:selected").val() === 'track_type_id') {
-            populateTracktypeSelect(this, false);
-        } else {
-            disableAndHideTracktypeDropdown($(this), index);
-            populateModifierSelect(this, true);
-        }
-
-    });
-
-    /********** MODIFIER CHANGE **********/
-    form.find('select[id^="sp_criteria_modifier"]').live("change", function () {
-        var criteria_value = $(this).next(),
-            index_num = getRowIndex($(this).parent());
-
-        if ($(this).val().match('before|after')) {
-            enableAndShowDateTimeDropdown(criteria_value, index_num);
-            console.log($(this).val());
-        }
-        else {
-            disableAndHideDateTimeDropdown(criteria_value, index_num);
-            disableAndHideExtraDateTimeDropdown(criteria_value, index_num);
-
-        }
-
-        if ($(this).val().match('is in the range')) {
-            enableAndShowExtraField(criteria_value, index_num);
-        } else {
-            disableAndHideExtraField(criteria_value, index_num);
-        }
-        if ($(this).val().match('between')) {
-            enableAndShowExtraField(criteria_value, index_num);
-            enableAndShowDateTimeDropdown(criteria_value, index_num);
-            enableAndShowExtraDateTimeDropdown(criteria_value, index_num);
-        }
-        else {
-            disableAndHideExtraDateTimeDropdown(criteria_value, index_num);
-        }
-
-        var get_crit_field = $(this).siblings(':first-child');
-        var crit_field = get_crit_field[0]["id"];
-        if ($("#" + crit_field + " option:selected").val() === 'track_type_id') {
-            if ($(this).val() == "is" || $(this).val() == "is not") {
-                enableAndShowTracktypeDropdown(criteria_value, index_num);
-            } else {
-                disableAndHideTracktypeDropdown(criteria_value, index_num);
-            }
-        }
-    });
-
-    setupUI();
+  var activeTab = $(".active-tab"),
+    form = activeTab.find(".smart-block-form");
+
+  /********** ADD CRITERIA ROW **********/
+  form.find("#criteria_add").live("click", function () {
+    var div = $('dd[id="sp_criteria-element"]').children("div:visible:last");
+
+    if (div.length == 0) {
+      div = $('dd[id="sp_criteria-element"]').children("div:first");
+      div.children().removeAttr("disabled");
+      div.show();
+
+      appendAddButton();
+      appendModAddButton();
+      removeButtonCheck();
+      disableAndHideDateTimeDropdown(newRowVal);
+    } else {
+      div.find(".db-logic-label").text("and").css("display", "table");
+      div.removeClass("search-row-or").addClass("search-row-and");
+
+      div = div.next().show();
+
+      div.children().removeAttr("disabled");
+      div.find(".modifier_add_link").show();
+
+      div = div.next();
+      if (div.length === 0) {
+        $(this).hide();
+      }
+
+      appendAddButton();
+      appendModAddButton();
+      removeButtonCheck();
+      // disableAndHideDateTimeDropdown(newRowVal);
+      groupCriteriaRows();
+    }
+  });
+
+  /********** ADD MODIFIER ROW **********/
+  form.find('a[id^="modifier_add"]').live("click", function () {
+    var criteria_value = $(this)
+      .siblings('select[name^="sp_criteria_field"]')
+      .val();
+
+    //make new modifier row
+    var newRow = $(this).parent().clone(),
+      newRowCrit = newRow.find('select[name^="sp_criteria_field"]'),
+      newRowMod = newRow.find('select[name^="sp_criteria_modifier"]'),
+      newRowVal = newRow.find('input[name^="sp_criteria_value"]'),
+      newRowExtra = newRow.find('input[name^="sp_criteria_extra"]'),
+      newRowRemove = newRow.find('a[id^="criteria_remove"]');
+
+    //remove error msg
+    if (newRow.children().hasClass("errors sp-errors")) {
+      newRow.find('span[class="errors sp-errors"]').remove();
+    }
+
+    //hide the critieria field select box
+    newRowCrit.addClass("sp-invisible");
+
+    //keep criteria value the same
+    newRowCrit.val(criteria_value);
+
+    //reset all other values
+    newRowMod.val("0");
+    newRowVal.val("");
+    newRowExtra.val("");
+    disableAndHideExtraField(newRowVal);
+    disableAndHideDateTimeDropdown(newRowVal);
+    disableAndHideExtraDateTimeDropdown(newRowVal);
+    sizeTextBoxes(newRowVal, "sp_extra_input_text", "sp_input_text");
+
+    //remove the 'criteria add' button from new modifier row
+    newRow.find("#criteria_add").remove();
+
+    $(this).parent().after(newRow);
+
+    // remove extra spacing from previous row
+    newRow.prev().removeClass("search-row-and").addClass("search-row-or");
+
+    reindexElements();
     appendAddButton();
     appendModAddButton();
     removeButtonCheck();
+    groupCriteriaRows();
+  });
+
+  /********** REMOVE ROW **********/
+  form.find('a[id^="criteria_remove"]').live("click", function () {
+    var curr = $(this).parent();
+    var curr_pos = curr.index();
+    var list = curr.parent();
+    var list_length = list.find("div:visible").length;
+    var count = list_length - curr_pos;
+    var next = curr.next();
+    var item_to_hide;
+    var prev;
+    var index;
+    //remove error message from current row, if any
+    var error_element = curr.find('span[class="errors sp-errors"]');
+    if (error_element.is(":visible")) {
+      error_element.remove();
+    }
+
+    /* In the case that there is only one element we need to remove the
+     * date_select drop down.
+     */
+
+    if (count == 0) {
+      disableAndHideDateTimeDropdown(curr.find(":first-child"), index);
+      disableAndHideExtraDateTimeDropdown(curr.find(":first-child"), index);
+      disableAndHideExtraField(curr.find(":first-child"), index);
+    }
+
+    /* assign next row to current row for all rows below and including
+     * the row getting removed
+     */
+
+    for (var i = 0; i < count; i++) {
+      index = getRowIndex(curr);
+
+      var criteria = next.find('[name^="sp_criteria_field"]').val();
+      curr.find('[name^="sp_criteria_field"]').val(criteria);
+
+      var modifier = next.find('[name^="sp_criteria_modifier"]').val();
+      populateModifierSelect(curr.find('[name^="sp_criteria_field"]'), false);
+      curr.find('[name^="sp_criteria_modifier"]').val(modifier);
+
+      var criteria_value = next.find('[name^="sp_criteria_value"]').val();
+      curr.find('[name^="sp_criteria_value"]').val(criteria_value);
+
+      /* if current and next row have the extra criteria value
+       * (for 'is in the range' modifier), then assign the next
+       * extra value to current and remove that element from
+       * next row
+       */
+      if (
+        curr.find('[name^="sp_criteria_extra"]').attr("disabled") !=
+          "disabled" &&
+        next.find("#extra_criteria").is(":visible")
+      ) {
+        var criteria_extra = next.find('[name^="sp_criteria_extra"]').val();
+        curr.find('[name^="sp_criteria_extra"]').val(criteria_extra);
+        disableAndHideExtraField(next.find(":first-child"), getRowIndex(next));
+
+        /* if only the current row has the extra criteria value,
+         * then just remove the current row's extra criteria element
+         */
+      } else if (
+        curr.find('[name^="sp_criteria_extra"]').attr("disabled") !=
+          "disabled" &&
+        next.find("#extra_criteria").not(":visible")
+      ) {
+        disableAndHideExtraField(curr.find(":first-child"), index);
+
+        /* if only the next row has the extra criteria value,
+         * then add the extra criteria element to current row
+         * and assign next row's value to it
+         */
+      } else if (next.find("#extra_criteria").is(":visible")) {
+        criteria_extra = next.find('[name^="sp_criteria_extra"]').val();
+        enableAndShowExtraField(curr.find(":first-child"), index);
+        curr.find('[name^="sp_criteria_extra"]').val(criteria_extra);
+      }
+
+      /* if current and next row have the date_time_select_criteria visible
+       * then show the current and it from the next row
+       */
+      if (
+        curr.find('[name^="sp_criteria_datetime_select"]').attr("disabled") !=
+          "disabled" &&
+        next.find("#datetime_select").is(":visible")
+      ) {
+        var criteria_datetime = next
+          .find('[name^="sp_criteria_datetime_select"]')
+          .val();
+        curr
+          .find('[name^="sp_criteria_datetime_select"]')
+          .val(criteria_datetime);
+        disableAndHideDateTimeDropdown(
+          next.find("first-child"),
+          getRowIndex(next)
+        );
+        /* if only the current row has the extra criteria value,
+         * then just remove the current row's extra criteria element
+         */
+      } else if (
+        curr.find('[name^="sp_criteria_datetime_select"]').attr("disabled") !=
+          "disabled" &&
+        next.find("#datetime_select").not(":visible")
+      ) {
+        disableAndHideDateTimeDropdown(curr.find(":first-child"), index);
+        /* if only the next row has date_time_select then just enable it on the current row
+         */
+      } else if (next.find("#datetime_select").is(":visible")) {
+        criteria_datetime = next
+          .find('[name^="sp_criteria_datetime_select"]')
+          .val();
+        enableAndShowDateTimeDropdown(curr.find(":first-child"), index);
+        curr
+          .find('[name^="sp_criteria_datetime_select"]')
+          .val(criteria_datetime);
+      }
+
+      /* if current and next row have the extra_date_time_select_criteria visible
+       * then show the current and it from the next row
+       */
+      if (
+        curr
+          .find('[name^="sp_criteria_extra_datetime_select"]')
+          .attr("disabled") != "disabled" &&
+        next.find("#extra_datetime_select").is(":visible")
+      ) {
+        var extra_criteria_datetime = next
+          .find('[name^="sp_criteria_extra_datetime_select"]')
+          .val();
+        curr
+          .find('[name^="sp_criteria_extra_datetime_select"]')
+          .val(extra_criteria_datetime);
+        disableAndHideExtraDateTimeDropdown(
+          next.find("first-child"),
+          getRowIndex(next)
+        );
+        /* if only the current row has the extra criteria value,
+         * then just remove the current row's extra criteria element
+         */
+      } else if (
+        curr
+          .find('[name^="sp_criteria_extra_datetime_select"]')
+          .attr("disabled") != "disabled" &&
+        next.find("#extra_datetime_select").not(":visible")
+      ) {
+        disableAndHideExtraDateTimeDropdown(curr.find(":first-child"), index);
+        /* if only the next row has date_time_select then just enable it on the current row
+         */
+      } else if (next.find("#datetime_select").is(":visible")) {
+        criteria_datetime = next
+          .find('[name^="sp_criteria_extra_datetime_select"]')
+          .val();
+        enableAndShowExtraDateTimeDropdown(curr.find(":first-child"), index);
+        curr
+          .find('[name^="sp_criteria_extra_datetime_select"]')
+          .val(criteria_datetime);
+      }
+
+      /* determine if current row is a modifier row
+       * if it is, make the criteria select invisible
+       */
+      prev = curr.prev();
+      if (
+        curr.find('[name^="sp_criteria_field"]').val() ==
+        prev.find('[name^="sp_criteria_field"]').val()
+      ) {
+        if (
+          !curr
+            .find('select[name^="sp_criteria_field"]')
+            .hasClass("sp-invisible")
+        ) {
+          curr
+            .find('select[name^="sp_criteria_field"]')
+            .addClass("sp-invisible");
+        }
+      } else {
+        if (
+          curr
+            .find('select[name^="sp_criteria_field"]')
+            .hasClass("sp-invisible")
+        ) {
+          curr
+            .find('select[name^="sp_criteria_field"]')
+            .removeClass("sp-invisible");
+        }
+      }
+
+      curr = next;
+      next = curr.next();
+    }
+
+    /* Disable the last visible row since it holds the values the user removed
+     * Reset the values to empty and resize the criteria value textbox
+     * in case the row had the extra criteria textbox
+     */
+    item_to_hide = list.find("div:visible:last");
+    item_to_hide.children().attr("disabled", "disabled");
+    item_to_hide
+      .find('[name^="sp_criteria_datetime_select"]')
+      .attr("disabled", "disabled");
+    item_to_hide
+      .find('[name^="sp_criteria_extra"]')
+      .attr("disabled", "disabled");
+    item_to_hide
+      .find('[name^="sp_criteria_extra_datetime_select"]')
+      .attr("disabled", "disabled");
+    if (
+      item_to_hide
+        .find('select[name^="sp_criteria_field"]')
+        .hasClass("sp-invisible")
+    ) {
+      item_to_hide
+        .find('select[name^="sp_criteria_field"]')
+        .removeClass("sp-invisible");
+    }
+    item_to_hide
+      .find('[name^="sp_criteria_field"]')
+      .val(0)
+      .end()
+      .find('[name^="sp_criteria_modifier"]')
+      .val(0)
+      .end()
+      .find('[name^="sp_criteria_datetime_select"]')
+      .end()
+      .find('[name^="sp_criteria_value"]')
+      .val("")
+      .end()
+      .find('[name^="sp_criteria_extra"]')
+      .val("")
+      .find('[name^="sp_criteria_extra_datetime_select"]')
+      .end();
+
+    sizeTextBoxes(
+      item_to_hide.find('[name^="sp_criteria_value"]'),
+      "sp_extra_input_text",
+      "sp_input_text"
+    );
+    item_to_hide.hide();
+
+    list.next().show();
+
+    //check if last row is a modifier row
+    var last_row = list.find("div:visible:last");
+    if (
+      last_row.find('[name^="sp_criteria_field"]').val() ==
+      last_row.prev().find('[name^="sp_criteria_field"]').val()
+    ) {
+      if (
+        !last_row
+          .find('select[name^="sp_criteria_field"]')
+          .hasClass("sp-invisible")
+      ) {
+        last_row
+          .find('select[name^="sp_criteria_field"]')
+          .addClass("sp-invisible");
+      }
+    }
+
+    // always put '+' button on the last enabled row
+    appendAddButton();
+
+    reindexElements();
+
+    // always put '+' button on the last modifier row
+    appendModAddButton();
+
+    // remove the 'x' button if only one row is enabled
+    removeButtonCheck();
+
+    groupCriteriaRows();
+  });
+
+  /********** SAVE ACTION **********/
+  // moved to spl.js
+
+  /********** GENERATE ACTION **********/
+  activeTab.find('button[id="generate_button"]').live("click", function () {
+    buttonClickAction("generate", "playlist/smart-block-generate");
+  });
+
+  /********** SHUFFLE ACTION **********/
+  activeTab.find('button[id="shuffle_button"]').live("click", function () {
+    buttonClickAction("shuffle", "playlist/smart-block-shuffle");
+  });
+
+  /********** CHANGE PLAYLIST TYPE **********/
+  form.find('dd[id="sp_type-element"]').live("change", function () {
+    //buttonClickAction('generate', 'playlist/empty-content');
+    $(".active-tab").find('button[id="save_button"]').click();
+    setupUI();
+    AIRTIME.library.checkAddButton();
+  });
+
+  /********** LIMIT CHANGE *************/
+  form.find('select[id="sp_limit_options"]').live("change", function () {
+    var limVal = form.find('input[id="sp_limit_value"]');
+    if ($(this).val() === "remaining") {
+      disableAndHideLimitValue();
+    } else {
+      enableAndShowLimitValue();
+    }
+  });
+
+  /********** CRITERIA CHANGE **********/
+  form
+    .find(
+      'select[id^="sp_criteria"]:not([id^="sp_criteria_modifier"]):not([id^="sp_criteria_datetime"]):not([id^="sp_criteria_extra_datetime"]):not([id^="sp_criteria_value"])'
+    )
+    .live("change", function () {
+      var index = getRowIndex($(this).parent());
+      //need to change the criteria value for any modifier rows
+      var critVal = $(this).val();
+      var divs = $(this).parent().nextAll(":visible");
+      $.each(divs, function (i, div) {
+        var critSelect = $(div).children('select[id^="sp_criteria_field"]');
+        if (critSelect.hasClass("sp-invisible")) {
+          critSelect.val(critVal);
+          /* If the select box is visible we know the modifier rows
+           * have ended
+           */
+        } else {
+          return false;
+        }
+      });
+
+      // disable extra field and hide the span
+      disableAndHideExtraField($(this), index);
+      disableAndHideDateTimeDropdown($(this), index);
+      disableAndHideExtraDateTimeDropdown($(this), index);
+
+      if (
+        $("#sp_criteria_field_" + index + " option:selected").val() ===
+        "track_type_id"
+      ) {
+        populateTracktypeSelect(this, false);
+      } else {
+        disableAndHideTracktypeDropdown($(this), index);
+        populateModifierSelect(this, true);
+      }
+    });
+
+  /********** MODIFIER CHANGE **********/
+  form.find('select[id^="sp_criteria_modifier"]').live("change", function () {
+    var criteria_value = $(this).next(),
+      index_num = getRowIndex($(this).parent());
+
+    if ($(this).val().match("before|after")) {
+      enableAndShowDateTimeDropdown(criteria_value, index_num);
+      console.log($(this).val());
+    } else {
+      disableAndHideDateTimeDropdown(criteria_value, index_num);
+      disableAndHideExtraDateTimeDropdown(criteria_value, index_num);
+    }
+
+    if ($(this).val().match("is in the range")) {
+      enableAndShowExtraField(criteria_value, index_num);
+    } else {
+      disableAndHideExtraField(criteria_value, index_num);
+    }
+    if ($(this).val().match("between")) {
+      enableAndShowExtraField(criteria_value, index_num);
+      enableAndShowDateTimeDropdown(criteria_value, index_num);
+      enableAndShowExtraDateTimeDropdown(criteria_value, index_num);
+    } else {
+      disableAndHideExtraDateTimeDropdown(criteria_value, index_num);
+    }
+
+    var get_crit_field = $(this).siblings(":first-child");
+    var crit_field = get_crit_field[0]["id"];
+    if ($("#" + crit_field + " option:selected").val() === "track_type_id") {
+      if ($(this).val() == "is" || $(this).val() == "is not") {
+        enableAndShowTracktypeDropdown(criteria_value, index_num);
+      } else {
+        disableAndHideTracktypeDropdown(criteria_value, index_num);
+      }
+    }
+  });
+
+  setupUI();
+  appendAddButton();
+  appendModAddButton();
+  removeButtonCheck();
 }
 
 function getRowIndex(ele) {
-    var id = ele.find('[name^="sp_criteria_field"]').attr('id'),
-        delimiter = '_',
-        start = 3,
-        tokens = id.split(delimiter).slice(start),
-        index = tokens.join(delimiter);
+  var id = ele.find('[name^="sp_criteria_field"]').attr("id"),
+    delimiter = "_",
+    start = 3,
+    tokens = id.split(delimiter).slice(start),
+    index = tokens.join(delimiter);
 
-    return index;
+  return index;
 }
 
 /* This function appends a '+' button for the last
@@ -411,432 +490,512 @@ function getRowIndex(ele) {
  * remains at the criteria row
  */
 function appendModAddButton() {
-    var divs = $('.active-tab .smart-block-form').find('div select[name^="sp_criteria_modifier"]').parent(':visible');
-    $.each(divs, function (i, div) {
-        if (i > 0) {
-            /* If the criteria field is hidden we know it is a modifier row
-             * and can hide the previous row's modifier add button
-             */
-            if ($(div).find('select[name^="sp_criteria_field"]').hasClass('sp-invisible')) {
-                $(div).prev().find('a[id^="modifier_add"]').addClass('sp-invisible');
-            } else {
-                $(div).prev().find('a[id^="modifier_add"]').removeClass('sp-invisible');
-            }
-        }
+  var divs = $(".active-tab .smart-block-form")
+    .find('div select[name^="sp_criteria_modifier"]')
+    .parent(":visible");
+  $.each(divs, function (i, div) {
+    if (i > 0) {
+      /* If the criteria field is hidden we know it is a modifier row
+       * and can hide the previous row's modifier add button
+       */
+      if (
+        $(div)
+          .find('select[name^="sp_criteria_field"]')
+          .hasClass("sp-invisible")
+      ) {
+        $(div).prev().find('a[id^="modifier_add"]').addClass("sp-invisible");
+      } else {
+        $(div).prev().find('a[id^="modifier_add"]').removeClass("sp-invisible");
+      }
+    }
 
-        //always add modifier add button to the last row
-        if (i + 1 == divs.length) {
-            $(div).find('a[id^="modifier_add"]').removeClass('sp-invisible');
-        }
-    });
+    //always add modifier add button to the last row
+    if (i + 1 == divs.length) {
+      $(div).find('a[id^="modifier_add"]').removeClass("sp-invisible");
+    }
+  });
 }
 
 /* This function re-indexes all the form elements.
  * We need to do this everytime a row gets deleted
  */
 function reindexElements() {
-    var divs = $('.active-tab .smart-block-form').find('div select[name^="sp_criteria_field"]').parent(),
-        index = 0,
-        modIndex = 0;
-    /* Hide all logic labels
-     * We will re-add them as each row gets indexed
-     */
-    $('.db-logic-label').text('').hide();
+  var divs = $(".active-tab .smart-block-form")
+      .find('div select[name^="sp_criteria_field"]')
+      .parent(),
+    index = 0,
+    modIndex = 0;
+  /* Hide all logic labels
+   * We will re-add them as each row gets indexed
+   */
+  $(".db-logic-label").text("").hide();
 
-    $.each(divs, function (i, div) {
-        if (i > 0 && index < 26) {
-
-            /* If the current row's criteria field is hidden we know it is
-             * a modifier row
-             */
-            if ($(div).find('select[name^="sp_criteria_field"]').hasClass('sp-invisible')) {
-                if ($(div).is(':visible')) {
-                    $(div).prev().find('.db-logic-label').text($.i18n._("or")).show();
-                }
-                modIndex++;
-            } else {
-                if ($(div).is(':visible')) {
-                    $(div).prev().find('.db-logic-label').text($.i18n._("and")).show();
-                }
-                index++;
-                modIndex = 0;
-            }
-
-            $(div).find('select[name^="sp_criteria_field"]').attr('name', 'sp_criteria_field_' + index + '_' + modIndex);
-            $(div).find('select[name^="sp_criteria_field"]').attr('id', 'sp_criteria_field_' + index + '_' + modIndex);
-            $(div).find('select[name^="sp_criteria_modifier"]').attr('name', 'sp_criteria_modifier_' + index + '_' + modIndex);
-            $(div).find('select[name^="sp_criteria_modifier"]').attr('id', 'sp_criteria_modifier_' + index + '_' + modIndex);
-            $(div).find('input[name^="sp_criteria_value"]').attr('name', 'sp_criteria_value_' + index + '_' + modIndex);
-            $(div).find('input[name^="sp_criteria_value"]').attr('id', 'sp_criteria_value_' + index + '_' + modIndex);
-            $(div).find('select[name^="sp_criteria_value"]').attr('name', 'sp_criteria_value_' + index + '_' + modIndex);
-            $(div).find('select[name^="sp_criteria_value"]').attr('id', 'sp_criteria_value_' + index + '_' + modIndex);
-            $(div).find('input[name^="sp_criteria_extra"]').attr('name', 'sp_criteria_extra_' + index + '_' + modIndex);
-            $(div).find('input[name^="sp_criteria_extra"]').attr('id', 'sp_criteria_extra_' + index + '_' + modIndex);
-            $(div).find('a[name^="modifier_add"]').attr('id', 'modifier_add_' + index);
-            $(div).find('a[id^="criteria_remove"]').attr('id', 'criteria_remove_' + index + '_' + modIndex);
-        } else if (i > 0) {
-            $(div).remove();
+  $.each(divs, function (i, div) {
+    if (i > 0 && index < 26) {
+      /* If the current row's criteria field is hidden we know it is
+       * a modifier row
+       */
+      if (
+        $(div)
+          .find('select[name^="sp_criteria_field"]')
+          .hasClass("sp-invisible")
+      ) {
+        if ($(div).is(":visible")) {
+          $(div).prev().find(".db-logic-label").text($.i18n._("or")).show();
         }
-    });
+        modIndex++;
+      } else {
+        if ($(div).is(":visible")) {
+          $(div).prev().find(".db-logic-label").text($.i18n._("and")).show();
+        }
+        index++;
+        modIndex = 0;
+      }
+
+      $(div)
+        .find('select[name^="sp_criteria_field"]')
+        .attr("name", "sp_criteria_field_" + index + "_" + modIndex);
+      $(div)
+        .find('select[name^="sp_criteria_field"]')
+        .attr("id", "sp_criteria_field_" + index + "_" + modIndex);
+      $(div)
+        .find('select[name^="sp_criteria_modifier"]')
+        .attr("name", "sp_criteria_modifier_" + index + "_" + modIndex);
+      $(div)
+        .find('select[name^="sp_criteria_modifier"]')
+        .attr("id", "sp_criteria_modifier_" + index + "_" + modIndex);
+      $(div)
+        .find('input[name^="sp_criteria_value"]')
+        .attr("name", "sp_criteria_value_" + index + "_" + modIndex);
+      $(div)
+        .find('input[name^="sp_criteria_value"]')
+        .attr("id", "sp_criteria_value_" + index + "_" + modIndex);
+      $(div)
+        .find('select[name^="sp_criteria_value"]')
+        .attr("name", "sp_criteria_value_" + index + "_" + modIndex);
+      $(div)
+        .find('select[name^="sp_criteria_value"]')
+        .attr("id", "sp_criteria_value_" + index + "_" + modIndex);
+      $(div)
+        .find('input[name^="sp_criteria_extra"]')
+        .attr("name", "sp_criteria_extra_" + index + "_" + modIndex);
+      $(div)
+        .find('input[name^="sp_criteria_extra"]')
+        .attr("id", "sp_criteria_extra_" + index + "_" + modIndex);
+      $(div)
+        .find('a[name^="modifier_add"]')
+        .attr("id", "modifier_add_" + index);
+      $(div)
+        .find('a[id^="criteria_remove"]')
+        .attr("id", "criteria_remove_" + index + "_" + modIndex);
+    } else if (i > 0) {
+      $(div).remove();
+    }
+  });
 }
 
 function buttonClickAction(clickType, url) {
-    var data = $('.active-tab .smart-block-form').serializeArray(),
-        obj_id = $('.active-tab .obj_id').val();
+  var data = $(".active-tab .smart-block-form").serializeArray(),
+    obj_id = $(".active-tab .obj_id").val();
 
-    enableLoadingIcon();
-    $.post(url, {
-        format: "json", data: data, obj_id: obj_id, obj_type: "block",
-        modified: AIRTIME.playlist.getModified()
-    }, function (data) {
-        callback(data, clickType);
-        disableLoadingIcon();
-    });
+  enableLoadingIcon();
+  $.post(
+    url,
+    {
+      format: "json",
+      data: data,
+      obj_id: obj_id,
+      obj_type: "block",
+      modified: AIRTIME.playlist.getModified(),
+    },
+    function (data) {
+      callback(data, clickType);
+      disableLoadingIcon();
+    }
+  );
 }
 
 function setupUI() {
-    var activeTab = $('.active-tab'),
-        playlist_type = activeTab.find('input:radio[name=sp_type]:checked').val();
+  var activeTab = $(".active-tab"),
+    playlist_type = activeTab.find("input:radio[name=sp_type]:checked").val();
 
-    /* Activate or Deactivate shuffle button
-     * It is only active if playlist is not empty
-     */
-    var sortable = activeTab.find('.spl_sortable'),
-        plContents = sortable.children(),
-        shuffleButton = activeTab.find('button[name="shuffle_button"]'),
-        generateButton = activeTab.find('button[name="generate_button"]'),
-        fadesButton = activeTab.find('#spl_crossfade, #pl-bl-clear-content');
-    if (activeTab.find('#sp_limit_options').val() == 'remaining') {
-        disableAndHideLimitValue();
+  /* Activate or Deactivate shuffle button
+   * It is only active if playlist is not empty
+   */
+  var sortable = activeTab.find(".spl_sortable"),
+    plContents = sortable.children(),
+    shuffleButton = activeTab.find('button[name="shuffle_button"]'),
+    generateButton = activeTab.find('button[name="generate_button"]'),
+    fadesButton = activeTab.find("#spl_crossfade, #pl-bl-clear-content");
+  if (activeTab.find("#sp_limit_options").val() == "remaining") {
+    disableAndHideLimitValue();
+  }
+
+  if (!plContents.hasClass("spl_empty")) {
+    if (shuffleButton.hasClass("ui-state-disabled")) {
+      shuffleButton.removeClass("ui-state-disabled");
+      shuffleButton.removeAttr("disabled");
     }
+  } else if (!shuffleButton.hasClass("ui-state-disabled")) {
+    shuffleButton.addClass("ui-state-disabled");
+    shuffleButton.attr("disabled", "disabled");
+  }
 
-    if (!plContents.hasClass('spl_empty')) {
-        if (shuffleButton.hasClass('ui-state-disabled')) {
-            shuffleButton.removeClass('ui-state-disabled');
-            shuffleButton.removeAttr('disabled');
-        }
-    } else if (!shuffleButton.hasClass('ui-state-disabled')) {
-        shuffleButton.addClass('ui-state-disabled');
-        shuffleButton.attr('disabled', 'disabled');
+  if (activeTab.find(".obj_type").val() == "block") {
+    if (playlist_type == "1") {
+      shuffleButton.removeAttr("disabled");
+      generateButton.removeAttr("disabled");
+      generateButton.html($.i18n._("Generate"));
+      fadesButton.removeAttr("disabled");
+      //sortable.children().show();
+    } else {
+      shuffleButton.attr("disabled", "disabled");
+      generateButton.html($.i18n._("Preview"));
+      fadesButton.attr("disabled", "disabled");
+      //sortable.children().hide();
     }
+  }
 
-    if (activeTab.find('.obj_type').val() == 'block') {
-        if (playlist_type == "1") {
-            shuffleButton.removeAttr("disabled");
-            generateButton.removeAttr("disabled");
-            generateButton.html($.i18n._("Generate"));
-            fadesButton.removeAttr("disabled");
-            //sortable.children().show();
-        } else {
-            shuffleButton.attr("disabled", "disabled");
-            generateButton.html($.i18n._("Preview"));
-            fadesButton.attr("disabled", "disabled");
-            //sortable.children().hide();
-        }
-    }
+  $(".playlist_type_help_icon").qtip({
+    content: {
+      text:
+        $.i18n._(
+          "A static smart block will save the criteria and generate the block content immediately. This allows you to edit and view it in the Library before adding it to a show."
+        ) +
+        "<br /><br />" +
+        $.i18n._(
+          "A dynamic smart block will only save the criteria. The block content will get generated upon adding it to a show. You will not be able to view and edit the content in the Library."
+        ),
+    },
+    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",
+    },
+  });
 
-    $(".playlist_type_help_icon").qtip({
-        content: {
-            text: $.i18n._("A static smart block will save the criteria and generate the block content immediately. This allows you to edit and view it in the Library before adding it to a show.") + "<br /><br />" +
-                $.i18n._("A dynamic smart block will only save the criteria. The block content will get generated upon adding it to a show. You will not be able to view and edit the content in the Library.")
-        },
-        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"
-        }
-    });
+  $(".repeat_tracks_help_icon").qtip({
+    content: {
+      text: sprintf(
+        $.i18n._(
+          "The desired block length will not be reached if %s cannot find enough unique tracks to match your criteria. Enable this option if you wish to allow tracks to be added multiple times to the smart block."
+        ),
+        PRODUCT_NAME
+      ),
+    },
+    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",
+    },
+  });
 
-    $(".repeat_tracks_help_icon").qtip({
-        content: {
-            text: sprintf($.i18n._("The desired block length will not be reached if %s cannot find enough unique tracks to match your criteria. Enable this option if you wish to allow tracks to be added multiple times to the smart block."), PRODUCT_NAME)
-        },
-        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"
-        }
-    });
+  $(".overflow_tracks_help_icon").qtip({
+    content: {
+      text: sprintf(
+        $.i18n._(
+          "<p>If this option is unchecked, the smartblock will schedule as many tracks as can be played out <strong>in their entirety</strong> within the specified duration. This will usually result in audio playback that is slightly less than the specified duration.</p><p>If this option is checked, the smartblock will also schedule one final track which will overflow the specified duration. This final track may be cut off mid-way if the show into which the smartblock is added finishes.</p>"
+        ),
+        PRODUCT_NAME
+      ),
+    },
+    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",
+    },
+  });
 
-
-    $(".overflow_tracks_help_icon").qtip({
-        content: {
-            text: sprintf($.i18n._("<p>If this option is unchecked, the smartblock will schedule as many tracks as can be played out <strong>in their entirety</strong> within the specified duration. This will usually result in audio playback that is slightly less than the specified duration.</p><p>If this option is checked, the smartblock will also schedule one final track which will overflow the specified duration. This final track may be cut off mid-way if the show into which the smartblock is added finishes.</p>"), PRODUCT_NAME)
-        },
-        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"
-        }
-    });
-
-    activeTab.find('.collapsible-header').off('click').on('click', function () {
-        $(this).toggleClass('visible');
-        $('.smart-block-advanced').toggle();
+  activeTab
+    .find(".collapsible-header")
+    .off("click")
+    .on("click", function () {
+      $(this).toggleClass("visible");
+      $(".smart-block-advanced").toggle();
     });
 }
 
 function enableAndShowTracktypeDropdown(valEle, index) {
-    console.log('tracktype show');
-    $("#sp_criteria_value_" + index).replaceWith('<select name="sp_criteria_value_' + index + '" id="sp_criteria_value_' + index + '" class="input_select sp_input_select"></select>');
-    $.each(stringTracktypeOptions, function (key, value) {
-        $("#sp_criteria_value_" + index).append($('<option></option>').attr('value', key).text(value));
-    });
+  console.log("tracktype show");
+  $("#sp_criteria_value_" + index).replaceWith(
+    '<select name="sp_criteria_value_' +
+      index +
+      '" id="sp_criteria_value_' +
+      index +
+      '" class="input_select sp_input_select"></select>'
+  );
+  $.each(stringTracktypeOptions, function (key, value) {
+    $("#sp_criteria_value_" + index).append(
+      $("<option></option>").attr("value", key).text(value)
+    );
+  });
 }
 
 function disableAndHideTracktypeDropdown(valEle, index) {
-    console.log('tracktype hide');
-    $("#sp_criteria_value_" + index).replaceWith('<input type="text" name="sp_criteria_value_' + index + '" id="sp_criteria_value_' + index + '" value="" class="input_text sp_input_text">');
+  console.log("tracktype hide");
+  $("#sp_criteria_value_" + index).replaceWith(
+    '<input type="text" name="sp_criteria_value_' +
+      index +
+      '" id="sp_criteria_value_' +
+      index +
+      '" value="" class="input_text sp_input_text">'
+  );
 }
 
 /* Utilizing jQuery this function finds the #datetime_select element on the given row
  * and shows the criteria drop-down
  */
 function enableAndShowDateTimeDropdown(valEle, index) {
-    console.log('datetime show');
-    var spanDatetime = valEle.nextAll("#datetime_select");
-    spanDatetime.children('#sp_criteria_datetime_select_' + index).removeAttr("disabled");
-    spanDatetime.children('#sp_criteria_extra_datetime_select_' + index).removeAttr("disabled");
-    spanDatetime.show();
+  console.log("datetime show");
+  var spanDatetime = valEle.nextAll("#datetime_select");
+  spanDatetime
+    .children("#sp_criteria_datetime_select_" + index)
+    .removeAttr("disabled");
+  spanDatetime
+    .children("#sp_criteria_extra_datetime_select_" + index)
+    .removeAttr("disabled");
+  spanDatetime.show();
 
-    //make value input smaller since we have extra element now
-    var criteria_val = $('#sp_criteria_value_' + index);
-    sizeTextBoxes(criteria_val, 'sp_input_text', 'sp_extra_input_text');
+  //make value input smaller since we have extra element now
+  var criteria_val = $("#sp_criteria_value_" + index);
+  sizeTextBoxes(criteria_val, "sp_input_text", "sp_extra_input_text");
 }
 
-
 /* Utilizing jQuery this function finds the #datetime_select element on the given row
  * and hides the datetime criteria drop-down
  */
 
 function disableAndHideDateTimeDropdown(valEle, index) {
-    console.log('datetime hide');
-    var spanDatetime = valEle.nextAll("#datetime_select");
-    spanDatetime.children('#sp_criteria_datetime_select_' + index).val("").attr("disabled", "disabled");
-    spanDatetime.hide();
+  console.log("datetime hide");
+  var spanDatetime = valEle.nextAll("#datetime_select");
+  spanDatetime
+    .children("#sp_criteria_datetime_select_" + index)
+    .val("")
+    .attr("disabled", "disabled");
+  spanDatetime.hide();
 
-    //make value input larger since we don't have extra field now
-    var criteria_value = $('#sp_criteria_value_' + index);
-    sizeTextBoxes(criteria_value, 'sp_extra_input_text', 'sp_input_text');
+  //make value input larger since we don't have extra field now
+  var criteria_value = $("#sp_criteria_value_" + index);
+  sizeTextBoxes(criteria_value, "sp_extra_input_text", "sp_input_text");
 }
 
 /* Utilizing jQuery this function finds the #datetime_select element on the given row
  * and shows the criteria drop-down
  */
 function enableAndShowExtraDateTimeDropdown(valEle, index) {
-    console.log('datetime show');
-    var spanDatetime = valEle.nextAll("#extra_datetime_select");
-    spanDatetime.children('#sp_criteria_extra_datetime_select_' + index).removeAttr("disabled");
-    spanDatetime.show();
+  console.log("datetime show");
+  var spanDatetime = valEle.nextAll("#extra_datetime_select");
+  spanDatetime
+    .children("#sp_criteria_extra_datetime_select_" + index)
+    .removeAttr("disabled");
+  spanDatetime.show();
 
-    //make value input smaller since we have extra element now
-    var criteria_val = $('#sp_criteria_value_' + index);
-    sizeTextBoxes(criteria_val, 'sp_input_text', 'sp_extra_input_text');
+  //make value input smaller since we have extra element now
+  var criteria_val = $("#sp_criteria_value_" + index);
+  sizeTextBoxes(criteria_val, "sp_input_text", "sp_extra_input_text");
 }
 /* Utilizing jQuery this function finds the #datetime_select element on the given row
  * and hides the datetime criteria drop-down
  */
 
 function disableAndHideExtraDateTimeDropdown(valEle, index) {
-    console.log('datetime hide');
-    var spanDatetime = valEle.nextAll("#extra_datetime_select");
-    spanDatetime.children('#sp_criteria_extra_datetime_select_' + index).val("").attr("disabled", "disabled");
-    spanDatetime.hide();
+  console.log("datetime hide");
+  var spanDatetime = valEle.nextAll("#extra_datetime_select");
+  spanDatetime
+    .children("#sp_criteria_extra_datetime_select_" + index)
+    .val("")
+    .attr("disabled", "disabled");
+  spanDatetime.hide();
 
-    //make value input larger since we don't have extra field now
-    var criteria_value = $('#sp_criteria_value_' + index);
-    sizeTextBoxes(criteria_value, 'sp_extra_input_text', 'sp_input_text');
+  //make value input larger since we don't have extra field now
+  var criteria_value = $("#sp_criteria_value_" + index);
+  sizeTextBoxes(criteria_value, "sp_extra_input_text", "sp_input_text");
 }
 
 function enableAndShowExtraField(valEle, index) {
-    var spanExtra = valEle.nextAll("#extra_criteria");
-    console.log('shown');
-    spanExtra.children('#sp_criteria_extra_' + index).removeAttr("disabled");
-    spanExtra.show();
+  var spanExtra = valEle.nextAll("#extra_criteria");
+  console.log("shown");
+  spanExtra.children("#sp_criteria_extra_" + index).removeAttr("disabled");
+  spanExtra.show();
 
-    //make value input smaller since we have extra element now
-    var criteria_val = $('#sp_criteria_value_' + index);
-    sizeTextBoxes(criteria_val, 'sp_input_text', 'sp_extra_input_text');
+  //make value input smaller since we have extra element now
+  var criteria_val = $("#sp_criteria_value_" + index);
+  sizeTextBoxes(criteria_val, "sp_input_text", "sp_extra_input_text");
 }
 
 function disableAndHideExtraField(valEle, index) {
-    var spanExtra = valEle.nextAll("#extra_criteria");
-    spanExtra.children('#sp_criteria_extra_' + index).val("").attr("disabled", "disabled");
-    spanExtra.hide();
-    console.log('hidden');
+  var spanExtra = valEle.nextAll("#extra_criteria");
+  spanExtra
+    .children("#sp_criteria_extra_" + index)
+    .val("")
+    .attr("disabled", "disabled");
+  spanExtra.hide();
+  console.log("hidden");
 
-    //make value input larger since we don't have extra field now
-    var criteria_value = $('#sp_criteria_value_' + index);
-    sizeTextBoxes(criteria_value, 'sp_extra_input_text', 'sp_input_text');
+  //make value input larger since we don't have extra field now
+  var criteria_value = $("#sp_criteria_value_" + index);
+  sizeTextBoxes(criteria_value, "sp_extra_input_text", "sp_input_text");
 }
 function disableAndHideLimitValue() {
-    console.log('we hide it');
-    $('#sp_limit_value').hide();
+  console.log("we hide it");
+  $("#sp_limit_value").hide();
 }
 function enableAndShowLimitValue() {
-    console.log('we show it');
-    $('#sp_limit_value').show();
+  console.log("we show it");
+  $("#sp_limit_value").show();
 }
 
 function sizeTextBoxes(ele, classToRemove, classToAdd) {
-    if (ele.hasClass(classToRemove)) {
-        ele.removeClass(classToRemove).addClass(classToAdd);
-    }
+  if (ele.hasClass(classToRemove)) {
+    ele.removeClass(classToRemove).addClass(classToAdd);
+  }
 }
 
 function populateModifierSelect(e, popAllMods) {
+  var criteria_type = getCriteriaOptionType(e),
+    index = getRowIndex($(e).parent()),
+    divs;
 
-    var criteria_type = getCriteriaOptionType(e),
-        index = getRowIndex($(e).parent()),
-        divs;
+  if (popAllMods) {
+    index = index.substring(0, 1);
+  }
+  divs = $(e)
+    .parents()
+    .find('select[id^="sp_criteria_modifier_' + index + '"]');
 
-    if (popAllMods) {
-        index = index.substring(0, 1);
+  $.each(divs, function (i, div) {
+    $(div).children().remove();
+
+    if (criteria_type == "s") {
+      $.each(stringCriteriaOptions, function (key, value) {
+        $(div).append($("<option></option>").attr("value", key).text(value));
+      });
+    } else if (criteria_type == "d") {
+      $.each(dateTimeCriteriaOptions, function (key, value) {
+        $(div).append($("<option></option>").attr("value", key).text(value));
+      });
+    } else if (criteria_type == "tt") {
+      $.each(stringIsNotOptions, function (key, value) {
+        $(div).append($("<option></option>").attr("value", key).text(value));
+      });
+    } else {
+      $.each(numericCriteriaOptions, function (key, value) {
+        $(div).append($("<option></option>").attr("value", key).text(value));
+      });
     }
-    divs = $(e).parents().find('select[id^="sp_criteria_modifier_' + index + '"]');
-
-    $.each(divs, function (i, div) {
-        $(div).children().remove();
-
-        if (criteria_type == 's') {
-            $.each(stringCriteriaOptions, function (key, value) {
-                $(div).append($('<option></option>')
-                    .attr('value', key)
-                    .text(value));
-            });
-        }
-        else if (criteria_type == 'd') {
-            $.each(dateTimeCriteriaOptions, function (key, value) {
-                $(div).append($('<option></option>')
-                    .attr('value', key)
-                    .text(value));
-            });
-        }
-        else if (criteria_type == 'tt') {
-            $.each(stringIsNotOptions, function (key, value) {
-                $(div).append($('<option></option>')
-                    .attr('value', key)
-                    .text(value));
-            });
-        }
-        else {
-            $.each(numericCriteriaOptions, function (key, value) {
-                $(div).append($('<option></option>')
-                    .attr('value', key)
-                    .text(value));
-            });
-        }
-    });
+  });
 }
 
 function populateTracktypeSelect(e, popAllMods) {
+  var criteria_type = getTracktype(e),
+    index = getRowIndex($(e).parent()),
+    divs;
 
-    var criteria_type = getTracktype(e),
-        index = getRowIndex($(e).parent()),
-        divs;
-
-    if (popAllMods) {
-        index = index.substring(0, 1);
-    }
-    divs = $(e).parents().find('select[id^="sp_criteria_modifier_' + index + '"]');
-    $.each(divs, function (i, div) {
-        $(div).children().remove();
-        $.each(stringIsNotOptions, function (key, value) {
-            $(div).append($('<option></option>')
-                .attr('value', key)
-                .text(value));
-        });
+  if (popAllMods) {
+    index = index.substring(0, 1);
+  }
+  divs = $(e)
+    .parents()
+    .find('select[id^="sp_criteria_modifier_' + index + '"]');
+  $.each(divs, function (i, div) {
+    $(div).children().remove();
+    $.each(stringIsNotOptions, function (key, value) {
+      $(div).append($("<option></option>").attr("value", key).text(value));
     });
+  });
 }
 
 function getCriteriaOptionType(e) {
-    var criteria = $(e).val();
-    return criteriaTypes[criteria];
+  var criteria = $(e).val();
+  return criteriaTypes[criteria];
 }
 
 function getTracktype(e) {
-    var type = $(e).val();
-    return stringTracktypeOptions[type];
+  var type = $(e).val();
+  return stringTracktypeOptions[type];
 }
 
 function callback(json, type) {
-    var dt = $('table[id="library_display"]').dataTable(),
-        form = $('.active-tab .smart-block-form');
+  var dt = $('table[id="library_display"]').dataTable(),
+    form = $(".active-tab .smart-block-form");
 
-    if (json.modified !== undefined) {
-        AIRTIME.playlist.setModified(json.modified);
+  if (json.modified !== undefined) {
+    AIRTIME.playlist.setModified(json.modified);
+  }
+
+  if (type == "shuffle" || type == "generate") {
+    if (json.error !== undefined) {
+      alert(json.error);
     }
+    if (json.result == "0") {
+      if (type == "shuffle") {
+        form.find(".success").text($.i18n._("Smart block shuffled"));
+      } else if (type == "generate") {
+        form
+          .find(".success")
+          .text($.i18n._("Smart block generated and criteria saved"));
+        //redraw library table so the length gets updated
+        dt.fnStandingRedraw();
+      }
 
-    if (type == 'shuffle' || type == 'generate') {
-        if (json.error !== undefined) {
-            alert(json.error);
-        }
-        if (json.result == "0") {
-            if (type == 'shuffle') {
-                form.find('.success').text($.i18n._('Smart block shuffled'));
-            } else if (type == 'generate') {
-                form.find('.success').text($.i18n._('Smart block generated and criteria saved'));
-                //redraw library table so the length gets updated
-                dt.fnStandingRedraw();
-            }
+      AIRTIME.playlist.playlistResponse(json);
 
-            AIRTIME.playlist.playlistResponse(json);
+      form.find(".success").show();
+    }
+    removeButtonCheck();
 
-            form.find('.success').show();
-        }
-        removeButtonCheck();
+    form.find(".smart-block-form").removeClass("closed");
+  } else {
+    if (json.result == "0") {
+      $(".active-tab #sp-success-saved")
+        .text($.i18n._("Smart block saved"))
+        .show();
 
-        form.find('.smart-block-form').removeClass("closed");
+      AIRTIME.playlist.playlistResponse(json);
+
+      //redraw library table so the length gets updated
+      dt.fnStandingRedraw();
     } else {
-        if (json.result == "0") {
-            $('.active-tab #sp-success-saved').text($.i18n._('Smart block saved')).show();
-
-            AIRTIME.playlist.playlistResponse(json);
-
-            //redraw library table so the length gets updated
-            dt.fnStandingRedraw();
-        }
-        else {
-            AIRTIME.playlist.playlistResponse(json);
-            removeButtonCheck();
-        }
-        form.find('.smart-block-form').removeClass("closed");
+      AIRTIME.playlist.playlistResponse(json);
+      removeButtonCheck();
     }
-    setTimeout(removeSuccessMsg, 5000);
+    form.find(".smart-block-form").removeClass("closed");
+  }
+  setTimeout(removeSuccessMsg, 5000);
 }
 
 function appendAddButton() {
-    /*
+  /*
     var add_button = "<a class='btn btn-small' id='criteria_add'>" +
                      "<i class='icon-white icon-plus'></i>Add Criteria</a>";
     var rows = $('.active-tab .smart-block-form'),
@@ -856,7 +1015,7 @@ function appendAddButton() {
 }
 
 function removeButtonCheck() {
-    /*
+  /*
     var rows = $('.active-tab dd[id="sp_criteria-element"]').children('div'),
         enabled = rows.find('select[name^="sp_criteria_field"]:enabled'),
         rmv_button = enabled.siblings('a[id^="criteria_remove"]');
@@ -870,123 +1029,127 @@ function removeButtonCheck() {
 }
 
 function enableLoadingIcon() {
-    // Disable the default overlay style
-    $.blockUI.defaults.overlayCSS = {};
-    $(".side_playlist.active-tab").block({
-        //message: $.i18n._("Processing..."),
-        message: $.i18n._(""),
-        theme: true,
-        allowBodyStretch: true,
-        applyPlatformOpacityRules: false
-    });
+  // Disable the default overlay style
+  $.blockUI.defaults.overlayCSS = {};
+  $(".side_playlist.active-tab").block({
+    //message: $.i18n._("Processing..."),
+    message: $.i18n._(""),
+    theme: true,
+    allowBodyStretch: true,
+    applyPlatformOpacityRules: false,
+  });
 }
 
 function disableLoadingIcon() {
-    $(".side_playlist.active-tab").unblock()
+  $(".side_playlist.active-tab").unblock();
 }
 
 function groupCriteriaRows() {
-    // check whether rows should be "grouped" and shown with an "or" "logic label", or separated by an "and" "logic label"
-    var visibleRows = $("#sp_criteria-element > div:visible"),
-        prevRowGroup = "0";
+  // check whether rows should be "grouped" and shown with an "or" "logic label", or separated by an "and" "logic label"
+  var visibleRows = $("#sp_criteria-element > div:visible"),
+    prevRowGroup = "0";
 
-    visibleRows.each(function (index) {
-        if (index > 0) {
-            var fieldId = $(this).find('select[id^="sp_criteria_field"]').attr("id");
-            var currRowGroup = fieldId[fieldId.length - 3];
-            if (currRowGroup === prevRowGroup) {
-                $(this).prev().addClass("search-row-or").removeClass("search-row-and")
-            } else {
-                $(this).prev().addClass("search-row-and").removeClass("search-row-or")
-            }
-            prevRowGroup = currRowGroup;
-        }
-    });
+  visibleRows.each(function (index) {
+    if (index > 0) {
+      var fieldId = $(this).find('select[id^="sp_criteria_field"]').attr("id");
+      var currRowGroup = fieldId[fieldId.length - 3];
+      if (currRowGroup === prevRowGroup) {
+        $(this).prev().addClass("search-row-or").removeClass("search-row-and");
+      } else {
+        $(this).prev().addClass("search-row-and").removeClass("search-row-or");
+      }
+      prevRowGroup = currRowGroup;
+    }
+  });
 
-    // ensure spacing below last visible row
-    $("#sp_criteria-element > div:visible:last").addClass("search-row-and").removeClass("search-row-or");
+  // ensure spacing below last visible row
+  $("#sp_criteria-element > div:visible:last")
+    .addClass("search-row-and")
+    .removeClass("search-row-or");
 }
 
-
 // We need to know if the criteria value will be a string
 // or numeric value in order to populate the modifier
 // select list
 var criteriaTypes = {
-    0: "",
-    "album_title": "s",
-    "bit_rate": "n",
-    "bpm": "n",
-    "composer": "s",
-    "conductor": "s",
-    "copyright": "s",
-    "cuein": "n",
-    "cueout": "n",
-    "description": "s",
-    "artist_name": "s",
-    "encoded_by": "s",
-    "utime": "d",
-    "mtime": "d",
-    "lptime": "d",
-    "genre": "s",
-    "isrc_number": "s",
-    "label": "s",
-    "language": "s",
-    "length": "n",
-    "mime": "s",
-    "mood": "s",
-    "owner_id": "s",
-    "replay_gain": "n",
-    "sample_rate": "n",
-    "track_title": "s",
-    "track_number": "n",
-    "info_url": "s",
-    "year": "n",
-    "track_type_id": "tt"
+  0: "",
+  album_title: "s",
+  bit_rate: "n",
+  bpm: "n",
+  composer: "s",
+  conductor: "s",
+  copyright: "s",
+  cuein: "n",
+  cueout: "n",
+  description: "s",
+  artist_name: "s",
+  encoded_by: "s",
+  utime: "d",
+  mtime: "d",
+  lptime: "d",
+  genre: "s",
+  isrc_number: "s",
+  label: "s",
+  language: "s",
+  length: "n",
+  mime: "s",
+  mood: "s",
+  owner_id: "s",
+  replay_gain: "n",
+  sample_rate: "n",
+  track_title: "s",
+  track_number: "n",
+  info_url: "s",
+  year: "n",
+  track_type_id: "tt",
 };
 
 var stringCriteriaOptions = {
-    "0": $.i18n._("Select modifier"),
-    "contains": $.i18n._("contains"),
-    "does not contain": $.i18n._("does not contain"),
-    "is": $.i18n._("is"),
-    "is not": $.i18n._("is not"),
-    "starts with": $.i18n._("starts with"),
-    "ends with": $.i18n._("ends with")
+  0: $.i18n._("Select modifier"),
+  contains: $.i18n._("contains"),
+  "does not contain": $.i18n._("does not contain"),
+  is: $.i18n._("is"),
+  "is not": $.i18n._("is not"),
+  "starts with": $.i18n._("starts with"),
+  "ends with": $.i18n._("ends with"),
 };
 
 var numericCriteriaOptions = {
-    "0": $.i18n._("Select modifier"),
-    "is": $.i18n._("is"),
-    "is not": $.i18n._("is not"),
-    "is greater than": $.i18n._("is greater than"),
-    "is less than": $.i18n._("is less than"),
-    "is in the range": $.i18n._("is in the range")
+  0: $.i18n._("Select modifier"),
+  is: $.i18n._("is"),
+  "is not": $.i18n._("is not"),
+  "is greater than": $.i18n._("is greater than"),
+  "is less than": $.i18n._("is less than"),
+  "is in the range": $.i18n._("is in the range"),
 };
 
 var dateTimeCriteriaOptions = {
-    "0": $.i18n._("Select modifier"),
-    "before": $.i18n._("before"),
-    "after": $.i18n._("after"),
-    "between": $.i18n._("between"),
-    "is": $.i18n._("is"),
-    "is not": $.i18n._("is not"),
-    "is greater than": $.i18n._("is greater than"),
-    "is less than": $.i18n._("is less than"),
-    "is in the range": $.i18n._("is in the range")
+  0: $.i18n._("Select modifier"),
+  before: $.i18n._("before"),
+  after: $.i18n._("after"),
+  between: $.i18n._("between"),
+  is: $.i18n._("is"),
+  "is not": $.i18n._("is not"),
+  "is greater than": $.i18n._("is greater than"),
+  "is less than": $.i18n._("is less than"),
+  "is in the range": $.i18n._("is in the range"),
 };
 
 var stringIsNotOptions = {
-    "0": $.i18n._("Select modifier"),
-    "is": $.i18n._("is"),
-    "is not": $.i18n._("is not")
+  0: $.i18n._("Select modifier"),
+  is: $.i18n._("is"),
+  "is not": $.i18n._("is not"),
 };
 
-let tracktypes = {}
+let tracktypes = {};
 
 for (var key in TRACKTYPES) {
-    if (TRACKTYPES.hasOwnProperty(key)) {
-        tracktypes[key] = TRACKTYPES[key].name;;
-    }
+  if (TRACKTYPES.hasOwnProperty(key)) {
+    tracktypes[key] = TRACKTYPES[key].name;
+  }
 }
 
-var stringTracktypeOptions = Object.assign({ 0: "Select Track Type" }, tracktypes);
+var stringTracktypeOptions = Object.assign(
+  { 0: "Select Track Type" },
+  tracktypes
+);
diff --git a/legacy/public/js/airtime/playouthistory/configuretemplate.js b/legacy/public/js/airtime/playouthistory/configuretemplate.js
index 5a4ccbcf8..4b2021057 100644
--- a/legacy/public/js/airtime/playouthistory/configuretemplate.js
+++ b/legacy/public/js/airtime/playouthistory/configuretemplate.js
@@ -1,167 +1,170 @@
-var AIRTIME = (function(AIRTIME) {
-    var mod;
-    var $templateDiv;
-    var $templateList;
-    var $fileMDList;
+var AIRTIME = (function (AIRTIME) {
+  var mod;
+  var $templateDiv;
+  var $templateList;
+  var $fileMDList;
 
-    if (AIRTIME.itemTemplate === undefined) {
-        AIRTIME.itemTemplate = {};
+  if (AIRTIME.itemTemplate === undefined) {
+    AIRTIME.itemTemplate = {};
+  }
+  mod = AIRTIME.itemTemplate;
+
+  //config: name, type, filemd, required
+  function createTemplateLi(config) {
+    var templateRequired =
+      "<li " +
+      "data-name='<%= name %>' " +
+      "data-type='<%= type %>' " +
+      "data-filemd='<%= filemd %>'" +
+      "data-label='<%= label %>'" +
+      "class='<%= (filemd) ? 'field_filemd' : 'field_other'  %>'" +
+      ">" +
+      "<span><%= label %></span>" +
+      "<span><%= type %></span>" +
+      "</li>";
+
+    var templateOptional =
+      "<li " +
+      "data-name='<%= name %>' " +
+      "data-type='<%= type %>' " +
+      "data-filemd='<%= filemd %>'" +
+      "data-label='<%= label %>'" +
+      "class='<%= (filemd) ? 'field_filemd' : 'field_other'  %>'" +
+      ">" +
+      "<span><%= label %></span>" +
+      "<span><%= type %></span>" +
+      "<span class='template_item_remove'><i class='icon icon-trash'></i></span>" +
+      "</li>";
+
+    var template =
+      config.required === true ? templateRequired : templateOptional;
+
+    template = _.template(template);
+    var $li = $(template(config));
+
+    return $li;
+  }
+
+  //taken from
+  //http://stackoverflow.com/questions/1349404/generate-a-string-of-5-random-characters-in-javascript
+  function randomString(len, charSet) {
+    //can only use small letters to avoid DB query problems.
+    charSet = charSet || "abcdefghijklmnopqrstuvwxyz";
+    var randomString = "";
+    for (var i = 0; i < len; i++) {
+      var randomPoz = Math.floor(Math.random() * charSet.length);
+      randomString += charSet.substring(randomPoz, randomPoz + 1);
     }
-    mod = AIRTIME.itemTemplate;
+    return randomString;
+  }
 
-    //config: name, type, filemd, required
-    function createTemplateLi(config) {
-
-    	var templateRequired =
-    		"<li " +
-    		  "data-name='<%= name %>' " +
-    		  "data-type='<%= type %>' " +
-    		  "data-filemd='<%= filemd %>'" +
-    		  "data-label='<%= label %>'" +
-    		  "class='<%= (filemd) ? 'field_filemd' : 'field_other'  %>'" +
-    		 ">" +
-    			"<span><%= label %></span>" +
-    			"<span><%= type %></span>" +
-    		"</li>";
-
-    	var templateOptional =
-    		"<li " +
-    		  "data-name='<%= name %>' " +
-    		  "data-type='<%= type %>' " +
-    		  "data-filemd='<%= filemd %>'" +
-    		  "data-label='<%= label %>'" +
-    		  "class='<%= (filemd) ? 'field_filemd' : 'field_other'  %>'" +
-    		">" +
-    			"<span><%= label %></span>" +
-    			"<span><%= type %></span>" +
-    			"<span class='template_item_remove'><i class='icon icon-trash'></i></span>" +
-    		"</li>";
-
-    	var template = (config.required) === true ? templateRequired : templateOptional;
-
-    	template = _.template(template);
-    	var $li = $(template(config));
-
-    	return $li;
-    }
-
-    //taken from
-    //http://stackoverflow.com/questions/1349404/generate-a-string-of-5-random-characters-in-javascript
-    function randomString(len, charSet) {
-    	//can only use small letters to avoid DB query problems.
-        charSet = charSet || 'abcdefghijklmnopqrstuvwxyz';
-        var randomString = '';
-        for (var i = 0; i < len; i++) {
-        	var randomPoz = Math.floor(Math.random() * charSet.length);
-        	randomString += charSet.substring(randomPoz,randomPoz+1);
-        }
-        return randomString;
-    }
-
-    function addField(config) {
-
-    	$templateList.append(createTemplateLi(config));
-    }
-
-    function getFieldData($el) {
-
-    	return {
-    		name: $el.data("name"),
-    		type: $el.data("type"),
-    		label: $el.data("label"),
-    		isFileMd: $el.data("filemd")
-    	};
-
-    }
-
-    mod.onReady = function() {
-
-    	$templateDiv = $("#configure_item_template");
-    	$templateList = $(".template_item_list");
-    	$fileMDList = $(".template_file_md");
-
-    	$fileMDList.on("click", "i.icon-plus", function(){
-
-    		var $li = $(this).parents("li");
-			var config = {
-				name: $li.data("name"),
-				type: $li.data("type"),
-				label: $li.data("label"),
-				filemd: true,
-				required: false
-    		};
-
-			addField(config);
-			$li.remove();
-    	});
-
-    	$templateList.sortable();
-
-    	$templateDiv.on("click", ".template_item_remove", function() {
-    		$(this).parents("li").remove();
-    	});
-
-    	$templateDiv.on("click", ".template_item_add button", function() {
-    		var $div = $(this).parents("div.template_item_add"),
-    			$input = $div.find("input"),
-    			label = $input.val(),
-    			name;
-
-    		$input.val("");
-    		//create a string name that will work for all languages.
-    		name = randomString(10);
-
-    		var config = {
-				name: name,
-				label: label,
-				type: $div.find("select").val(),
-				filemd: false,
-				required: false
-    		};
-
-    		addField(config);
-    	});
-
-    	function updateTemplate(template_id, isDefault) {
-			var url = baseUrl+"Playouthistorytemplate/update-template/format/json";
-			var data = {};
-			var $lis, $li;
-			var i, len;
-			var templateName;
-
-			templateName = $("#template_name").val();
-			$lis = $templateList.children();
-
-			for (i = 0, len = $lis.length; i < len; i++) {
-				$li = $($lis[i]);
-
-				data[i] = getFieldData($li);
-			}
-
-			$.post(url, {'id': template_id, 'name': templateName, 'fields': data, 'setDefault': isDefault}, function(json) {
-				var x;
-			});
-    	}
-
-    	$templateDiv.on("click", "#template_item_save", function(){
-    		var template_id = $(this).data("template");
-
-    		updateTemplate(template_id, false);
-    	});
-
-    	$templateDiv.on("click", "#template_set_default", function() {
-    		var $btn = $(this),
-    			template_id = $btn.data("template"),
-				url = baseUrl+"Playouthistorytemplate/set-template-default/format/json";
-
-    		$btn.remove();
-			$.post(url, {id: template_id});
-    	});
+  function addField(config) {
+    $templateList.append(createTemplateLi(config));
+  }
 
+  function getFieldData($el) {
+    return {
+      name: $el.data("name"),
+      type: $el.data("type"),
+      label: $el.data("label"),
+      isFileMd: $el.data("filemd"),
     };
+  }
 
-return AIRTIME;
+  mod.onReady = function () {
+    $templateDiv = $("#configure_item_template");
+    $templateList = $(".template_item_list");
+    $fileMDList = $(".template_file_md");
 
-}(AIRTIME || {}));
+    $fileMDList.on("click", "i.icon-plus", function () {
+      var $li = $(this).parents("li");
+      var config = {
+        name: $li.data("name"),
+        type: $li.data("type"),
+        label: $li.data("label"),
+        filemd: true,
+        required: false,
+      };
+
+      addField(config);
+      $li.remove();
+    });
+
+    $templateList.sortable();
+
+    $templateDiv.on("click", ".template_item_remove", function () {
+      $(this).parents("li").remove();
+    });
+
+    $templateDiv.on("click", ".template_item_add button", function () {
+      var $div = $(this).parents("div.template_item_add"),
+        $input = $div.find("input"),
+        label = $input.val(),
+        name;
+
+      $input.val("");
+      //create a string name that will work for all languages.
+      name = randomString(10);
+
+      var config = {
+        name: name,
+        label: label,
+        type: $div.find("select").val(),
+        filemd: false,
+        required: false,
+      };
+
+      addField(config);
+    });
+
+    function updateTemplate(template_id, isDefault) {
+      var url = baseUrl + "Playouthistorytemplate/update-template/format/json";
+      var data = {};
+      var $lis, $li;
+      var i, len;
+      var templateName;
+
+      templateName = $("#template_name").val();
+      $lis = $templateList.children();
+
+      for (i = 0, len = $lis.length; i < len; i++) {
+        $li = $($lis[i]);
+
+        data[i] = getFieldData($li);
+      }
+
+      $.post(
+        url,
+        {
+          id: template_id,
+          name: templateName,
+          fields: data,
+          setDefault: isDefault,
+        },
+        function (json) {
+          var x;
+        }
+      );
+    }
+
+    $templateDiv.on("click", "#template_item_save", function () {
+      var template_id = $(this).data("template");
+
+      updateTemplate(template_id, false);
+    });
+
+    $templateDiv.on("click", "#template_set_default", function () {
+      var $btn = $(this),
+        template_id = $btn.data("template"),
+        url =
+          baseUrl + "Playouthistorytemplate/set-template-default/format/json";
+
+      $btn.remove();
+      $.post(url, { id: template_id });
+    });
+  };
+
+  return AIRTIME;
+})(AIRTIME || {});
 
 $(document).ready(AIRTIME.itemTemplate.onReady);
diff --git a/legacy/public/js/airtime/playouthistory/historytable.js b/legacy/public/js/airtime/playouthistory/historytable.js
index 7136563a8..6d870fe06 100644
--- a/legacy/public/js/airtime/playouthistory/historytable.js
+++ b/legacy/public/js/airtime/playouthistory/historytable.js
@@ -1,948 +1,1023 @@
-var AIRTIME = (function(AIRTIME) {
-    var mod;
+var AIRTIME = (function (AIRTIME) {
+  var mod;
 
-    if (AIRTIME.history === undefined) {
-        AIRTIME.history = {};
-    }
-    mod = AIRTIME.history;
+  if (AIRTIME.history === undefined) {
+    AIRTIME.history = {};
+  }
+  mod = AIRTIME.history;
 
-    var $historyContentDiv;
+  var $historyContentDiv;
 
-    var lengthMenu = [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, $.i18n._("All")]];
+  var lengthMenu = [
+    [10, 25, 50, 100, 500, -1],
+    [10, 25, 50, 100, 500, $.i18n._("All")],
+  ];
 
-    var sDom = 'l<"dt-process-rel"r><"H"><"dataTables_scrolling"t><"F"ip>';
+  var sDom = 'l<"dt-process-rel"r><"H"><"dataTables_scrolling"t><"F"ip>';
 
-    var selectedLogItems = {};
+  var selectedLogItems = {};
 
-    var dateStartId = "#his_date_start",
-		timeStartId = "#his_time_start",
-		dateEndId = "#his_date_end",
-		timeEndId = "#his_time_end",
+  var dateStartId = "#his_date_start",
+    timeStartId = "#his_time_start",
+    dateEndId = "#his_date_end",
+    timeEndId = "#his_time_end",
+    oTableAgg,
+    oTableItem,
+    oTableShow,
+    inShowsTab = false;
 
-		oTableAgg,
-		oTableItem,
-		oTableShow,
-		inShowsTab = false;
+  function validateTimeRange() {
+    var oRange,
+      inputs = $(".his-timerange > input"),
+      start,
+      end;
 
-    function validateTimeRange() {
-    	var oRange,
-    		inputs = $('.his-timerange > input'),
-    		start, end;
+    oRange = AIRTIME.utilities.fnGetScheduleRange(
+      dateStartId,
+      timeStartId,
+      dateEndId,
+      timeEndId
+    );
 
-    	oRange = AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId, dateEndId, timeEndId);
+    start = oRange.start;
+    end = oRange.end;
 
-    	start = oRange.start;
-    	end = oRange.end;
-
-    	if (end >= start) {
-    		inputs.removeClass('error');
-    	}
-    	else {
-    		inputs.addClass('error');
-		}
-
-        return {
-        	start: start,
-       	 	end: end,
-       	 	isValid: end >= start
-        };
-   }
-
-    function getSelectedLogItems() {
-    	var items = Object.keys(selectedLogItems);
-
-    	return items;
+    if (end >= start) {
+      inputs.removeClass("error");
+    } else {
+      inputs.addClass("error");
     }
 
-    function addSelectedLogItem($el) {
-    	var id;
+    return {
+      start: start,
+      end: end,
+      isValid: end >= start,
+    };
+  }
 
-    	$el.addClass("his-selected");
-    	id = $el.data("his-id");
-    	selectedLogItems[id] = "";
+  function getSelectedLogItems() {
+    var items = Object.keys(selectedLogItems);
+
+    return items;
+  }
+
+  function addSelectedLogItem($el) {
+    var id;
+
+    $el.addClass("his-selected");
+    id = $el.data("his-id");
+    selectedLogItems[id] = "";
+  }
+
+  function removeSelectedLogItem($el) {
+    var id;
+
+    $el.removeClass("his-selected");
+    id = $el.data("his-id");
+    delete selectedLogItems[id];
+  }
+
+  function emptySelectedLogItems() {
+    var $inputs = $historyContentDiv.find(".his_checkbox").find("input");
+
+    $inputs.prop("checked", false);
+    $inputs.parents("tr").removeClass("his-selected");
+
+    selectedLogItems = {};
+  }
+
+  function selectCurrentPage(e) {
+    var $ctx = $(e.currentTarget).parents("div.dataTables_wrapper"),
+      $inputs = $ctx.find(".his_checkbox").find("input"),
+      $tr,
+      $input;
+
+    $.each($inputs, function (index, input) {
+      $input = $(input);
+      $input.prop("checked", true);
+      $tr = $input.parents("tr");
+      addSelectedLogItem($tr);
+    });
+  }
+
+  function deselectCurrentPage(e) {
+    var $ctx = $(e.currentTarget).parents("div.dataTables_wrapper"),
+      $inputs = $ctx.find(".his_checkbox").find("input"),
+      $tr,
+      $input;
+
+    $.each($inputs, function (index, input) {
+      $input = $(input);
+      $input.prop("checked", false);
+      $tr = $input.parents("tr");
+      removeSelectedLogItem($tr);
+    });
+  }
+
+  function getFileName(ext) {
+    var filename =
+      $("#his_date_start").val() +
+      "_" +
+      $("#his_time_start").val() +
+      "m--" +
+      $("#his_date_end").val() +
+      "_" +
+      $("#his_time_end").val() +
+      "m";
+    filename = filename.replace(/:/g, "h");
+
+    if (ext == "pdf") {
+      filename = filename + ".pdf";
+    } else {
+      filename = filename + ".csv";
+    }
+    return filename;
+  }
+
+  /* This callback can be used for all history tables */
+  function fnServerData(sSource, aoData, fnCallback) {
+    if (fnServerData.hasOwnProperty("start")) {
+      aoData.push({ name: "start", value: fnServerData.start });
+    }
+    if (fnServerData.hasOwnProperty("end")) {
+      aoData.push({ name: "end", value: fnServerData.end });
+    }
+    if (fnServerData.hasOwnProperty("instance")) {
+      aoData.push({ name: "instance_id", value: fnServerData.instance });
     }
 
-    function removeSelectedLogItem($el) {
-    	var id;
+    aoData.push({ name: "format", value: "json" });
 
-    	$el.removeClass("his-selected");
-    	id = $el.data("his-id");
-    	delete selectedLogItems[id];
+    $.ajax({
+      dataType: "json",
+      type: "GET",
+      url: sSource,
+      data: aoData,
+      success: fnCallback,
+    });
+  }
+
+  function createShowAccordSection(config) {
+    var template, $el;
+
+    template =
+      "<h3>" +
+      "<a href='#'>" +
+      "<span class='show-title'><%= name %></span>" +
+      "<span class='push-right'>" +
+      "<span class='show-date'><%= date %></span>" +
+      "<span class='show-time'><%= startTime %></span>" +
+      "-" +
+      "<span class='show-time'><%= endTime %></span>" +
+      "</span>" +
+      "</a>" +
+      "</h3>" +
+      "<div " +
+      "data-instance='<%= instance %>' " +
+      "></div>";
+
+    template = _.template(template);
+    $el = $(template(config));
+
+    return $el;
+  }
+
+  //$el is the div in the accordian we should create the table on.
+  function createShowTable($el) {
+    var instance = $el.data("instance");
+    var $table = $("<table/>", {
+      cellpadding: "0",
+      cellspacing: "0",
+      class: "datatable",
+      id: "history_table_show",
+    });
+
+    //assign the retrieval function the show instance id.
+    fnServerData.instance = instance;
+    $el.append($table);
+    $el.css("height", "auto");
+    oTableShow = itemHistoryTable("history_table_show");
+  }
+
+  function drawShowList(oShows) {
+    var $showList = $historyContentDiv.find("#history_show_summary"),
+      i,
+      len,
+      $accordSection,
+      show,
+      tmp;
+
+    $showList.accordion("destroy").empty();
+
+    for (i = 0, len = oShows.length; i < len; i++) {
+      show = oShows[i];
+      tmp = show.starts.split(" ");
+
+      $accordSection = createShowAccordSection({
+        instance: show.instance_id,
+        name: show.name,
+        date: tmp[0],
+        startTime: tmp[1],
+        endTime: show.ends.split(" ").pop(),
+      });
+
+      $showList.append($accordSection);
     }
 
-    function emptySelectedLogItems() {
-    	var $inputs = $historyContentDiv.find(".his_checkbox").find("input");
-
-    	$inputs.prop('checked', false);
-    	$inputs.parents("tr").removeClass("his-selected");
-
-    	selectedLogItems = {};
-    }
-
-    function selectCurrentPage(e) {
-    	var $ctx = $(e.currentTarget).parents("div.dataTables_wrapper"),
-    		$inputs = $ctx.find(".his_checkbox").find("input"),
-    		$tr,
-    		$input;
-
-    	$.each($inputs, function(index, input) {
-    		$input = $(input);
-    		$input.prop('checked', true);
-    		$tr = $input.parents("tr");
-    		addSelectedLogItem($tr);
-		});
-    }
-
-    function deselectCurrentPage(e) {
-    	var $ctx = $(e.currentTarget).parents("div.dataTables_wrapper"),
-    		$inputs = $ctx.find(".his_checkbox").find("input"),
-			$tr,
-			$input;
-
-		$.each($inputs, function(index, input) {
-			$input = $(input);
-			$input.prop('checked', false);
-			$tr = $input.parents("tr");
-			removeSelectedLogItem($tr);
-		});
-    }
-
-    function getFileName(ext){
-        var filename = $("#his_date_start").val()+"_"+$("#his_time_start").val()+"m--"+$("#his_date_end").val()+"_"+$("#his_time_end").val()+"m";
-        filename = filename.replace(/:/g,"h");
-
-        if (ext == "pdf"){
-            filename = filename+".pdf";
-        }
-        else {
-            filename = filename+".csv";
-        }
-        return filename;
-    }
-
-    /* This callback can be used for all history tables */
-    function fnServerData( sSource, aoData, fnCallback ) {
-
-    	if (fnServerData.hasOwnProperty("start")) {
-			aoData.push( { name: "start", value: fnServerData.start} );
-		}
-		if (fnServerData.hasOwnProperty("end")) {
-			aoData.push( { name: "end", value: fnServerData.end} );
-		}
-		if (fnServerData.hasOwnProperty("instance")) {
-			aoData.push( { name: "instance_id", value: fnServerData.instance} );
-		}
-
-        aoData.push( { name: "format", value: "json"} );
-
-        $.ajax( {
-            "dataType": 'json',
-            "type": "GET",
-            "url": sSource,
-            "data": aoData,
-            "success": fnCallback
-        } );
-    }
-
-    function createShowAccordSection(config) {
-    	var template,
-    		$el;
-
-    	template =
-    		"<h3>" +
-    	      "<a href='#'>" +
-    	        "<span class='show-title'><%= name %></span>" +
-    	        "<span class='push-right'>" +
-    	          "<span class='show-date'><%= date %></span>" +
-  			      "<span class='show-time'><%= startTime %></span>" +
-  			      "-" +
-  			      "<span class='show-time'><%= endTime %></span>" +
-  			    "</span>" +
-    	      "</a>" +
-    	    "</h3>" +
-    	 "<div " +
-    	    "data-instance='<%= instance %>' " +
-    	 "></div>";
-
-    	template = _.template(template);
-    	$el = $(template(config));
-
-    	return $el;
-    }
-
-    //$el is the div in the accordian we should create the table on.
-    function createShowTable($el) {
-
-    	var instance = $el.data("instance");
-    	var $table = $("<table/>", {
-			'cellpadding': "0",
-			'cellspacing': "0",
-			'class': "datatable",
-			'id': "history_table_show"
-		});
-
-    	//assign the retrieval function the show instance id.
-    	fnServerData.instance = instance;
-    	$el.append($table);
-    	$el.css("height", "auto");
-    	oTableShow = itemHistoryTable("history_table_show");
-    }
-
-    function drawShowList(oShows) {
-    	var $showList = $historyContentDiv.find("#history_show_summary"),
-    		i,
-    		len,
-    		$accordSection,
-    		show,
-    		tmp;
-
-    	$showList
-    		.accordion( "destroy" )
-    		.empty();
-
-    	for (i = 0, len = oShows.length; i < len; i++) {
-    		show = oShows[i];
-    		tmp = show.starts.split(" ");
-
-    		$accordSection = createShowAccordSection({
-    			instance: show.instance_id,
-    			name: show.name,
-    			date: tmp[0],
-    			startTime: tmp[1],
-    			endTime: show.ends.split(" ").pop()
-    		});
-
-    		$showList.append($accordSection);
-    	}
-
-    	$showList.accordion({
-    		animated: false,
-    		create: function( event, ui ) {
-    			var $div = $showList.find(".ui-accordion-content-active");
-				console.log(event);
-				//$div.css()
-    			createShowTable($div);
-    		},
-		    change: function( event, ui ) {
-		    	var $div = $(ui.newContent);
-		    	$(ui.oldContent).empty();
-		    	createShowTable($div);
-		    	selectedLogItems = {};
-		    }
-		    //changestart: function( event, ui ) {}
-		});
-    }
-
-    function createToolbarButtons ($el) {
-        var $menu = $("<div class='btn-toolbar' />");
-
-		$menu.append("<div class='btn-group'>" +
-				"<button class='btn btn-small btn-new' id='his_create'>" +
-				"<i class='icon-white icon-plus'></i>" +
-				$.i18n._("New Log Entry") +
-				"</button>" +
-			"</div>");
-
-		$menu.append("<div class='btn-group'>" +
-            "<button class='btn btn-small dropdown-toggle' data-toggle='dropdown'>" +
-                $.i18n._("Select")+" <span class='caret'></span>" +
-            "</button>" +
-            "<ul class='dropdown-menu'>" +
-                "<li class='his-select-page'><a href='#'>"+$.i18n._("Select this page")+"</a></li>" +
-                "<li class='his-dselect-page'><a href='#'>"+$.i18n._("Deselect this page")+"</a></li>" +
-                "<li class='his-dselect-all'><a href='#'>"+$.i18n._("Deselect all")+"</a></li>" +
-            "</ul>" +
-		"</div>");
-
-		$menu.append("<div class='btn-group'>" +
-            "<button class='btn btn-small dropdown-toggle' data-toggle='dropdown'>" +
-                $.i18n._("Export")+" <span class='caret'></span>" +
-            "</button>" +
-            "<ul class='dropdown-menu'>" +
-                "<li id='csv_export'><a href='#'>"+$.i18n._("Export as CSV")+"</a></li>" +
-                "<li id='pdf_export'><a href='#'>"+$.i18n._("Export as PDF")+"</a></li>" +
-            "</ul>" +
-		"</div>");
-
-        $menu.append("<div class='btn-group'>" +
-            "<button class='btn btn-small' id='his_trash'>" +
-                "<i class='icon-white icon-trash'></i>" +
-            "</button>" +
-		"</div>");
-
-        $el.append($menu);
-    }
-
-    function aggregateHistoryTable() {
-        var oTable,
-        	$historyTableDiv = $historyContentDiv.find("#history_table_aggregate"),
-        	columns,
-        	fnRowCallback;
-
-        fnRowCallback = function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
-        	var editUrl = baseUrl+"playouthistory/edit-file-item/id/"+aData.file_id,
-        		$nRow = $(nRow);
-
-        	$nRow.data('url-edit', editUrl);
-        };
-
-        columns = JSON.parse(localStorage.getItem('datatables-historyfile-aoColumns'));
-
-        oTable = $historyTableDiv.dataTable( {
-
-            "aoColumns": columns,
-
-            "bProcessing": true,
-            "bServerSide": true,
-            "sAjaxSource": baseUrl+"playouthistory/file-history-feed",
-            "sAjaxDataProp": "history",
-            "fnServerData": fnServerData,
-            "fnRowCallback": fnRowCallback,
-            "oLanguage": getDatatablesStrings({
-                "sEmptyTable": $.i18n._("No tracks were played during the selected time period."),
-                "sInfoEmpty":      $.i18n._("Showing 0 to 0 of 0 tracks"),
-                "sInfo":           $.i18n._("Showing _START_ to _END_ of _TOTAL_ tracks"),
-                "sInfoEmpty":      $.i18n._("Showing 0 to 0 of 0 tracks"),
-                "sInfoFiltered":   $.i18n._("(filtered from _MAX_ total tracks)"),
-            }),
-            "aLengthMenu": lengthMenu,
-            "iDisplayLength": 25,
-            "sPaginationType": "full_numbers",
-            "bJQueryUI": true,
-            "bAutoWidth": true,
-            "sDom": sDom,
-        });
-        oTable.fnSetFilteringDelay(350);
-
-        return oTable;
-    }
-
-    function itemHistoryTable(id) {
-        var oTable,
-        	$historyTableDiv = $historyContentDiv.find("#"+id),
-        	$toolbar,
-        	columns,
-        	fnRowCallback,
-        	booleans = {},
-        	i, c;
-
-        columns = JSON.parse(localStorage.getItem('datatables-historyitem-aoColumns'));
-
-        for (i in columns) {
-
-        	c = columns[i];
-        	if (c["sDataType"] === "boolean") {
-        		booleans[c["mDataProp"]] = c["sTitle"];
-        	}
-        }
-
-        fnRowCallback = function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
-        	var editUrl = baseUrl+"playouthistory/edit-list-item/id/"+aData.history_id,
-        		deleteUrl = baseUrl+"playouthistory/delete-list-item/id/"+aData.history_id,
-        		emptyCheckBox = String.fromCharCode(parseInt(2610, 16)),
-        		checkedCheckBox = String.fromCharCode(parseInt(2612, 16)),
-        		b,
-        		text,
-        		$nRow = $(nRow);
-
-        	 // add checkbox
-            $nRow.find('td.his_checkbox').html("<input type='checkbox' name='cb_"+aData.history_id+"'>");
-
-            $nRow.data('his-id', aData.history_id);
-            $nRow.data('url-edit', editUrl);
-            $nRow.data('url-delete', deleteUrl);
-
-        	for (b in booleans) {
-
-            	text = aData[b] ? checkedCheckBox : emptyCheckBox;
-            	text = text + " " + booleans[b];
-
-            	$nRow.find(".his_"+b).html(text);
-            }
-        };
-
-		oTable = $historyTableDiv.dataTable( {
-
-		"aoColumns": columns,
-            "bProcessing": true,
-            "bServerSide": true,
-            "sAjaxSource": baseUrl+"playouthistory/item-history-feed",
-            "sAjaxDataProp": "history",
-            "fnServerData": fnServerData,
-            "fnRowCallback": fnRowCallback,
-            "oLanguage": getDatatablesStrings({
-                "sEmptyTable": $.i18n._("No tracks were played during the selected time period."),
-                "sInfoEmpty":      $.i18n._("Showing 0 to 0 of 0 tracks"),
-                "sInfo":           $.i18n._("Showing _START_ to _END_ of _TOTAL_ tracks"),
-                "sInfoEmpty":      $.i18n._("Showing 0 to 0 of 0 tracks"),
-                "sInfoFiltered":   $.i18n._("(filtered from _MAX_ total tracks)"),
-            }),
-			"aLengthMenu": lengthMenu,
-            "iDisplayLength": 25,
-            "sPaginationType": "full_numbers",
-            "bJQueryUI": true,
-            "bAutoWidth": true,
-            "sDom": sDom,
-        });
-        oTable.fnSetFilteringDelay(350);
-
-        $toolbar = $historyTableDiv.parents(".dataTables_wrapper").find(".fg-toolbar:first");
-        createToolbarButtons($toolbar);
-
-        return oTable;
-    }
-
-    function showSummaryList(start, end) {
-    	var url = baseUrl+"playouthistory/show-history-feed",
-    		data = {
-    			format: "json",
-	    		start: start,
-	    	    end: end
-	    	};
-
-    	$.post(url, data, function(json) {
-    		drawShowList(json);
-    	});
-    }
-
-    mod.onReady = function() {
-
-    	var oBaseDatePickerSettings,
-    		oBaseTimePickerSettings,
-    		$hisDialogEl,
-
-    		tabsInit = [
-    		    {
-    		    	initialized: false,
-    		    	initialize: function() {
-    		    		oTableItem = itemHistoryTable("history_table_list");
-    		    	},
-    		    	navigate: function() {
-    		    		delete fnServerData.instance;
-    		    		oTableItem.fnDraw();
-    		    	},
-    		    	always: function() {
-    		    		inShowsTab = false;
-    		    		emptySelectedLogItems();
-    		    	}
-    		    },
-    		    {
-    		    	initialized: false,
-    		    	initialize: function() {
-    		    		oTableAgg = aggregateHistoryTable();
-    		    	},
-    		    	navigate: function() {
-    		    		delete fnServerData.instance;
-    		    		oTableAgg.fnDraw();
-    		    	},
-    		    	always: function() {
-    		    		inShowsTab = false;
-    		    		emptySelectedLogItems();
-    		    	}
-    		    },
-    		    {
-    		    	initialized: false,
-    		    	initialize: function() {
-
-    		    	},
-    		    	navigate: function() {
-
-    		    	},
-    		    	always: function() {
-    		    		inShowsTab = true;
-
-    		    		var info = getStartEnd();
-    		    		showSummaryList(info.start, info.end);
-    		    		emptySelectedLogItems();
-    		    	}
-    		    }
-    		];
-
-    	//set the locale names for the bootstrap calendar.
-    	$.fn.datetimepicker.dates = {
-    		daysMin: i18n_days_short,
-    		months: i18n_months,
-    		monthsShort: i18n_months_short
-    	};
-
-
-    	$historyContentDiv = $("#history_content");
-
-    	function redrawTables() {
-    		oTableAgg && oTableAgg.fnDraw();
-    		oTableItem && oTableItem.fnDraw();
-    		oTableShow && oTableShow.fnDraw();
-    	}
-
-    	function removeHistoryDialog() {
-    		$hisDialogEl.dialog("destroy");
-        	$hisDialogEl.remove();
-    	}
-
-    	function initializeDialog() {
-    		var $startPicker = $hisDialogEl.find('#his_item_starts_datetimepicker'),
-    			$endPicker = $hisDialogEl.find('#his_item_ends_datetimepicker');
-
-        	$startPicker.datetimepicker();
-
-        	$endPicker.datetimepicker({
-        		showTimeFirst: true
-        	});
-
-        	$startPicker.on('changeDate', function(e) {
-        		$endPicker.data('datetimepicker').setLocalDate(e.localDate);
-    		});
-    	}
-
-    	function processDialogHtml($el) {
-
-    		if (inShowsTab) {
-    			$el.find("#his_choose_instance").remove();
-    		}
-
-    		return $el
-    	}
-
-    	function makeHistoryDialog(html) {
-    		$hisDialogEl = $(html);
-    		$hisDialogEl = processDialogHtml($hisDialogEl);
-
-    		$hisDialogEl.dialog({
-    	        title: $.i18n._("Edit History Record"),
-    	        modal: false,
-    	        open: function( event, ui ) {
-    	        	initializeDialog();
-    	        },
-    	        close: function() {
-    	        	removeHistoryDialog();
-    	        }
-    	    });
-		}
-
-		hisSubmit(); // Fixes display bug
-
-    	/*
-         * Icon hover states for search.
-         */
-    	$historyContentDiv.on("mouseenter", ".his-timerange .ui-button", function(ev) {
-        	$(this).addClass("ui-state-hover");
-        });
-    	$historyContentDiv.on("mouseleave", ".his-timerange .ui-button", function(ev) {
-        	$(this).removeClass("ui-state-hover");
-        });
-
-    	oBaseDatePickerSettings = {
-    		dateFormat: 'yy-mm-dd',
-            //i18n_months, i18n_days_short are in common.js
-            monthNames: i18n_months,
-            dayNamesMin: i18n_days_short,
-    		onSelect: function(sDate, oDatePicker) {
-    			$(this).datepicker( "setDate", sDate );
-    		},
-    		onClose: validateTimeRange
-    	};
-
-    	oBaseTimePickerSettings = {
-    		showPeriodLabels: false,
-    		showCloseButton: true,
-            closeButtonText: $.i18n._("Done"),
-    		showLeadingZero: false,
-    		defaultTime: '0:00',
-            hourText: $.i18n._("Hour"),
-            minuteText: $.i18n._("Minute"),
-            onClose: validateTimeRange
-    	};
-
-    	$historyContentDiv.find(dateStartId)
-    		.datepicker(oBaseDatePickerSettings)
-    		.blur(validateTimeRange);
-
-    	$historyContentDiv.find(timeStartId)
-    		.timepicker(oBaseTimePickerSettings)
-    		.blur(validateTimeRange);
-
-    	$historyContentDiv.find(dateEndId)
-    		.datepicker(oBaseDatePickerSettings)
-    		.blur(validateTimeRange);
-
-    	$historyContentDiv.find(timeEndId)
-    		.timepicker(oBaseTimePickerSettings)
-    		.blur(validateTimeRange);
-
-    	$historyContentDiv.on("click", "#his_create", function(e) {
-    		var url = baseUrl+"playouthistory/edit-list-item/format/json"	;
-
-    		e.preventDefault();
-
-    		$.get(url, function(json) {
-
-    			makeHistoryDialog(json.dialog);
-
-    		}, "json");
-		});
-
-		$historyContentDiv.on("click", "#pdf_export", async function(){
-			// Get date/time from pickers
-			var startDay = document.querySelector('#his_date_start').value;
-			var startTime = document.querySelector('#his_time_start').value;
-			var endDay = document.querySelector('#his_date_end').value;
-			var endTime = document.querySelector('#his_time_end').value;
-
-			var url = baseUrl + "api/item-history-feed?start=" + startDay + " " + startTime + "&end=" + endDay + " " + endTime;
-			var requestData = await fetch(url);
-			var hisData = await requestData.json();
-
-			if (!hisData.length) {
-				alert("The date range selected doesn't have any items to export.");
-				return
-			} else {
-				// Generate PDF template
-				var dd = {
-					content: [
-						{text: 'Libretime', style: 'subheader'},
-						{text: 'Playout History from ' + startDay + ' ' + startTime + ' to ' + endDay + ' ' + endTime, style: 'header'},
-						{
-							style: 'mainTable',
-							table: {
-								headerRows: 1,
-								body: [
-									[{text: 'Start Time', style: 'tableHeader'}, {text: 'End Time', style: 'tableHeader'}, {text: 'Song', style: 'tableHeader'}, {text: 'Artist', style: 'tableHeader'}],
-								]
-							}
-						}
-					],
-					styles: {
-						header: {
-							fontSize: 18,
-							bold: true,
-							margin: [0, 0, 0, 10]
-						},
-						subheader: {
-							fontSize: 14,
-							bold: true,
-							margin: [0, 10, 0, 5]
-						},
-						mainTable: {
-							margin: [0, 5, 0, 15]
-						},
-						tableHeader: {
-							bold: true,
-							fontSize: 13,
-							color: 'black'
-						}
-					},
-					defaultStyle: {
-
-					}
-				};
-				hisData.forEach(element => {
-					// Removing extra fields
-					delete element.checkbox;
-					delete element.history_id;
-					delete element.instance_id;
-					dd.content[2].table.body.push(Object.values(element));
-				});
-				// Make PDF and start download
-				pdfMake.createPdf(dd).download();
-			};
-		});
-
-		$historyContentDiv.on("click", "#csv_export", async function(){
-			// Get date/time from pickers
-			var startDay = document.querySelector('#his_date_start').value;
-			var startTime = document.querySelector('#his_time_start').value;
-			var endDay = document.querySelector('#his_date_end').value;
-			var endTime = document.querySelector('#his_time_end').value;
-
-			var url = baseUrl + "api/item-history-feed?start=" + startDay + " " + startTime + "&end=" + endDay + " " + endTime;
-			var requestData = await fetch(url);
-			var hisData = await requestData.json();
-
-			if (!hisData.length) {
-				alert("The date range selected doesn't have any items to export.");
-				return
-			} else {
-				// Clean returned data
-				hisData.forEach(element => {
-					// Start date/time
-					element.startDate = element.starts.split(" ")[0];
-					element.startTime = element.starts.split(" ")[1];
-					// End date/time
-					element.endDate = element.ends.split(" ")[0];
-					element.endTime = element.ends.split(" ")[1];
-					// Moving Title and Artist fields to the end
-					element.title = element.track_title;
-					element.artist = element.artist_name;
-					// Removing extra fields
-					delete element.checkbox;
-					delete element.history_id;
-					delete element.instance_id;
-					delete element.starts;  // we already converted these, so we don't need them anymore
-					delete element.ends;
-					delete element.track_title;
-					delete element.artist_name;
-				});
-			};
-
-			var csvX = new CSVExport(hisData);  // Actual export function
-			return false  // Was part of the demo. Please leave as is.
-		});
-
-    	$('body').on("click", ".his_file_cancel, .his_item_cancel", function(e) {
-    		removeHistoryDialog();
-    	});
-
-    	$('body').on("click", ".his_file_save", function(e) {
-
-    		e.preventDefault();
-
-    		var $form = $(this).parents("form");
-    		var data = $form.serializeArray();
-
-    		var url = baseUrl+"Playouthistory/update-file-item/format/json";
-
-    		$.post(url, data, function(json) {
-
-    			//TODO put errors on form.
-    			if (json.error !== undefined) {
-    				//makeHistoryDialog(json.dialog);
-    			}
-    			else {
-    				removeHistoryDialog();
-    				redrawTables();
-    			}
-
-    		}, "json");
-
-    	});
-
-    	$('body').on("click", ".his_item_save", function(e) {
-
-    		e.preventDefault();
-
-    		var $form = $(this).parents("form"),
-    			data = $form.serializeArray(),
-    			id = data[0].value,
-    			createUrl = baseUrl+"Playouthistory/create-list-item/format/json",
-    			updateUrl = baseUrl+"Playouthistory/update-list-item/format/json",
-    			url,
-    			$select = $hisDialogEl.find("#his_instance_select"),
-    			instance;
-
-    		url = (id === "") ? createUrl : updateUrl;
-
-    		if (fnServerData.instance !== undefined) {
-    			data.push({
-    				name: "instance_id",
-    				value: fnServerData.instance
-    			});
-    		}
-    		else if ($select.length > 0) {
-    			instance = $select.val();
-
-    			if (instance > 0) {
-    				data.push({
-        				name: "instance_id",
-        				value: instance
-        			});
-    			}
-    		}
-
-    		$.post(url, data, function(json) {
-
-    			if (json.form !== undefined) {
-    				var $newForm = $(json.form);
-    				$newForm = processDialogHtml($newForm);
-    				$hisDialogEl.html($newForm.html());
-    				initializeDialog();
-    			}
-    			else {
-    				removeHistoryDialog();
-    				redrawTables();
-    			}
-
-    		}, "json");
-
-    	});
-
-
-    	$historyContentDiv.on("click", ".his_checkbox input", function(e) {
-    		var checked = e.currentTarget.checked,
-    			$tr = $(e.currentTarget).parents("tr");
-
-    		if (checked) {
-    			addSelectedLogItem($tr);
-    		}
-    		else {
-    			removeSelectedLogItem($tr);
-    		}
-    	});
-
-    	$('body').on("click", "#his_instance_retrieve", function(e) {
-    		var startPicker = $hisDialogEl.find('#his_item_starts'),
-				endPicker = $hisDialogEl.find('#his_item_ends'),
-				url = baseUrl+"playouthistory/show-history-feed",
-				startDate = startPicker.val(),
-				endDate = endPicker.val(),
-				data;
-
-    		data = {
-    			start: startDate,
-    			end: endDate,
-    			format: "json"
-    		};
-
-    		$.get(url, data, function(json) {
-    			var i,
-    				$select = $('<select/>', {
-    					id: 'his_instance_select'
-    				}),
-    				$option,
-    				show;
-
-    			if (json.length > 0) {
-
-    				for (i = 0; i < json.length; i++) {
-    					show = json[i];
-
-    					$option = $('<option/>')
-    						.text(show.name)
-    						.attr('value', show.instance_id);
-
-    					$select.append($option);
-    				}
-    			}
-
-    			$option = $('<option/>')
-					.text($.i18n._("No Show"))
-					.attr('value', 0);
-
-				$select.append($option);
-
-    			$hisDialogEl.find("#his_instance_select").replaceWith($select);
-    		});
-    	});
-
-    	function getStartEnd() {
-
-			return AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId, dateEndId, timeEndId);
-    	}
-
-		function hisSubmit(){
-			var fn, info;
-
-			info = getStartEnd();
-
-			fn = fnServerData;
-			fn.start = info.start;
-			fn.end = info.end;
-
-			if (inShowsTab) {
-				showSummaryList(info.start, info.end);
-			}
-			else {
-				redrawTables();
-			};
-		};
-
-    	$historyContentDiv.find("#his_submit").click(function(ev){
-			hisSubmit();
-    	});
-
-    	$historyContentDiv.on("click", ".his-select-page", selectCurrentPage);
-    	$historyContentDiv.on("click", ".his-dselect-page", deselectCurrentPage);
-    	$historyContentDiv.on("click", ".his-dselect-all", emptySelectedLogItems);
-
-    	$historyContentDiv.on("click", "#his_trash", function(ev){
-    		var items = getSelectedLogItems(),
-    			url = baseUrl+"playouthistory/delete-list-items";
-
-    		$.post(url, {ids: items, format: "json"}, function() {
-    			selectedLogItems = {};
-    			redrawTables();
-    		});
-    	});
-
-    	$historyContentDiv.find("#his-tabs").tabs({
-    		show: function( event, ui ) {
-    			var href = $(ui.tab).attr("href");
-    			var index = href.split('-').pop();
-				var tab = tabsInit[index-1];
-
-				if (!tab.initialized) {
-					tab.initialize();
-					tab.initialized = true;
-				}
-				else {
-					tab.navigate();
-				}
-
-				tab.always();
-			}
-    	});
-
-    	// begin context menu initialization.
-        $.contextMenu({
-            selector: '#history_content td:not(.his_checkbox)',
-            trigger: "left",
-            ignoreRightClick: true,
-
-            build: function($el, e) {
-                var items = {},
-                	callback,
-                	$tr,
-                	editUrl,
-                	deleteUrl;
-
-                $tr = $el.parents("tr");
-                editUrl = $tr.data("url-edit");
-                deleteUrl = $tr.data("url-delete");
-
-                if (editUrl !== undefined) {
-
-                	callback = function() {
-                    	$.post(editUrl, {format: "json"}, function(json) {
-
-                			makeHistoryDialog(json.dialog);
-
-                		}, "json");
-                    };
-
-                    items["edit"] = {
-                    	"name": $.i18n._("Edit"),
-                    	"icon": "edit",
-                    	"callback": callback
-                    };
-                }
-
-                if (deleteUrl !== undefined) {
-
-                	callback = function() {
-                    	var c = confirm("Delete this entry?");
-
-                    	if (c) {
-                    		$.post(deleteUrl, {format: "json"}, function(json) {
-                    			redrawTables();
-                    		});
-                    	}
-                    };
-
-                    items["del"] = {
-                    	"name": $.i18n._("Delete"),
-                    	"icon": "delete",
-                    	"callback": callback
-                    };
-                }
-
-                return {
-                    items: items
-                };
-            }
-        });
+    $showList.accordion({
+      animated: false,
+      create: function (event, ui) {
+        var $div = $showList.find(".ui-accordion-content-active");
+        console.log(event);
+        //$div.css()
+        createShowTable($div);
+      },
+      change: function (event, ui) {
+        var $div = $(ui.newContent);
+        $(ui.oldContent).empty();
+        createShowTable($div);
+        selectedLogItems = {};
+      },
+      //changestart: function( event, ui ) {}
+    });
+  }
+
+  function createToolbarButtons($el) {
+    var $menu = $("<div class='btn-toolbar' />");
+
+    $menu.append(
+      "<div class='btn-group'>" +
+        "<button class='btn btn-small btn-new' id='his_create'>" +
+        "<i class='icon-white icon-plus'></i>" +
+        $.i18n._("New Log Entry") +
+        "</button>" +
+        "</div>"
+    );
+
+    $menu.append(
+      "<div class='btn-group'>" +
+        "<button class='btn btn-small dropdown-toggle' data-toggle='dropdown'>" +
+        $.i18n._("Select") +
+        " <span class='caret'></span>" +
+        "</button>" +
+        "<ul class='dropdown-menu'>" +
+        "<li class='his-select-page'><a href='#'>" +
+        $.i18n._("Select this page") +
+        "</a></li>" +
+        "<li class='his-dselect-page'><a href='#'>" +
+        $.i18n._("Deselect this page") +
+        "</a></li>" +
+        "<li class='his-dselect-all'><a href='#'>" +
+        $.i18n._("Deselect all") +
+        "</a></li>" +
+        "</ul>" +
+        "</div>"
+    );
+
+    $menu.append(
+      "<div class='btn-group'>" +
+        "<button class='btn btn-small dropdown-toggle' data-toggle='dropdown'>" +
+        $.i18n._("Export") +
+        " <span class='caret'></span>" +
+        "</button>" +
+        "<ul class='dropdown-menu'>" +
+        "<li id='csv_export'><a href='#'>" +
+        $.i18n._("Export as CSV") +
+        "</a></li>" +
+        "<li id='pdf_export'><a href='#'>" +
+        $.i18n._("Export as PDF") +
+        "</a></li>" +
+        "</ul>" +
+        "</div>"
+    );
+
+    $menu.append(
+      "<div class='btn-group'>" +
+        "<button class='btn btn-small' id='his_trash'>" +
+        "<i class='icon-white icon-trash'></i>" +
+        "</button>" +
+        "</div>"
+    );
+
+    $el.append($menu);
+  }
+
+  function aggregateHistoryTable() {
+    var oTable,
+      $historyTableDiv = $historyContentDiv.find("#history_table_aggregate"),
+      columns,
+      fnRowCallback;
+
+    fnRowCallback = function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
+      var editUrl =
+          baseUrl + "playouthistory/edit-file-item/id/" + aData.file_id,
+        $nRow = $(nRow);
+
+      $nRow.data("url-edit", editUrl);
     };
 
-return AIRTIME;
+    columns = JSON.parse(
+      localStorage.getItem("datatables-historyfile-aoColumns")
+    );
 
-}(AIRTIME || {}));
+    oTable = $historyTableDiv.dataTable({
+      aoColumns: columns,
+
+      bProcessing: true,
+      bServerSide: true,
+      sAjaxSource: baseUrl + "playouthistory/file-history-feed",
+      sAjaxDataProp: "history",
+      fnServerData: fnServerData,
+      fnRowCallback: fnRowCallback,
+      oLanguage: getDatatablesStrings({
+        sEmptyTable: $.i18n._(
+          "No tracks were played during the selected time period."
+        ),
+        sInfoEmpty: $.i18n._("Showing 0 to 0 of 0 tracks"),
+        sInfo: $.i18n._("Showing _START_ to _END_ of _TOTAL_ tracks"),
+        sInfoEmpty: $.i18n._("Showing 0 to 0 of 0 tracks"),
+        sInfoFiltered: $.i18n._("(filtered from _MAX_ total tracks)"),
+      }),
+      aLengthMenu: lengthMenu,
+      iDisplayLength: 25,
+      sPaginationType: "full_numbers",
+      bJQueryUI: true,
+      bAutoWidth: true,
+      sDom: sDom,
+    });
+    oTable.fnSetFilteringDelay(350);
+
+    return oTable;
+  }
+
+  function itemHistoryTable(id) {
+    var oTable,
+      $historyTableDiv = $historyContentDiv.find("#" + id),
+      $toolbar,
+      columns,
+      fnRowCallback,
+      booleans = {},
+      i,
+      c;
+
+    columns = JSON.parse(
+      localStorage.getItem("datatables-historyitem-aoColumns")
+    );
+
+    for (i in columns) {
+      c = columns[i];
+      if (c["sDataType"] === "boolean") {
+        booleans[c["mDataProp"]] = c["sTitle"];
+      }
+    }
+
+    fnRowCallback = function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
+      var editUrl =
+          baseUrl + "playouthistory/edit-list-item/id/" + aData.history_id,
+        deleteUrl =
+          baseUrl + "playouthistory/delete-list-item/id/" + aData.history_id,
+        emptyCheckBox = String.fromCharCode(parseInt(2610, 16)),
+        checkedCheckBox = String.fromCharCode(parseInt(2612, 16)),
+        b,
+        text,
+        $nRow = $(nRow);
+
+      // add checkbox
+      $nRow
+        .find("td.his_checkbox")
+        .html("<input type='checkbox' name='cb_" + aData.history_id + "'>");
+
+      $nRow.data("his-id", aData.history_id);
+      $nRow.data("url-edit", editUrl);
+      $nRow.data("url-delete", deleteUrl);
+
+      for (b in booleans) {
+        text = aData[b] ? checkedCheckBox : emptyCheckBox;
+        text = text + " " + booleans[b];
+
+        $nRow.find(".his_" + b).html(text);
+      }
+    };
+
+    oTable = $historyTableDiv.dataTable({
+      aoColumns: columns,
+      bProcessing: true,
+      bServerSide: true,
+      sAjaxSource: baseUrl + "playouthistory/item-history-feed",
+      sAjaxDataProp: "history",
+      fnServerData: fnServerData,
+      fnRowCallback: fnRowCallback,
+      oLanguage: getDatatablesStrings({
+        sEmptyTable: $.i18n._(
+          "No tracks were played during the selected time period."
+        ),
+        sInfoEmpty: $.i18n._("Showing 0 to 0 of 0 tracks"),
+        sInfo: $.i18n._("Showing _START_ to _END_ of _TOTAL_ tracks"),
+        sInfoEmpty: $.i18n._("Showing 0 to 0 of 0 tracks"),
+        sInfoFiltered: $.i18n._("(filtered from _MAX_ total tracks)"),
+      }),
+      aLengthMenu: lengthMenu,
+      iDisplayLength: 25,
+      sPaginationType: "full_numbers",
+      bJQueryUI: true,
+      bAutoWidth: true,
+      sDom: sDom,
+    });
+    oTable.fnSetFilteringDelay(350);
+
+    $toolbar = $historyTableDiv
+      .parents(".dataTables_wrapper")
+      .find(".fg-toolbar:first");
+    createToolbarButtons($toolbar);
+
+    return oTable;
+  }
+
+  function showSummaryList(start, end) {
+    var url = baseUrl + "playouthistory/show-history-feed",
+      data = {
+        format: "json",
+        start: start,
+        end: end,
+      };
+
+    $.post(url, data, function (json) {
+      drawShowList(json);
+    });
+  }
+
+  mod.onReady = function () {
+    var oBaseDatePickerSettings,
+      oBaseTimePickerSettings,
+      $hisDialogEl,
+      tabsInit = [
+        {
+          initialized: false,
+          initialize: function () {
+            oTableItem = itemHistoryTable("history_table_list");
+          },
+          navigate: function () {
+            delete fnServerData.instance;
+            oTableItem.fnDraw();
+          },
+          always: function () {
+            inShowsTab = false;
+            emptySelectedLogItems();
+          },
+        },
+        {
+          initialized: false,
+          initialize: function () {
+            oTableAgg = aggregateHistoryTable();
+          },
+          navigate: function () {
+            delete fnServerData.instance;
+            oTableAgg.fnDraw();
+          },
+          always: function () {
+            inShowsTab = false;
+            emptySelectedLogItems();
+          },
+        },
+        {
+          initialized: false,
+          initialize: function () {},
+          navigate: function () {},
+          always: function () {
+            inShowsTab = true;
+
+            var info = getStartEnd();
+            showSummaryList(info.start, info.end);
+            emptySelectedLogItems();
+          },
+        },
+      ];
+
+    //set the locale names for the bootstrap calendar.
+    $.fn.datetimepicker.dates = {
+      daysMin: i18n_days_short,
+      months: i18n_months,
+      monthsShort: i18n_months_short,
+    };
+
+    $historyContentDiv = $("#history_content");
+
+    function redrawTables() {
+      oTableAgg && oTableAgg.fnDraw();
+      oTableItem && oTableItem.fnDraw();
+      oTableShow && oTableShow.fnDraw();
+    }
+
+    function removeHistoryDialog() {
+      $hisDialogEl.dialog("destroy");
+      $hisDialogEl.remove();
+    }
+
+    function initializeDialog() {
+      var $startPicker = $hisDialogEl.find("#his_item_starts_datetimepicker"),
+        $endPicker = $hisDialogEl.find("#his_item_ends_datetimepicker");
+
+      $startPicker.datetimepicker();
+
+      $endPicker.datetimepicker({
+        showTimeFirst: true,
+      });
+
+      $startPicker.on("changeDate", function (e) {
+        $endPicker.data("datetimepicker").setLocalDate(e.localDate);
+      });
+    }
+
+    function processDialogHtml($el) {
+      if (inShowsTab) {
+        $el.find("#his_choose_instance").remove();
+      }
+
+      return $el;
+    }
+
+    function makeHistoryDialog(html) {
+      $hisDialogEl = $(html);
+      $hisDialogEl = processDialogHtml($hisDialogEl);
+
+      $hisDialogEl.dialog({
+        title: $.i18n._("Edit History Record"),
+        modal: false,
+        open: function (event, ui) {
+          initializeDialog();
+        },
+        close: function () {
+          removeHistoryDialog();
+        },
+      });
+    }
+
+    hisSubmit(); // Fixes display bug
+
+    /*
+     * Icon hover states for search.
+     */
+    $historyContentDiv.on(
+      "mouseenter",
+      ".his-timerange .ui-button",
+      function (ev) {
+        $(this).addClass("ui-state-hover");
+      }
+    );
+    $historyContentDiv.on(
+      "mouseleave",
+      ".his-timerange .ui-button",
+      function (ev) {
+        $(this).removeClass("ui-state-hover");
+      }
+    );
+
+    oBaseDatePickerSettings = {
+      dateFormat: "yy-mm-dd",
+      //i18n_months, i18n_days_short are in common.js
+      monthNames: i18n_months,
+      dayNamesMin: i18n_days_short,
+      onSelect: function (sDate, oDatePicker) {
+        $(this).datepicker("setDate", sDate);
+      },
+      onClose: validateTimeRange,
+    };
+
+    oBaseTimePickerSettings = {
+      showPeriodLabels: false,
+      showCloseButton: true,
+      closeButtonText: $.i18n._("Done"),
+      showLeadingZero: false,
+      defaultTime: "0:00",
+      hourText: $.i18n._("Hour"),
+      minuteText: $.i18n._("Minute"),
+      onClose: validateTimeRange,
+    };
+
+    $historyContentDiv
+      .find(dateStartId)
+      .datepicker(oBaseDatePickerSettings)
+      .blur(validateTimeRange);
+
+    $historyContentDiv
+      .find(timeStartId)
+      .timepicker(oBaseTimePickerSettings)
+      .blur(validateTimeRange);
+
+    $historyContentDiv
+      .find(dateEndId)
+      .datepicker(oBaseDatePickerSettings)
+      .blur(validateTimeRange);
+
+    $historyContentDiv
+      .find(timeEndId)
+      .timepicker(oBaseTimePickerSettings)
+      .blur(validateTimeRange);
+
+    $historyContentDiv.on("click", "#his_create", function (e) {
+      var url = baseUrl + "playouthistory/edit-list-item/format/json";
+
+      e.preventDefault();
+
+      $.get(
+        url,
+        function (json) {
+          makeHistoryDialog(json.dialog);
+        },
+        "json"
+      );
+    });
+
+    $historyContentDiv.on("click", "#pdf_export", async function () {
+      // Get date/time from pickers
+      var startDay = document.querySelector("#his_date_start").value;
+      var startTime = document.querySelector("#his_time_start").value;
+      var endDay = document.querySelector("#his_date_end").value;
+      var endTime = document.querySelector("#his_time_end").value;
+
+      var url =
+        baseUrl +
+        "api/item-history-feed?start=" +
+        startDay +
+        " " +
+        startTime +
+        "&end=" +
+        endDay +
+        " " +
+        endTime;
+      var requestData = await fetch(url);
+      var hisData = await requestData.json();
+
+      if (!hisData.length) {
+        alert("The date range selected doesn't have any items to export.");
+        return;
+      } else {
+        // Generate PDF template
+        var dd = {
+          content: [
+            { text: "Libretime", style: "subheader" },
+            {
+              text:
+                "Playout History from " +
+                startDay +
+                " " +
+                startTime +
+                " to " +
+                endDay +
+                " " +
+                endTime,
+              style: "header",
+            },
+            {
+              style: "mainTable",
+              table: {
+                headerRows: 1,
+                body: [
+                  [
+                    { text: "Start Time", style: "tableHeader" },
+                    { text: "End Time", style: "tableHeader" },
+                    { text: "Song", style: "tableHeader" },
+                    { text: "Artist", style: "tableHeader" },
+                  ],
+                ],
+              },
+            },
+          ],
+          styles: {
+            header: {
+              fontSize: 18,
+              bold: true,
+              margin: [0, 0, 0, 10],
+            },
+            subheader: {
+              fontSize: 14,
+              bold: true,
+              margin: [0, 10, 0, 5],
+            },
+            mainTable: {
+              margin: [0, 5, 0, 15],
+            },
+            tableHeader: {
+              bold: true,
+              fontSize: 13,
+              color: "black",
+            },
+          },
+          defaultStyle: {},
+        };
+        hisData.forEach((element) => {
+          // Removing extra fields
+          delete element.checkbox;
+          delete element.history_id;
+          delete element.instance_id;
+          dd.content[2].table.body.push(Object.values(element));
+        });
+        // Make PDF and start download
+        pdfMake.createPdf(dd).download();
+      }
+    });
+
+    $historyContentDiv.on("click", "#csv_export", async function () {
+      // Get date/time from pickers
+      var startDay = document.querySelector("#his_date_start").value;
+      var startTime = document.querySelector("#his_time_start").value;
+      var endDay = document.querySelector("#his_date_end").value;
+      var endTime = document.querySelector("#his_time_end").value;
+
+      var url =
+        baseUrl +
+        "api/item-history-feed?start=" +
+        startDay +
+        " " +
+        startTime +
+        "&end=" +
+        endDay +
+        " " +
+        endTime;
+      var requestData = await fetch(url);
+      var hisData = await requestData.json();
+
+      if (!hisData.length) {
+        alert("The date range selected doesn't have any items to export.");
+        return;
+      } else {
+        // Clean returned data
+        hisData.forEach((element) => {
+          // Start date/time
+          element.startDate = element.starts.split(" ")[0];
+          element.startTime = element.starts.split(" ")[1];
+          // End date/time
+          element.endDate = element.ends.split(" ")[0];
+          element.endTime = element.ends.split(" ")[1];
+          // Moving Title and Artist fields to the end
+          element.title = element.track_title;
+          element.artist = element.artist_name;
+          // Removing extra fields
+          delete element.checkbox;
+          delete element.history_id;
+          delete element.instance_id;
+          delete element.starts; // we already converted these, so we don't need them anymore
+          delete element.ends;
+          delete element.track_title;
+          delete element.artist_name;
+        });
+      }
+
+      var csvX = new CSVExport(hisData); // Actual export function
+      return false; // Was part of the demo. Please leave as is.
+    });
+
+    $("body").on("click", ".his_file_cancel, .his_item_cancel", function (e) {
+      removeHistoryDialog();
+    });
+
+    $("body").on("click", ".his_file_save", function (e) {
+      e.preventDefault();
+
+      var $form = $(this).parents("form");
+      var data = $form.serializeArray();
+
+      var url = baseUrl + "Playouthistory/update-file-item/format/json";
+
+      $.post(
+        url,
+        data,
+        function (json) {
+          //TODO put errors on form.
+          if (json.error !== undefined) {
+            //makeHistoryDialog(json.dialog);
+          } else {
+            removeHistoryDialog();
+            redrawTables();
+          }
+        },
+        "json"
+      );
+    });
+
+    $("body").on("click", ".his_item_save", function (e) {
+      e.preventDefault();
+
+      var $form = $(this).parents("form"),
+        data = $form.serializeArray(),
+        id = data[0].value,
+        createUrl = baseUrl + "Playouthistory/create-list-item/format/json",
+        updateUrl = baseUrl + "Playouthistory/update-list-item/format/json",
+        url,
+        $select = $hisDialogEl.find("#his_instance_select"),
+        instance;
+
+      url = id === "" ? createUrl : updateUrl;
+
+      if (fnServerData.instance !== undefined) {
+        data.push({
+          name: "instance_id",
+          value: fnServerData.instance,
+        });
+      } else if ($select.length > 0) {
+        instance = $select.val();
+
+        if (instance > 0) {
+          data.push({
+            name: "instance_id",
+            value: instance,
+          });
+        }
+      }
+
+      $.post(
+        url,
+        data,
+        function (json) {
+          if (json.form !== undefined) {
+            var $newForm = $(json.form);
+            $newForm = processDialogHtml($newForm);
+            $hisDialogEl.html($newForm.html());
+            initializeDialog();
+          } else {
+            removeHistoryDialog();
+            redrawTables();
+          }
+        },
+        "json"
+      );
+    });
+
+    $historyContentDiv.on("click", ".his_checkbox input", function (e) {
+      var checked = e.currentTarget.checked,
+        $tr = $(e.currentTarget).parents("tr");
+
+      if (checked) {
+        addSelectedLogItem($tr);
+      } else {
+        removeSelectedLogItem($tr);
+      }
+    });
+
+    $("body").on("click", "#his_instance_retrieve", function (e) {
+      var startPicker = $hisDialogEl.find("#his_item_starts"),
+        endPicker = $hisDialogEl.find("#his_item_ends"),
+        url = baseUrl + "playouthistory/show-history-feed",
+        startDate = startPicker.val(),
+        endDate = endPicker.val(),
+        data;
+
+      data = {
+        start: startDate,
+        end: endDate,
+        format: "json",
+      };
+
+      $.get(url, data, function (json) {
+        var i,
+          $select = $("<select/>", {
+            id: "his_instance_select",
+          }),
+          $option,
+          show;
+
+        if (json.length > 0) {
+          for (i = 0; i < json.length; i++) {
+            show = json[i];
+
+            $option = $("<option/>")
+              .text(show.name)
+              .attr("value", show.instance_id);
+
+            $select.append($option);
+          }
+        }
+
+        $option = $("<option/>").text($.i18n._("No Show")).attr("value", 0);
+
+        $select.append($option);
+
+        $hisDialogEl.find("#his_instance_select").replaceWith($select);
+      });
+    });
+
+    function getStartEnd() {
+      return AIRTIME.utilities.fnGetScheduleRange(
+        dateStartId,
+        timeStartId,
+        dateEndId,
+        timeEndId
+      );
+    }
+
+    function hisSubmit() {
+      var fn, info;
+
+      info = getStartEnd();
+
+      fn = fnServerData;
+      fn.start = info.start;
+      fn.end = info.end;
+
+      if (inShowsTab) {
+        showSummaryList(info.start, info.end);
+      } else {
+        redrawTables();
+      }
+    }
+
+    $historyContentDiv.find("#his_submit").click(function (ev) {
+      hisSubmit();
+    });
+
+    $historyContentDiv.on("click", ".his-select-page", selectCurrentPage);
+    $historyContentDiv.on("click", ".his-dselect-page", deselectCurrentPage);
+    $historyContentDiv.on("click", ".his-dselect-all", emptySelectedLogItems);
+
+    $historyContentDiv.on("click", "#his_trash", function (ev) {
+      var items = getSelectedLogItems(),
+        url = baseUrl + "playouthistory/delete-list-items";
+
+      $.post(url, { ids: items, format: "json" }, function () {
+        selectedLogItems = {};
+        redrawTables();
+      });
+    });
+
+    $historyContentDiv.find("#his-tabs").tabs({
+      show: function (event, ui) {
+        var href = $(ui.tab).attr("href");
+        var index = href.split("-").pop();
+        var tab = tabsInit[index - 1];
+
+        if (!tab.initialized) {
+          tab.initialize();
+          tab.initialized = true;
+        } else {
+          tab.navigate();
+        }
+
+        tab.always();
+      },
+    });
+
+    // begin context menu initialization.
+    $.contextMenu({
+      selector: "#history_content td:not(.his_checkbox)",
+      trigger: "left",
+      ignoreRightClick: true,
+
+      build: function ($el, e) {
+        var items = {},
+          callback,
+          $tr,
+          editUrl,
+          deleteUrl;
+
+        $tr = $el.parents("tr");
+        editUrl = $tr.data("url-edit");
+        deleteUrl = $tr.data("url-delete");
+
+        if (editUrl !== undefined) {
+          callback = function () {
+            $.post(
+              editUrl,
+              { format: "json" },
+              function (json) {
+                makeHistoryDialog(json.dialog);
+              },
+              "json"
+            );
+          };
+
+          items["edit"] = {
+            name: $.i18n._("Edit"),
+            icon: "edit",
+            callback: callback,
+          };
+        }
+
+        if (deleteUrl !== undefined) {
+          callback = function () {
+            var c = confirm("Delete this entry?");
+
+            if (c) {
+              $.post(deleteUrl, { format: "json" }, function (json) {
+                redrawTables();
+              });
+            }
+          };
+
+          items["del"] = {
+            name: $.i18n._("Delete"),
+            icon: "delete",
+            callback: callback,
+          };
+        }
+
+        return {
+          items: items,
+        };
+      },
+    });
+  };
+
+  return AIRTIME;
+})(AIRTIME || {});
 
 $(document).ready(AIRTIME.history.onReady);
diff --git a/legacy/public/js/airtime/playouthistory/template.js b/legacy/public/js/airtime/playouthistory/template.js
index 47d31ba70..33c79b718 100644
--- a/legacy/public/js/airtime/playouthistory/template.js
+++ b/legacy/public/js/airtime/playouthistory/template.js
@@ -1,102 +1,114 @@
-var AIRTIME = (function(AIRTIME) {
-    var mod;
-    var $historyTemplate;
+var AIRTIME = (function (AIRTIME) {
+  var mod;
+  var $historyTemplate;
 
-    if (AIRTIME.template === undefined) {
-        AIRTIME.template = {};
-    }
-    mod = AIRTIME.template;
+  if (AIRTIME.template === undefined) {
+    AIRTIME.template = {};
+  }
+  mod = AIRTIME.template;
 
-    function createItemLi(id, name, configured) {
+  function createItemLi(id, name, configured) {
+    var editUrl =
+      baseUrl + "Playouthistorytemplate/configure-template/id/" + id;
+    var defaultUrl =
+      baseUrl +
+      "Playouthistorytemplate/set-template-default/format/json/id/" +
+      id;
+    var removeUrl =
+      baseUrl + "Playouthistorytemplate/delete-template/format/json/id/" + id;
 
-    	var editUrl = baseUrl+"Playouthistorytemplate/configure-template/id/"+id;
-    	var defaultUrl = baseUrl+"Playouthistorytemplate/set-template-default/format/json/id/"+id;
-    	var removeUrl = baseUrl+"Playouthistorytemplate/delete-template/format/json/id/"+id;
+    var itemConfigured =
+      "<li class='template_configured' data-template='<%= id %>' data-name='<%= name %>'>" +
+      "<a href='<%= editUrl %>' class='template_name'><%= name %></a>" +
+      "<i class='icon icon-ok'></i>" +
+      "</li>";
 
-    	var itemConfigured =
-    		"<li class='template_configured' data-template='<%= id %>' data-name='<%= name %>'>" +
-    		    "<a href='<%= editUrl %>' class='template_name'><%= name %></a>" +
-    		    "<i class='icon icon-ok'></i>" +
-    		"</li>";
+    var item =
+      "<li data-template='<%= id %>' data-name='<%= name %>'>" +
+      "<a href='<%= editUrl %>' class='template_name'><%= name %></a>" +
+      "<a href='<%= removeUrl %>' class='template_remove'><i class='icon icon-trash'></i></a>" +
+      "<a href='<%= defaultUrl %>' class='template_default'>" +
+      $.i18n._("Set Default") +
+      "</a>" +
+      "</li>";
 
-    	var item =
-    		"<li data-template='<%= id %>' data-name='<%= name %>'>" +
-    			"<a href='<%= editUrl %>' class='template_name'><%= name %></a>" +
-    			"<a href='<%= removeUrl %>' class='template_remove'><i class='icon icon-trash'></i></a>" +
-    			"<a href='<%= defaultUrl %>' class='template_default'>" + $.i18n._('Set Default') + "</a>" +
-    		"</li>";
+    var template = configured === true ? itemConfigured : item;
 
-    	var template = (configured) === true ? itemConfigured : item;
+    var template = _.template(template);
 
-    	var template = _.template(template);
+    var $li = $(
+      template({
+        id: id,
+        name: name,
+        editUrl: editUrl,
+        defaultUrl: defaultUrl,
+        removeUrl: removeUrl,
+      })
+    );
 
-    	var $li = $(template({id: id, name: name, editUrl: editUrl, defaultUrl: defaultUrl, removeUrl: removeUrl}));
+    return $li;
+  }
 
-    	return $li;
+  mod.onReady = function () {
+    $historyTemplate = $("#history_template");
+
+    $historyTemplate.on("click", ".template_remove", function (ev) {
+      ev.preventDefault();
+
+      var $a = $(this);
+      var url = $a.attr("href");
+      $a.parents("li").remove();
+
+      $.post(url, function () {
+        var x;
+      });
+    });
+
+    $historyTemplate.on("click", ".template_default", function (ev) {
+      ev.preventDefault();
+
+      var $a = $(this);
+      var url = $a.attr("href");
+      var $oldLi, $newLi;
+
+      $oldLi = $a.parents("ul").find("li.template_configured");
+      $newLi = $a.parents("li");
+
+      $oldLi.replaceWith(
+        createItemLi($oldLi.data("template"), $oldLi.data("name"), false)
+      );
+      $newLi.replaceWith(
+        createItemLi($newLi.data("template"), $newLi.data("name"), true)
+      );
+
+      $.post(url, function () {
+        var x;
+      });
+    });
+
+    function createTemplate(type) {
+      var createUrl = baseUrl + "Playouthistorytemplate/create-template";
+
+      $.post(createUrl, { format: "json", type: type }, function (json) {
+        if (json.error !== undefined) {
+          alert(json.error);
+          return;
+        }
+
+        window.location.href = json.url;
+      });
     }
 
-    mod.onReady = function() {
+    $historyTemplate.on("click", "#new_item_template", function () {
+      createTemplate("item");
+    });
 
-    	$historyTemplate = $("#history_template");
+    $historyTemplate.on("click", "#new_file_template", function () {
+      createTemplate("file");
+    });
+  };
 
-    	$historyTemplate.on("click", ".template_remove", function(ev) {
-
-    		ev.preventDefault();
-
-    		var $a = $(this);
-    		var url = $a.attr("href");
-    		$a.parents("li").remove();
-
-    		$.post(url, function(){
-    			var x;
-    		});
-    	});
-
-    	$historyTemplate.on("click", ".template_default", function(ev) {
-
-    		ev.preventDefault();
-
-    		var $a = $(this);
-    		var url = $a.attr("href");
-    		var $oldLi, $newLi;
-
-    		$oldLi = $a.parents("ul").find("li.template_configured");
-    		$newLi = $a.parents("li");
-
-    		$oldLi.replaceWith(createItemLi($oldLi.data('template'), $oldLi.data('name'), false));
-    		$newLi.replaceWith(createItemLi($newLi.data('template'), $newLi.data('name'), true));
-
-    		$.post(url, function(){
-    			var x;
-    		});
-    	});
-
-    	function createTemplate(type) {
-
-    		var createUrl = baseUrl+"Playouthistorytemplate/create-template";
-
-    		$.post(createUrl, {format: "json", type: type}, function(json) {
-
-    			if (json.error !== undefined) {
-    				alert(json.error);
-    				return;
-    			}
-
-    			window.location.href = json.url;
-    		});
-    	}
-
-    	$historyTemplate.on("click", "#new_item_template", function() {
-    		createTemplate("item");
-    	});
-
-    	$historyTemplate.on("click", "#new_file_template", function() {
-    		createTemplate("file");
-    	});
-    };
-
-return AIRTIME;
-
-}(AIRTIME || {}));
+  return AIRTIME;
+})(AIRTIME || {});
 
 $(document).ready(AIRTIME.template.onReady);
diff --git a/legacy/public/js/airtime/preferences/musicdirs.js b/legacy/public/js/airtime/preferences/musicdirs.js
index 42483b5e9..fc86ada44 100644
--- a/legacy/public/js/airtime/preferences/musicdirs.js
+++ b/legacy/public/js/airtime/preferences/musicdirs.js
@@ -1,129 +1,153 @@
 function setWatchedDirEvents() {
+  $("#storageFolder-selection").serverBrowser({
+    onSelect: function (path) {
+      $("#storageFolder").val(path);
+    },
+    onLoad: function () {
+      return $("#storageFolder").val();
+    },
+    width: 500,
+    height: 250,
+    position: ["center", "center"],
+    //knownPaths: [{text:'Desktop', image:'desktop.png', path:'/home'}],
+    knownPaths: [],
+    imageUrl: "img/icons/",
+    systemImageUrl: baseUrl + "css/img/",
+    handlerUrl: baseUrl + "Preference/server-browse/format/json",
+    title: $.i18n._("Choose Storage Folder"),
+    basePath: "",
+    requestMethod: "POST",
+  });
 
-    $('#storageFolder-selection').serverBrowser({
-        onSelect: function(path) {
-            $('#storageFolder').val(path);
-        },
-        onLoad: function() {
-            return $('#storageFolder').val();
-        },
-        width: 500,
-        height: 250,
-        position: ['center', 'center'],
-        //knownPaths: [{text:'Desktop', image:'desktop.png', path:'/home'}],
-        knownPaths: [],
-        imageUrl: 'img/icons/',
-        systemImageUrl: baseUrl+'css/img/',
-        handlerUrl: baseUrl+'Preference/server-browse/format/json',
-        title: $.i18n._('Choose Storage Folder'),
-        basePath: '',
-        requestMethod: 'POST',
-    });
+  $("#watchedFolder-selection").serverBrowser({
+    onSelect: function (path) {
+      $("#watchedFolder").val(path);
+    },
+    onLoad: function () {
+      return $("#watchedFolder").val();
+    },
+    width: 500,
+    height: 250,
+    position: ["center", "center"],
+    //knownPaths: [{text:'Desktop', image:'desktop.png', path:'/home'}],
+    knownPaths: [],
+    imageUrl: "img/icons/",
+    systemImageUrl: baseUrl + "css/img/",
+    handlerUrl: baseUrl + "Preference/server-browse/format/json",
+    title: $.i18n._("Choose Folder to Watch"),
+    basePath: "",
+    requestMethod: "POST",
+  });
 
-    $('#watchedFolder-selection').serverBrowser({
-        onSelect: function(path) {
-            $('#watchedFolder').val(path);
-        },
-        onLoad: function() {
-            return $('#watchedFolder').val();
-        },
-        width: 500,
-        height: 250,
-        position: ['center', 'center'],
-        //knownPaths: [{text:'Desktop', image:'desktop.png', path:'/home'}],
-        knownPaths: [],
-        imageUrl: 'img/icons/',
-        systemImageUrl: baseUrl+'css/img/',
-        handlerUrl: baseUrl+'Preference/server-browse/format/json',
-        title: $.i18n._('Choose Folder to Watch'),
-        basePath: '',
-        requestMethod: 'POST',
-    });
+  $("#storageFolder-ok").click(function () {
+    var url, chosen;
 
-    $('#storageFolder-ok').click(function(){
-        var url, chosen;
+    if (
+      confirm(
+        sprintf(
+          $.i18n._(
+            "Are you sure you want to change the storage folder?\nThis will remove the files from your %s library!"
+          ),
+          PRODUCT_NAME
+        )
+      )
+    ) {
+      url = baseUrl + "Preference/change-stor-directory";
+      chosen = $("#storageFolder").val();
 
-        if(confirm(sprintf($.i18n._("Are you sure you want to change the storage folder?\nThis will remove the files from your %s library!"), PRODUCT_NAME))){
-            url = baseUrl+"Preference/change-stor-directory";
-            chosen = $('#storageFolder').val();
+      $.post(
+        url,
+        { format: "json", dir: chosen, element: "storageFolder" },
 
-            $.post(url,
-                {format: "json", dir: chosen, element: "storageFolder"},
-
-                function(json) {
-                    $("#watched-folder-section").empty();
-                    $("#watched-folder-section").append(json.subform);
-                    setWatchedDirEvents();
-                });
-        }
-        else {
-            $('#storageFolder').val("");
+        function (json) {
+          $("#watched-folder-section").empty();
+          $("#watched-folder-section").append(json.subform);
+          setWatchedDirEvents();
         }
+      );
+    } else {
+      $("#storageFolder").val("");
+    }
+  });
+
+  $("#watchedFolder-ok").click(function () {
+    var url, chosen;
+
+    url = baseUrl + "Preference/reload-watch-directory";
+    chosen = $("#watchedFolder").val();
+
+    $.post(
+      url,
+      { format: "json", dir: chosen, element: "watchedFolder" },
+
+      function (json) {
+        $("#watched-folder-section").empty();
+        $("#watched-folder-section").append(
+          "<h2>" + $.i18n._("Manage Media Folders") + "</h2>"
+        );
+        $("#watched-folder-section").append(json.subform);
+        setWatchedDirEvents();
+      }
+    );
+  });
+
+  $(".selected-item")
+    .find(".ui-icon-refresh")
+    .click(function () {
+      var folder = $(this).prev().text();
+      $.get(baseUrl + "Preference/rescan-watch-directory", {
+        format: "json",
+        dir: folder,
+      });
     });
 
-    $('#watchedFolder-ok').click(function(){
-        var url, chosen;
+  $(".selected-item")
+    .find(".ui-icon-close")
+    .click(function () {
+      if (
+        confirm($.i18n._("Are you sure you want to remove the watched folder?"))
+      ) {
+        var row = $(this).parent();
+        var folder = row.find("#folderPath").text();
 
-        url = baseUrl+"Preference/reload-watch-directory";
-        chosen = $('#watchedFolder').val();
+        url = baseUrl + "Preference/remove-watch-directory";
 
-        $.post(url,
-            {format: "json", dir: chosen, element: "watchedFolder"},
+        $.post(
+          url,
+          { format: "json", dir: folder },
 
-            function(json) {
-                $("#watched-folder-section").empty();
-                $("#watched-folder-section").append("<h2>"+$.i18n._("Manage Media Folders")+"</h2>");
-                $("#watched-folder-section").append(json.subform);
-                setWatchedDirEvents();
-            });
-    });
-
-    $('.selected-item').find('.ui-icon-refresh').click(function(){
-        var folder = $(this).prev().text();
-        $.get(baseUrl+"Preference/rescan-watch-directory", {format: "json", dir: folder});
-    });
-
-    $('.selected-item').find('.ui-icon-close').click(function(){
-        if(confirm($.i18n._("Are you sure you want to remove the watched folder?"))){
-            var row = $(this).parent();
-            var folder = row.find('#folderPath').text();
-
-            url = baseUrl+"Preference/remove-watch-directory";
-
-            $.post(url,
-                {format: "json", dir: folder},
-
-                function(json) {
-                    $("#watched-folder-section").empty();
-                    $("#watched-folder-section").append("<h2>"+$.i18n._("Manage Media Folders")+"</h2>");
-                    $("#watched-folder-section").append(json.subform);
-                    setWatchedDirEvents();
-                });
-        }
+          function (json) {
+            $("#watched-folder-section").empty();
+            $("#watched-folder-section").append(
+              "<h2>" + $.i18n._("Manage Media Folders") + "</h2>"
+            );
+            $("#watched-folder-section").append(json.subform);
+            setWatchedDirEvents();
+          }
+        );
+      }
     });
 }
 
-$(document).ready(function() {
-
-    setWatchedDirEvents();
-    $(".ui-icon-alert").qtip({
-        content: {
-            text: $.i18n._("This path is currently not accessible.")
-        },
-        position:{
-            adjust: {
-            resize: true,
-            method: "flip flip"
-            },
-            at: "right center",
-            my: "left top",
-            viewport: $(window)
-        },
-        style: {
-            classes: "ui-tooltip-dark"
-        },
-        show: 'mouseover',
-        hide: 'mouseout'
-    });
-
+$(document).ready(function () {
+  setWatchedDirEvents();
+  $(".ui-icon-alert").qtip({
+    content: {
+      text: $.i18n._("This path is currently not accessible."),
+    },
+    position: {
+      adjust: {
+        resize: true,
+        method: "flip flip",
+      },
+      at: "right center",
+      my: "left top",
+      viewport: $(window),
+    },
+    style: {
+      classes: "ui-tooltip-dark",
+    },
+    show: "mouseover",
+    hide: "mouseout",
+  });
 });
diff --git a/legacy/public/js/airtime/preferences/preferences.js b/legacy/public/js/airtime/preferences/preferences.js
index db0ca264d..dfe412bee 100644
--- a/legacy/public/js/airtime/preferences/preferences.js
+++ b/legacy/public/js/airtime/preferences/preferences.js
@@ -1,146 +1,155 @@
 function showErrorSections() {
-    var selector = $("[id$=-settings]");
-    selector.each(function(i) {
-        var el = $(this);
-        var errors = el.find(".errors");
-        if (errors.length > 0) {
-            el.show();
-            $(window).scrollTop(errors.position().top);
-        }
-    });
+  var selector = $("[id$=-settings]");
+  selector.each(function (i) {
+    var el = $(this);
+    var errors = el.find(".errors");
+    if (errors.length > 0) {
+      el.show();
+      $(window).scrollTop(errors.position().top);
+    }
+  });
 }
 
 function setConfigureMailServerListener() {
-    var configMailServer = $("#configureMailServer");
-    configMailServer.click(function(event){
-        setMailServerInputReadonly();
-    });
+  var configMailServer = $("#configureMailServer");
+  configMailServer.click(function (event) {
+    setMailServerInputReadonly();
+  });
 
-    var msRequiresAuth = $("#msRequiresAuth");
-    msRequiresAuth.click(function(event){
-        setMsAuthenticationFieldsReadonly($(this));
-    });
+  var msRequiresAuth = $("#msRequiresAuth");
+  msRequiresAuth.click(function (event) {
+    setMsAuthenticationFieldsReadonly($(this));
+  });
 }
 
 function setEnableSystemEmailsListener() {
-    var enableSystemEmails = $("#enableSystemEmail");
-    enableSystemEmails.click(function(event){
-        setSystemFromEmailReadonly();
-    });
+  var enableSystemEmails = $("#enableSystemEmail");
+  enableSystemEmails.click(function (event) {
+    setSystemFromEmailReadonly();
+  });
 }
 
 function setPodcastAutoSmartblockReadonly() {
-    var disablePodcastAutomSmartblock = $("#podcastAutoSmartblock-0");
-    var enablePodcastAutomSmartblock = $("#podcastAutoSmartblock-1");
-    var podcastOverride = $("#podcastAlbumOverride-1");
-    if ($(podcastOverride).is(':checked')) {
-        enablePodcastAutomSmartblock.removeAttr("readonly");
-    } else {
-        disablePodcastAutomSmartblock.prop("checked", true);
-        disablePodcastAutomSmartblock.attr("readonly","readonly");
-        enablePodcastAutomSmartblock.attr("readonly","readonly");
-    }
+  var disablePodcastAutomSmartblock = $("#podcastAutoSmartblock-0");
+  var enablePodcastAutomSmartblock = $("#podcastAutoSmartblock-1");
+  var podcastOverride = $("#podcastAlbumOverride-1");
+  if ($(podcastOverride).is(":checked")) {
+    enablePodcastAutomSmartblock.removeAttr("readonly");
+  } else {
+    disablePodcastAutomSmartblock.prop("checked", true);
+    disablePodcastAutomSmartblock.attr("readonly", "readonly");
+    enablePodcastAutomSmartblock.attr("readonly", "readonly");
+  }
 }
 
 function setSystemFromEmailReadonly() {
-    var enableSystemEmails = $("#enableSystemEmail");
-    var systemFromEmail = $("#systemEmail");
-    if ($(enableSystemEmails).is(':checked')) {
-        systemFromEmail.removeAttr("readonly");
-    } else {
-        systemFromEmail.attr("readonly", "readonly");
-    }
+  var enableSystemEmails = $("#enableSystemEmail");
+  var systemFromEmail = $("#systemEmail");
+  if ($(enableSystemEmails).is(":checked")) {
+    systemFromEmail.removeAttr("readonly");
+  } else {
+    systemFromEmail.attr("readonly", "readonly");
+  }
 }
 
 function setMailServerInputReadonly() {
-    var configMailServer = $("#configureMailServer");
-    var mailServer = $("#mailServer");
-    var port = $("#port");
-    var requiresAuthCB = $("#msRequiresAuth");
+  var configMailServer = $("#configureMailServer");
+  var mailServer = $("#mailServer");
+  var port = $("#port");
+  var requiresAuthCB = $("#msRequiresAuth");
 
-    if (configMailServer.is(':checked')) {
-        mailServer.removeAttr("readonly");
-        port.removeAttr("readonly");
-        requiresAuthCB.parent().show();
-    } else {
-        mailServer.attr("readonly", "readonly");
-        port.attr("readonly", "readonly");
-        requiresAuthCB.parent().hide();
-    }
+  if (configMailServer.is(":checked")) {
+    mailServer.removeAttr("readonly");
+    port.removeAttr("readonly");
+    requiresAuthCB.parent().show();
+  } else {
+    mailServer.attr("readonly", "readonly");
+    port.attr("readonly", "readonly");
+    requiresAuthCB.parent().hide();
+  }
 
-    setMsAuthenticationFieldsReadonly(requiresAuthCB);
+  setMsAuthenticationFieldsReadonly(requiresAuthCB);
 }
 
 function setTuneInSettingsListener() {
-    var enableTunein = $("#enable_tunein");
-    enableTunein.click(function(event){
-        setTuneInSettingsReadonly();
-    });
+  var enableTunein = $("#enable_tunein");
+  enableTunein.click(function (event) {
+    setTuneInSettingsReadonly();
+  });
 }
 
 function setTuneInSettingsReadonly() {
-    var enableTunein = $("#enable_tunein");
-    var stationId = $("#tunein_station_id");
-    var partnerKey = $("#tunein_partner_key");
-    var partnerId = $("#tunein_partner_id");
+  var enableTunein = $("#enable_tunein");
+  var stationId = $("#tunein_station_id");
+  var partnerKey = $("#tunein_partner_key");
+  var partnerId = $("#tunein_partner_id");
 
-    if (enableTunein.is(':checked')) {
-        stationId.removeAttr("readonly");
-        partnerKey.removeAttr("readonly");
-        partnerId.removeAttr("readonly");
-    } else {
-        stationId.attr("readonly", "readonly");
-        partnerKey.attr("readonly", "readonly");
-        partnerId.attr("readonly", "readonly");
-    }
+  if (enableTunein.is(":checked")) {
+    stationId.removeAttr("readonly");
+    partnerKey.removeAttr("readonly");
+    partnerId.removeAttr("readonly");
+  } else {
+    stationId.attr("readonly", "readonly");
+    partnerKey.attr("readonly", "readonly");
+    partnerId.attr("readonly", "readonly");
+  }
 }
 
 /*
  * Enable/disable mail server authentication fields
  */
 function setMsAuthenticationFieldsReadonly(ele) {
-    var email = $("#email");
-    var password = $("#ms_password");
-    var configureMailServer = $("#configureMailServer");
+  var email = $("#email");
+  var password = $("#ms_password");
+  var configureMailServer = $("#configureMailServer");
 
-    if (ele.is(':checked') && configureMailServer.is(':checked')) {
-        email.removeAttr("readonly");
-        password.removeAttr("readonly");
-    } else if (ele.not(':checked') || configureMailServer.not(':checked')) {
-        email.attr("readonly", "readonly");
-        password.attr("readonly", "readonly");
-    }
+  if (ele.is(":checked") && configureMailServer.is(":checked")) {
+    email.removeAttr("readonly");
+    password.removeAttr("readonly");
+  } else if (ele.not(":checked") || configureMailServer.not(":checked")) {
+    email.attr("readonly", "readonly");
+    password.attr("readonly", "readonly");
+  }
 }
 
 function removeLogo() {
-    $.post(baseUrl+'preference/remove-logo', {'csrf_token' : $('#csrf').val()}, function(json){
-        // Reload without resubmitting the form
-        location.href = location.href.replace(location.hash,"");
-    });
+  $.post(
+    baseUrl + "preference/remove-logo",
+    { csrf_token: $("#csrf").val() },
+    function (json) {
+      // Reload without resubmitting the form
+      location.href = location.href.replace(location.hash, "");
+    }
+  );
 }
 
 function deleteAllFiles() {
-    var resp = confirm($.i18n._("Are you sure you want to delete all the tracks in your library?"))
-    if (resp) {
-        $.post(baseUrl+'preference/delete-all-files', {'csrf_token' : $('#csrf').val()}, function(json){
-            location.reload();
-        });
-    }
+  var resp = confirm(
+    $.i18n._("Are you sure you want to delete all the tracks in your library?")
+  );
+  if (resp) {
+    $.post(
+      baseUrl + "preference/delete-all-files",
+      { csrf_token: $("#csrf").val() },
+      function (json) {
+        location.reload();
+      }
+    );
+  }
 }
 
-$(document).ready(function() {
+$(document).ready(function () {
+  $(".collapsible-header").live("click", function () {
+    $(this).next().toggle("fast");
+    $(this).toggleClass("closed");
+    return false;
+  });
 
-    $('.collapsible-header').live('click',function() {
-        $(this).next().toggle('fast');
-        $(this).toggleClass("closed");
-        return false;
-    });
+  if ($("#tunein-settings").find(".errors").length > 0) {
+    $(".collapsible-content#tunein-settings").show();
+  }
 
-    if ($("#tunein-settings").find(".errors").length > 0) {
-        $(".collapsible-content#tunein-settings").show();
-    }
-
-    /* No longer using AJAX for this form. Zend + our code makes it needlessly hard to deal with. -- Albert
+  /* No longer using AJAX for this form. Zend + our code makes it needlessly hard to deal with. -- Albert
     $('#pref_save').live('click', function() {
         var data = $('#pref_form').serialize();
         var url = baseUrl+'Preference/index';
@@ -155,43 +164,43 @@ $(document).ready(function() {
         });
     });*/
 
-    // when an image is uploaded, preview it to the user
-    var logo = $("#stationLogo"),
-        preview = $("#logo-img");
-    logo.change(function(e) {
-        if (this.files && this.files[0]) {
-            preview.show();
-            var reader = new FileReader(); // browser compatibility?
-            reader.onload = function (e) {
-                console.log("Reader loaded");
-                preview.attr('src', e.target.result);
-            };
+  // when an image is uploaded, preview it to the user
+  var logo = $("#stationLogo"),
+    preview = $("#logo-img");
+  logo.change(function (e) {
+    if (this.files && this.files[0]) {
+      preview.show();
+      var reader = new FileReader(); // browser compatibility?
+      reader.onload = function (e) {
+        console.log("Reader loaded");
+        preview.attr("src", e.target.result);
+      };
 
-            // check image size so we don't crash the page trying to render
-            if (validateImage(this.files[0], logo)) {
-                // read the image data as though it were a data URI
-                reader.readAsDataURL(this.files[0]);
-            } else {
-                // remove the file element data
-                $(this).val('').replaceWith($(this).clone(true));
-                preview.hide();
-            }
-        } else {
-            preview.hide();
-        }
-    });
-
-    if (preview.attr('src').indexOf('images/') > -1) {
-        $("#logo-remove-btn").hide();
+      // check image size so we don't crash the page trying to render
+      if (validateImage(this.files[0], logo)) {
+        // read the image data as though it were a data URI
+        reader.readAsDataURL(this.files[0]);
+      } else {
+        // remove the file element data
+        $(this).val("").replaceWith($(this).clone(true));
+        preview.hide();
+      }
+    } else {
+      preview.hide();
     }
+  });
 
-    showErrorSections();
+  if (preview.attr("src").indexOf("images/") > -1) {
+    $("#logo-remove-btn").hide();
+  }
 
-    setMailServerInputReadonly();
-    setPodcastAutoSmartblockReadonly();
-    setSystemFromEmailReadonly();
-    setConfigureMailServerListener();
-    setEnableSystemEmailsListener();
-    setTuneInSettingsReadonly();
-    setTuneInSettingsListener();
+  showErrorSections();
+
+  setMailServerInputReadonly();
+  setPodcastAutoSmartblockReadonly();
+  setSystemFromEmailReadonly();
+  setConfigureMailServerListener();
+  setEnableSystemEmailsListener();
+  setTuneInSettingsReadonly();
+  setTuneInSettingsListener();
 });
diff --git a/legacy/public/js/airtime/preferences/streamsetting.js b/legacy/public/js/airtime/preferences/streamsetting.js
index 7811b79b0..8c2ba587a 100644
--- a/legacy/public/js/airtime/preferences/streamsetting.js
+++ b/legacy/public/js/airtime/preferences/streamsetting.js
@@ -1,498 +1,611 @@
 function showErrorSections() {
-
-    $(".errors").each(function(i){
-        if($(this).length > 0){
-            var div = $(this).closest("div")
-            if(div.attr('class') == "stream-setting-content"){
-                $(this).closest("div").show();
-                $(this).closest("fieldset").removeClass('closed');
-                $(window).scrollTop($(this).closest("div").position().top);
-            }
-        }
-    });
-}
-function rebuildStreamURL(ele){
-    var div = ele.closest("div")
-    host = div.find("input[id$=-host]").val()
-    port = div.find("input[id$=-port]").val()
-    mount = div.find("input[id$=-mount]").val()
-    streamurl = ""
-    if(div.find("select[id$=-output]").val()=="icecast"){
-        streamurl = "http://"+host
-        if($.trim(port) != ""){
-            streamurl += ":"+port
-        }
-        if($.trim(mount) != ""){
-            streamurl += "/"+mount
-        }
-    }else{
-        streamurl = "http://"+host+":"+port+"/"
+  $(".errors").each(function (i) {
+    if ($(this).length > 0) {
+      var div = $(this).closest("div");
+      if (div.attr("class") == "stream-setting-content") {
+        $(this).closest("div").show();
+        $(this).closest("fieldset").removeClass("closed");
+        $(window).scrollTop($(this).closest("div").position().top);
+      }
     }
-    div.find("#stream_url").html('<a href="' + streamurl + '" target="_blank">' + streamurl + '</a>')
+  });
 }
-function restrictOggBitrate(ele, on){
-    var div = ele.closest("div")
-    if(on){
-        if(parseInt(div.find("select[id$=data-bitrate]").val(),10) < 48){
-            div.find("select[id$=data-bitrate]").find("option[value='48']").attr("selected","selected");
-        }
-        div.find("select[id$=data-bitrate]").find("option[value='24']").attr("disabled","disabled");
-        div.find("select[id$=data-bitrate]").find("option[value='32']").attr("disabled","disabled");
-    }else{
-        div.find("select[id$=data-bitrate]").find("option[value='24']").removeAttr("disabled");
-        div.find("select[id$=data-bitrate]").find("option[value='32']").removeAttr("disabled");
+function rebuildStreamURL(ele) {
+  var div = ele.closest("div");
+  host = div.find("input[id$=-host]").val();
+  port = div.find("input[id$=-port]").val();
+  mount = div.find("input[id$=-mount]").val();
+  streamurl = "";
+  if (div.find("select[id$=-output]").val() == "icecast") {
+    streamurl = "http://" + host;
+    if ($.trim(port) != "") {
+      streamurl += ":" + port;
     }
-}
-function hideForShoutcast(ele){
-    var div = ele.closest("div")
-    div.find("#outputMountpoint-label").hide()
-    div.find("#outputMountpoint-element").hide()
-    div.find("#outputUser-label").hide()
-    div.find("#outputUser-element").hide()
-    div.find("select[id$=data-type]").find("option[value='mp3']").attr('selected','selected');
-    div.find("select[id$=data-type]").find("option[value='ogg']").attr("disabled","disabled");
-    div.find("select[id$=data-type]").find("option[value='opus']").attr("disabled","disabled");
-
-    restrictOggBitrate(ele, false)
-}
-
-function validate(ele,evt) {
-    var theEvent = evt || window.event;
-    var key = theEvent.keyCode || theEvent.which;
-    if ((ele.val().length >= 5 || (key < 48 || key > 57)) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46)) {
-      theEvent.returnValue = false;
-      if(theEvent.preventDefault) theEvent.preventDefault();
+    if ($.trim(mount) != "") {
+      streamurl += "/" + mount;
     }
+  } else {
+    streamurl = "http://" + host + ":" + port + "/";
   }
+  div
+    .find("#stream_url")
+    .html('<a href="' + streamurl + '" target="_blank">' + streamurl + "</a>");
+}
+function restrictOggBitrate(ele, on) {
+  var div = ele.closest("div");
+  if (on) {
+    if (parseInt(div.find("select[id$=data-bitrate]").val(), 10) < 48) {
+      div
+        .find("select[id$=data-bitrate]")
+        .find("option[value='48']")
+        .attr("selected", "selected");
+    }
+    div
+      .find("select[id$=data-bitrate]")
+      .find("option[value='24']")
+      .attr("disabled", "disabled");
+    div
+      .find("select[id$=data-bitrate]")
+      .find("option[value='32']")
+      .attr("disabled", "disabled");
+  } else {
+    div
+      .find("select[id$=data-bitrate]")
+      .find("option[value='24']")
+      .removeAttr("disabled");
+    div
+      .find("select[id$=data-bitrate]")
+      .find("option[value='32']")
+      .removeAttr("disabled");
+  }
+}
+function hideForShoutcast(ele) {
+  var div = ele.closest("div");
+  div.find("#outputMountpoint-label").hide();
+  div.find("#outputMountpoint-element").hide();
+  div.find("#outputUser-label").hide();
+  div.find("#outputUser-element").hide();
+  div
+    .find("select[id$=data-type]")
+    .find("option[value='mp3']")
+    .attr("selected", "selected");
+  div
+    .find("select[id$=data-type]")
+    .find("option[value='ogg']")
+    .attr("disabled", "disabled");
+  div
+    .find("select[id$=data-type]")
+    .find("option[value='opus']")
+    .attr("disabled", "disabled");
 
-
-function showForIcecast(ele){
-    var div = ele.closest("div");
-    div.find("#outputMountpoint-label").show();
-    div.find("#outputMountpoint-element").show();
-    div.find("#outputUser-label").show();
-    div.find("#outputUser-element").show();
-    div.find("select[id$=data-type]").find("option[value='ogg']").removeAttr("disabled");
-    div.find("select[id$=data-type]").find("option[value='opus']").removeAttr("disabled");
+  restrictOggBitrate(ele, false);
 }
 
-function checkLiquidsoapStatus(){
-    var url = baseUrl+'Preference/get-liquidsoap-status/format/json';
-    var id = $(this).attr("id");
-    $.post(url, function(json_obj){
-        for(var i=0;i<json_obj.length;i++){
-            var obj = json_obj[i];
-            var id;
-            var status;
-            for(var key in obj){
-                if(key == "id"){
-                    id = obj[key];
-                }
-                if(key == "status"){
-                    status = obj[key];
-                }
-            }
-            var html;
-            if(status == "OK"){
-                html = '<div class="stream-status status-good"><p>'+$.i18n._("Connected to the streaming server")+'</p></div>';
-            }else if(status == "N/A"){
-                html = '<div class="stream-status status-disabled"><p>'+$.i18n._("The stream is disabled")+'</p></div>';
-            }else if(status == "waiting"){
-            	html = '<div class="stream-status status-info"><p>'+$.i18n._("Getting information from the server...")+'</p></div>';
-            }else{
-                html = '<div class="stream-status status-error"><p>'+$.i18n._("Can not connect to the streaming server")+'</p><p>'+status+'</p></div>';
-            }
-            $("#s"+id+"Liquidsoap-error-msg-element").html(html);
-        }
-
-        setTimeout(checkLiquidsoapStatus, 2000);
-    });
+function validate(ele, evt) {
+  var theEvent = evt || window.event;
+  var key = theEvent.keyCode || theEvent.which;
+  if (
+    (ele.val().length >= 5 || key < 48 || key > 57) &&
+    !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46)
+  ) {
+    theEvent.returnValue = false;
+    if (theEvent.preventDefault) theEvent.preventDefault();
+  }
 }
 
-function setLiveSourceConnectionOverrideListener(){
-    $("[id=connection_url_override]").click(function(event){
-        var url_input = $(this).parent().find("dd[id$='_source_host-element']").children();
-        url_input.removeAttr("readonly");
-        $(this).parent().find("div[id$='_dj_connection_url_actions']").show();
-        event.preventDefault();
-    });
-
-    // set action for "OK" and "X"
-    var live_dj_actions = $("#live_dj_connection_url_actions");
-    var live_dj_input = live_dj_actions.parent().find("dd[id$='_source_host-element']").children();
-    var master_dj_actions = $("#master_dj_connection_url_actions");
-    var master_dj_input = master_dj_actions.parent().find("dd[id$='_source_host-element']").children();
-
-    live_dj_actions.find("#ok").click(function(event){
-    	event.preventDefault();
-        var url = live_dj_input.val();
-        live_dj_input.val(url);
-        live_dj_input.attr("readonly", "readonly");
-        live_dj_actions.hide();
-        $.get(baseUrl+"Preference/set-source-connection-url", {format: "json", type: "livedj", url:encodeURIComponent(url), override: 1});
-    	event.preventDefault();
-    });
-
-    live_dj_actions.find("#reset").click(function(event){
-    	event.preventDefault();
-        var port = $("#show_source_port").val();
-        var mount = $("#show_source_mount").val();
-        if (mount.charAt(0) != '/') {
-            mount = ('/').concat(mount);
-        }
-        var url = "http://"+location.hostname+":"+port+mount;
-        live_dj_input.val(url);
-        live_dj_input.attr("readonly", "readonly");
-        live_dj_actions.hide();
-        $.get(baseUrl+"Preference/set-source-connection-url", {format: "json", type: "livedj", url:encodeURIComponent(url), override: 0});
-    	event.preventDefault();
-    });
-
-    master_dj_actions.find("#ok").click(function(event){
-        var url = master_dj_input.val();
-        master_dj_input.val(url);
-        master_dj_input.attr("readonly", "readonly");
-        master_dj_actions.hide();
-        $.get(baseUrl+"Preference/set-source-connection-url", {format: "json", type: "masterdj", url:encodeURIComponent(url), override: 1});
-        event.preventDefault();
-    });
-
-    master_dj_actions.find("#reset").click(function(event){
-        var port = $("#master_source_port").val();
-        var mount = $("#master_source_mount").val();
-        if (mount.charAt(0) != '/') {
-            mount = ('/').concat(mount);
-        }
-        var url = "http://"+location.hostname+":"+port+mount;
-        master_dj_input.val(url);
-        master_dj_input.attr("readonly", "readonly");
-        master_dj_actions.hide();
-        $.get(baseUrl+"Preference/set-source-connection-url", {format: "json", type: "masterdj", url:encodeURIComponent(url), override: 0});
-        event.preventDefault();
-    });
+function showForIcecast(ele) {
+  var div = ele.closest("div");
+  div.find("#outputMountpoint-label").show();
+  div.find("#outputMountpoint-element").show();
+  div.find("#outputUser-label").show();
+  div.find("#outputUser-element").show();
+  div
+    .find("select[id$=data-type]")
+    .find("option[value='ogg']")
+    .removeAttr("disabled");
+  div
+    .find("select[id$=data-type]")
+    .find("option[value='opus']")
+    .removeAttr("disabled");
 }
 
+function checkLiquidsoapStatus() {
+  var url = baseUrl + "Preference/get-liquidsoap-status/format/json";
+  var id = $(this).attr("id");
+  $.post(url, function (json_obj) {
+    for (var i = 0; i < json_obj.length; i++) {
+      var obj = json_obj[i];
+      var id;
+      var status;
+      for (var key in obj) {
+        if (key == "id") {
+          id = obj[key];
+        }
+        if (key == "status") {
+          status = obj[key];
+        }
+      }
+      var html;
+      if (status == "OK") {
+        html =
+          '<div class="stream-status status-good"><p>' +
+          $.i18n._("Connected to the streaming server") +
+          "</p></div>";
+      } else if (status == "N/A") {
+        html =
+          '<div class="stream-status status-disabled"><p>' +
+          $.i18n._("The stream is disabled") +
+          "</p></div>";
+      } else if (status == "waiting") {
+        html =
+          '<div class="stream-status status-info"><p>' +
+          $.i18n._("Getting information from the server...") +
+          "</p></div>";
+      } else {
+        html =
+          '<div class="stream-status status-error"><p>' +
+          $.i18n._("Can not connect to the streaming server") +
+          "</p><p>" +
+          status +
+          "</p></div>";
+      }
+      $("#s" + id + "Liquidsoap-error-msg-element").html(html);
+    }
+
+    setTimeout(checkLiquidsoapStatus, 2000);
+  });
+}
+
+function setLiveSourceConnectionOverrideListener() {
+  $("[id=connection_url_override]").click(function (event) {
+    var url_input = $(this)
+      .parent()
+      .find("dd[id$='_source_host-element']")
+      .children();
+    url_input.removeAttr("readonly");
+    $(this).parent().find("div[id$='_dj_connection_url_actions']").show();
+    event.preventDefault();
+  });
+
+  // set action for "OK" and "X"
+  var live_dj_actions = $("#live_dj_connection_url_actions");
+  var live_dj_input = live_dj_actions
+    .parent()
+    .find("dd[id$='_source_host-element']")
+    .children();
+  var master_dj_actions = $("#master_dj_connection_url_actions");
+  var master_dj_input = master_dj_actions
+    .parent()
+    .find("dd[id$='_source_host-element']")
+    .children();
+
+  live_dj_actions.find("#ok").click(function (event) {
+    event.preventDefault();
+    var url = live_dj_input.val();
+    live_dj_input.val(url);
+    live_dj_input.attr("readonly", "readonly");
+    live_dj_actions.hide();
+    $.get(baseUrl + "Preference/set-source-connection-url", {
+      format: "json",
+      type: "livedj",
+      url: encodeURIComponent(url),
+      override: 1,
+    });
+    event.preventDefault();
+  });
+
+  live_dj_actions.find("#reset").click(function (event) {
+    event.preventDefault();
+    var port = $("#show_source_port").val();
+    var mount = $("#show_source_mount").val();
+    if (mount.charAt(0) != "/") {
+      mount = "/".concat(mount);
+    }
+    var url = "http://" + location.hostname + ":" + port + mount;
+    live_dj_input.val(url);
+    live_dj_input.attr("readonly", "readonly");
+    live_dj_actions.hide();
+    $.get(baseUrl + "Preference/set-source-connection-url", {
+      format: "json",
+      type: "livedj",
+      url: encodeURIComponent(url),
+      override: 0,
+    });
+    event.preventDefault();
+  });
+
+  master_dj_actions.find("#ok").click(function (event) {
+    var url = master_dj_input.val();
+    master_dj_input.val(url);
+    master_dj_input.attr("readonly", "readonly");
+    master_dj_actions.hide();
+    $.get(baseUrl + "Preference/set-source-connection-url", {
+      format: "json",
+      type: "masterdj",
+      url: encodeURIComponent(url),
+      override: 1,
+    });
+    event.preventDefault();
+  });
+
+  master_dj_actions.find("#reset").click(function (event) {
+    var port = $("#master_source_port").val();
+    var mount = $("#master_source_mount").val();
+    if (mount.charAt(0) != "/") {
+      mount = "/".concat(mount);
+    }
+    var url = "http://" + location.hostname + ":" + port + mount;
+    master_dj_input.val(url);
+    master_dj_input.attr("readonly", "readonly");
+    master_dj_actions.hide();
+    $.get(baseUrl + "Preference/set-source-connection-url", {
+      format: "json",
+      type: "masterdj",
+      url: encodeURIComponent(url),
+      override: 0,
+    });
+    event.preventDefault();
+  });
+}
 
 function setupEventListeners() {
-    // initial stream url
-    $("dd[id=outputStreamURL-element]").each(function(){
-        rebuildStreamURL($(this));
-    })
+  // initial stream url
+  $("dd[id=outputStreamURL-element]").each(function () {
+    rebuildStreamURL($(this));
+  });
 
-    $("input[id$=-host], input[id$=-port], input[id$=-mount]").keyup(function(){
-        rebuildStreamURL($(this));
-    });
+  $("input[id$=-host], input[id$=-port], input[id$=-mount]").keyup(function () {
+    rebuildStreamURL($(this));
+  });
 
-    $("input[id$=-port]").keypress(function(e){
-        validate($(this),e);
-    });
+  $("input[id$=-port]").keypress(function (e) {
+    validate($(this), e);
+  });
 
-    $("select[id$=-output]").change(function(){
-        rebuildStreamURL($(this));
-    });
+  $("select[id$=-output]").change(function () {
+    rebuildStreamURL($(this));
+  });
 
-    if(!$("#output_sound_device").is(':checked')){
-        $("select[id=output_sound_device_type]").attr('disabled', 'disabled');
-    }else{
-        $("select[id=output_sound_device_type]").removeAttr('disabled');
+  if (!$("#output_sound_device").is(":checked")) {
+    $("select[id=output_sound_device_type]").attr("disabled", "disabled");
+  } else {
+    $("select[id=output_sound_device_type]").removeAttr("disabled");
+  }
+
+  $("#output_sound_device").change(function () {
+    if ($(this).is(":checked")) {
+      $("select[id=output_sound_device_type]").removeAttr("disabled");
+    } else {
+      $("select[id=output_sound_device_type]").attr("disabled", "disabled");
     }
+  });
 
-    $("#output_sound_device").change(function(){
-        if($(this).is(':checked')){
-        	$("select[id=output_sound_device_type]").removeAttr('disabled');
-        }else{
-        	$("select[id=output_sound_device_type]").attr('disabled', 'disabled');
-        }
-    });
+  $("select[id$=data-type]").change(function () {
+    if ($(this).val() == "ogg") {
+      restrictOggBitrate($(this), true);
+    } else {
+      restrictOggBitrate($(this), false);
+    }
+  });
 
-    $("select[id$=data-type]").change(function(){
-        if($(this).val() == 'ogg'){
-            restrictOggBitrate($(this), true);
-        }else{
-            restrictOggBitrate($(this), false);
-        }
-    });
+  $("select[id$=data-type]").each(function () {
+    if ($(this).val() == "ogg") {
+      restrictOggBitrate($(this), true);
+    }
+  });
 
-    $("select[id$=data-type]").each(function(){
-        if($(this).val() == 'ogg'){
-            restrictOggBitrate($(this), true);
-        }
-    });
+  $("select[id$=data-output]").change(function () {
+    if ($(this).val() == "shoutcast") {
+      hideForShoutcast($(this));
+    } else {
+      showForIcecast($(this));
+    }
+  });
 
-    $("select[id$=data-output]").change(function(){
-        if($(this).val() == 'shoutcast'){
-            hideForShoutcast($(this));
-        }else{
-            showForIcecast($(this));
-        }
-    });
+  $("select[id$=data-output]").each(function () {
+    if ($(this).val() == "shoutcast") {
+      hideForShoutcast($(this));
+    }
+  });
 
-    $("select[id$=data-output]").each(function(){
-        if($(this).val() == 'shoutcast'){
-            hideForShoutcast($(this));
-        }
-    });
+  $(".toggle legend").click(function () {
+    $(this).parent().toggleClass("closed");
+    return false;
+  });
 
-    $('.toggle legend').click(function() {
-        $(this).parent().toggleClass('closed');
-        return false;
-    });
+  $(".collapsible-header").click(function () {
+    $(this).next().toggle("fast");
+    $(this).toggleClass("closed");
+    return false;
+  });
 
-    $('.collapsible-header').click(function() {
-        $(this).next().toggle('fast');
-        $(this).toggleClass("closed");
-        return false;
-    });
+  setLiveSourceConnectionOverrideListener();
 
-    setLiveSourceConnectionOverrideListener();
+  showErrorSections();
+  checkLiquidsoapStatus();
 
-    showErrorSections();
-    checkLiquidsoapStatus();
+  var userManualAnchorOpen =
+    "<a target='_blank' href='" + USER_MANUAL_URL + "'>";
 
-    var userManualAnchorOpen = "<a target='_blank' href='" + USER_MANUAL_URL + "'>";
+  // qtip for help text
+  $(".override_help_icon").qtip({
+    content: {
+      text:
+        sprintf(
+          $.i18n._(
+            "If %s is behind a router or firewall, you may need to configure port forwarding and this field information will be incorrect. In this case you will need to manually update this field so it shows the correct host/port/mount that your DJ's need to connect to. The allowed range is between 1024 and 49151."
+          ),
+          PRODUCT_NAME
+        ) +
+        " " +
+        sprintf(
+          $.i18n._("For more details, please read the %s%s Manual%s"),
+          userManualAnchorOpen,
+          PRODUCT_NAME,
+          "</a>"
+        ),
+    },
+    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",
+    },
+  });
 
-    // qtip for help text
-    $(".override_help_icon").qtip({
-        content: {
-            text: sprintf($.i18n._("If %s is behind a router or firewall, you may need to configure port forwarding and this field information will be incorrect. In this case you will need to manually update this field so it shows the correct host/port/mount that your DJ's need to connect to. The allowed range is between 1024 and 49151."), PRODUCT_NAME)+" "+
-                sprintf($.i18n._(
-                    "For more details, please read the %s%s Manual%s"), userManualAnchorOpen, PRODUCT_NAME, "</a>")
-        },
-        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"
-        },
-    });
+  $(".icecast_metadata_help_icon").qtip({
+    content: {
+      text: $.i18n._(
+        "Check this option to enable metadata for OGG streams (stream metadata is the track title, artist, and show name that is displayed in an audio player). VLC and mplayer have a serious bug when playing an OGG/VORBIS stream that has metadata information enabled: they will disconnect from the stream after every song. If you are using an OGG stream and your listeners do not require support for these audio players, then feel free to enable this option."
+      ),
+    },
+    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",
+    },
+  });
 
-    $(".icecast_metadata_help_icon").qtip({
-        content: {
-            text: $.i18n._("Check this option to enable metadata for OGG streams (stream metadata is the track title, artist, and show name that is displayed in an audio player). VLC and mplayer have a serious bug when playing an OGG/VORBIS stream that has metadata information enabled: they will disconnect from the stream after every song. If you are using an OGG stream and your listeners do not require support for these audio players, then feel free to enable this option.")
-        },
-        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"
-        },
-    });
+  $("#auto_transition_help").qtip({
+    content: {
+      text: $.i18n._(
+        "Check this box to automatically switch off Master/Show source upon source disconnection."
+      ),
+    },
+    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",
+    },
+  });
 
-    $("#auto_transition_help").qtip({
-        content: {
-            text: $.i18n._("Check this box to automatically switch off Master/Show source upon source disconnection.")
-        },
-        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"
-        },
-    });
+  $("#auto_switch_help").qtip({
+    content: {
+      text: $.i18n._(
+        "Check this box to automatically switch on Master/Show source upon source connection."
+      ),
+    },
+    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",
+    },
+  });
 
-    $("#auto_switch_help").qtip({
-        content: {
-            text: $.i18n._("Check this box to automatically switch on Master/Show source upon source connection.")
-        },
-        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"
-        },
-    });
+  $(".stream_username_help_icon").qtip({
+    content: {
+      text: $.i18n._(
+        "If your Icecast server expects a username of 'source', this field can be left blank."
+      ),
+    },
+    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",
+    },
+  });
 
-    $(".stream_username_help_icon").qtip({
-        content: {
-            text: $.i18n._("If your Icecast server expects a username of 'source', this field can be left blank.")
-        },
-        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"
-        },
-    });
+  $(".admin_username_help_icon").qtip({
+    content: {
+      text: $.i18n._(
+        "This is the admin username and password for Icecast/SHOUTcast to get listener statistics."
+      ),
+    },
+    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",
+    },
+  });
 
-    $(".admin_username_help_icon").qtip({
-        content: {
-            text: $.i18n._("This is the admin username and password for Icecast/SHOUTcast to get listener statistics.")
-        },
-        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"
-        },
-    });
+  $(".master_username_help_icon").qtip({
+    content: {
+      text: $.i18n._(
+        "If your live streaming client does not ask for a username, this field should be 'source'."
+      ),
+    },
+    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",
+    },
+  });
 
-    $(".master_username_help_icon").qtip({
-        content: {
-            text: $.i18n._("If your live streaming client does not ask for a username, this field should be 'source'.")
-        },
-        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"
-        },
-    });
-
-    $(".stream_type_help_icon").qtip({
-    	content: {
-            text: sprintf(
-                	$.i18n._("Some stream types require extra configuration. Details about enabling %sAAC+ Support%s or %sOpus Support%s are provided."),
-                    "<a target='_blank' href='https://wiki.sourcefabric.org/x/NgPQ'>",
-                    "</a>",
-                    "<a target='_blank' href='https://wiki.sourcefabric.org/x/KgPQ'>",
-                    "</a>")
-        },
-        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"
-        },
-    });
+  $(".stream_type_help_icon").qtip({
+    content: {
+      text: sprintf(
+        $.i18n._(
+          "Some stream types require extra configuration. Details about enabling %sAAC+ Support%s or %sOpus Support%s are provided."
+        ),
+        "<a target='_blank' href='https://wiki.sourcefabric.org/x/NgPQ'>",
+        "</a>",
+        "<a target='_blank' href='https://wiki.sourcefabric.org/x/KgPQ'>",
+        "</a>"
+      ),
+    },
+    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",
+    },
+  });
 }
 
-function setSliderForReplayGain(){
-    $( "#slider-range-max" ).slider({
-        range: "max",
-        min: -10,
-        max: 10,
-        value: $("#rg_modifier_value").html(),
-        slide: function( event, ui ) {
-            $( "#replayGainModifier" ).val( ui.value );
-            $("#rg_modifier_value").html(ui.value);
-        }
-    });
-    $( "#replayGainModifier" ).val( $( "#slider-range-max" ).slider( "value" ) );
+function setSliderForReplayGain() {
+  $("#slider-range-max").slider({
+    range: "max",
+    min: -10,
+    max: 10,
+    value: $("#rg_modifier_value").html(),
+    slide: function (event, ui) {
+      $("#replayGainModifier").val(ui.value);
+      $("#rg_modifier_value").html(ui.value);
+    },
+  });
+  $("#replayGainModifier").val($("#slider-range-max").slider("value"));
 }
 
 function setPseudoAdminPassword(s1, s2, s3, s4) {
-    if (s1) {
-        $('#s1_data-admin_pass').val('xxxxxx');
-    }
-    if (s2) {
-        $('#s2_data-admin_pass').val('xxxxxx');
-    }
-    if (s3) {
-        $('#s3_data-admin_pass').val('xxxxxx');
-    }
-    if (s4) {
-        $('#s4_data-admin_pass').val('xxxxxx');
-    }
+  if (s1) {
+    $("#s1_data-admin_pass").val("xxxxxx");
+  }
+  if (s2) {
+    $("#s2_data-admin_pass").val("xxxxxx");
+  }
+  if (s3) {
+    $("#s3_data-admin_pass").val("xxxxxx");
+  }
+  if (s4) {
+    $("#s4_data-admin_pass").val("xxxxxx");
+  }
 }
 
 function getAdminPasswordStatus() {
-    $.ajax({ url: baseUrl+'Preference/get-admin-password-status/format/json', dataType:"json", success:function(data){
-        setPseudoAdminPassword(data.s1, data.s2, data.s3, data.s4);
-      }});
+  $.ajax({
+    url: baseUrl + "Preference/get-admin-password-status/format/json",
+    dataType: "json",
+    success: function (data) {
+      setPseudoAdminPassword(data.s1, data.s2, data.s3, data.s4);
+    },
+  });
 }
 
-$(document).ready(function() {
-    setupEventListeners();
-    setSliderForReplayGain();
-    getAdminPasswordStatus();
-    var s = $("[name^='customStreamSettings']:checked");
+$(document).ready(function () {
+  setupEventListeners();
+  setSliderForReplayGain();
+  getAdminPasswordStatus();
+  var s = $("[name^='customStreamSettings']:checked");
 
-    $("[id^='stream_save'], [name^='customStreamSettings']").live('click', function() {
-        var e = $(this);
-        if (e[0] == s[0]) { return; }
-        var confirm_pypo_restart_text = $.i18n._("WARNING: This will restart your stream and may cause a short dropout for your listeners!");
-        if (confirm(confirm_pypo_restart_text)) {
-            var data = $('#stream_form').serialize();
-            var url = baseUrl+'Preference/stream-setting';
+  $("[id^='stream_save'], [name^='customStreamSettings']").live(
+    "click",
+    function () {
+      var e = $(this);
+      if (e[0] == s[0]) {
+        return;
+      }
+      var confirm_pypo_restart_text = $.i18n._(
+        "WARNING: This will restart your stream and may cause a short dropout for your listeners!"
+      );
+      if (confirm(confirm_pypo_restart_text)) {
+        var data = $("#stream_form").serialize();
+        var url = baseUrl + "Preference/stream-setting";
 
-            $.post(url, {format:"json", data: data}, function(json){
-                $('#content').empty().append(json.html);
-                if (json.valid) {
-                    window.location.reload();
-                }
-                setupEventListeners();
-                setSliderForReplayGain();
-                getAdminPasswordStatus();
-            });
-        } else {
-            if (e.prop('checked')) {
-                if (e[0] != s[0]) {
-                    e.prop('checked', false);
-                    s.prop('checked', true);
-                }
-            }
+        $.post(url, { format: "json", data: data }, function (json) {
+          $("#content").empty().append(json.html);
+          if (json.valid) {
+            window.location.reload();
+          }
+          setupEventListeners();
+          setSliderForReplayGain();
+          getAdminPasswordStatus();
+        });
+      } else {
+        if (e.prop("checked")) {
+          if (e[0] != s[0]) {
+            e.prop("checked", false);
+            s.prop("checked", true);
+          }
         }
-    });
+      }
+    }
+  );
 });
diff --git a/legacy/public/js/airtime/schedule/add-show.js b/legacy/public/js/airtime/schedule/add-show.js
index 9f8854503..8996a6d7b 100644
--- a/legacy/public/js/airtime/schedule/add-show.js
+++ b/legacy/public/js/airtime/schedule/add-show.js
@@ -1,1011 +1,1154 @@
 /**
-*
-*    Schedule Dialog creation methods.
-*
-*/
+ *
+ *    Schedule Dialog creation methods.
+ *
+ */
 
 // Init Day.JS plugins
 dayjs.extend(window.dayjs_plugin_utc);
 dayjs.extend(window.dayjs_plugin_timezone);
 
 function openAddShowForm(nowOrFuture) {
-     if($("#add-show-form").length == 1) {
-        if( ($("#add-show-form").css('display')=='none')) {
+  if ($("#add-show-form").length == 1) {
+    if ($("#add-show-form").css("display") == "none") {
+      if (nowOrFuture === true) {
+        //true means "now"
+        $("#add_show_start_now-now").attr("checked", "checked");
+        setupStartTimeWidgets();
+      }
+      $("#add-show-form").show();
 
-            if (nowOrFuture === true) //true means "now"
-            {
-                $('#add_show_start_now-now').attr('checked', 'checked');
-                setupStartTimeWidgets();
-            }
-            $("#add-show-form").show();
+      windowResize();
 
-            windowResize();
-
-            // collapse advanced configuration sections
-            $('#schedule-show-auto').hide();
-            $('#live-stream-override').hide();
-            $('#schedule-record-rebroadcast').hide();
-            $('#schedule-show-who').hide();
-            $('#schedule-show-style').hide();
-
-        }
-        $("#schedule-show-what").show(0, function(){
-            $add_show_name = $("#add_show_name");
-            $add_show_name.focus();
-            $add_show_name.select();
-        });
+      // collapse advanced configuration sections
+      $("#schedule-show-auto").hide();
+      $("#live-stream-override").hide();
+      $("#schedule-record-rebroadcast").hide();
+      $("#schedule-show-who").hide();
+      $("#schedule-show-style").hide();
     }
+    $("#schedule-show-what").show(0, function () {
+      $add_show_name = $("#add_show_name");
+      $add_show_name.focus();
+      $add_show_name.select();
+    });
+  }
 }
 
 function makeAddShowButton() {
-    if($('.add-button').length === 0) {
-        $('.fc-header-left')
-            .prepend('<span class="fc-header-space"></span>')
-            .prepend('<span class="btn-group">' +
-                        '<button onclick="showForm()" class="add-button btn btn-small btn-new">' +
-                            '<i class="icon-white icon-plus"></i>' +
-                            '<span>' + $.i18n._("New Show") + '</span>' +
-                        '</button>' +
-                    '</span>');
-    }
+  if ($(".add-button").length === 0) {
+    $(".fc-header-left")
+      .prepend('<span class="fc-header-space"></span>')
+      .prepend(
+        '<span class="btn-group">' +
+          '<button onclick="showForm()" class="add-button btn btn-small btn-new">' +
+          '<i class="icon-white icon-plus"></i>' +
+          "<span>" +
+          $.i18n._("New Show") +
+          "</span>" +
+          "</button>" +
+          "</span>"
+      );
+  }
 }
 
 function showForm() {
-    openAddShowForm(true);
-    toggleAddShowButton();
+  openAddShowForm(true);
+  toggleAddShowButton();
 }
 
-function toggleAddShowButton(){
-    var aTag = $('.add-button');
-    aTag.prop('disabled', function(i, v) { return !v; });
+function toggleAddShowButton() {
+  var aTag = $(".add-button");
+  aTag.prop("disabled", function (i, v) {
+    return !v;
+  });
 }
 
 function setupStartTimeWidgets() {
-    if ($('input[name=add_show_start_now]:checked').val() == 'now') {
-        $('#add_show_start_date').prop('disabled', 'true');
-        $('#add_show_start_time').prop('disabled', 'true');
-        var currentTimezone = $("#add_show_timezone").val();
+  if ($("input[name=add_show_start_now]:checked").val() == "now") {
+    $("#add_show_start_date").prop("disabled", "true");
+    $("#add_show_start_time").prop("disabled", "true");
+    var currentTimezone = $("#add_show_timezone").val();
 
-        //Set the show start time to now (in the show timezone)
-        var now = dayjs(new Date()).tz(currentTimezone);
-        $('#add_show_start_date').val(now.format('YYYY-MM-DD'));
-        $('#add_show_start_time').val(now.format('HH:mm'));
+    //Set the show start time to now (in the show timezone)
+    var now = dayjs(new Date()).tz(currentTimezone);
+    $("#add_show_start_date").val(now.format("YYYY-MM-DD"));
+    $("#add_show_start_time").val(now.format("HH:mm"));
 
-        //Set the show end time to be now + 1 hour.
-        var nowShowEnd = now.add(1, 'h');
-        $('#add_show_end_date').val(nowShowEnd.format('YYYY-MM-DD'));
-        $('#add_show_end_date_no_repeat').val(nowShowEnd.format('YYYY-MM-DD'));
-        $('#add_show_end_time').val(nowShowEnd.format('HH:mm'));
+    //Set the show end time to be now + 1 hour.
+    var nowShowEnd = now.add(1, "h");
+    $("#add_show_end_date").val(nowShowEnd.format("YYYY-MM-DD"));
+    $("#add_show_end_date_no_repeat").val(nowShowEnd.format("YYYY-MM-DD"));
+    $("#add_show_end_time").val(nowShowEnd.format("HH:mm"));
 
-        //Disabled linked show option since user won't be able to schedule
-        //content
-        $('#add_show_linked').prop('disabled', 'true');
-
-    } else {
-        //Do not enable start date and time option when a show has already started
-        if (!$('#add_show_start_now-now').prop('disabled')) {
-            $('#add_show_start_date').removeProp('disabled');
-            $('#add_show_start_time').removeProp('disabled');
-        }
+    //Disabled linked show option since user won't be able to schedule
+    //content
+    $("#add_show_linked").prop("disabled", "true");
+  } else {
+    //Do not enable start date and time option when a show has already started
+    if (!$("#add_show_start_now-now").prop("disabled")) {
+      $("#add_show_start_date").removeProp("disabled");
+      $("#add_show_start_time").removeProp("disabled");
     }
+  }
 }
 
 function calculateShowColor() {
-    var bgColorEle = $("#add_show_background_color");
-    var textColorEle = $("#add_show_color");
-    var colorCode = stringToColor($('#add_show_start_time').val());//$(this).val());
-    //bgColorEle.val(colorCode);
-    //textColorEle.val(getContrastYIQ(colorCode));
+  var bgColorEle = $("#add_show_background_color");
+  var textColorEle = $("#add_show_color");
+  var colorCode = stringToColor($("#add_show_start_time").val()); //$(this).val());
+  //bgColorEle.val(colorCode);
+  //textColorEle.val(getContrastYIQ(colorCode));
 }
 
 //$el is DOM element #add-show-form
 //form is the new form contents to append to $el
 function redrawAddShowForm($el, form) {
+  //need to clean up the color picker.
+  $el.find("#schedule-show-style input").each(function (i, el) {
+    var $input = $(this),
+      colId = $input.data("colorpickerId");
 
-    //need to clean up the color picker.
-    $el.find("#schedule-show-style input").each(function(i, el){
-        var $input = $(this),
-            colId = $input.data("colorpickerId");
+    $("#" + colId).remove();
+    $input.removeData();
+  });
 
-        $("#"+colId).remove();
-        $input.removeData();
-    });
+  $el.empty().append(form);
 
-    $el.empty().append(form);
-
-    setAddShowEvents($el);
+  setAddShowEvents($el);
 }
 
 function closeAddShowForm(event) {
-    event.stopPropagation();
-    event.preventDefault();
+  event.stopPropagation();
+  event.preventDefault();
 
-    var $el = $("#add-show-form");
+  var $el = $("#add-show-form");
 
-    $el.hide();
-    windowResize();
+  $el.hide();
+  windowResize();
 
-    $.get(baseUrl+"Schedule/get-form", {format:"json"}, function(json) {
+  $.get(baseUrl + "Schedule/get-form", { format: "json" }, function (json) {
+    redrawAddShowForm($el, json.form);
+  });
 
-        redrawAddShowForm($el, json.form);
-    });
-
-    toggleAddShowButton();
+  toggleAddShowButton();
 }
 
 //dateText mm-dd-yy
 function startDpSelect(dateText, inst) {
-    var time, date;
+  var time, date;
 
-    time = dateText.split("-");
-    date = new Date(time[0], time[1] - 1, time[2]);
+  time = dateText.split("-");
+  date = new Date(time[0], time[1] - 1, time[2]);
 
-    if (inst.input)
-        inst.input.trigger('input');
+  if (inst.input) inst.input.trigger("input");
 }
 
 function endDpSelect(dateText, inst) {
-    var time, date;
+  var time, date;
 
-    time = dateText.split("-");
-    date = new Date(time[0], time[1] - 1, time[2]);
+  time = dateText.split("-");
+  date = new Date(time[0], time[1] - 1, time[2]);
 
-    if (inst.input)
-        inst.input.trigger('input');
+  if (inst.input) inst.input.trigger("input");
 }
 
 function createDateInput(el, onSelect) {
-    var date;
+  var date;
 
-    el.datepicker({
-        minDate: adjustDateToServerDate(new Date(), timezoneOffset),
-        onSelect: onSelect,
-        dateFormat: 'yy-mm-dd',
-        //i18n_months, i18n_days_short are in common.js
-        monthNames: i18n_months,
-        dayNamesMin: i18n_days_short,
-        closeText: $.i18n._('Close'),
-        //showButtonPanel: true,
-        firstDay: calendarPref.weekStart
-        });
+  el.datepicker({
+    minDate: adjustDateToServerDate(new Date(), timezoneOffset),
+    onSelect: onSelect,
+    dateFormat: "yy-mm-dd",
+    //i18n_months, i18n_days_short are in common.js
+    monthNames: i18n_months,
+    dayNamesMin: i18n_days_short,
+    closeText: $.i18n._("Close"),
+    //showButtonPanel: true,
+    firstDay: calendarPref.weekStart,
+  });
 }
 
 function autoSelect(event, ui) {
-
-    $("#add_show_hosts-"+ui.item.index).attr("checked", "checked");
-    event.preventDefault();
+  $("#add_show_hosts-" + ui.item.index).attr("checked", "checked");
+  event.preventDefault();
 }
 
 function findHosts(request, callback) {
-    var search, url;
+  var search, url;
 
-    url = baseUrl+"User/get-hosts";
-    search = request.term;
+  url = baseUrl + "User/get-hosts";
+  search = request.term;
 
-    var noResult = new Array();
-    noResult[0] = new Array();
-    noResult[0]['value'] = $("#add_show_hosts_autocomplete").val();
-    noResult[0]['label'] = $.i18n._("No result found");
-    noResult[0]['index'] = null;
+  var noResult = new Array();
+  noResult[0] = new Array();
+  noResult[0]["value"] = $("#add_show_hosts_autocomplete").val();
+  noResult[0]["label"] = $.i18n._("No result found");
+  noResult[0]["index"] = null;
 
-    $.post(url,
-        {format: "json", term: search},
+  $.post(
+    url,
+    { format: "json", term: search },
 
-        function(json) {
-            if(json.hosts.length<1){
-                callback(noResult);
-            }else{
-                callback(json.hosts);
-            }
-        });
-
-}
-
-function beginEditShow(data){
-
-    if (data.show_error == true){
-        alertShowErrorAndReload();
-        return false;
+    function (json) {
+      if (json.hosts.length < 1) {
+        callback(noResult);
+      } else {
+        callback(json.hosts);
+      }
     }
-
-    redrawAddShowForm($("#add-show-form"), data.newForm);
-    toggleAddShowButton();
-    openAddShowForm(false);
+  );
 }
 
-function onStartTimeSelect(){
-    $("#add_show_start_time").trigger('input');
+function beginEditShow(data) {
+  if (data.show_error == true) {
+    alertShowErrorAndReload();
+    return false;
+  }
+
+  redrawAddShowForm($("#add-show-form"), data.newForm);
+  toggleAddShowButton();
+  openAddShowForm(false);
 }
 
-function onEndTimeSelect(){
-    $("#add_show_end_time").trigger('input');
+function onStartTimeSelect() {
+  $("#add_show_start_time").trigger("input");
 }
 
-function padZeroes(number, length)
-{
-    var str = '' + number;
-    while (str.length < length) {str = '0' + str;}
-    return str;
+function onEndTimeSelect() {
+  $("#add_show_end_time").trigger("input");
 }
 
-function hashCode(str) { // java String#hashCode
-    var hash = 0;
-    for (var i = 0; i < str.length; i++) {
-       hash = str.charCodeAt(i) + ((hash << 5) - hash);
-    }
-    return hash;
+function padZeroes(number, length) {
+  var str = "" + number;
+  while (str.length < length) {
+    str = "0" + str;
+  }
+  return str;
 }
 
-function intToRGB(i){
-    return (padZeroes(((i>>16)&0xFF).toString(16), 2) +
-           padZeroes(((i>>8)&0xFF).toString(16), 2)+
-           padZeroes((i&0xFF).toString(16), 2)
-           );
+function hashCode(str) {
+  // java String#hashCode
+  var hash = 0;
+  for (var i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return hash;
 }
 
-function stringToColor(s)
-{
-    var palette = ['42d5a1', '56bd99', '65ab93', '7b938b',
-        '42a4d5', '569bbd', '6594ab', '7b8b93',
-    '4264d5', '566fbd', '6576ab', '7b8193'];
-    //var palette = ['d56f42', 'aad542', '7242d5', '42d563', 'd542be'];
-    return palette[Math.abs(hashCode(s)) % palette.length];
-    //return intToRGB(hashCode(s));
+function intToRGB(i) {
+  return (
+    padZeroes(((i >> 16) & 0xff).toString(16), 2) +
+    padZeroes(((i >> 8) & 0xff).toString(16), 2) +
+    padZeroes((i & 0xff).toString(16), 2)
+  );
 }
 
-function getContrastYIQ(hexcolor){
-    var r = parseInt(hexcolor.substr(0,2),16);
-    var g = parseInt(hexcolor.substr(2,2),16);
-    var b = parseInt(hexcolor.substr(4,2),16);
-    var yiq = ((r*299)+(g*587)+(b*114))/1000;
-    return (yiq >= 128) ? '000000' : 'ffffff';
+function stringToColor(s) {
+  var palette = [
+    "42d5a1",
+    "56bd99",
+    "65ab93",
+    "7b938b",
+    "42a4d5",
+    "569bbd",
+    "6594ab",
+    "7b8b93",
+    "4264d5",
+    "566fbd",
+    "6576ab",
+    "7b8193",
+  ];
+  //var palette = ['d56f42', 'aad542', '7242d5', '42d563', 'd542be'];
+  return palette[Math.abs(hashCode(s)) % palette.length];
+  //return intToRGB(hashCode(s));
 }
 
+function getContrastYIQ(hexcolor) {
+  var r = parseInt(hexcolor.substr(0, 2), 16);
+  var g = parseInt(hexcolor.substr(2, 2), 16);
+  var b = parseInt(hexcolor.substr(4, 2), 16);
+  var yiq = (r * 299 + g * 587 + b * 114) / 1000;
+  return yiq >= 128 ? "000000" : "ffffff";
+}
 
 function setAddShowEvents(form) {
+  //var form = $("#add-show-form");
 
-    //var form = $("#add-show-form");
+  form.find("h3").click(function () {
+    $(this).next().toggle();
+  });
 
-    form.find("h3").click(function(){
-        $(this).next().toggle();
-    });
+  form.find("input:radio[name=add_show_start_now]").click(function () {
+    setupStartTimeWidgets();
 
-
-    form.find('input:radio[name=add_show_start_now]').click(function() {
-        setupStartTimeWidgets();
-
-        if ($(this).val() == "future") {
-            $('#add_show_linked').removeProp('disabled');
-        }
-    });
-
-    if(!form.find("#add_show_has_autoplaylist").attr('checked')) {
-        form.find("#add_show_playlist_dropdown").hide();
-        form.find("#add_show_autoplaylist_repeat").hide();
+    if ($(this).val() == "future") {
+      $("#add_show_linked").removeProp("disabled");
     }
-    else {
-        $("#add_show_playlist_dropdown").show();
+  });
+
+  if (!form.find("#add_show_has_autoplaylist").attr("checked")) {
+    form.find("#add_show_playlist_dropdown").hide();
+    form.find("#add_show_autoplaylist_repeat").hide();
+  } else {
+    $("#add_show_playlist_dropdown").show();
+  }
+
+  if (!form.find("#add_show_repeats").attr("checked")) {
+    form.find("#schedule-show-when > fieldset:last").hide();
+    $("#add_show_rebroadcast_relative").hide();
+  } else {
+    $("#add_show_rebroadcast_absolute").hide();
+  }
+
+  if (!form.find("#add_show_record").attr("checked")) {
+    form.find("#add_show_rebroadcast").hide();
+  }
+
+  if (!form.find("#add_show_rebroadcast").attr("checked")) {
+    form
+      .find("#schedule-record-rebroadcast > fieldset:not(:first-child)")
+      .hide();
+  }
+
+  // If we're adding a new show or the show has no logo, hide the "Current Logo" element tree
+  $("[id^=add_show_logo_current]").toggle(
+    $("#add_show_logo_current").attr("src") !== "" &&
+      $(".button-bar.bottom").find(".ui-button-text").text() === "Update show"
+  );
+
+  var submitButton = $(".button-bar.bottom").find(".add-show-submit");
+  $("[id^=add_show_instance_description]").toggle(
+    submitButton.attr("data-action") === "edit-repeating-show-instance"
+  );
+
+  form.find("#add_show_has_autoplaylist").click(function () {
+    $(this).blur();
+    form.find("#add_show_playlist_dropdown").toggle();
+    form.find("#add_show_autoplaylist_repeat").toggle();
+  });
+
+  form.find("#add_show_repeats").click(function () {
+    $(this).blur();
+    form.find("#schedule-show-when > fieldset:last").toggle();
+
+    var checkBoxSelected = false;
+    var days = form.find("#add_show_day_check-element input").each(function () {
+      var currentCheckBox = $(this).attr("checked");
+      if (currentCheckBox && currentCheckBox == "checked") {
+        checkBoxSelected = true;
+      }
+    });
+
+    if (!checkBoxSelected) {
+      var d = getDateFromString(
+        form.find("#add_show_start_date").attr("value")
+      );
+      if (d != null)
+        form.find("#add_show_day_check-" + d.getDay()).attr("checked", true);
     }
 
-    if(!form.find("#add_show_repeats").attr('checked')) {
-        form.find("#schedule-show-when > fieldset:last").hide();
-        $("#add_show_rebroadcast_relative").hide();
+    //must switch rebroadcast displays
+    if (form.find("#add_show_rebroadcast").attr("checked")) {
+      if ($(this).attr("checked")) {
+        form.find("#add_show_rebroadcast_absolute").hide();
+        form.find("#add_show_rebroadcast_relative").show();
+      } else {
+        form.find("#add_show_rebroadcast_absolute").show();
+        form.find("#add_show_rebroadcast_relative").hide();
+      }
     }
-    else {
-        $("#add_show_rebroadcast_absolute").hide();
+  });
+
+  form.find("#add_show_linked").click(function () {
+    if ($(this).attr("readonly")) {
+      if ($("#show-link-readonly-warning").length === 0) {
+        $(this)
+          .parent()
+          .after(
+            "<ul id='show-link-readonly-warning' class='errors'><li>" +
+              $.i18n._(
+                "Warning: You cannot change this field while the show is currently playing"
+              ) +
+              "</li></ul>"
+          );
+      }
+      return false;
     }
 
-    if(!form.find("#add_show_record").attr('checked')) {
-        form.find("#add_show_rebroadcast").hide();
+    //only display the warning message if a show is being edited
+    if (
+      $(".button-bar.bottom").find(".ui-button-text").text() === "Update show"
+    ) {
+      if ($(this).attr("checked") && $("#show-link-warning").length === 0) {
+        $(this)
+          .parent()
+          .after(
+            "<ul id='show-link-warning' class='errors'><li>" +
+              $.i18n._(
+                "Warning: All other repetitions of this show will have their contents replaced to match the show you selected 'Edit Show' with."
+              ) +
+              "</li></ul>"
+          );
+      }
+
+      if (!$(this).attr("checked") && $("#show-link-warning").length !== 0) {
+        $("#show-link-warning").remove();
+      }
+    }
+  });
+
+  form
+    .find("#add_show_linked-label")
+    .before("<span class='show_linking_help_icon'></span>");
+
+  form.find("#add_show_record").click(function () {
+    $(this).blur();
+    form.find("#add_show_rebroadcast").toggle();
+
+    if (form.find("#add_show_record").attr("checked")) {
+      form
+        .find("#add_show_linked")
+        .attr("checked", false)
+        .attr("disabled", true);
+    } else {
+      form.find("#add_show_linked").attr("disabled", false);
     }
 
-    if(!form.find("#add_show_rebroadcast").attr('checked')) {
-        form.find("#schedule-record-rebroadcast > fieldset:not(:first-child)").hide();
+    //uncheck rebroadcast checkbox
+    form.find("#add_show_rebroadcast").attr("checked", false);
+
+    //hide rebroadcast options
+    form
+      .find("#schedule-record-rebroadcast > fieldset:not(:first-child)")
+      .hide();
+  });
+
+  form.find("#add_show_rebroadcast").click(function () {
+    $(this).blur();
+    if (form.find("#add_show_record").attr("checked")) {
+      if (
+        $(this).attr("checked") &&
+        !form.find("#add_show_repeats").attr("checked")
+      ) {
+        form.find("#add_show_rebroadcast_absolute").show();
+      } else if (
+        $(this).attr("checked") &&
+        form.find("#add_show_repeats").attr("checked")
+      ) {
+        form.find("#add_show_rebroadcast_relative").show();
+      } else {
+        form
+          .find("#schedule-record-rebroadcast > fieldset:not(:first-child)")
+          .hide();
+      }
     }
+  });
 
-    // If we're adding a new show or the show has no logo, hide the "Current Logo" element tree
-    $("[id^=add_show_logo_current]").toggle(($("#add_show_logo_current").attr("src") !== "")
-            && ($(".button-bar.bottom").find(".ui-button-text").text() === "Update show"));
+  // in case user is creating a new show, there will be
+  // no show_id so we have to store the default timezone
+  // to be able to do the conversion when the timezone
+  // setting changes
+  var currentTimezone = form.find("#add_show_timezone").val();
 
-    var submitButton = $(".button-bar.bottom").find(".add-show-submit");
-    $("[id^=add_show_instance_description]").toggle(submitButton.attr("data-action") === "edit-repeating-show-instance");
+  form.find("#add_show_timezone").change(function () {
+    var startDateField = form.find("#add_show_start_date"),
+      startTimeField = form.find("#add_show_start_time"),
+      endDateField = form.find("#add_show_end_date_no_repeat"),
+      endTimeField = form.find("#add_show_end_time"),
+      newTimezone = form.find("#add_show_timezone").val();
 
-    form.find("#add_show_has_autoplaylist").click(function(){
-        $(this).blur();
-        form.find("#add_show_playlist_dropdown").toggle();
-        form.find("#add_show_autoplaylist_repeat").toggle();
-    });
+    $.post(
+      baseUrl + "Schedule/localize-start-end-time",
+      {
+        format: "json",
+        startDate: startDateField.val(),
+        startTime: startTimeField.val(),
+        endDate: endDateField.val(),
+        endTime: endTimeField.val(),
+        newTimezone: newTimezone,
+        oldTimezone: currentTimezone,
+      },
+      function (json) {
+        startDateField.val(json.start.date);
+        startTimeField.val(json.start.time);
+        endDateField.val(json.end.date);
+        endTimeField.val(json.end.time);
+        // Change the timezone now that we've updated the times
+        currentTimezone = newTimezone;
+      }
+    );
+  });
 
-    form.find("#add_show_repeats").click(function(){
-        $(this).blur();
-        form.find("#schedule-show-when > fieldset:last").toggle();
-
-        var checkBoxSelected = false;
-        var days = form.find("#add_show_day_check-element input").each( function() {
-                var currentCheckBox = $(this).attr("checked");
-                if (currentCheckBox && currentCheckBox == "checked"){
-                    checkBoxSelected = true;
-                }
-            });
-
-
-        if (!checkBoxSelected){
-            var d = getDateFromString(form.find("#add_show_start_date").attr("value"));
-            if ( d != null)
-                form.find("#add_show_day_check-"+d.getDay()).attr('checked', true);
-        }
-
-        //must switch rebroadcast displays
-        if(form.find("#add_show_rebroadcast").attr('checked')) {
-
-            if($(this).attr('checked')){
-                form.find("#add_show_rebroadcast_absolute").hide();
-                form.find("#add_show_rebroadcast_relative").show();
-            }
-            else {
-                form.find("#add_show_rebroadcast_absolute").show();
-                form.find("#add_show_rebroadcast_relative").hide();
-            }
-        }
-    });
-
-    form.find("#add_show_linked").click(function(){
-        if ($(this).attr("readonly")) {
-            if ($("#show-link-readonly-warning").length === 0) {
-                $(this).parent().after("<ul id='show-link-readonly-warning' class='errors'><li>"+$.i18n._("Warning: You cannot change this field while the show is currently playing")+"</li></ul>");
-            }
-            return false;
-        }
-
-        //only display the warning message if a show is being edited
-        if ($(".button-bar.bottom").find(".ui-button-text").text() === "Update show") {
-            if ($(this).attr("checked") && $("#show-link-warning").length === 0) {
-                $(this).parent().after("<ul id='show-link-warning' class='errors'><li>"+$.i18n._("Warning: All other repetitions of this show will have their contents replaced to match the show you selected 'Edit Show' with.")+"</li></ul>");
-            }
-
-            if (!$(this).attr("checked") && $("#show-link-warning").length !== 0) {
-                $("#show-link-warning").remove();
-            }
-        }
-    });
-
-    form.find("#add_show_linked-label").before("<span class='show_linking_help_icon'></span>");
-
-    form.find("#add_show_record").click(function(){
-        $(this).blur();
-        form.find("#add_show_rebroadcast").toggle();
-
-        if (form.find("#add_show_record").attr("checked")) {
-            form.find("#add_show_linked").attr("checked", false).attr("disabled", true);
-        } else {
-            form.find("#add_show_linked").attr("disabled", false);
-        }
-
-        //uncheck rebroadcast checkbox
-        form.find("#add_show_rebroadcast").attr('checked', false);
-
-        //hide rebroadcast options
-        form.find("#schedule-record-rebroadcast > fieldset:not(:first-child)").hide();
-    });
-
-    form.find("#add_show_rebroadcast").click(function(){
-        $(this).blur();
-        if(form.find("#add_show_record").attr('checked')){
-            if($(this).attr('checked') && !form.find("#add_show_repeats").attr('checked')) {
-                form.find("#add_show_rebroadcast_absolute").show();
-            }
-            else if($(this).attr('checked') && form.find("#add_show_repeats").attr('checked')) {
-                form.find("#add_show_rebroadcast_relative").show();
-            }
-            else {
-                form.find("#schedule-record-rebroadcast > fieldset:not(:first-child)").hide();
-            }
-        }
-    });
-
-    // in case user is creating a new show, there will be
-    // no show_id so we have to store the default timezone
-    // to be able to do the conversion when the timezone
-    // setting changes
-    var currentTimezone = form.find("#add_show_timezone").val();
-
-    form.find("#add_show_timezone").change(function(){
-        var startDateField = form.find("#add_show_start_date"),
-            startTimeField = form.find("#add_show_start_time"),
-            endDateField = form.find("#add_show_end_date_no_repeat"),
-            endTimeField = form.find("#add_show_end_time"),
-            newTimezone = form.find("#add_show_timezone").val();
-
-        $.post(baseUrl+"Schedule/localize-start-end-time",
-               {format: "json",
-                startDate: startDateField.val(),
-                startTime: startTimeField.val(),
-                endDate: endDateField.val(),
-                endTime: endTimeField.val(),
-                newTimezone: newTimezone,
-                oldTimezone: currentTimezone}, function(json){
-
-            startDateField.val(json.start.date);
-            startTimeField.val(json.start.time);
-            endDateField.val(json.end.date);
-            endTimeField.val(json.end.time);
-            // Change the timezone now that we've updated the times
-            currentTimezone = newTimezone;
-        });
-    });
-
-    form.find("#add_show_repeat_type").change(function(){
-        toggleRepeatDays();
-        toggleMonthlyRepeatType();
-    });
-    toggleMonthlyRepeatType();
+  form.find("#add_show_repeat_type").change(function () {
     toggleRepeatDays();
-    function toggleRepeatDays() {
-        if(form.find("#add_show_repeat_type").val() == 2 || form.find("#add_show_repeat_type").val() == 3) {
-            form.find("#add_show_day_check-label, #add_show_day_check-element").hide();
-            //form.find("#add_show_monthly_repeat_type-label, #add_show_monthly_repeat_type-element").show();
-        }
-        else {
-            form.find("#add_show_day_check-label, #add_show_day_check-element").show();
-            //form.find("#add_show_monthly_repeat_type-label, #add_show_monthly_repeat_type-element").hide();
-        }
+    toggleMonthlyRepeatType();
+  });
+  toggleMonthlyRepeatType();
+  toggleRepeatDays();
+  function toggleRepeatDays() {
+    if (
+      form.find("#add_show_repeat_type").val() == 2 ||
+      form.find("#add_show_repeat_type").val() == 3
+    ) {
+      form
+        .find("#add_show_day_check-label, #add_show_day_check-element")
+        .hide();
+      //form.find("#add_show_monthly_repeat_type-label, #add_show_monthly_repeat_type-element").show();
+    } else {
+      form
+        .find("#add_show_day_check-label, #add_show_day_check-element")
+        .show();
+      //form.find("#add_show_monthly_repeat_type-label, #add_show_monthly_repeat_type-element").hide();
     }
-    function toggleMonthlyRepeatType() {
-        if (form.find("#add_show_repeat_type").val() == 2) {
-            form.find("#add_show_monthly_repeat_type-label, #add_show_monthly_repeat_type-element").show();
-        } else {
-            form.find("#add_show_monthly_repeat_type-label, #add_show_monthly_repeat_type-element").hide();
-        }
+  }
+  function toggleMonthlyRepeatType() {
+    if (form.find("#add_show_repeat_type").val() == 2) {
+      form
+        .find(
+          "#add_show_monthly_repeat_type-label, #add_show_monthly_repeat_type-element"
+        )
+        .show();
+    } else {
+      form
+        .find(
+          "#add_show_monthly_repeat_type-label, #add_show_monthly_repeat_type-element"
+        )
+        .hide();
+    }
+  }
+
+  form.find("#add_show_day_check-label").addClass("block-display");
+  form.find("#add_show_day_check-element").addClass("block-display clearfix");
+  form.find("#add_show_day_check-element label").addClass("wrapp-label");
+  form.find("#add_show_day_check-element br").remove();
+
+  form.find(".show_timezone_help_icon").qtip({
+    content: {
+      text: $.i18n._(
+        "Timezone is set to the station timezone by default. Shows in the calendar will be displayed in your local time defined by the " +
+          "Interface Timezone in your user settings."
+      ),
+    },
+    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",
+    },
+  });
+
+  form.find(".show_autoplaylist_help_icon").qtip({
+    content: {
+      text: $.i18n._(
+        "Autoloading playlists' contents are added to shows one hour before the show airs. <a target='_blank' href='http://libretime.org/docs/playlists'>More information</a>"
+      ),
+    },
+    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",
+    },
+  });
+
+  form.find(".airtime_auth_help_icon").qtip({
+    content: {
+      text: $.i18n._(
+        "This follows the same security pattern for the shows: only users assigned to the show can connect."
+      ),
+    },
+    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",
+    },
+  });
+  form.find(".custom_auth_help_icon").qtip({
+    content: {
+      text: $.i18n._(
+        "Specify custom authentication which will work only for this show."
+      ),
+    },
+    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",
+    },
+  });
+  form.find(".stream_username_help_icon").qtip({
+    content: {
+      text: $.i18n._(
+        "If your live streaming client does not ask for a username, this field should be 'source'."
+      ),
+    },
+    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",
+    },
+  });
+  form.find(".show_linking_help_icon").qtip({
+    content: {
+      text: $.i18n._(
+        "By linking your repeating shows any media items scheduled in any repeat show will also get scheduled in the other repeat shows"
+      ),
+    },
+    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",
+    },
+  });
+  function endDateVisibility() {
+    if (form.find("#add_show_no_end").is(":checked")) {
+      form.find("#add_show_end_date").hide();
+    } else {
+      form.find("#add_show_end_date").show();
+    }
+  }
+  endDateVisibility();
+  form.find("#add_show_no_end").click(endDateVisibility);
+
+  createDateInput(form.find("#add_show_start_date"), startDpSelect);
+  createDateInput(form.find("#add_show_end_date_no_repeat"), endDpSelect);
+  createDateInput(form.find("#add_show_end_date"), endDpSelect);
+
+  $("#add_show_start_time").timepicker({
+    amPmText: ["", ""],
+    defaultTime: "00:00",
+    onSelect: onStartTimeSelect,
+    hourText: $.i18n._("Hour"),
+    minuteText: $.i18n._("Minute"),
+  });
+  $("#add_show_end_time").timepicker({
+    amPmText: ["", ""],
+    onSelect: onEndTimeSelect,
+    hourText: $.i18n._("Hour"),
+    minuteText: $.i18n._("Minute"),
+  });
+
+  form.find('input[name^="add_show_rebroadcast_date_absolute"]').datepicker({
+    minDate: adjustDateToServerDate(new Date(), timezoneOffset),
+    dateFormat: "yy-mm-dd",
+    //i18n_months, i18n_days_short are in common.js
+    monthNames: i18n_months,
+    dayNamesMin: i18n_days_short,
+    closeText: "Close",
+    showButtonPanel: true,
+    firstDay: calendarPref.weekStart,
+  });
+
+  form.find('input[name^="add_show_rebroadcast_time"]').timepicker({
+    amPmText: ["", ""],
+    defaultTime: "",
+    closeButtonText: $.i18n._("Done"),
+    hourText: $.i18n._("Hour"),
+    minuteText: $.i18n._("Minute"),
+  });
+
+  form.find(".add_absolute_rebroadcast_day").click(function () {
+    var li = $(this)
+      .parent()
+      .find("ul.formrow-repeat > li:visible:last")
+      .next();
+
+    li.show();
+    li = li.next();
+    if (li.length === 0) {
+      $(this).hide();
+    }
+  });
+
+  form.find('a[id^="remove_rebroadcast"]').click(function () {
+    var list = $(this).parent().parent();
+    var li_num = $(this).parent().index();
+    var num = list.find("li").length;
+    var count = num - li_num;
+
+    var curr = $(this).parent();
+    var next = curr.next();
+
+    for (var i = 0; i <= count; i++) {
+      var date = next.find('[name^="add_show_rebroadcast_date"]').val();
+      curr.find('[name^="add_show_rebroadcast_date"]').val(date);
+      var time = next.find('[name^="add_show_rebroadcast_time"]').val();
+      curr.find('[name^="add_show_rebroadcast_time"]').val(time);
+
+      curr = next;
+      next = curr.next();
     }
 
-    form.find("#add_show_day_check-label").addClass("block-display");
-    form.find("#add_show_day_check-element").addClass("block-display clearfix");
-    form.find("#add_show_day_check-element label").addClass("wrapp-label");
-    form.find("#add_show_day_check-element br").remove();
+    list
+      .find("li:visible:last")
+      .find('[name^="add_show_rebroadcast_date"]')
+      .val("")
+      .end()
+      .find('[name^="add_show_rebroadcast_time"]')
+      .val("")
+      .end()
+      .hide();
 
-    form.find(".show_timezone_help_icon").qtip({
-        content: {
-            text: $.i18n._("Timezone is set to the station timezone by default. Shows in the calendar will be displayed in your local time defined by the " +
-                "Interface Timezone in your user settings.")
-        },
-        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"
-        }
-    });
+    list.next().show();
+  });
 
-    form.find(".show_autoplaylist_help_icon").qtip({
-        content: {
-            text: $.i18n._("Autoloading playlists' contents are added to shows one hour before the show airs. <a target='_blank' href='http://libretime.org/docs/playlists'>More information</a>")
-        },
-        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"
-        }
-    });
+  form.find("#add_show_hosts_autocomplete").autocomplete({
+    source: findHosts,
+    select: autoSelect,
+    delay: 200,
+  });
 
-    form.find(".airtime_auth_help_icon").qtip({
-        content: {
-            text: $.i18n._("This follows the same security pattern for the shows: only users assigned to the show can connect.")
-        },
-        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"
-        }
-    });
-    form.find(".custom_auth_help_icon").qtip({
-        content: {
-            text: $.i18n._("Specify custom authentication which will work only for this show.")
-        },
-        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"
-        }
-    });
-    form.find(".stream_username_help_icon").qtip({
-        content: {
-            text: $.i18n._("If your live streaming client does not ask for a username, this field should be 'source'.")
-        },
-        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"
-        }
-    });
-    form.find(".show_linking_help_icon").qtip({
-        content: {
-            text: $.i18n._("By linking your repeating shows any media items scheduled in any repeat show will also get scheduled in the other repeat shows")
-        },
-        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"
-        }
-    });
-    function endDateVisibility(){
-        if(form.find("#add_show_no_end").is(':checked')){
-            form.find("#add_show_end_date").hide();
-        } else {
-            form.find("#add_show_end_date").show();
-        }
+  form.find("#add_show_hosts_autocomplete").keypress(function (e) {
+    if (e.which == 13) {
+      return false;
     }
-    endDateVisibility();
-    form.find("#add_show_no_end").click(endDateVisibility);
+  });
 
-    createDateInput(form.find("#add_show_start_date"), startDpSelect);
-    createDateInput(form.find("#add_show_end_date_no_repeat"), endDpSelect);
-    createDateInput(form.find("#add_show_end_date"), endDpSelect);
+  form.find("#schedule-show-style .input_text").ColorPicker({
+    onChange: function (hsb, hex, rgb, el) {
+      $(el).val(hex);
+    },
+    onSubmit: function (hsb, hex, rgb, el) {
+      $(el).val(hex);
+      $(el).ColorPickerHide();
+    },
+    onBeforeShow: function () {
+      $(this).ColorPickerSetColor(this.value);
+    },
+  });
 
-    $("#add_show_start_time").timepicker({
-        amPmText: ['', ''],
-        defaultTime: '00:00',
-        onSelect: onStartTimeSelect,
-        hourText: $.i18n._("Hour"),
-        minuteText: $.i18n._("Minute")
-    });
-    $("#add_show_end_time").timepicker({
-        amPmText: ['', ''],
-        onSelect: onEndTimeSelect,
-        hourText: $.i18n._("Hour"),
-        minuteText: $.i18n._("Minute")
-    });
+  // when an image is uploaded, we want to show it to the user
+  form.find("#add_show_logo").change(function (event) {
+    if (this.files && this.files[0]) {
+      $("#add_show_logo_preview").show();
+      var reader = new FileReader(); // browser compatibility?
 
-    form.find('input[name^="add_show_rebroadcast_date_absolute"]').datepicker({
-        minDate: adjustDateToServerDate(new Date(), timezoneOffset),
-        dateFormat: 'yy-mm-dd',
-        //i18n_months, i18n_days_short are in common.js
-        monthNames: i18n_months,
-        dayNamesMin: i18n_days_short,
-        closeText: 'Close',
-        showButtonPanel: true,
-        firstDay: calendarPref.weekStart
-    });
+      reader.onload = function (e) {
+        $("#add_show_logo_preview").attr("src", e.target.result);
+      };
 
-    form.find('input[name^="add_show_rebroadcast_time"]').timepicker({
-        amPmText: ['', ''],
-        defaultTime: '',
-        closeButtonText: $.i18n._("Done"),
-        hourText: $.i18n._("Hour"),
-        minuteText: $.i18n._("Minute")
-    });
+      // check image size so we don't crash the page trying to render
+      if (validateImage(this.files[0], $("#add_show_logo"))) {
+        // read the image data as though it were a data URI
+        reader.readAsDataURL(this.files[0]);
+      } else {
+        // remove the file element data
+        $(this).val("").replaceWith($(this).clone(true));
+        $("#add_show_logo_preview").hide();
+      }
+    } else {
+      $("#add_show_logo_preview").hide();
+    }
+  });
 
-    form.find(".add_absolute_rebroadcast_day").click(function(){
-        var li = $(this).parent().find("ul.formrow-repeat > li:visible:last").next();
+  form.find("#add_show_logo_current_remove").click(function () {
+    if (
+      confirm($.i18n._("Are you sure you want to delete the current logo?"))
+    ) {
+      var showId = $("#add_show_id").attr("value");
 
-        li.show();
-        li = li.next();
-        if(li.length === 0) {
-            $(this).hide();
-        }
-    });
-
-    form.find('a[id^="remove_rebroadcast"]').click(function(){
-        var list = $(this).parent().parent();
-        var li_num = $(this).parent().index();
-        var num = list.find("li").length;
-        var count = num - li_num;
-
-        var curr = $(this).parent();
-        var next = curr.next();
-
-        for(var i=0; i<=count; i++) {
-            var date = next.find('[name^="add_show_rebroadcast_date"]').val();
-            curr.find('[name^="add_show_rebroadcast_date"]').val(date);
-            var time = next.find('[name^="add_show_rebroadcast_time"]').val();
-            curr.find('[name^="add_show_rebroadcast_time"]').val(time);
-
-            curr = next;
-            next = curr.next();
-        }
-
-        list.find("li:visible:last")
-                .find('[name^="add_show_rebroadcast_date"]')
-                    .val('')
-                .end()
-                .find('[name^="add_show_rebroadcast_time"]')
-                    .val('')
-                .end()
-            .hide();
-
-        list.next().show();
-    });
-
-    form.find("#add_show_hosts_autocomplete").autocomplete({
-        source: findHosts,
-        select: autoSelect,
-        delay: 200
-    });
-
-    form.find("#add_show_hosts_autocomplete").keypress(function(e){
-        if( e.which == 13 ){
-            return false;
-        }
-    })
-
-    form.find("#schedule-show-style .input_text").ColorPicker({
-        onChange: function (hsb, hex, rgb, el) {
-            $(el).val(hex);
-        },
-        onSubmit: function(hsb, hex, rgb, el) {
-            $(el).val(hex);
-            $(el).ColorPickerHide();
-        },
-        onBeforeShow: function () {
-            $(this).ColorPickerSetColor(this.value);
-        }
-    });
-
-    // when an image is uploaded, we want to show it to the user
-    form.find("#add_show_logo").change(function(event) {
-        if (this.files && this.files[0]) {
-            $("#add_show_logo_preview").show();
-            var reader = new FileReader(); // browser compatibility?
-
-            reader.onload = function (e) {
-                $("#add_show_logo_preview")
-                    .attr('src', e.target.result);
-            };
-
-            // check image size so we don't crash the page trying to render
-            if (validateImage(this.files[0], $("#add_show_logo"))) {
-                // read the image data as though it were a data URI
-                reader.readAsDataURL(this.files[0]);
-            } else {
-                // remove the file element data
-                $(this).val('').replaceWith($(this).clone(true));
-                $("#add_show_logo_preview").hide();
-            }
-        } else {
-            $("#add_show_logo_preview").hide();
-        }
-    });
-
-    form.find("#add_show_logo_current_remove").click(function() {
-        if (confirm($.i18n._('Are you sure you want to delete the current logo?'))) {
-            var showId = $("#add_show_id").attr("value");
-
-            if (showId && $("#add_show_logo_current").attr("src") !== "") {
-                var action = '/rest/show-image?csrf_token=' + $('#csrf').val() + '&id=' + showId;
-
-                $.ajax({
-                    url: action,
-                    data: '',
-                    type: 'DELETE',
-                    success: function() {
-                        $("#add_show_logo_current").prop("src", "");
-                        $("[id^=add_show_logo_current]").hide();
-                    }
-                });
-            }
-        }
-    });
-
-    form.find("#add-show-close").click(closeAddShowForm);
-
-    form.find(".add-show-submit").click(function(event) {
-        event.preventDefault();
-
-        var addShowButton = $(this);
-
-        $('#schedule-add-show').block({
-            message: null,
-            applyPlatformOpacityRules: false
-        });
-
-        //when editing a show, the record option is disabled
-        //we have to enable it to get the correct value when
-        //we call serializeArray()
-        if (form.find("#add_show_record").attr("disabled", true)) {
-            form.find("#add_show_record").attr("disabled", false);
-        }
-
-        var startDateDisabled = false,
-            startTimeDisabled = false;
-
-        // Similarly, we need to re-enable start date and time if they're disabled
-        if (form.find("#add_show_start_date").prop("disabled") === true) {
-            form.find("#add_show_start_date").attr("disabled", false);
-            startDateDisabled = true;
-        }
-        if (form.find("#add_show_start_time").prop("disabled") === true) {
-            form.find("#add_show_start_time").attr("disabled", false);
-            startTimeDisabled = true;
-        }
-
-        var data = $("form").serializeArray();
-        // We need to notify the application if date and time were disabled
-        data.push({name: 'start_date_disabled', value: startDateDisabled});
-        data.push({name: 'start_time_disabled', value: startTimeDisabled});
-
-        var hosts = $('#add_show_hosts-element input').map(function() {
-            if($(this).attr("checked")) {
-                return $(this).val();
-            }
-        }).get();
-
-        var days = $('#add_show_day_check-element input').map(function() {
-            if($(this).attr("checked")) {
-                return $(this).val();
-            }
-        }).get();
-
-        var start_date = $("#add_show_start_date").val(),
-            end_date = $("#add_show_end_date").val(),
-            action = baseUrl+"Schedule/"+String(addShowButton.attr("data-action"));
-
-        var image;
-        if ($('#add_show_logo')[0] && $('#add_show_logo')[0].files
-                && $('#add_show_logo')[0].files[0]) {
-            image = new FormData();
-            image.append('file', $('#add_show_logo')[0].files[0]);
-        }
+      if (showId && $("#add_show_logo_current").attr("src") !== "") {
+        var action =
+          "/rest/show-image?csrf_token=" + $("#csrf").val() + "&id=" + showId;
 
         $.ajax({
-            url: action,
-            data: {format: "json", data: data, hosts: hosts, days: days},
-            success: function(json) {
-                if (json.showId && image) { // Successfully added the show, and it contains an image to upload
-                    var imageAction = '/rest/show-image?csrf_token=' + $('#csrf').val() + '&id=' + json.showId;
-
-                    // perform a second xhttprequest in order to send the show image
-                    $.ajax({
-                        url: imageAction,
-                        data: image,
-                        cache: false,
-                        contentType: false,
-                        processData: false,
-                        type: 'POST'
-                    });
-                }
-
-                $('#schedule-add-show').unblock();
-
-                var $addShowForm = $("#add-show-form");
-
-                if (json.form) {
-
-                    redrawAddShowForm($addShowForm, json.form);
-
-                    $("#add_show_end_date").val(end_date);
-                    $("#add_show_start_date").val(start_date);
-                    showErrorSections();
-                } else if (json.edit) {
-                    $("#schedule_calendar").removeAttr("style")
-                        .fullCalendar('render');
-
-                    $addShowForm.hide();
-                    toggleAddShowButton();
-                    $.get(baseUrl+"Schedule/get-form", {format:"json"}, function(json){
-                        redrawAddShowForm($addShowForm, json.form);
-                    });
-                } else {
-                    redrawAddShowForm($addShowForm, json.newForm);
-                    scheduleRefetchEvents(json);
-                    $addShowForm.hide();
-                    toggleAddShowButton();
-                }
-
-                /* CC-6062: Resize the window to avoid stretching the last column */
-                windowResize();
-                makeAddShowButton();
-            }
+          url: action,
+          data: "",
+          type: "DELETE",
+          success: function () {
+            $("#add_show_logo_current").prop("src", "");
+            $("[id^=add_show_logo_current]").hide();
+          },
         });
+      }
+    }
+  });
+
+  form.find("#add-show-close").click(closeAddShowForm);
+
+  form.find(".add-show-submit").click(function (event) {
+    event.preventDefault();
+
+    var addShowButton = $(this);
+
+    $("#schedule-add-show").block({
+      message: null,
+      applyPlatformOpacityRules: false,
     });
 
-    var regDate = new RegExp(/^[0-9]{4}-[0-1][0-9]-[0-3][0-9]$/);
-    var regTime = new RegExp(/^[0-2][0-9]:[0-5][0-9]$/);
-
-    // when start date/time changes, set end date/time to start date/time+1 hr
-    $('#add_show_start_date, #add_show_start_time').bind('input', 'change', function(){
-        var startDateString = $('#add_show_start_date').val();
-        var startTimeString = $('#add_show_start_time').val();
-
-        if(regDate.test(startDateString) && regTime.test(startTimeString)){
-            var startDate = startDateString.split('-');
-            var startTime = startTimeString.split(':');
-            var startDateTime = new Date(startDate[0], parseInt(startDate[1], 10)-1, startDate[2], startTime[0], startTime[1], 0, 0);
-
-            var endDateString = $('#add_show_end_date_no_repeat').val();
-            var endTimeString = $('#add_show_end_time').val()
-            var endDate = endDateString.split('-');
-            var endTime = endTimeString.split(':');
-            var endDateTime = new Date(endDate[0], parseInt(endDate[1], 10)-1, endDate[2], endTime[0], endTime[1], 0, 0);
-
-            if(startDateTime.getTime() >= endDateTime.getTime()){
-                var duration = $('#add_show_duration').val();
-                // parse duration
-                var time = 0;
-                var info = duration.split(' ');
-                var h = parseInt(info[0], 10);
-                time += h * 60 * 60* 1000;
-                if(info.length >1 && $.trim(info[1]) !== ''){
-                    var m = parseInt(info[1], 10);
-                    time += m * 60 * 1000;
-                }
-                endDateTime = new Date(startDateTime.getTime() + time);
-            }
-
-            var endDateFormat = endDateTime.getFullYear() + '-' + pad(endDateTime.getMonth()+1,2) + '-' + pad(endDateTime.getDate(),2);
-            var endTimeFormat = pad(endDateTime.getHours(),2) + ':' + pad(endDateTime.getMinutes(),2);
-
-            $('#add_show_end_date_no_repeat').val(endDateFormat);
-            $('#add_show_end_time').val(endTimeFormat);
-
-            // calculate duration
-            var startDateTimeString = startDateString + " " + startTimeString;
-            var endDateTimeString = $('#add_show_end_date_no_repeat').val() + " " + $('#add_show_end_time').val();
-            var timezone = $("#add_show_timezone").val();
-            calculateDuration(startDateTimeString, endDateTimeString, timezone);
-        }
-    });
-
-    // when end date/time changes, check if the changed date is in past of start date/time
-    $('#add_show_end_date_no_repeat, #add_show_end_time').bind('input', 'change', function(){
-        var endDateString = $('#add_show_end_date_no_repeat').val();
-        var endTimeString = $('#add_show_end_time').val()
-
-        if(regDate.test(endDateString) && regTime.test(endTimeString)){
-            var startDateString = $('#add_show_start_date').val();
-            var startTimeString = $('#add_show_start_time').val();
-            var startDate = startDateString.split('-');
-            var startTime = startTimeString.split(':');
-            var startDateTime = new Date(startDate[0], parseInt(startDate[1], 10)-1, startDate[2], startTime[0], startTime[1], 0, 0);
-
-            var endDate = endDateString.split('-');
-            var endTime = endTimeString.split(':');
-            var endDateTime = new Date(endDate[0], parseInt(endDate[1], 10)-1, endDate[2], endTime[0], endTime[1], 0, 0);
-
-            if(startDateTime.getTime() > endDateTime.getTime()){
-                $('#add_show_end_date_no_repeat').css('background-color', '#F49C9C');
-                $('#add_show_end_time').css('background-color', '#F49C9C');
-            }else{
-                $('#add_show_end_date_no_repeat').css('background-color', '');
-                $('#add_show_end_time').css('background-color', '');
-            }
-
-            // calculate duration
-            var startDateTimeString = startDateString + " " + startTimeString;
-            var endDateTimeString = endDateString + " " + endTimeString;
-            var timezone = $("#add_show_timezone").val();
-            calculateDuration(startDateTimeString, endDateTimeString, timezone);
-        }
-    });
-
-    if($('#cb_custom_auth').attr('checked')){
-        $('#custom_auth_div').show()
-    }else{
-        $('#custom_auth_div').hide()
+    //when editing a show, the record option is disabled
+    //we have to enable it to get the correct value when
+    //we call serializeArray()
+    if (form.find("#add_show_record").attr("disabled", true)) {
+      form.find("#add_show_record").attr("disabled", false);
     }
 
-    $('#cb_custom_auth').change(function(){
-        if($(this).attr('checked')){
-            $('#custom_auth_div').show()
-        }else{
-            $('#custom_auth_div').hide()
-        }
-    })
+    var startDateDisabled = false,
+      startTimeDisabled = false;
 
-    function calculateDuration(startDateTime, endDateTime, timezone){
-        var loadingIcon = $('#icon-loader-small');
-
-        loadingIcon.show();
-        $.post(
-            baseUrl+"Schedule/calculate-duration",
-            {startTime: startDateTime, endTime: endDateTime, timezone: timezone},
-            function(data) {
-                $('#add_show_duration').val(JSON.parse(data));
-                loadingIcon.hide();
-        });
+    // Similarly, we need to re-enable start date and time if they're disabled
+    if (form.find("#add_show_start_date").prop("disabled") === true) {
+      form.find("#add_show_start_date").attr("disabled", false);
+      startDateDisabled = true;
+    }
+    if (form.find("#add_show_start_time").prop("disabled") === true) {
+      form.find("#add_show_start_time").attr("disabled", false);
+      startTimeDisabled = true;
     }
 
-    // Since Zend's setAttrib won't apply through the wrapper, set accept=image/* here
-    $("#add_show_logo").prop("accept", "image/*");
+    var data = $("form").serializeArray();
+    // We need to notify the application if date and time were disabled
+    data.push({ name: "start_date_disabled", value: startDateDisabled });
+    data.push({ name: "start_time_disabled", value: startTimeDisabled });
 
-    //$('#add_show_name').bind('input', 'change', function(){
-    $('#add_show_start_time').bind('input', 'change', function(){
-        calculateShowColor();
+    var hosts = $("#add_show_hosts-element input")
+      .map(function () {
+        if ($(this).attr("checked")) {
+          return $(this).val();
+        }
+      })
+      .get();
+
+    var days = $("#add_show_day_check-element input")
+      .map(function () {
+        if ($(this).attr("checked")) {
+          return $(this).val();
+        }
+      })
+      .get();
+
+    var start_date = $("#add_show_start_date").val(),
+      end_date = $("#add_show_end_date").val(),
+      action =
+        baseUrl + "Schedule/" + String(addShowButton.attr("data-action"));
+
+    var image;
+    if (
+      $("#add_show_logo")[0] &&
+      $("#add_show_logo")[0].files &&
+      $("#add_show_logo")[0].files[0]
+    ) {
+      image = new FormData();
+      image.append("file", $("#add_show_logo")[0].files[0]);
+    }
+
+    $.ajax({
+      url: action,
+      data: { format: "json", data: data, hosts: hosts, days: days },
+      success: function (json) {
+        if (json.showId && image) {
+          // Successfully added the show, and it contains an image to upload
+          var imageAction =
+            "/rest/show-image?csrf_token=" +
+            $("#csrf").val() +
+            "&id=" +
+            json.showId;
+
+          // perform a second xhttprequest in order to send the show image
+          $.ajax({
+            url: imageAction,
+            data: image,
+            cache: false,
+            contentType: false,
+            processData: false,
+            type: "POST",
+          });
+        }
+
+        $("#schedule-add-show").unblock();
+
+        var $addShowForm = $("#add-show-form");
+
+        if (json.form) {
+          redrawAddShowForm($addShowForm, json.form);
+
+          $("#add_show_end_date").val(end_date);
+          $("#add_show_start_date").val(start_date);
+          showErrorSections();
+        } else if (json.edit) {
+          $("#schedule_calendar").removeAttr("style").fullCalendar("render");
+
+          $addShowForm.hide();
+          toggleAddShowButton();
+          $.get(
+            baseUrl + "Schedule/get-form",
+            { format: "json" },
+            function (json) {
+              redrawAddShowForm($addShowForm, json.form);
+            }
+          );
+        } else {
+          redrawAddShowForm($addShowForm, json.newForm);
+          scheduleRefetchEvents(json);
+          $addShowForm.hide();
+          toggleAddShowButton();
+        }
+
+        /* CC-6062: Resize the window to avoid stretching the last column */
+        windowResize();
+        makeAddShowButton();
+      },
     });
+  });
 
+  var regDate = new RegExp(/^[0-9]{4}-[0-1][0-9]-[0-3][0-9]$/);
+  var regTime = new RegExp(/^[0-2][0-9]:[0-5][0-9]$/);
+
+  // when start date/time changes, set end date/time to start date/time+1 hr
+  $("#add_show_start_date, #add_show_start_time").bind(
+    "input",
+    "change",
+    function () {
+      var startDateString = $("#add_show_start_date").val();
+      var startTimeString = $("#add_show_start_time").val();
+
+      if (regDate.test(startDateString) && regTime.test(startTimeString)) {
+        var startDate = startDateString.split("-");
+        var startTime = startTimeString.split(":");
+        var startDateTime = new Date(
+          startDate[0],
+          parseInt(startDate[1], 10) - 1,
+          startDate[2],
+          startTime[0],
+          startTime[1],
+          0,
+          0
+        );
+
+        var endDateString = $("#add_show_end_date_no_repeat").val();
+        var endTimeString = $("#add_show_end_time").val();
+        var endDate = endDateString.split("-");
+        var endTime = endTimeString.split(":");
+        var endDateTime = new Date(
+          endDate[0],
+          parseInt(endDate[1], 10) - 1,
+          endDate[2],
+          endTime[0],
+          endTime[1],
+          0,
+          0
+        );
+
+        if (startDateTime.getTime() >= endDateTime.getTime()) {
+          var duration = $("#add_show_duration").val();
+          // parse duration
+          var time = 0;
+          var info = duration.split(" ");
+          var h = parseInt(info[0], 10);
+          time += h * 60 * 60 * 1000;
+          if (info.length > 1 && $.trim(info[1]) !== "") {
+            var m = parseInt(info[1], 10);
+            time += m * 60 * 1000;
+          }
+          endDateTime = new Date(startDateTime.getTime() + time);
+        }
+
+        var endDateFormat =
+          endDateTime.getFullYear() +
+          "-" +
+          pad(endDateTime.getMonth() + 1, 2) +
+          "-" +
+          pad(endDateTime.getDate(), 2);
+        var endTimeFormat =
+          pad(endDateTime.getHours(), 2) +
+          ":" +
+          pad(endDateTime.getMinutes(), 2);
+
+        $("#add_show_end_date_no_repeat").val(endDateFormat);
+        $("#add_show_end_time").val(endTimeFormat);
+
+        // calculate duration
+        var startDateTimeString = startDateString + " " + startTimeString;
+        var endDateTimeString =
+          $("#add_show_end_date_no_repeat").val() +
+          " " +
+          $("#add_show_end_time").val();
+        var timezone = $("#add_show_timezone").val();
+        calculateDuration(startDateTimeString, endDateTimeString, timezone);
+      }
+    }
+  );
+
+  // when end date/time changes, check if the changed date is in past of start date/time
+  $("#add_show_end_date_no_repeat, #add_show_end_time").bind(
+    "input",
+    "change",
+    function () {
+      var endDateString = $("#add_show_end_date_no_repeat").val();
+      var endTimeString = $("#add_show_end_time").val();
+
+      if (regDate.test(endDateString) && regTime.test(endTimeString)) {
+        var startDateString = $("#add_show_start_date").val();
+        var startTimeString = $("#add_show_start_time").val();
+        var startDate = startDateString.split("-");
+        var startTime = startTimeString.split(":");
+        var startDateTime = new Date(
+          startDate[0],
+          parseInt(startDate[1], 10) - 1,
+          startDate[2],
+          startTime[0],
+          startTime[1],
+          0,
+          0
+        );
+
+        var endDate = endDateString.split("-");
+        var endTime = endTimeString.split(":");
+        var endDateTime = new Date(
+          endDate[0],
+          parseInt(endDate[1], 10) - 1,
+          endDate[2],
+          endTime[0],
+          endTime[1],
+          0,
+          0
+        );
+
+        if (startDateTime.getTime() > endDateTime.getTime()) {
+          $("#add_show_end_date_no_repeat").css("background-color", "#F49C9C");
+          $("#add_show_end_time").css("background-color", "#F49C9C");
+        } else {
+          $("#add_show_end_date_no_repeat").css("background-color", "");
+          $("#add_show_end_time").css("background-color", "");
+        }
+
+        // calculate duration
+        var startDateTimeString = startDateString + " " + startTimeString;
+        var endDateTimeString = endDateString + " " + endTimeString;
+        var timezone = $("#add_show_timezone").val();
+        calculateDuration(startDateTimeString, endDateTimeString, timezone);
+      }
+    }
+  );
+
+  if ($("#cb_custom_auth").attr("checked")) {
+    $("#custom_auth_div").show();
+  } else {
+    $("#custom_auth_div").hide();
+  }
+
+  $("#cb_custom_auth").change(function () {
+    if ($(this).attr("checked")) {
+      $("#custom_auth_div").show();
+    } else {
+      $("#custom_auth_div").hide();
+    }
+  });
+
+  function calculateDuration(startDateTime, endDateTime, timezone) {
+    var loadingIcon = $("#icon-loader-small");
+
+    loadingIcon.show();
+    $.post(
+      baseUrl + "Schedule/calculate-duration",
+      { startTime: startDateTime, endTime: endDateTime, timezone: timezone },
+      function (data) {
+        $("#add_show_duration").val(JSON.parse(data));
+        loadingIcon.hide();
+      }
+    );
+  }
+
+  // Since Zend's setAttrib won't apply through the wrapper, set accept=image/* here
+  $("#add_show_logo").prop("accept", "image/*");
+
+  //$('#add_show_name').bind('input', 'change', function(){
+  $("#add_show_start_time").bind("input", "change", function () {
+    calculateShowColor();
+  });
 }
 
 function showErrorSections() {
-
-    if($("#schedule-show-what .errors").length > 0) {
-        $("#schedule-show-what").show();
-    }
-    if($("#schedule-show-when .errors").length > 0) {
-        $("#schedule-show-when").show();
-    }
-    if($("#schedule-show-who .errors").length > 0) {
-        $("#schedule-show-who").show();
-    }
-    if($("#schedule-show-style .errors").length > 0) {
-        $("#schedule-show-style").show();
-    }
-    if($("#add_show_rebroadcast_absolute .errors").length > 0) {
-        $("#schedule-record-rebroadcast").show();
-        $("#add_show_rebroadcast_absolute").show();
-    }
-    if($("#live-stream-override .errors").length > 0) {
-        $("#live-stream-override").show();
-    }
-    if($("#add_show_rebroadcast_relative .errors").length > 0) {
-        $("#schedule-record-rebroadcast").show();
-        $("#add_show_rebroadcast_relative").show();
-    }
+  if ($("#schedule-show-what .errors").length > 0) {
+    $("#schedule-show-what").show();
+  }
+  if ($("#schedule-show-when .errors").length > 0) {
+    $("#schedule-show-when").show();
+  }
+  if ($("#schedule-show-who .errors").length > 0) {
+    $("#schedule-show-who").show();
+  }
+  if ($("#schedule-show-style .errors").length > 0) {
+    $("#schedule-show-style").show();
+  }
+  if ($("#add_show_rebroadcast_absolute .errors").length > 0) {
+    $("#schedule-record-rebroadcast").show();
+    $("#add_show_rebroadcast_absolute").show();
+  }
+  if ($("#live-stream-override .errors").length > 0) {
+    $("#live-stream-override").show();
+  }
+  if ($("#add_show_rebroadcast_relative .errors").length > 0) {
+    $("#schedule-record-rebroadcast").show();
+    $("#add_show_rebroadcast_relative").show();
+  }
 }
 
-$(document).ready(function() {
-    setAddShowEvents($("#add-show-form"));
+$(document).ready(function () {
+  setAddShowEvents($("#add-show-form"));
 });
 
 //Alert the error and reload the page
 //this function is used to resolve concurrency issue
-function alertShowErrorAndReload(){
-    alert($.i18n._("The show instance doesn't exist anymore!"));
-    window.location.reload();
+function alertShowErrorAndReload() {
+  alert($.i18n._("The show instance doesn't exist anymore!"));
+  window.location.reload();
 }
diff --git a/legacy/public/js/airtime/schedule/full-calendar-functions.js b/legacy/public/js/airtime/schedule/full-calendar-functions.js
index 7cb6b71d0..3902a7ee0 100644
--- a/legacy/public/js/airtime/schedule/full-calendar-functions.js
+++ b/legacy/public/js/airtime/schedule/full-calendar-functions.js
@@ -1,566 +1,677 @@
 /**
-*
-*   Full Calendar callback methods.
-*
-*/
+ *
+ *   Full Calendar callback methods.
+ *
+ */
 
 function scheduleRefetchEvents(json) {
-    if (json.show_error == true) {
-        alert($.i18n._("The show instance doesn't exist anymore!"));
-    }
-    if (json.show_id) {
-        var dialog_id = parseInt($("#add_show_id").val(), 10);
+  if (json.show_error == true) {
+    alert($.i18n._("The show instance doesn't exist anymore!"));
+  }
+  if (json.show_id) {
+    var dialog_id = parseInt($("#add_show_id").val(), 10);
 
-        //if you've deleted the show you are currently editing, close the add show dialog.
-        if (dialog_id === json.show_id) {
-            $("#add-show-close").click();
-        }
+    //if you've deleted the show you are currently editing, close the add show dialog.
+    if (dialog_id === json.show_id) {
+      $("#add-show-close").click();
     }
-    $("#schedule_calendar").fullCalendar('refetchEvents');
+  }
+  $("#schedule_calendar").fullCalendar("refetchEvents");
 }
 
 function makeTimeStamp(date) {
-    var sy, sm, sd, h, m, s, timestamp;
-    sy = date.getFullYear();
-    sm = date.getMonth() + 1;
-    sd = date.getDate();
-    h = date.getHours();
-    m = date.getMinutes();
-    s = date.getSeconds();
+  var sy, sm, sd, h, m, s, timestamp;
+  sy = date.getFullYear();
+  sm = date.getMonth() + 1;
+  sd = date.getDate();
+  h = date.getHours();
+  m = date.getMinutes();
+  s = date.getSeconds();
 
-    timestamp = sy + "-" + pad(sm, 2) + "-" + pad(sd, 2) + " " + pad(h, 2) + ":" + pad(m, 2) + ":" + pad(s, 2);
-    return timestamp;
+  timestamp =
+    sy +
+    "-" +
+    pad(sm, 2) +
+    "-" +
+    pad(sd, 2) +
+    " " +
+    pad(h, 2) +
+    ":" +
+    pad(m, 2) +
+    ":" +
+    pad(s, 2);
+  return timestamp;
 }
 
 function dayClick(date, allDay, jsEvent, view) {
-    // The show from will be preloaded if the user is admin or program manager.
-    // Hence, if the user if DJ then it won't open anything.
-    if (userType == "S" || userType == "A" || userType == "P") {
-        var now, today, selected, chosenDate, chosenTime;
+  // The show from will be preloaded if the user is admin or program manager.
+  // Hence, if the user if DJ then it won't open anything.
+  if (userType == "S" || userType == "A" || userType == "P") {
+    var now, today, selected, chosenDate, chosenTime;
 
-        now = adjustDateToServerDate(new Date(), serverTimezoneOffset);
+    now = adjustDateToServerDate(new Date(), serverTimezoneOffset);
 
-        if (view.name === "month") {
-            today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-            selected = new Date(date.getFullYear(), date.getMonth(), date.getDate());
-        }
-        else {
-            today = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), now.getMinutes());
-            selected = new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes());
-        }
-
-        if (selected >= today) {
-            var addShow = $('.add-button');
-
-            //remove the +show button if it exists.
-            if (addShow.length == 1) {
-                var span = $(addShow).parent();
-
-                $(span).next().remove();
-                $(span).remove();
-            }
-
-            // get current duration value on the form
-            var duration_string = $.trim($("#add_show_duration").val());
-            var duration_info = duration_string.split(" ");
-            var duration_h = 0;
-            var duration_m = 0;
-            if (duration_info[0] != null) {
-                duration_h = parseInt(duration_info[0], 10);
-            }
-            if (duration_info[1] != null) {
-                duration_m = parseInt(duration_info[1], 10);
-            }
-            // duration in milisec
-            var duration = (duration_h * 60 * 60 * 1000) + (duration_m * 60 * 1000);
-
-            var startTime_string;
-            var startTime = 0;
-            // get start time value on the form
-            if (view.name === "month") {
-                startTime_string = $("#add_show_start_time").val();
-                var startTime_info = startTime_string.split(':');
-                if (startTime_info.length == 2) {
-                    var start_time_temp = (parseInt(startTime_info[0], 10) * 60 * 60 * 1000)
-                        + (parseInt(startTime_info[1], 10) * 60 * 1000);
-                    if (!isNaN(start_time_temp)) {
-                        startTime = start_time_temp;
-                    }
-                }
-            } else {
-                // if in day or week view, selected has all the time info as well
-                // so we don't ahve to calculate it explicitly
-                startTime_string = pad(selected.getHours(), 2) + ":" + pad(selected.getMinutes(), 2)
-                startTime = 0
-            }
-
-            // calculate endDateTime
-            var endDateTime = new Date(selected.getTime() + startTime + duration);
-
-            chosenDate = selected.getFullYear() + '-' + pad(selected.getMonth() + 1, 2) + '-' + pad(selected.getDate(), 2);
-            var endDateFormat = endDateTime.getFullYear() + '-' + pad(endDateTime.getMonth() + 1, 2) + '-' + pad(endDateTime.getDate(), 2);
-
-
-            //TODO: This should all be refactored into a proper initialize() function for the show form.
-            $("#add_show_start_now-future").attr('checked', 'checked');
-            $("#add_show_start_now-now").removeProp('disabled');
-            setupStartTimeWidgets(); //add-show.js
-            $("#add_show_start_date").val(chosenDate);
-            $("#add_show_end_date_no_repeat").val(endDateFormat);
-            $("#add_show_end_date").val(endDateFormat);
-            if (view.name !== "month") {
-                var endTimeString = pad(endDateTime.getHours(), 2) + ":" + pad(endDateTime.getMinutes(), 2);
-                $("#add_show_start_time").val(startTime_string)
-                $("#add_show_end_time").val(endTimeString)
-            }
-            calculateShowColor();
-            $("#schedule-show-when").show();
-
-            openAddShowForm();
-            makeAddShowButton();
-            toggleAddShowButton();
-        }
+    if (view.name === "month") {
+      today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+      selected = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    } else {
+      today = new Date(
+        now.getFullYear(),
+        now.getMonth(),
+        now.getDate(),
+        now.getHours(),
+        now.getMinutes()
+      );
+      selected = new Date(
+        date.getFullYear(),
+        date.getMonth(),
+        date.getDate(),
+        date.getHours(),
+        date.getMinutes()
+      );
     }
+
+    if (selected >= today) {
+      var addShow = $(".add-button");
+
+      //remove the +show button if it exists.
+      if (addShow.length == 1) {
+        var span = $(addShow).parent();
+
+        $(span).next().remove();
+        $(span).remove();
+      }
+
+      // get current duration value on the form
+      var duration_string = $.trim($("#add_show_duration").val());
+      var duration_info = duration_string.split(" ");
+      var duration_h = 0;
+      var duration_m = 0;
+      if (duration_info[0] != null) {
+        duration_h = parseInt(duration_info[0], 10);
+      }
+      if (duration_info[1] != null) {
+        duration_m = parseInt(duration_info[1], 10);
+      }
+      // duration in milisec
+      var duration = duration_h * 60 * 60 * 1000 + duration_m * 60 * 1000;
+
+      var startTime_string;
+      var startTime = 0;
+      // get start time value on the form
+      if (view.name === "month") {
+        startTime_string = $("#add_show_start_time").val();
+        var startTime_info = startTime_string.split(":");
+        if (startTime_info.length == 2) {
+          var start_time_temp =
+            parseInt(startTime_info[0], 10) * 60 * 60 * 1000 +
+            parseInt(startTime_info[1], 10) * 60 * 1000;
+          if (!isNaN(start_time_temp)) {
+            startTime = start_time_temp;
+          }
+        }
+      } else {
+        // if in day or week view, selected has all the time info as well
+        // so we don't ahve to calculate it explicitly
+        startTime_string =
+          pad(selected.getHours(), 2) + ":" + pad(selected.getMinutes(), 2);
+        startTime = 0;
+      }
+
+      // calculate endDateTime
+      var endDateTime = new Date(selected.getTime() + startTime + duration);
+
+      chosenDate =
+        selected.getFullYear() +
+        "-" +
+        pad(selected.getMonth() + 1, 2) +
+        "-" +
+        pad(selected.getDate(), 2);
+      var endDateFormat =
+        endDateTime.getFullYear() +
+        "-" +
+        pad(endDateTime.getMonth() + 1, 2) +
+        "-" +
+        pad(endDateTime.getDate(), 2);
+
+      //TODO: This should all be refactored into a proper initialize() function for the show form.
+      $("#add_show_start_now-future").attr("checked", "checked");
+      $("#add_show_start_now-now").removeProp("disabled");
+      setupStartTimeWidgets(); //add-show.js
+      $("#add_show_start_date").val(chosenDate);
+      $("#add_show_end_date_no_repeat").val(endDateFormat);
+      $("#add_show_end_date").val(endDateFormat);
+      if (view.name !== "month") {
+        var endTimeString =
+          pad(endDateTime.getHours(), 2) +
+          ":" +
+          pad(endDateTime.getMinutes(), 2);
+        $("#add_show_start_time").val(startTime_string);
+        $("#add_show_end_time").val(endTimeString);
+      }
+      calculateShowColor();
+      $("#schedule-show-when").show();
+
+      openAddShowForm();
+      makeAddShowButton();
+      toggleAddShowButton();
+    }
+  }
 }
 
 function viewDisplay(view) {
-    view_name = view.name;
+  view_name = view.name;
 
-    if (view.name === 'agendaDay' || view.name === 'agendaWeek') {
+  if (view.name === "agendaDay" || view.name === "agendaWeek") {
+    var calendarEl = this;
 
-        var calendarEl = this;
+    var select = $('<select class="schedule_change_slots input_select"/>')
+      .append('<option value="1">' + $.i18n._("1m") + "</option>")
+      .append('<option value="5">' + $.i18n._("5m") + "</option>")
+      .append('<option value="10">' + $.i18n._("10m") + "</option>")
+      .append('<option value="15">' + $.i18n._("15m") + "</option>")
+      .append('<option value="30">' + $.i18n._("30m") + "</option>")
+      .append('<option value="60">' + $.i18n._("60m") + "</option>")
+      .change(function () {
+        var slotMin = $(this).val();
+        var opt = view.calendar.options;
+        var date = $(calendarEl).fullCalendar("getDate");
 
-        var select = $('<select class="schedule_change_slots input_select"/>')
-            .append('<option value="1">' + $.i18n._("1m") + '</option>')
-            .append('<option value="5">' + $.i18n._("5m") + '</option>')
-            .append('<option value="10">' + $.i18n._("10m") + '</option>')
-            .append('<option value="15">' + $.i18n._("15m") + '</option>')
-            .append('<option value="30">' + $.i18n._("30m") + '</option>')
-            .append('<option value="60">' + $.i18n._("60m") + '</option>')
-            .change(function () {
-                var slotMin = $(this).val();
-                var opt = view.calendar.options;
-                var date = $(calendarEl).fullCalendar('getDate');
+        opt.slotMinutes = parseInt(slotMin);
+        opt.events = getFullCalendarEvents;
+        opt.defaultView = view.name;
 
-                opt.slotMinutes = parseInt(slotMin);
-                opt.events = getFullCalendarEvents;
-                opt.defaultView = view.name;
+        //re-initialize calendar with new slotmin options
+        $(calendarEl)
+          .fullCalendar("destroy")
+          .fullCalendar(opt)
+          .fullCalendar("gotoDate", date);
 
-                //re-initialize calendar with new slotmin options
-                $(calendarEl)
-                    .fullCalendar('destroy')
-                    .fullCalendar(opt)
-                    .fullCalendar('gotoDate', date);
+        //save slotMin value to db
+        var url = baseUrl + "Schedule/set-time-interval/format/json";
+        $.post(url, { timeInterval: slotMin });
+      });
 
-                //save slotMin value to db
-                var url = baseUrl + 'Schedule/set-time-interval/format/json';
-                $.post(url, { timeInterval: slotMin });
-            });
+    var topLeft = $(view.element).find("table.fc-agenda-days > thead th:first");
 
-        var topLeft = $(view.element).find("table.fc-agenda-days > thead th:first");
+    //select.width(topLeft.width())
+    //    .height(topLeft.height());
 
-        //select.width(topLeft.width())
-        //    .height(topLeft.height());
+    topLeft.empty().append(select);
 
-        topLeft.empty()
-            .append(select);
+    var slotMin = view.calendar.options.slotMinutes;
+    $('.schedule_change_slots option[value="' + slotMin + '"]').attr(
+      "selected",
+      "selected"
+    );
+  }
 
-        var slotMin = view.calendar.options.slotMinutes;
-        $('.schedule_change_slots option[value="' + slotMin + '"]').attr('selected', 'selected');
+  if (
+    $("#add-show-form").length == 1 &&
+    $("#add-show-form").css("display") == "none" &&
+    $(".fc-header-left > span").length == 5
+  ) {
+    //userType is defined in bootstrap.php, and is derived from the currently logged in user.
+    if (userType == "S" || userType == "A" || userType == "P") {
+      makeAddShowButton();
     }
+  }
 
-    if (($("#add-show-form").length == 1) && ($("#add-show-form").css('display') == 'none') && ($('.fc-header-left > span').length == 5)) {
-
-        //userType is defined in bootstrap.php, and is derived from the currently logged in user.
-        if (userType == "S" || userType == "A" || userType == "P") {
-            makeAddShowButton();
-        }
-    }
-
-    //save view name to db if it was changed
-    if (calendarPref.timeScale !== view.name) {
-        var url = baseUrl + 'Schedule/set-time-scale/format/json';
-        $.post(url, { timeScale: view.name });
-        calendarPref.timeScale = view.name;
-    }
+  //save view name to db if it was changed
+  if (calendarPref.timeScale !== view.name) {
+    var url = baseUrl + "Schedule/set-time-scale/format/json";
+    $.post(url, { timeScale: view.name });
+    calendarPref.timeScale = view.name;
+  }
 }
 
 function eventRender(event, element, view) {
-    $(element).addClass("fc-show-instance-" + event.id);
-    $(element).attr("data-show-id", event.showId);
-    $(element).attr("data-show-linked", event.linked);
-    $(element).data("event", event);
+  $(element).addClass("fc-show-instance-" + event.id);
+  $(element).attr("data-show-id", event.showId);
+  $(element).attr("data-show-linked", event.linked);
+  $(element).data("event", event);
 
-    //only put progress bar on shows that aren't being recorded.
-    if ((view.name === 'agendaDay' || view.name === 'agendaWeek') && event.record === 0) {
-        var div = $('<div/>');
-        div
-            .height('5px')
-            .width('95%')
-            .css('margin-top', '1px')
-            .css('margin-left', 'auto')
-            .css('margin-right', 'auto')
-            .progressbar({
-                value: event.percent
-            });
+  //only put progress bar on shows that aren't being recorded.
+  if (
+    (view.name === "agendaDay" || view.name === "agendaWeek") &&
+    event.record === 0
+  ) {
+    var div = $("<div/>");
+    div
+      .height("5px")
+      .width("95%")
+      .css("margin-top", "1px")
+      .css("margin-left", "auto")
+      .css("margin-right", "auto")
+      .progressbar({
+        value: event.percent,
+      });
 
-        $(element).find(".fc-event-content").append(div);
-    }
+    $(element).find(".fc-event-content").append(div);
+  }
 
-    if (event.record === 0 && event.rebroadcast === 0) {
-        if (view.name === 'agendaDay' || view.name === 'agendaWeek') {
-            if (event.show_empty === 1) {
-                if (event.linked) {
-                    $(element)
-                        .find(".fc-event-time")
-                        .before('<span class="small-icon linked"></span><span class="small-icon show-empty"></span>');
-                    // in theory a linked show shouldn't have an automatic playlist so adding this here
-                } else if (event.show_has_auto_playlist === true) {
-                    $(element)
-                        .find(".fc-event-time")
-                        .before('<span class="small-icon autoplaylist"></span>');
-                }
-                else {
-                    $(element)
-                        .find(".fc-event-time")
-                        .before('<span class="small-icon show-empty"></span>');
-                }
-            } else if (event.show_partial_filled === true) {
-                if (event.linked) {
-                    $(element)
-                        .find(".fc-event-time")
-                        .before('<span class="small-icon linked"></span><span class="small-icon show-partial-filled"></span>');
-                } else if (event.show_has_auto_playlist === true) {
-                    $(element)
-                        .find(".fc-event-time")
-                        .before('<span class="small-icon autoplaylist"></span>');
-                } else {
-                    $(element)
-                        .find(".fc-event-time")
-                        .before('<span class="small-icon show-partial-filled"></span>');
-                }
-            } else if (event.percent > 100) {
-                if (event.linked) {
-                    $(element)
-                        .find(".fc-event-time")
-                        .before('<span class="small-icon linked"></span><span class="small-icon show-overbooked"></span>');
-                } else if (event.show_has_auto_playlist === true) {
-                    $(element)
-                        .find(".fc-event-time")
-                        .before('<span class="small-icon autoplaylist"></span>');
-                } else {
-                    $(element)
-                        .find(".fc-event-time")
-                        .before('<span class="small-icon show-overbooked"></span>');
-                }
-
-            } else {
-                if (event.linked) {
-                    $(element)
-                        .find(".fc-event-time")
-                        .before('<span class="small-icon linked"></span>');
-                } else if (event.show_has_auto_playlist === true) {
-                    $(element)
-                        .find(".fc-event-time")
-                        .before('<span class="small-icon autoplaylist"></span>');
-                }
-            }
-        } else if (view.name === 'month') {
-            if (event.show_empty === 1) {
-                if (event.linked) {
-                    $(element)
-                        .find(".fc-event-title")
-                        .after('<span class="small-icon linked"></span><span title="' + $.i18n._("Show is empty") + '" class="small-icon show-empty"></span>');
-                } else if (event.show_has_auto_playlist === true) {
-                    $(element)
-                        .find(".fc-event-title")
-                        .after('<span title="' + $.i18n._("Show has an automatic playlist") + '"class="small-icon autoplaylist"></span>');
-                } else {
-                    $(element)
-                        .find(".fc-event-title")
-                        .after('<span title="' + $.i18n._("Show is empty") + '" class="small-icon show-empty"></span>');
-                }
-            } else if (event.show_partial_filled === true) {
-                if (event.linked) {
-                    $(element)
-                        .find(".fc-event-title")
-                        .after('<span class="small-icon linked"></span><span title="' + $.i18n._("Show is partially filled") + '" class="small-icon show-partial-filled"></span>');
-                } else if (event.show_has_auto_playlist === true) {
-                    $(element)
-                        .find(".fc-event-title")
-                        .after('<span title="' + $.i18n._("Show has an automatic playlist") + '"class="small-icon autoplaylist"></span>');
-                } else {
-                    $(element)
-                        .find(".fc-event-title")
-                        .after('<span title="' + $.i18n._("Show is partially filled") + '" class="small-icon show-partial-filled"></span>');
-                }
-            } else if (event.percent > 100) {
-                if (event.linked) {
-                    $(element)
-                        .find(".fc-event-title")
-                        .after('<span class="small-icon linked"></span><span title="' + $.i18n._("Shows longer than their scheduled time will be cut off by a following show.") + '" class="small-icon show-overbooked"></span>');
-                } else if (event.show_has_auto_playlist === true) {
-                    $(element)
-                        .find(".fc-event-title")
-                        .after('<span title="' + $.i18n._("Show has an automatic playlist") + '"class="small-icon autoplaylist"></span>');
-                } else {
-                    $(element)
-                        .find(".fc-event-title")
-                        .after('<span title="' + $.i18n._("Shows longer than their scheduled time will be cut off by a following show.") + '" class="small-icon show-overbooked"></span>');
-                }
-            } else {
-                if (event.linked) {
-                    $(element)
-                        .find(".fc-event-title")
-                        .after('<span class="small-icon linked"></span>');
-                } else if (event.show_has_auto_playlist === true) {
-                    $(element)
-                        .find(".fc-event-title")
-                        .after('<span class="small-icon autoplaylist"></span>');
-                }
-            }
+  if (event.record === 0 && event.rebroadcast === 0) {
+    if (view.name === "agendaDay" || view.name === "agendaWeek") {
+      if (event.show_empty === 1) {
+        if (event.linked) {
+          $(element)
+            .find(".fc-event-time")
+            .before(
+              '<span class="small-icon linked"></span><span class="small-icon show-empty"></span>'
+            );
+          // in theory a linked show shouldn't have an automatic playlist so adding this here
+        } else if (event.show_has_auto_playlist === true) {
+          $(element)
+            .find(".fc-event-time")
+            .before('<span class="small-icon autoplaylist"></span>');
+        } else {
+          $(element)
+            .find(".fc-event-time")
+            .before('<span class="small-icon show-empty"></span>');
         }
-    }
-
-    //rebroadcast icon
-    if (event.rebroadcast === 1) {
-        if (view.name === 'agendaDay' || view.name === 'agendaWeek') {
-            $(element).find(".fc-event-time").before('<span class="small-icon rebroadcast"></span>');
-        } else if (view.name === 'month') {
-            $(element).find(".fc-event-title").after('<span class="small-icon rebroadcast"></span>');
+      } else if (event.show_partial_filled === true) {
+        if (event.linked) {
+          $(element)
+            .find(".fc-event-time")
+            .before(
+              '<span class="small-icon linked"></span><span class="small-icon show-partial-filled"></span>'
+            );
+        } else if (event.show_has_auto_playlist === true) {
+          $(element)
+            .find(".fc-event-time")
+            .before('<span class="small-icon autoplaylist"></span>');
+        } else {
+          $(element)
+            .find(".fc-event-time")
+            .before('<span class="small-icon show-partial-filled"></span>');
         }
-    }
-
-    //now playing icon.
-    var span = '<span class="small-icon now-playing"></span>';
-
-    if (event.nowPlaying === true) {
-
-        if (view_name === 'agendaDay' || view_name === 'agendaWeek') {
-
-            $(element).find(".fc-event-time").before(span);
+      } else if (event.percent > 100) {
+        if (event.linked) {
+          $(element)
+            .find(".fc-event-time")
+            .before(
+              '<span class="small-icon linked"></span><span class="small-icon show-overbooked"></span>'
+            );
+        } else if (event.show_has_auto_playlist === true) {
+          $(element)
+            .find(".fc-event-time")
+            .before('<span class="small-icon autoplaylist"></span>');
+        } else {
+          $(element)
+            .find(".fc-event-time")
+            .before('<span class="small-icon show-overbooked"></span>');
         }
-        else if (view_name === 'month') {
-
-            $(element).find(".fc-event-title").after(span);
+      } else {
+        if (event.linked) {
+          $(element)
+            .find(".fc-event-time")
+            .before('<span class="small-icon linked"></span>');
+        } else if (event.show_has_auto_playlist === true) {
+          $(element)
+            .find(".fc-event-time")
+            .before('<span class="small-icon autoplaylist"></span>');
         }
+      }
+    } else if (view.name === "month") {
+      if (event.show_empty === 1) {
+        if (event.linked) {
+          $(element)
+            .find(".fc-event-title")
+            .after(
+              '<span class="small-icon linked"></span><span title="' +
+                $.i18n._("Show is empty") +
+                '" class="small-icon show-empty"></span>'
+            );
+        } else if (event.show_has_auto_playlist === true) {
+          $(element)
+            .find(".fc-event-title")
+            .after(
+              '<span title="' +
+                $.i18n._("Show has an automatic playlist") +
+                '"class="small-icon autoplaylist"></span>'
+            );
+        } else {
+          $(element)
+            .find(".fc-event-title")
+            .after(
+              '<span title="' +
+                $.i18n._("Show is empty") +
+                '" class="small-icon show-empty"></span>'
+            );
+        }
+      } else if (event.show_partial_filled === true) {
+        if (event.linked) {
+          $(element)
+            .find(".fc-event-title")
+            .after(
+              '<span class="small-icon linked"></span><span title="' +
+                $.i18n._("Show is partially filled") +
+                '" class="small-icon show-partial-filled"></span>'
+            );
+        } else if (event.show_has_auto_playlist === true) {
+          $(element)
+            .find(".fc-event-title")
+            .after(
+              '<span title="' +
+                $.i18n._("Show has an automatic playlist") +
+                '"class="small-icon autoplaylist"></span>'
+            );
+        } else {
+          $(element)
+            .find(".fc-event-title")
+            .after(
+              '<span title="' +
+                $.i18n._("Show is partially filled") +
+                '" class="small-icon show-partial-filled"></span>'
+            );
+        }
+      } else if (event.percent > 100) {
+        if (event.linked) {
+          $(element)
+            .find(".fc-event-title")
+            .after(
+              '<span class="small-icon linked"></span><span title="' +
+                $.i18n._(
+                  "Shows longer than their scheduled time will be cut off by a following show."
+                ) +
+                '" class="small-icon show-overbooked"></span>'
+            );
+        } else if (event.show_has_auto_playlist === true) {
+          $(element)
+            .find(".fc-event-title")
+            .after(
+              '<span title="' +
+                $.i18n._("Show has an automatic playlist") +
+                '"class="small-icon autoplaylist"></span>'
+            );
+        } else {
+          $(element)
+            .find(".fc-event-title")
+            .after(
+              '<span title="' +
+                $.i18n._(
+                  "Shows longer than their scheduled time will be cut off by a following show."
+                ) +
+                '" class="small-icon show-overbooked"></span>'
+            );
+        }
+      } else {
+        if (event.linked) {
+          $(element)
+            .find(".fc-event-title")
+            .after('<span class="small-icon linked"></span>');
+        } else if (event.show_has_auto_playlist === true) {
+          $(element)
+            .find(".fc-event-title")
+            .after('<span class="small-icon autoplaylist"></span>');
+        }
+      }
     }
+  }
+
+  //rebroadcast icon
+  if (event.rebroadcast === 1) {
+    if (view.name === "agendaDay" || view.name === "agendaWeek") {
+      $(element)
+        .find(".fc-event-time")
+        .before('<span class="small-icon rebroadcast"></span>');
+    } else if (view.name === "month") {
+      $(element)
+        .find(".fc-event-title")
+        .after('<span class="small-icon rebroadcast"></span>');
+    }
+  }
+
+  //now playing icon.
+  var span = '<span class="small-icon now-playing"></span>';
+
+  if (event.nowPlaying === true) {
+    if (view_name === "agendaDay" || view_name === "agendaWeek") {
+      $(element).find(".fc-event-time").before(span);
+    } else if (view_name === "month") {
+      $(element).find(".fc-event-title").after(span);
+    }
+  }
 }
 
 function eventAfterRender(event, element, view) {
-
-    $(element).find(".small-icon").live('mouseover', function () {
-        addQtipsToIcons($(this), event.id);
+  $(element)
+    .find(".small-icon")
+    .live("mouseover", function () {
+      addQtipsToIcons($(this), event.id);
     });
 }
 
-function eventDrop(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
-    var url = baseUrl + 'Schedule/move-show/format/json';
+function eventDrop(
+  event,
+  dayDelta,
+  minuteDelta,
+  allDay,
+  revertFunc,
+  jsEvent,
+  ui,
+  view
+) {
+  var url = baseUrl + "Schedule/move-show/format/json";
 
-    $.post(url,
-        { day: dayDelta, min: minuteDelta, showInstanceId: event.id },
-        function (json) {
-            if (json.show_error == true) {
-                alertShowErrorAndReload();
-            }
-            if (json.error) {
-                alert(json.error);
-                revertFunc();
-            }
+  $.post(
+    url,
+    { day: dayDelta, min: minuteDelta, showInstanceId: event.id },
+    function (json) {
+      if (json.show_error == true) {
+        alertShowErrorAndReload();
+      }
+      if (json.error) {
+        alert(json.error);
+        revertFunc();
+      }
 
-            //Workaround for cases where FullCalendar handles events over DST
-            //time changes in a different way than Airtime does.
-            //(Airtime preserves show duration, FullCalendar doesn't.)
-            scheduleRefetchEvents(json);
-
-        });
+      //Workaround for cases where FullCalendar handles events over DST
+      //time changes in a different way than Airtime does.
+      //(Airtime preserves show duration, FullCalendar doesn't.)
+      scheduleRefetchEvents(json);
+    }
+  );
 }
 
-function eventResize(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
-    var url = baseUrl + 'Schedule/resize-show/format/json';
+function eventResize(
+  event,
+  dayDelta,
+  minuteDelta,
+  revertFunc,
+  jsEvent,
+  ui,
+  view
+) {
+  var url = baseUrl + "Schedule/resize-show/format/json";
 
-    $.post(url,
-        { day: dayDelta, min: minuteDelta, showId: event.showId, instanceId: event.id },
-        function (json) {
-            if (json.show_error == true) {
-                alertShowErrorAndReload();
-            }
-            if (json.error) {
-                alert(json.error);
-                revertFunc();
-            }
+  $.post(
+    url,
+    {
+      day: dayDelta,
+      min: minuteDelta,
+      showId: event.showId,
+      instanceId: event.id,
+    },
+    function (json) {
+      if (json.show_error == true) {
+        alertShowErrorAndReload();
+      }
+      if (json.error) {
+        alert(json.error);
+        revertFunc();
+      }
 
-            scheduleRefetchEvents(json);
-        });
+      scheduleRefetchEvents(json);
+    }
+  );
 }
 
 function windowResize() {
-    // 200 px for top dashboard and 50 for padding on main content
-    // this calculation was copied from schedule.js line 326
-    var mainHeight = $(window).height() - 200 - 24;
-    $('#schedule_calendar').fullCalendar('option', 'contentHeight', mainHeight);
+  // 200 px for top dashboard and 50 for padding on main content
+  // this calculation was copied from schedule.js line 326
+  var mainHeight = $(window).height() - 200 - 24;
+  $("#schedule_calendar").fullCalendar("option", "contentHeight", mainHeight);
 }
 
 function preloadEventFeed() {
-    createFullCalendar({ calendarInit: calendarPref });
+  createFullCalendar({ calendarInit: calendarPref });
 }
 
 var initialLoad = true;
 function getFullCalendarEvents(start, end, callback) {
+  if (initialLoad) {
+    initialLoad = false;
+    callback(calendarEvents);
+  } else {
+    var url, start_date, end_date;
 
-    if (initialLoad) {
-        initialLoad = false;
-        callback(calendarEvents);
-    } else {
-        var url, start_date, end_date;
+    start_date = makeTimeStamp(start);
+    end_date = makeTimeStamp(end);
+    url = baseUrl + "Schedule/event-feed";
 
-        start_date = makeTimeStamp(start);
-        end_date = makeTimeStamp(end);
-        url = baseUrl + 'Schedule/event-feed';
+    var d = new Date();
+    $.post(
+      url,
+      { format: "json", start: start_date, end: end_date, cachep: d.getTime() },
+      function (json) {
+        callback(json.events);
+        getUsabilityHint();
+      }
+    );
+  }
 
-        var d = new Date();
-        $.post(url, { format: "json", start: start_date, end: end_date, cachep: d.getTime() }, function (json) {
-            callback(json.events);
-            getUsabilityHint();
-        });
-    }
-
-    $(".fc-button").addClass("btn").addClass("btn-small");
-    //$("span.fc-button > :button").addClass("btn btn-small");
+  $(".fc-button").addClass("btn").addClass("btn-small");
+  //$("span.fc-button > :button").addClass("btn btn-small");
 }
 
 /** This function adds and removes the current
  *  show icon
  */
 function getCurrentShow() {
+  var url = baseUrl + "Schedule/get-current-show/format/json";
 
-    var url = baseUrl + 'Schedule/get-current-show/format/json';
+  function addNowPlaying(json) {
+    var $el,
+      span = '<span class="small-icon now-playing"></span>';
 
-    function addNowPlaying(json) {
+    $(".now-playing").remove();
 
-        var $el,
-            span = '<span class="small-icon now-playing"></span>';
+    if (json.current_show === true) {
+      $el = $(".fc-show-instance-" + json.si_id);
 
-        $(".now-playing").remove();
-
-        if (json.current_show === true) {
-
-            $el = $(".fc-show-instance-" + json.si_id);
-
-            if (view_name === 'agendaDay' || view_name === 'agendaWeek') {
-
-                $el.find(".fc-event-time").before(span);
-            }
-            else if (view_name === 'month') {
-
-                $el.find(".fc-event-title").after(span);
-            }
-        }
-
-        setTimeout(getCurrentShow, 5000);
+      if (view_name === "agendaDay" || view_name === "agendaWeek") {
+        $el.find(".fc-event-time").before(span);
+      } else if (view_name === "month") {
+        $el.find(".fc-event-title").after(span);
+      }
     }
 
-    $.post(url, { format: "json" }, addNowPlaying);
+    setTimeout(getCurrentShow, 5000);
+  }
+
+  $.post(url, { format: "json" }, addNowPlaying);
 }
 
 function addQtipsToIcons(ele, id) {
-
-    if ($(ele).hasClass("progress")) {
-        $(ele).qtip({
-            content: {
-                text: $.i18n._("Uploading in progress...")
-            },
-            position: {
-                adjust: {
-                    resize: true,
-                    method: "flip flip"
-                },
-                at: "right center",
-                my: "left top",
-                viewport: $(window)
-            },
-            style: {
-                classes: "ui-tooltip-dark file-md-long"
-            },
-            show: {
-                ready: true // Needed to make it show on first mouseover event
-            }
-        });
-    } else if ($(ele).hasClass("show-empty")) {
-        $(ele).qtip({
-            content: {
-                text: $.i18n._("This show has no scheduled content.")
-            },
-            position: {
-                adjust: {
-                    resize: true,
-                    method: "flip flip"
-                },
-                at: "right center",
-                my: "left top",
-                viewport: $(window)
-            },
-            style: {
-                classes: "ui-tooltip-dark file-md-long"
-            },
-            show: {
-                ready: true // Needed to make it show on first mouseover event
-            }
-        });
-    } else if ($(ele).hasClass("show-partial-filled")) {
-        $(ele).qtip({
-            content: {
-                text: $.i18n._("This show is not completely filled with content.")
-            },
-            position: {
-                adjust: {
-                    resize: true,
-                    method: "flip flip"
-                },
-                at: "right center",
-                my: "left top",
-                viewport: $(window)
-            },
-            style: {
-                classes: "ui-tooltip-dark file-md-long"
-            },
-            show: {
-                ready: true // Needed to make it show on first mouseover event
-            }
-        });
-    } else if ($(ele).hasClass("show-overbooked")) {
-        $(ele).qtip({
-            content: {
-                text: $.i18n._("Shows longer than their scheduled time will be cut off by a following show.")
-            },
-            position: {
-                adjust: {
-                    resize: true,
-                    method: "flip flip"
-                },
-                at: "right center",
-                my: "left top",
-                viewport: $(window)
-            },
-            style: {
-                classes: "ui-tooltip-dark file-md-long"
-            },
-            show: {
-                ready: true // Needed to make it show on first mouseover event
-            }
-        });
-    }
+  if ($(ele).hasClass("progress")) {
+    $(ele).qtip({
+      content: {
+        text: $.i18n._("Uploading in progress..."),
+      },
+      position: {
+        adjust: {
+          resize: true,
+          method: "flip flip",
+        },
+        at: "right center",
+        my: "left top",
+        viewport: $(window),
+      },
+      style: {
+        classes: "ui-tooltip-dark file-md-long",
+      },
+      show: {
+        ready: true, // Needed to make it show on first mouseover event
+      },
+    });
+  } else if ($(ele).hasClass("show-empty")) {
+    $(ele).qtip({
+      content: {
+        text: $.i18n._("This show has no scheduled content."),
+      },
+      position: {
+        adjust: {
+          resize: true,
+          method: "flip flip",
+        },
+        at: "right center",
+        my: "left top",
+        viewport: $(window),
+      },
+      style: {
+        classes: "ui-tooltip-dark file-md-long",
+      },
+      show: {
+        ready: true, // Needed to make it show on first mouseover event
+      },
+    });
+  } else if ($(ele).hasClass("show-partial-filled")) {
+    $(ele).qtip({
+      content: {
+        text: $.i18n._("This show is not completely filled with content."),
+      },
+      position: {
+        adjust: {
+          resize: true,
+          method: "flip flip",
+        },
+        at: "right center",
+        my: "left top",
+        viewport: $(window),
+      },
+      style: {
+        classes: "ui-tooltip-dark file-md-long",
+      },
+      show: {
+        ready: true, // Needed to make it show on first mouseover event
+      },
+    });
+  } else if ($(ele).hasClass("show-overbooked")) {
+    $(ele).qtip({
+      content: {
+        text: $.i18n._(
+          "Shows longer than their scheduled time will be cut off by a following show."
+        ),
+      },
+      position: {
+        adjust: {
+          resize: true,
+          method: "flip flip",
+        },
+        at: "right center",
+        my: "left top",
+        viewport: $(window),
+      },
+      style: {
+        classes: "ui-tooltip-dark file-md-long",
+      },
+      show: {
+        ready: true, // Needed to make it show on first mouseover event
+      },
+    });
+  }
 }
 //Alert the error and reload the page
 //this function is used to resolve concurrency issue
 function alertShowErrorAndReload() {
-    alert($.i18n._("The show instance doesn't exist anymore!"));
-    window.location.reload();
+  alert($.i18n._("The show instance doesn't exist anymore!"));
+  window.location.reload();
 }
 
 $(document).ready(function () {
-    preloadEventFeed();
-    getCurrentShow();
+  preloadEventFeed();
+  getCurrentShow();
 });
 
 var view_name;
diff --git a/legacy/public/js/airtime/schedule/schedule.js b/legacy/public/js/airtime/schedule/schedule.js
index 72a7a83cb..72bbae8d5 100644
--- a/legacy/public/js/airtime/schedule/schedule.js
+++ b/legacy/public/js/airtime/schedule/schedule.js
@@ -1,511 +1,559 @@
-var AIRTIME = (function(AIRTIME){
-    var mod;
+var AIRTIME = (function (AIRTIME) {
+  var mod;
 
-    if (AIRTIME.schedule === undefined) {
-        AIRTIME.schedule = {};
-    }
-    mod = AIRTIME.schedule;
+  if (AIRTIME.schedule === undefined) {
+    AIRTIME.schedule = {};
+  }
+  mod = AIRTIME.schedule;
 
-    return AIRTIME;
-
-}(AIRTIME || {}));
+  return AIRTIME;
+})(AIRTIME || {});
 
 var serverTimezoneOffset = 0;
 
 function closeDialogCalendar(event, ui) {
+  $el = $(this);
+  $el.dialog("destroy");
+  $el.remove();
 
-    $el = $(this);
-    $el.dialog('destroy');
-    $el.remove();
-
-    //need to refetch the events to update scheduled status.
-    $("#schedule_calendar").fullCalendar( 'refetchEvents' );
+  //need to refetch the events to update scheduled status.
+  $("#schedule_calendar").fullCalendar("refetchEvents");
 }
 
-function confirmCancelShow(show_instance_id){
-    if (confirm($.i18n._('Cancel Current Show?'))) {
-        var url = baseUrl+"Schedule/cancel-current-show";
-        $.ajax({
-            url: url,
-            data: {format: "json", id: show_instance_id},
-            success: function(data){
-                scheduleRefetchEvents(data);
-            }
-        });
-    }
+function confirmCancelShow(show_instance_id) {
+  if (confirm($.i18n._("Cancel Current Show?"))) {
+    var url = baseUrl + "Schedule/cancel-current-show";
+    $.ajax({
+      url: url,
+      data: { format: "json", id: show_instance_id },
+      success: function (data) {
+        scheduleRefetchEvents(data);
+      },
+    });
+  }
 }
 
-function confirmCancelRecordedShow(show_instance_id){
-    if (confirm($.i18n._('Stop recording current show?'))) {
-        var url = baseUrl+"Schedule/cancel-current-show";
-        $.ajax({
-            url: url,
-            data: {format: "json", id: show_instance_id},
-            success: function(data){
-                scheduleRefetchEvents(data);
-            }
-        });
-    }
+function confirmCancelRecordedShow(show_instance_id) {
+  if (confirm($.i18n._("Stop recording current show?"))) {
+    var url = baseUrl + "Schedule/cancel-current-show";
+    $.ajax({
+      url: url,
+      data: { format: "json", id: show_instance_id },
+      success: function (data) {
+        scheduleRefetchEvents(data);
+      },
+    });
+  }
 }
 
 function findViewportDimensions() {
-    var viewportwidth,
-        viewportheight;
+  var viewportwidth, viewportheight;
 
-    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use
-    // window.innerWidth and window.innerHeight
-    if (typeof window.innerWidth != 'undefined') {
-        viewportwidth = window.innerWidth, viewportheight = window.innerHeight;
-    }
-    // IE6 in standards compliant mode (i.e. with a valid doctype as the first
-    // line in the document)
-    else if (typeof document.documentElement != 'undefined'
-            && typeof document.documentElement.clientWidth != 'undefined'
-            && document.documentElement.clientWidth != 0) {
-        viewportwidth = document.documentElement.clientWidth;
-        viewportheight = document.documentElement.clientHeight;
-    }
-    // older versions of IE
-    else {
-        viewportwidth = document.getElementsByTagName('body')[0].clientWidth;
-        viewportheight = document.getElementsByTagName('body')[0].clientHeight;
-    }
+  // the more standards compliant browsers (mozilla/netscape/opera/IE7) use
+  // window.innerWidth and window.innerHeight
+  if (typeof window.innerWidth != "undefined") {
+    (viewportwidth = window.innerWidth), (viewportheight = window.innerHeight);
+  }
+  // IE6 in standards compliant mode (i.e. with a valid doctype as the first
+  // line in the document)
+  else if (
+    typeof document.documentElement != "undefined" &&
+    typeof document.documentElement.clientWidth != "undefined" &&
+    document.documentElement.clientWidth != 0
+  ) {
+    viewportwidth = document.documentElement.clientWidth;
+    viewportheight = document.documentElement.clientHeight;
+  }
+  // older versions of IE
+  else {
+    viewportwidth = document.getElementsByTagName("body")[0].clientWidth;
+    viewportheight = document.getElementsByTagName("body")[0].clientHeight;
+  }
 
-    return {
-        width: viewportwidth,
-        height: viewportheight-45
-    };
+  return {
+    width: viewportwidth,
+    height: viewportheight - 45,
+  };
 }
 
 function highlightMediaTypeSelector(dialog) {
-    var selected;
-    if (location.hash === "") {
-        selected = dialog.find("a[href$='#tracks']");
-    } else {
-        selected = dialog.find("a[href$='"+location.hash+"']")
-    }
+  var selected;
+  if (location.hash === "") {
+    selected = dialog.find("a[href$='#tracks']");
+  } else {
+    selected = dialog.find("a[href$='" + location.hash + "']");
+  }
 
-    selected.parent().addClass("selected");
+  selected.parent().addClass("selected");
+  $("#library_filter").text(selected.text());
+
+  // Slightly hacky way of triggering the click event when it's outside of the anchor text
+  dialog.find(".media_type_selector").on("click", function () {
+    // Need get(0) here so we don't create a stack overflow by recurring the click on the parent
+    $(this).find("a").get(0).click();
+  });
+
+  $(window).on("hashchange", function () {
+    var selected = dialog.find("a[href$='" + location.hash + "']");
+    AIRTIME.library.selectNone();
+    dialog.find(".media_type_selector").each(function () {
+      $(this).removeClass("selected");
+    });
     $("#library_filter").text(selected.text());
-
-    // Slightly hacky way of triggering the click event when it's outside of the anchor text
-    dialog.find(".media_type_selector").on("click", function() {
-        // Need get(0) here so we don't create a stack overflow by recurring the click on the parent
-        $(this).find("a").get(0).click();
-    });
-
-    $(window).on('hashchange', function() {
-        var selected = dialog.find("a[href$='"+location.hash+"']");
-        AIRTIME.library.selectNone();
-        dialog.find(".media_type_selector").each(function () {
-            $(this).removeClass("selected");
-        });
-        $("#library_filter").text(selected.text());
-        selected.parent().addClass("selected");
-        oTable.fnDraw();
-    });
+    selected.parent().addClass("selected");
+    oTable.fnDraw();
+  });
 }
 
 function buildTimerange(dialog) {
-    var builder = dialog.find("#show_builder"),
-        oBaseDatePickerSettings = {
-            dateFormat: 'yy-mm-dd',
-            //i18n_months, i18n_days_short are in common.js
-            monthNames: i18n_months,
-            dayNamesMin: i18n_days_short,
-            onClick: function(sDate, oDatePicker) {
-                $(this).datepicker("setDate", sDate);
-            },
-            onClose: validateTimeRange
+  var builder = dialog.find("#show_builder"),
+    oBaseDatePickerSettings = {
+      dateFormat: "yy-mm-dd",
+      //i18n_months, i18n_days_short are in common.js
+      monthNames: i18n_months,
+      dayNamesMin: i18n_days_short,
+      onClick: function (sDate, oDatePicker) {
+        $(this).datepicker("setDate", sDate);
+      },
+      onClose: validateTimeRange,
+    },
+    oBaseTimePickerSettings = {
+      showPeriodLabels: false,
+      showCloseButton: true,
+      closeButtonText: $.i18n._("Done"),
+      showLeadingZero: false,
+      defaultTime: "0:00",
+      hourText: $.i18n._("Hour"),
+      minuteText: $.i18n._("Minute"),
+      onClose: validateTimeRange,
+    };
+
+  /*
+   * Icon hover states for search.
+   */
+  builder.on("mouseenter", ".sb-timerange .ui-button", function (ev) {
+    $(this).addClass("ui-state-hover");
+  });
+  builder.on("mouseleave", ".sb-timerange .ui-button", function (ev) {
+    $(this).removeClass("ui-state-hover");
+  });
+
+  builder.find(dateStartId).datepicker(oBaseDatePickerSettings);
+  builder.find(timeStartId).timepicker(oBaseTimePickerSettings);
+  builder.find(dateEndId).datepicker(oBaseDatePickerSettings);
+  builder.find(timeEndId).timepicker(oBaseTimePickerSettings);
+
+  var oRange = AIRTIME.utilities.fnGetScheduleRange(
+    dateStartId,
+    timeStartId,
+    dateEndId,
+    timeEndId
+  );
+  AIRTIME.showbuilder.fnServerData.start = oRange.start;
+  AIRTIME.showbuilder.fnServerData.end = oRange.end;
+}
+
+function buildScheduleDialog(json, instance_id) {
+  var dialog = $(json.dialog),
+    viewport = findViewportDimensions(),
+    height = Math.floor(viewport.height * 0.96),
+    width = Math.floor(viewport.width * 0.96),
+    fnServer = AIRTIME.showbuilder.fnServerData;
+
+  dialog.dialog({
+    autoOpen: false,
+    title: json.title,
+    width: width,
+    height: height,
+    resizable: false,
+    draggable: true,
+    modal: true,
+    close: closeDialogCalendar,
+    buttons: [
+      {
+        text: $.i18n._("Ok"),
+        class: "btn",
+        click: function () {
+          $(this).dialog("close");
+          //getUsabilityHint();
         },
-        oBaseTimePickerSettings = {
-            showPeriodLabels: false,
-            showCloseButton: true,
-            closeButtonText: $.i18n._("Done"),
-            showLeadingZero: false,
-            defaultTime: '0:00',
-            hourText: $.i18n._("Hour"),
-            minuteText: $.i18n._("Minute"),
-            onClose: validateTimeRange
-        };
+      },
+    ],
+  });
 
-    /*
-     * Icon hover states for search.
-     */
-    builder.on("mouseenter", ".sb-timerange .ui-button", function(ev) {
-        $(this).addClass("ui-state-hover");
-    });
-    builder.on("mouseleave", ".sb-timerange .ui-button", function(ev) {
-        $(this).removeClass("ui-state-hover");
-    });
+  //set the start end times so the builder datatables knows its time range.
+  fnServer.start = json.start;
+  fnServer.end = json.end;
+  fnServer.ops = {};
+  fnServer.ops.showFilter = 0;
+  fnServer.ops.showInstanceFilter = instance_id;
+  fnServer.ops.myShows = 0;
 
-    builder.find(dateStartId)
-        .datepicker(oBaseDatePickerSettings);
-    builder.find(timeStartId)
-        .timepicker(oBaseTimePickerSettings);
-    builder.find(dateEndId)
-        .datepicker(oBaseDatePickerSettings);
-    builder.find(timeEndId)
-        .timepicker(oBaseTimePickerSettings);
+  AIRTIME.library.libraryInit();
+  AIRTIME.showbuilder.builderDataTable();
 
-    var oRange = AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId,
-        dateEndId, timeEndId);
-    AIRTIME.showbuilder.fnServerData.start = oRange.start;
-    AIRTIME.showbuilder.fnServerData.end = oRange.end;
+  dialog.dialog("open");
+  highlightMediaTypeSelector(dialog);
+  buildTimerange(dialog);
 }
 
-function buildScheduleDialog (json, instance_id) {
-    var dialog = $(json.dialog),
-        viewport = findViewportDimensions(),
-        height = Math.floor(viewport.height * 0.96),
-        width = Math.floor(viewport.width * 0.96),
-        fnServer = AIRTIME.showbuilder.fnServerData;
+function buildContentDialog(json) {
+  var dialog = $(json.dialog),
+    viewport = findViewportDimensions(),
+    height = (viewport.height * 2) / 3,
+    width = (viewport.width * 4) / 5;
 
-    dialog.dialog({
-        autoOpen: false,
-        title: json.title,
-        width: width,
-        height: height,
-        resizable: false,
-        draggable: true,
-        modal: true,
-        close: closeDialogCalendar,
-        buttons: [
-            {
-                text: $.i18n._("Ok"),
-                class: "btn",
-                click: function() {
-                    $(this).dialog("close");
-                    //getUsabilityHint();
-                }
-            }
-        ]
-    });
+  if (json.show_error == true) {
+    alertShowErrorAndReload();
+  }
 
-    //set the start end times so the builder datatables knows its time range.
-    fnServer.start = json.start;
-    fnServer.end = json.end;
-    fnServer.ops = {};
-    fnServer.ops.showFilter = 0;
-    fnServer.ops.showInstanceFilter = instance_id;
-    fnServer.ops.myShows = 0;
+  dialog.find("#show_progressbar").progressbar({
+    value: json.percentFilled,
+  });
 
-    AIRTIME.library.libraryInit();
-    AIRTIME.showbuilder.builderDataTable();
+  dialog.dialog({
+    autoOpen: false,
+    title: $.i18n._("Contents of Show") + " '" + json.showTitle + "'",
+    width: width,
+    height: height,
+    modal: true,
+    close: closeDialogCalendar,
+    buttons: [
+      {
+        text: $.i18n._("Ok"),
+        class: "btn",
+        click: function () {
+          dialog.remove();
+        },
+      },
+    ],
+  });
 
-    dialog.dialog('open');
-    highlightMediaTypeSelector(dialog);
-    buildTimerange(dialog);
-}
-
-function buildContentDialog (json){
-    var dialog = $(json.dialog),
-        viewport = findViewportDimensions(),
-        height = viewport.height * 2/3,
-        width = viewport.width * 4/5;
-
-    if (json.show_error == true){
-        alertShowErrorAndReload();
-    }
-
-    dialog.find("#show_progressbar").progressbar({
-        value: json.percentFilled
-    });
-
-    dialog.dialog({
-        autoOpen: false,
-        title: $.i18n._("Contents of Show") +" '" + json.showTitle + "'",
-        width: width,
-        height: height,
-        modal: true,
-        close: closeDialogCalendar,
-        buttons: [
-            {
-                text: $.i18n._("Ok"),
-                "class": "btn",
-                click: function() {
-                    dialog.remove();
-                }
-            }
-        ]
-    });
-
-    dialog.dialog('open');
+  dialog.dialog("open");
 }
 
 /**
  * Use user preference for time scale; defaults to month if preference was never set
  */
 function getTimeScalePreference(data) {
-    return data.calendarInit.timeScale;
+  return data.calendarInit.timeScale;
 }
 
 /**
  * Use user preference for time interval; defaults to 30m if preference was never set
  */
 function getTimeIntervalPreference(data) {
-    return parseInt(data.calendarInit.timeInterval);
+  return parseInt(data.calendarInit.timeInterval);
 }
 
-function createFullCalendar(data){
+function createFullCalendar(data) {
+  serverTimezoneOffset = data.calendarInit.timezoneOffset;
 
-    serverTimezoneOffset = data.calendarInit.timezoneOffset;
+  var mainHeight = $(window).height() - 200 - 35;
 
-    var mainHeight = $(window).height() - 200 - 35;
+  $("#schedule_calendar").fullCalendar({
+    header: {
+      left: "prev, next, today",
+      center: "title",
+      right: "agendaDay, agendaWeek, month",
+    },
+    defaultView: getTimeScalePreference(data),
+    slotMinutes: getTimeIntervalPreference(data),
+    firstDay: data.calendarInit.weekStartDay,
+    editable: false,
+    allDaySlot: false,
+    axisFormat: "H:mm",
+    timeFormat: {
+      agenda: "H:mm{ - H:mm}",
+      month: "H:mm{ - H:mm}",
+    },
+    //i18n_months is in common.js
+    monthNames: i18n_months,
+    monthNamesShort: [
+      $.i18n._("Jan"),
+      $.i18n._("Feb"),
+      $.i18n._("Mar"),
+      $.i18n._("Apr"),
+      $.i18n._("May"),
+      $.i18n._("Jun"),
+      $.i18n._("Jul"),
+      $.i18n._("Aug"),
+      $.i18n._("Sep"),
+      $.i18n._("Oct"),
+      $.i18n._("Nov"),
+      $.i18n._("Dec"),
+    ],
+    buttonText: {
+      today: $.i18n._("Today"),
+      month: $.i18n._("Month"),
+      week: $.i18n._("Week"),
+      day: $.i18n._("Day"),
+    },
+    dayNames: [
+      $.i18n._("Sunday"),
+      $.i18n._("Monday"),
+      $.i18n._("Tuesday"),
+      $.i18n._("Wednesday"),
+      $.i18n._("Thursday"),
+      $.i18n._("Friday"),
+      $.i18n._("Saturday"),
+    ],
+    dayNamesShort: [
+      $.i18n._("Sun"),
+      $.i18n._("Mon"),
+      $.i18n._("Tue"),
+      $.i18n._("Wed"),
+      $.i18n._("Thu"),
+      $.i18n._("Fri"),
+      $.i18n._("Sat"),
+    ],
+    contentHeight: mainHeight,
+    theme: true,
+    lazyFetching: true,
+    serverTimestamp: parseInt(data.calendarInit.timestamp, 10),
+    serverTimezoneOffset: parseInt(data.calendarInit.timezoneOffset, 10),
 
-    $('#schedule_calendar').fullCalendar({
-        header: {
-            left: 'prev, next, today',
-            center: 'title',
-            right: 'agendaDay, agendaWeek, month'
-        },
-        defaultView: getTimeScalePreference(data),
-        slotMinutes: getTimeIntervalPreference(data),
-        firstDay: data.calendarInit.weekStartDay,
-        editable: false,
-        allDaySlot: false,
-        axisFormat: 'H:mm',
-        timeFormat: {
-            agenda: 'H:mm{ - H:mm}',
-            month: 'H:mm{ - H:mm}'
-        },
-        //i18n_months is in common.js
-        monthNames: i18n_months,
-        monthNamesShort: [
-            $.i18n._('Jan'),
-            $.i18n._('Feb'),
-            $.i18n._('Mar'),
-            $.i18n._('Apr'),
-            $.i18n._('May'),
-            $.i18n._('Jun'),
-            $.i18n._('Jul'),
-            $.i18n._('Aug'),
-            $.i18n._('Sep'),
-            $.i18n._('Oct'),
-            $.i18n._('Nov'),
-            $.i18n._('Dec')
-        ],
-        buttonText: {
-            today: $.i18n._('Today'),
-            month: $.i18n._('Month'),
-            week: $.i18n._('Week'),
-            day: $.i18n._('Day')
-        },
-        dayNames: [
-            $.i18n._('Sunday'),
-            $.i18n._('Monday'),
-            $.i18n._('Tuesday'),
-            $.i18n._('Wednesday'),
-            $.i18n._('Thursday'),
-            $.i18n._('Friday'),
-            $.i18n._('Saturday')
-        ],
-        dayNamesShort: [
-            $.i18n._('Sun'),
-            $.i18n._('Mon'),
-            $.i18n._('Tue'),
-            $.i18n._('Wed'),
-            $.i18n._('Thu'),
-            $.i18n._('Fri'),
-            $.i18n._('Sat')
-        ],
-        contentHeight: mainHeight,
-        theme: true,
-        lazyFetching: true,
-        serverTimestamp: parseInt(data.calendarInit.timestamp, 10),
-        serverTimezoneOffset: parseInt(data.calendarInit.timezoneOffset, 10),
+    events: getFullCalendarEvents,
 
-        events: getFullCalendarEvents,
-
-        //callbacks (in full-calendar-functions.js)
-        viewDisplay: viewDisplay,
-        dayClick: dayClick,
-        eventRender: eventRender,
-        eventAfterRender: eventAfterRender,
-        eventDrop: eventDrop,
-        eventResize: eventResize,
-        windowResize: windowResize
-    });
+    //callbacks (in full-calendar-functions.js)
+    viewDisplay: viewDisplay,
+    dayClick: dayClick,
+    eventRender: eventRender,
+    eventAfterRender: eventAfterRender,
+    eventDrop: eventDrop,
+    eventResize: eventResize,
+    windowResize: windowResize,
+  });
 }
 
 //Alert the error and reload the page
 //this function is used to resolve concurrency issue
-function alertShowErrorAndReload(){
-    alert($.i18n._("The show instance doesn't exist anymore!"));
-    window.location.reload();
+function alertShowErrorAndReload() {
+  alert($.i18n._("The show instance doesn't exist anymore!"));
+  window.location.reload();
 }
 
-$(document).ready(function() {
+$(document).ready(function () {
+  $.contextMenu({
+    selector: "div.fc-event",
+    trigger: "left",
+    ignoreRightClick: true,
+    className: "calendar-context-menu",
 
-    $.contextMenu({
-        selector: 'div.fc-event',
-        trigger: "left",
-        ignoreRightClick: true,
-        className: 'calendar-context-menu',
+    build: function ($el, e) {
+      var data, items, callback;
 
-        build: function($el, e) {
-            var data,
-                items,
-                callback;
+      data = $el.data("event");
 
-            data = $el.data("event");
-
-            function processMenuItems(oItems) {
-
-                //define a schedule callback.
-                if (oItems.schedule !== undefined) {
-
-                    callback = function() {
-                        $.post(oItems.schedule.url, {format: "json", id: data.id}, function(json){
-                            buildScheduleDialog(json, data.id);
-                        });
-                    };
-
-                    oItems.schedule.callback = callback;
-                }
-
-                //define a clear callback.
-                if (oItems.clear !== undefined) {
-
-                    callback = function() {
-                        if (confirm($.i18n._("Remove all content?"))) {
-                            $.post(oItems.clear.url, {format: "json", id: data.id}, function(json){
-                                scheduleRefetchEvents(json);
-                            });
-                        }
-                    };
-                    oItems.clear.callback = callback;
-                }
-
-                //define an edit callback.
-                if (oItems.edit !== undefined) {
-                    if(oItems.edit.items !== undefined){
-                        var edit = oItems.edit.items;
-
-
-                        //edit a single instance
-                        callback = function() {
-                            $.get(edit.instance.url, {format: "json", showId: data.showId, instanceId: data.id, type: "instance"}, function(json){
-                                beginEditShow(json);
-                            });
-                        };
-                        edit.instance.callback = callback;
-
-                        //edit this instance and all
-                        callback = function() {
-                            $.get(edit.all.url, {format: "json", showId: data.showId, instanceId: data.id, type: "all"}, function(json){
-                                beginEditShow(json);
-                            });
-                        };
-                        edit.all.callback = callback;
-                    }else{
-                        callback = function() {
-                            $.get(oItems.edit.url, {format: "json", showId: data.showId, instanceId: data.id, type: oItems.edit._type}, function(json){
-                                beginEditShow(json);
-                            });
-                        };
-                        oItems.edit.callback = callback;
-                    }
-                }
-
-                //define a content callback.
-                if (oItems.content !== undefined) {
-
-                    callback = function() {
-                        $.get(oItems.content.url, {format: "json", id: data.id}, function(json){
-                            buildContentDialog(json);
-                        });
-                    };
-                    oItems.content.callback = callback;
-                }
-
-                //define a cancel recorded show callback.
-                if (oItems.cancel_recorded !== undefined) {
-
-                    callback = function() {
-                        confirmCancelRecordedShow(data.id);
-                    };
-                    oItems.cancel_recorded.callback = callback;
-                }
-
-                //define a view recorded callback.
-                if (oItems.view_recorded !== undefined) {
-                    callback = function() {
-                        $.get(oItems.view_recorded.url, {format: "json"}, function(json){
-                            //in library.js
-                            buildEditMetadataDialog(json);
-                        });
-                    };
-                    oItems.view_recorded.callback = callback;
-                }
-
-                //define a cancel callback.
-                if (oItems.cancel !== undefined) {
-
-                    callback = function() {
-                        confirmCancelShow(data.id);
-                    };
-                    oItems.cancel.callback = callback;
-                }
-
-                //define a delete callback.
-                if (oItems.del !== undefined) {
-
-                    //repeating show multiple delete options
-                    if (oItems.del.items !== undefined) {
-                        var del = oItems.del.items;
-
-                        //delete a single instance
-                        callback = function() {
-                            $.post(del.single.url, {format: "json", id: data.id}, function(json){
-                                scheduleRefetchEvents(json);
-                            });
-                        };
-                        del.single.callback = callback;
-
-                        //delete this instance and all following instances.
-                        callback = function() {
-                            $.post(del.following.url, {format: "json", id: data.id}, function(json){
-                                scheduleRefetchEvents(json);
-                            });
-                        };
-                        del.following.callback = callback;
-
-                    }
-                    //single show
-                    else {
-                        callback = function() {
-                            $.post(oItems.del.url, {format: "json", id: data.id}, function(json){
-                                scheduleRefetchEvents(json);
-                            });
-                        };
-                        oItems.del.callback = callback;
-                    }
-                }
-
-                items = oItems;
-            }
-
-            $.ajax({
-              url: baseUrl+"schedule/make-context-menu",
-              type: "GET",
-              data: {instanceId : data.id, showId: data.showId, format: "json"},
-              dataType: "json",
-              async: false,
-              success: function(json){
-                  processMenuItems(json.items);
+      function processMenuItems(oItems) {
+        //define a schedule callback.
+        if (oItems.schedule !== undefined) {
+          callback = function () {
+            $.post(
+              oItems.schedule.url,
+              { format: "json", id: data.id },
+              function (json) {
+                buildScheduleDialog(json, data.id);
               }
-            });
+            );
+          };
 
-            return {
-                className: 'calendar-context-menu',
-                items: items,
-                determinePosition : function($menu, x, y) {
-                    $menu.css('display', 'block')
-                        .position({ my: "left top", at: "right top", of: this, offset: "-20 10", collision: "fit"})
-                        .css('display', 'none');
-                }
-            };
+          oItems.schedule.callback = callback;
         }
-    });
+
+        //define a clear callback.
+        if (oItems.clear !== undefined) {
+          callback = function () {
+            if (confirm($.i18n._("Remove all content?"))) {
+              $.post(
+                oItems.clear.url,
+                { format: "json", id: data.id },
+                function (json) {
+                  scheduleRefetchEvents(json);
+                }
+              );
+            }
+          };
+          oItems.clear.callback = callback;
+        }
+
+        //define an edit callback.
+        if (oItems.edit !== undefined) {
+          if (oItems.edit.items !== undefined) {
+            var edit = oItems.edit.items;
+
+            //edit a single instance
+            callback = function () {
+              $.get(
+                edit.instance.url,
+                {
+                  format: "json",
+                  showId: data.showId,
+                  instanceId: data.id,
+                  type: "instance",
+                },
+                function (json) {
+                  beginEditShow(json);
+                }
+              );
+            };
+            edit.instance.callback = callback;
+
+            //edit this instance and all
+            callback = function () {
+              $.get(
+                edit.all.url,
+                {
+                  format: "json",
+                  showId: data.showId,
+                  instanceId: data.id,
+                  type: "all",
+                },
+                function (json) {
+                  beginEditShow(json);
+                }
+              );
+            };
+            edit.all.callback = callback;
+          } else {
+            callback = function () {
+              $.get(
+                oItems.edit.url,
+                {
+                  format: "json",
+                  showId: data.showId,
+                  instanceId: data.id,
+                  type: oItems.edit._type,
+                },
+                function (json) {
+                  beginEditShow(json);
+                }
+              );
+            };
+            oItems.edit.callback = callback;
+          }
+        }
+
+        //define a content callback.
+        if (oItems.content !== undefined) {
+          callback = function () {
+            $.get(
+              oItems.content.url,
+              { format: "json", id: data.id },
+              function (json) {
+                buildContentDialog(json);
+              }
+            );
+          };
+          oItems.content.callback = callback;
+        }
+
+        //define a cancel recorded show callback.
+        if (oItems.cancel_recorded !== undefined) {
+          callback = function () {
+            confirmCancelRecordedShow(data.id);
+          };
+          oItems.cancel_recorded.callback = callback;
+        }
+
+        //define a view recorded callback.
+        if (oItems.view_recorded !== undefined) {
+          callback = function () {
+            $.get(
+              oItems.view_recorded.url,
+              { format: "json" },
+              function (json) {
+                //in library.js
+                buildEditMetadataDialog(json);
+              }
+            );
+          };
+          oItems.view_recorded.callback = callback;
+        }
+
+        //define a cancel callback.
+        if (oItems.cancel !== undefined) {
+          callback = function () {
+            confirmCancelShow(data.id);
+          };
+          oItems.cancel.callback = callback;
+        }
+
+        //define a delete callback.
+        if (oItems.del !== undefined) {
+          //repeating show multiple delete options
+          if (oItems.del.items !== undefined) {
+            var del = oItems.del.items;
+
+            //delete a single instance
+            callback = function () {
+              $.post(
+                del.single.url,
+                { format: "json", id: data.id },
+                function (json) {
+                  scheduleRefetchEvents(json);
+                }
+              );
+            };
+            del.single.callback = callback;
+
+            //delete this instance and all following instances.
+            callback = function () {
+              $.post(
+                del.following.url,
+                { format: "json", id: data.id },
+                function (json) {
+                  scheduleRefetchEvents(json);
+                }
+              );
+            };
+            del.following.callback = callback;
+          }
+          //single show
+          else {
+            callback = function () {
+              $.post(
+                oItems.del.url,
+                { format: "json", id: data.id },
+                function (json) {
+                  scheduleRefetchEvents(json);
+                }
+              );
+            };
+            oItems.del.callback = callback;
+          }
+        }
+
+        items = oItems;
+      }
+
+      $.ajax({
+        url: baseUrl + "schedule/make-context-menu",
+        type: "GET",
+        data: { instanceId: data.id, showId: data.showId, format: "json" },
+        dataType: "json",
+        async: false,
+        success: function (json) {
+          processMenuItems(json.items);
+        },
+      });
+
+      return {
+        className: "calendar-context-menu",
+        items: items,
+        determinePosition: function ($menu, x, y) {
+          $menu
+            .css("display", "block")
+            .position({
+              my: "left top",
+              at: "right top",
+              of: this,
+              offset: "-20 10",
+              collision: "fit",
+            })
+            .css("display", "none");
+        },
+      };
+    },
+  });
 });
diff --git a/legacy/public/js/airtime/showbuilder/builder.js b/legacy/public/js/airtime/showbuilder/builder.js
index 20ee03796..7d42ab116 100644
--- a/legacy/public/js/airtime/showbuilder/builder.js
+++ b/legacy/public/js/airtime/showbuilder/builder.js
@@ -1,1247 +1,1452 @@
-var AIRTIME = (function(AIRTIME){
-    var mod,
-        oSchedTable,
-        SB_SELECTED_CLASS = "sb-selected",
-        CURSOR_SELECTED_CLASS = "cursor-selected-row",
-        NOW_PLAYING_CLASS = "sb-now-playing",
-        $sbContent,
-        $sbTable,
-        $toolbar,
-        $lib,
-        cursors = [],
-        cursorIds = [],
-        showInstanceIds = [],
-        headerFooter = [],
-        DISABLED_CLASS = 'ui-state-disabled',
-        selectedRows,
-        $previouslySelected,
-        flagForDeselection;
+var AIRTIME = (function (AIRTIME) {
+  var mod,
+    oSchedTable,
+    SB_SELECTED_CLASS = "sb-selected",
+    CURSOR_SELECTED_CLASS = "cursor-selected-row",
+    NOW_PLAYING_CLASS = "sb-now-playing",
+    $sbContent,
+    $sbTable,
+    $toolbar,
+    $lib,
+    cursors = [],
+    cursorIds = [],
+    showInstanceIds = [],
+    headerFooter = [],
+    DISABLED_CLASS = "ui-state-disabled",
+    selectedRows,
+    $previouslySelected,
+    flagForDeselection;
 
-    if (AIRTIME.showbuilder === undefined) {
-        AIRTIME.showbuilder = {};
+  if (AIRTIME.showbuilder === undefined) {
+    AIRTIME.showbuilder = {};
+  }
+  mod = AIRTIME.showbuilder;
+
+  function checkError(json) {
+    if (json.error !== undefined) {
+      alert(json.error);
     }
-    mod = AIRTIME.showbuilder;
+  }
 
-    function checkError(json) {
-        if (json.error !== undefined) {
-            alert(json.error);
-        }
-    }
+  mod.timeout = undefined;
+  mod.timestamp = -1;
+  mod.showInstances = [];
 
-    mod.timeout = undefined;
+  mod.resetTimestamp = function () {
     mod.timestamp = -1;
-    mod.showInstances = [];
+  };
 
-    mod.resetTimestamp = function() {
+  mod.setTimestamp = function (timestamp) {
+    mod.timestamp = timestamp;
+  };
 
-        mod.timestamp = -1;
-    };
+  mod.updateCalendarStatusIcon = function (json) {
+    //make sure we are only executing this code on the calendar view, not
+    //the Now Playing view.
+    if (window.location.pathname.toLowerCase().indexOf("schedule") < 0) {
+      return;
+    }
 
-    mod.setTimestamp = function(timestamp) {
+    var instance_id = json.schedule[0].instance;
 
-        mod.timestamp = timestamp;
-    };
+    var lastElem = json.schedule[json.schedule.length - 1];
+    var $elem = $("#fc-show-instance-" + instance_id);
 
-    mod.updateCalendarStatusIcon = function(json) {
-        //make sure we are only executing this code on the calendar view, not
-        //the Now Playing view.
-        if (window.location.pathname.toLowerCase().indexOf("schedule") < 0) {
-            return;
+    //if the show is linked, then replace $elem to reference all linked
+    //instances
+    if ($elem.data("show-linked") == "1") {
+      var show_id = $elem.data("show-id");
+      $elem = $('*[data-show-id="' + show_id + '"]');
+    }
+
+    $elem.find(".show-empty, .show-partial-filled").remove();
+    if (json.schedule[1].empty) {
+      $elem
+        .find(".fc-event-inner")
+        .append(
+          '<span id="' +
+            instance_id +
+            '" title="' +
+            $.i18n._("Show is empty") +
+            '" class="small-icon show-empty"></span>'
+        );
+    } else if (lastElem["fRuntime"][0] == "-") {
+      $elem
+        .find(".fc-event-inner")
+        .append(
+          '<span id="' +
+            instance_id +
+            '" title="' +
+            $.i18n._("Show is partially filled") +
+            '" class="small-icon show-partial-filled"></span>'
+        );
+    }
+  };
+
+  mod.getTimestamp = function () {
+    if (mod.timestamp !== undefined) {
+      return mod.timestamp;
+    } else {
+      return -1;
+    }
+  };
+
+  mod.setShowInstances = function (showInstances) {
+    mod.showInstances = showInstances;
+  };
+
+  mod.getShowInstances = function () {
+    return mod.showInstances;
+  };
+
+  mod.refresh = function (schedId) {
+    mod.resetTimestamp();
+
+    // once a track plays out we need to check if we can update
+    // the is_scheduled flag in cc_files
+    if (schedId > 0) {
+      $.post(
+        baseUrl + "schedule/update-future-is-scheduled",
+        { format: "json", schedId: schedId },
+        function (data) {
+          if (data.redrawLibTable !== undefined && data.redrawLibTable) {
+            $("#library_content")
+              .find("#library_display")
+              .dataTable()
+              .fnStandingRedraw();
+          }
         }
+      );
+      oSchedTable.fnDraw();
+    }
+  };
 
+  mod.checkSelectButton = function () {
+    var $selectable = $sbTable.find("tr");
 
-        var instance_id = json.schedule[0].instance;
+    if ($selectable.length !== 0) {
+      AIRTIME.button.enableButton("btn-group #timeline-select", false);
+    } else {
+      AIRTIME.button.disableButton("btn-group #timeline-select", false);
+    }
 
-        var lastElem = json.schedule[json.schedule.length-1];
-        var $elem = $("#fc-show-instance-"+instance_id);
+    //need to check if the 'Select' button is disabled
+    var select = $(".btn-group #timeline-select");
+    if (select.is(":disabled")) {
+      select.removeAttr("disabled");
+    }
+  };
 
-        //if the show is linked, then replace $elem to reference all linked
-        //instances
-        if ($elem.data("show-linked") == "1") {
-            var show_id = $elem.data("show-id");
-            $elem = $('*[data-show-id="'+show_id+'"]');
-        }
+  mod.checkTrimButton = function () {
+    var $over = $sbTable.find(".sb-over.sb-allowed");
 
-        $elem.find(".show-empty, .show-partial-filled").remove();
-        if (json.schedule[1].empty) {
-            $elem
-                .find(".fc-event-inner")
-                .append('<span id="'+instance_id+'" title="'+$.i18n._("Show is empty")+'" class="small-icon show-empty"></span>');
-        } else if (lastElem["fRuntime"][0] == "-") {
-            $elem
-                .find(".fc-event-inner")
-                .append('<span id="'+instance_id+'" title="'+$.i18n._("Show is partially filled")+'" class="small-icon show-partial-filled"></span>');
-        }
-    };
+    if ($over.length !== 0) {
+      AIRTIME.button.enableButton("icon-cut", true);
+    } else {
+      AIRTIME.button.disableButton("icon-cut", true);
+    }
+  };
 
-    mod.getTimestamp = function() {
+  mod.checkDeleteButton = function () {
+    var $selected = $("." + SB_SELECTED_CLASS);
 
-        if (mod.timestamp !== undefined) {
-            return mod.timestamp;
-        }
-        else {
-            return -1;
-        }
-    };
+    var button = $("#show_builder").find(".icon-trash").parent();
+    if ($selected.length !== 0) {
+      button.removeClass(DISABLED_CLASS);
+      button.removeAttr("disabled");
+    } else {
+      button.addClass(DISABLED_CLASS);
+      button.attr("disabled", "disabled");
+    }
+  };
 
-    mod.setShowInstances = function(showInstances) {
-        mod.showInstances = showInstances;
-    };
+  mod.checkJumpToCurrentButton = function () {
+    var $current = $sbTable.find("." + NOW_PLAYING_CLASS);
 
-    mod.getShowInstances = function() {
-        return mod.showInstances;
-    };
+    if ($current.length !== 0) {
+      AIRTIME.button.enableButton("icon-step-forward", true);
+    } else {
+      AIRTIME.button.disableButton("icon-step-forward", true);
+    }
+  };
 
-    mod.refresh = function(schedId) {
-        mod.resetTimestamp();
+  mod.checkCancelButton = function () {
+    var $current = $sbTable.find(".sb-current-show"),
+      //this user type should be refactored into a separate users module later
+      //when there's more time and more JS will need to know user data.
+      userType = localStorage.getItem("user-type"),
+      canCancel = false;
 
-        // once a track plays out we need to check if we can update
-        // the is_scheduled flag in cc_files
-        if (schedId > 0) {
-            $.post(baseUrl+"schedule/update-future-is-scheduled",
-                {"format": "json", "schedId": schedId}, function(data) {
-                    if (data.redrawLibTable !== undefined && data.redrawLibTable) {
-                        $("#library_content").find("#library_display").dataTable().fnStandingRedraw();
-                    }
-                });
-            oSchedTable.fnDraw();
-        }
-    };
+    if ($current.length !== 0 && $current.hasClass("sb-allowed")) {
+      canCancel = true;
+    } else if (
+      $current.length !== 0 &&
+      (userType === "A" || userType === "P")
+    ) {
+      canCancel = true;
+    }
 
-    mod.checkSelectButton = function() {
-        var $selectable = $sbTable.find("tr");
+    if (canCancel === true) {
+      AIRTIME.button.enableButton("icon-ban-circle", true);
+    } else {
+      AIRTIME.button.disableButton("icon-ban-circle", true);
+    }
+  };
 
-        if ($selectable.length !== 0) {
-            AIRTIME.button.enableButton("btn-group #timeline-select", false);
-        } else {
-            AIRTIME.button.disableButton("btn-group #timeline-select", false);
-        }
+  mod.checkToolBarIcons = function () {
+    //library may not be on the page.
+    if (AIRTIME.library !== undefined) {
+      AIRTIME.library.checkAddButton();
+    }
 
-        //need to check if the 'Select' button is disabled
-        var select = $(".btn-group #timeline-select");
-        if (select.is(":disabled")) {
-            select.removeAttr("disabled");
-        }
-    };
+    mod.checkSelectButton();
+    mod.checkTrimButton();
+    mod.checkDeleteButton();
+    mod.checkJumpToCurrentButton();
+    mod.checkCancelButton();
+  };
 
-    mod.checkTrimButton = function() {
-        var $over = $sbTable.find(".sb-over.sb-allowed");
+  mod.selectCursor = function ($el) {
+    $el.addClass(CURSOR_SELECTED_CLASS);
+    mod.checkToolBarIcons();
+  };
 
-        if ($over.length !== 0) {
-            AIRTIME.button.enableButton("icon-cut", true);
-        }
-        else {
-            AIRTIME.button.disableButton("icon-cut", true);
-        }
-    };
+  mod.removeCursor = function ($el) {
+    $el.removeClass(CURSOR_SELECTED_CLASS);
+    mod.checkToolBarIcons();
+  };
 
-    mod.checkDeleteButton = function() {
-        var $selected = $("."+SB_SELECTED_CLASS);
+  /*
+   * sNot is an optional string to filter selected elements by. (ex removing the currently playing item)
+   */
+  mod.getSelectedData = function (sNot) {
+    var $selected = $sbTable.find("tr." + SB_SELECTED_CLASS),
+      aData = [],
+      i,
+      length,
+      $item;
 
-        var button = $("#show_builder").find(".icon-trash").parent();
-        if ($selected.length !== 0) {
-            button.removeClass(DISABLED_CLASS);
-            button.removeAttr('disabled');
-        } else {
-            button.addClass(DISABLED_CLASS);
-            button.attr('disabled', 'disabled');
-        }
-    };
+    if (sNot !== undefined) {
+      $selected = $selected.not("." + sNot);
+    }
 
-    mod.checkJumpToCurrentButton = function() {
-        var $current = $sbTable.find("."+NOW_PLAYING_CLASS);
+    for (i = 0, length = $selected.length; i < length; i++) {
+      $item = $($selected.get(i));
+      aData.push($item.data("aData"));
+    }
 
-        if ($current.length !== 0) {
-            AIRTIME.button.enableButton("icon-step-forward", true);
-        }
-        else {
-            AIRTIME.button.disableButton("icon-step-forward", true);
-        }
-    };
+    return aData.reverse();
+  };
 
-    mod.checkCancelButton = function() {
+  mod.selectAll = function () {
+    var $trs = $sbTable.find("tr.lib-audio").not(".sb-past, .sb-empty");
+    $trs
+      .addClass(SB_SELECTED_CLASS)
+      .find(".sb-checkbox > input")
+      .prop("checked", true);
 
-        var $current = $sbTable.find(".sb-current-show"),
-        //this user type should be refactored into a separate users module later
-        //when there's more time and more JS will need to know user data.
-            userType = localStorage.getItem('user-type'),
-            canCancel = false;
+    mod.checkToolBarIcons();
+  };
 
-        if ($current.length !== 0 && $current.hasClass("sb-allowed")) {
-            canCancel = true;
-        }
-        else if ($current.length !== 0 && (userType === 'A' || userType === 'P')) {
-            canCancel = true;
-        }
+  mod.selectNone = function () {
+    var $trs = $sbTable.find("tr.lib-audio");
+    $trs
+      .removeClass(SB_SELECTED_CLASS)
+      .find(".sb-checkbox > input")
+      .prop("checked", false);
+    $previouslySelected = undefined;
+    selectedRows = undefined;
 
-        if (canCancel === true) {
-            AIRTIME.button.enableButton("icon-ban-circle", true);
-        }
-        else {
-            AIRTIME.button.disableButton("icon-ban-circle", true);
-        }
-    };
+    mod.checkToolBarIcons();
+  };
 
-    mod.checkToolBarIcons = function() {
-        //library may not be on the page.
-        if (AIRTIME.library !== undefined) {
-            AIRTIME.library.checkAddButton();
-        }
+  mod.disableUI = function () {
+    $lib.block({
+      message: "",
+      theme: true,
+      applyPlatformOpacityRules: false,
+    });
 
-        mod.checkSelectButton();
-        mod.checkTrimButton();
-        mod.checkDeleteButton();
-        mod.checkJumpToCurrentButton();
-        mod.checkCancelButton();
-    };
+    $sbContent.block({
+      message: "",
+      theme: true,
+      applyPlatformOpacityRules: false,
+    });
+  };
 
-    mod.selectCursor = function($el) {
+  mod.enableUI = function () {
+    $lib.unblock();
+    $sbContent.unblock();
+  };
 
-        $el.addClass(CURSOR_SELECTED_CLASS);
-        mod.checkToolBarIcons();
-    };
+  mod.fnItemCallback = function (json) {
+    checkError(json);
 
-    mod.removeCursor = function($el) {
+    mod.getSelectedCursors();
+    selectedRows = $("." + SB_SELECTED_CLASS);
+    oSchedTable.fnDraw();
+    mod.enableUI();
 
-        $el.removeClass(CURSOR_SELECTED_CLASS);
-        mod.checkToolBarIcons();
-    };
+    //Unneccessary reload of the library pane after moving tracks in the showbuilder pane.
+    //$("#library_content").find("#library_display").dataTable().fnStandingRedraw();
 
-    /*
-     * sNot is an optional string to filter selected elements by. (ex removing the currently playing item)
+    getUsabilityHint();
+  };
+
+  mod.getSelectedCursors = function () {
+    cursorIds = [];
+
+    /* We need to keep record of which show the cursor belongs to
+     * in the case where more than one show is displayed in the show builder
+     * because header and footer rows have the same id
      */
-    mod.getSelectedData = function(sNot) {
-        var $selected = $sbTable.find("tr."+SB_SELECTED_CLASS),
-            aData = [],
-            i, length,
-            $item;
+    showInstanceIds = [];
 
-        if (sNot !== undefined) {
-            $selected = $selected.not("."+sNot);
-        }
+    /* Keeps track if the row is a footer. We need to do this because
+     * header and footer rows have the save cursorIds and showInstanceId
+     * so both will be selected in the draw callback
+     */
+    headerFooter = [];
 
-        for (i = 0, length = $selected.length; i < length; i++) {
-            $item = $($selected.get(i));
-            aData.push($item.data('aData'));
-        }
+    cursors = $(".cursor-selected-row");
+    for (i = 0; i < cursors.length; i++) {
+      cursorIds.push($(cursors.get(i)).attr("id"));
+      showInstanceIds.push($(cursors.get(i)).attr("si_id"));
+      if ($(cursors.get(i)).hasClass("sb-footer")) {
+        headerFooter.push("f");
+      } else {
+        headerFooter.push("n");
+      }
+    }
+  };
 
-        return aData.reverse();
-    };
+  mod.fnAdd = function (aMediaIds, aSchedIds) {
+    AIRTIME.library.selectNone();
+    mod.disableUI();
 
-    mod.selectAll = function () {
-        var $trs = $sbTable.find("tr.lib-audio").not(".sb-past, .sb-empty");
-        $trs.addClass(SB_SELECTED_CLASS).find(".sb-checkbox > input").prop('checked', true);
+    $.post(
+      baseUrl + "showbuilder/schedule-add",
+      { format: "json", mediaIds: aMediaIds, schedIds: aSchedIds },
+      mod.fnItemCallback
+    );
+  };
 
-        mod.checkToolBarIcons();
-    };
+  mod.fnMove = function (aSelect, aAfter) {
+    mod.disableUI();
 
-    mod.selectNone = function () {
-        var $trs = $sbTable.find("tr.lib-audio");
-        $trs.removeClass(SB_SELECTED_CLASS).find(".sb-checkbox > input").prop('checked', false);
-        $previouslySelected = undefined;
-        selectedRows = undefined;
+    $.post(
+      baseUrl + "showbuilder/schedule-move",
+      { format: "json", selectedItem: aSelect, afterItem: aAfter },
+      mod.fnItemCallback
+    );
+  };
 
-        mod.checkToolBarIcons();
-    };
+  mod.fnRemove = function (aItems) {
+    mod.disableUI();
+    if (confirm($.i18n._("Delete selected item(s)?"))) {
+      mod.selectNone();
+      $.post(
+        baseUrl + "showbuilder/schedule-remove",
+        { items: aItems, format: "json" },
+        mod.fnItemCallback
+      );
+    } else {
+      mod.enableUI();
+    }
+  };
 
-    mod.disableUI = function() {
+  mod.fnRemoveSelectedItems = function () {
+    var aData = mod.getSelectedData(),
+      i,
+      length,
+      temp,
+      aItems = [];
 
-        $lib.block({
-            message: "",
-            theme: true,
-            applyPlatformOpacityRules: false
-        });
+    for (i = 0, length = aData.length; i < length; i++) {
+      temp = aData[i];
+      aItems.push({
+        id: temp.id,
+        instance: temp.instance,
+        timestamp: temp.timestamp,
+      });
+    }
 
-        $sbContent.block({
-            message: "",
-            theme: true,
-            applyPlatformOpacityRules: false
-        });
-    };
+    mod.fnRemove(aItems);
+  };
 
-    mod.enableUI = function() {
-        $lib.unblock();
-        $sbContent.unblock();
-    };
+  mod.fnServerData = function fnBuilderServerData(sSource, aoData, fnCallback) {
+    aoData.push({ name: "timestamp", value: mod.getTimestamp() });
+    aoData.push({ name: "instances", value: mod.getShowInstances() });
+    aoData.push({ name: "format", value: "json" });
 
-    mod.fnItemCallback = function(json) {
-        checkError(json);
+    if (mod.fnServerData.hasOwnProperty("start")) {
+      aoData.push({ name: "start", value: mod.fnServerData.start });
+    }
+    if (mod.fnServerData.hasOwnProperty("end")) {
+      aoData.push({ name: "end", value: mod.fnServerData.end });
+    }
+    if (mod.fnServerData.hasOwnProperty("ops")) {
+      aoData.push({ name: "myShows", value: mod.fnServerData.ops.myShows });
+      aoData.push({
+        name: "showFilter",
+        value: mod.fnServerData.ops.showFilter,
+      });
+      aoData.push({
+        name: "showInstanceFilter",
+        value: mod.fnServerData.ops.showInstanceFilter,
+      });
+    }
 
+    $.ajax({
+      dataType: "json",
+      type: "POST",
+      url: sSource,
+      data: aoData,
+      success: function (json) {
+        mod.updateCalendarStatusIcon(json);
+        mod.setTimestamp(json.timestamp);
+        mod.setShowInstances(json.instances);
         mod.getSelectedCursors();
-        selectedRows = $("." + SB_SELECTED_CLASS);
-        oSchedTable.fnDraw();
-        mod.enableUI();
+        fnCallback(json);
+      },
+    });
+  };
 
-        //Unneccessary reload of the library pane after moving tracks in the showbuilder pane.
-        //$("#library_content").find("#library_display").dataTable().fnStandingRedraw();
+  mod.jumpToCurrentTrack = function () {
+    var $scroll = $sbContent.find(".dataTables_scrolling");
+    var scrolled = $scroll.scrollTop();
+    var scrollingTop = $scroll.offset().top;
+    var current = $sbTable.find("." + NOW_PLAYING_CLASS);
+    var currentTop = current.offset().top;
 
-        getUsabilityHint();
-    };
+    $scroll.scrollTop(currentTop - scrollingTop + scrolled);
+  };
 
-    mod.getSelectedCursors = function() {
-        cursorIds = [];
+  mod.builderDataTable = function () {
+    $sbContent = $("#show_builder");
+    $lib = $("#library_content");
+    $sbTable = $sbContent.find("table");
+    var isInitialized = false;
 
-        /* We need to keep record of which show the cursor belongs to
-         * in the case where more than one show is displayed in the show builder
-         * because header and footer rows have the same id
-         */
-        showInstanceIds = [];
+    var lockedPreviewIcon = document.createElement("span");
+    lockedPreviewIcon.setAttribute("class", "ui-icon ui-icon-locked");
+    var previewIcon = document.createElement("img");
+    previewIcon.setAttribute("src", baseUrl + "css/images/icon_audioclip.png");
+    previewIcon.setAttribute("title", $.i18n._("Track preview"));
 
-        /* Keeps track if the row is a footer. We need to do this because
-         * header and footer rows have the save cursorIds and showInstanceId
-         * so both will be selected in the draw callback
-         */
-        headerFooter = [];
+    oSchedTable = $sbTable.dataTable({
+      aoColumns: [
+        /* checkbox */ {
+          mDataProp: "allowed",
+          sTitle: "",
+          sWidth: "16px",
+          sClass: "sb-checkbox",
+        },
+        /* Type */ {
+          mDataProp: "image",
+          sTitle: "",
+          sClass: "library_image sb-image",
+          sWidth: "16px",
+        },
+        /* starts */ {
+          mDataProp: "starts",
+          sTitle: $.i18n._("Start"),
+          sClass: "sb-starts",
+          sWidth: "60px",
+        },
+        /* ends */ {
+          mDataProp: "ends",
+          sTitle: $.i18n._("End"),
+          sClass: "sb-ends",
+          sWidth: "60px",
+        },
+        /* runtime */ {
+          mDataProp: "runtime",
+          sTitle: $.i18n._("Duration"),
+          sClass: "library_length sb-length",
+          sWidth: "65px",
+        },
+        /* title */ {
+          mDataProp: "title",
+          sTitle: $.i18n._("Title"),
+          sClass: "sb-title",
+        },
+        /* creator */ {
+          mDataProp: "creator",
+          sTitle: $.i18n._("Creator"),
+          sClass: "sb-creator",
+        },
+        /* album */ {
+          mDataProp: "album",
+          sTitle: $.i18n._("Album"),
+          sClass: "sb-album",
+        },
+        /* cue in */ {
+          mDataProp: "cuein",
+          sTitle: $.i18n._("Cue In"),
+          bVisible: false,
+          sClass: "sb-cue-in",
+        },
+        /* cue out */ {
+          mDataProp: "cueout",
+          sTitle: $.i18n._("Cue Out"),
+          bVisible: false,
+          sClass: "sb-cue-out",
+        },
+        /* fade in */ {
+          mDataProp: "fadein",
+          sTitle: $.i18n._("Fade In"),
+          bVisible: false,
+          sClass: "sb-fade-in",
+        },
+        /* fade out */ {
+          mDataProp: "fadeout",
+          sTitle: $.i18n._("Fade Out"),
+          bVisible: false,
+          sClass: "sb-fade-out",
+        },
+        /* Mime */ {
+          mDataProp: "mime",
+          sTitle: $.i18n._("Mime"),
+          bVisible: false,
+          sClass: "sb-mime",
+        },
+      ],
 
-        cursors = $(".cursor-selected-row");
-        for (i = 0; i < cursors.length; i++) {
-            cursorIds.push(($(cursors.get(i)).attr("id")));
-            showInstanceIds.push(($(cursors.get(i)).attr("si_id")));
-            if ($(cursors.get(i)).hasClass("sb-footer")) {
-                headerFooter.push("f");
-            } else {
-                headerFooter.push("n");
-            }
+      bJQueryUI: true,
+      bSort: false,
+      bFilter: false,
+      bProcessing: true,
+      bServerSide: true,
+      bInfo: false,
+      bAutoWidth: false,
+      bDeferRender: true,
+
+      bStateSave: true,
+      fnStateSaveParams: function (oSettings, oData) {
+        //remove oData components we don't want to save.
+        delete oData.oSearch;
+        delete oData.aoSearchCols;
+      },
+      fnStateSave: function fnStateSave(oSettings, oData) {
+        localStorage.setItem("datatables-timeline", JSON.stringify(oData));
+      },
+      fnStateLoad: function fnBuilderStateLoad(oSettings) {
+        var settings = localStorage.getItem("datatables-timeline");
+
+        if (settings !== "") {
+          return JSON.parse(settings);
         }
-    };
+      },
+      fnStateLoadParams: function (oSettings, oData) {
+        var i,
+          length,
+          a = oData.abVisCols;
 
-    mod.fnAdd = function(aMediaIds, aSchedIds) {
-        AIRTIME.library.selectNone();
-        mod.disableUI();
-
-        $.post(baseUrl+"showbuilder/schedule-add",
-            {"format": "json", "mediaIds": aMediaIds, "schedIds": aSchedIds},
-            mod.fnItemCallback
-        );
-    };
-
-    mod.fnMove = function(aSelect, aAfter) {
-        mod.disableUI();
-
-        $.post(baseUrl+"showbuilder/schedule-move",
-            {"format": "json", "selectedItem": aSelect, "afterItem": aAfter},
-            mod.fnItemCallback
-        );
-    };
-
-    mod.fnRemove = function(aItems) {
-        mod.disableUI();
-        if (confirm($.i18n._("Delete selected item(s)?"))) {
-            mod.selectNone();
-            $.post( baseUrl+"showbuilder/schedule-remove",
-                {"items": aItems, "format": "json"},
-                mod.fnItemCallback
-            );
-        } else {
-            mod.enableUI();
-        }
-    };
-
-    mod.fnRemoveSelectedItems = function() {
-        var aData = mod.getSelectedData(),
-            i,
-            length,
-            temp,
-            aItems = [];
-
-        for (i=0, length = aData.length; i < length; i++) {
-            temp = aData[i];
-            aItems.push({"id": temp.id, "instance": temp.instance, "timestamp": temp.timestamp});
+        //putting serialized data back into the correct js type to make
+        //sure everything works properly.
+        for (i = 0, length = a.length; i < length; i++) {
+          if (typeof a[i] === "string") {
+            a[i] = a[i] === "true";
+          }
         }
 
-        mod.fnRemove(aItems);
-    };
-
-    mod.fnServerData = function fnBuilderServerData( sSource, aoData, fnCallback ) {
-
-        aoData.push( { name: "timestamp", value: mod.getTimestamp()} );
-        aoData.push( { name: "instances", value: mod.getShowInstances()} );
-        aoData.push( { name: "format", value: "json"} );
-
-        if (mod.fnServerData.hasOwnProperty("start")) {
-            aoData.push( { name: "start", value: mod.fnServerData.start} );
-        }
-        if (mod.fnServerData.hasOwnProperty("end")) {
-            aoData.push( { name: "end", value: mod.fnServerData.end} );
-        }
-        if (mod.fnServerData.hasOwnProperty("ops")) {
-            aoData.push( { name: "myShows", value: mod.fnServerData.ops.myShows} );
-            aoData.push( { name: "showFilter", value: mod.fnServerData.ops.showFilter} );
-            aoData.push( { name: "showInstanceFilter", value: mod.fnServerData.ops.showInstanceFilter} );
-        }
-
-        $.ajax({
-            "dataType": "json",
-            "type": "POST",
-            "url": sSource,
-            "data": aoData,
-            "success": function(json) {
-                mod.updateCalendarStatusIcon(json);
-                mod.setTimestamp(json.timestamp);
-                mod.setShowInstances(json.instances);
-                mod.getSelectedCursors();
-                fnCallback(json);
-            }
-        });
-    };
-
-    mod.jumpToCurrentTrack = function() {
-        var $scroll = $sbContent.find(".dataTables_scrolling");
-        var scrolled = $scroll.scrollTop();
-        var scrollingTop = $scroll.offset().top;
-        var current = $sbTable.find("."+NOW_PLAYING_CLASS);
-        var currentTop = current.offset().top;
-
-        $scroll.scrollTop(currentTop - scrollingTop + scrolled);
-    };
-
-    mod.builderDataTable = function() {
-        $sbContent = $('#show_builder');
-        $lib = $("#library_content");
-        $sbTable = $sbContent.find('table');
-        var isInitialized = false;
-
-        var lockedPreviewIcon = document.createElement('span');
-        lockedPreviewIcon.setAttribute('class', 'ui-icon ui-icon-locked');
-        var previewIcon = document.createElement('img');
-        previewIcon.setAttribute('src', baseUrl+'css/images/icon_audioclip.png');
-        previewIcon.setAttribute('title', $.i18n._("Track preview"));
-
-        oSchedTable = $sbTable.dataTable( {
-            "aoColumns": [
-                /* checkbox */ {"mDataProp": "allowed", "sTitle": "", "sWidth": "16px", "sClass": "sb-checkbox"},
-                /* Type */ {"mDataProp": "image", "sTitle": "", "sClass": "library_image sb-image", "sWidth": "16px"},
-                /* starts */ {"mDataProp": "starts", "sTitle": $.i18n._("Start"), "sClass": "sb-starts", "sWidth": "60px"},
-                /* ends */ {"mDataProp": "ends", "sTitle": $.i18n._("End"), "sClass": "sb-ends", "sWidth": "60px"},
-                /* runtime */ {"mDataProp": "runtime", "sTitle": $.i18n._("Duration"), "sClass": "library_length sb-length", "sWidth": "65px"},
-                /* title */ {"mDataProp": "title", "sTitle": $.i18n._("Title"), "sClass": "sb-title"},
-                /* creator */ {"mDataProp": "creator", "sTitle": $.i18n._("Creator"), "sClass": "sb-creator"},
-                /* album */ {"mDataProp": "album", "sTitle": $.i18n._("Album"), "sClass": "sb-album"},
-                /* cue in */ {"mDataProp": "cuein", "sTitle": $.i18n._("Cue In"), "bVisible": false, "sClass": "sb-cue-in"},
-                /* cue out */ {"mDataProp": "cueout", "sTitle": $.i18n._("Cue Out"), "bVisible": false, "sClass": "sb-cue-out"},
-                /* fade in */ {"mDataProp": "fadein", "sTitle": $.i18n._("Fade In"), "bVisible": false, "sClass": "sb-fade-in"},
-                /* fade out */ {"mDataProp": "fadeout", "sTitle": $.i18n._("Fade Out"), "bVisible": false, "sClass": "sb-fade-out"},
-                /* Mime */  {"mDataProp" : "mime", "sTitle" : $.i18n._("Mime"), "bVisible": false, "sClass": "sb-mime"}
-            ],
-
-            "bJQueryUI": true,
-            "bSort": false,
-            "bFilter": false,
-            "bProcessing": true,
-            "bServerSide": true,
-            "bInfo": false,
-            "bAutoWidth": false,
-            "bDeferRender": true,
-
-            "bStateSave": true,
-            "fnStateSaveParams": function (oSettings, oData) {
-                //remove oData components we don't want to save.
-                delete oData.oSearch;
-                delete oData.aoSearchCols;
-            },
-            "fnStateSave": function fnStateSave(oSettings, oData) {
-                localStorage.setItem('datatables-timeline', JSON.stringify(oData));
-            },
-            "fnStateLoad": function fnBuilderStateLoad(oSettings) {
-                var settings = localStorage.getItem('datatables-timeline');
-
-                if (settings !== "") {
-                    return JSON.parse(settings);
-                }
-            },
-            "fnStateLoadParams": function (oSettings, oData) {
-                var i,
-                    length,
-                    a = oData.abVisCols;
-
-                //putting serialized data back into the correct js type to make
-                //sure everything works properly.
-                for (i = 0, length = a.length; i < length; i++) {
-                    if (typeof(a[i]) === "string") {
-                        a[i] = (a[i] === "true");
-                    }
-                }
-
-                oData.iCreate = parseInt(oData.iCreate, 10);
-            },
-
-            "fnServerData": mod.fnServerData,
-            "fnRowCallback": function fnRowCallback( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
-                var i, length,
-                    sSeparatorHTML,
-                    fnPrepareSeparatorRow,
-                    $node,
-                    cl="",
-                //background-color to imitate calendar color.
-                    r,g,b,a,
-                    $nRow = $(nRow),
-                    $image,
-                    $div,
-                    headerIcon;
-
-                fnPrepareSeparatorRow = function fnPrepareSeparatorRow(sRowContent, sClass, iNodeIndex) {
-                    //Albert:
-                    //$(nRow.children[iNodeIndex]).replaceWith(emptyNode);
-
-                    $node = $(nRow.children[iNodeIndex]);
-                    $node.html(sRowContent);
-
-                    $node.attr('colspan',100);
-                    for (i = iNodeIndex + 1, length = nRow.children.length; i < length; i = i+1) {
-                        $node = $(nRow.children[i]);
-                        $node.html("");
-                        $node.attr("style", "display : none");
-                    }
-
-                    $nRow.addClass(sClass);
-
-                };
-
-                if (aData.header === true) {
-                    //remove the column classes from all tds.
-                    $nRow.find('td').removeClass();
-
-                    $node = $(nRow.children[0]);
-                    $node.html("");
-                    cl = 'sb-header';
-
-                    if (aData.record === true) {
-                        $div = $("<div/>", {
-                            "class": "small-icon " + headerIcon
-                        });
-                        $node.append($div);
-                    }
-                    else if (aData.rebroadcast === true) {
-                        $div = $("<div/>", {
-                            "class": "small-icon rebroadcast"
-                        });
-                        $node.append($div);
-                    }
-
-                    sSeparatorHTML = '<span class="show-title">'+aData.title+'</span>';
-
-                    if (aData.rebroadcast === true) {
-                        sSeparatorHTML += '<span>'+aData.rebroadcast_title+'</span>';
-                    }
-
-                    sSeparatorHTML += '<span class="push-right">';
-
-                    if (aData.startDate === aData.endDate) {
-                        sSeparatorHTML += '<span class="show-date">'+aData.startDate+'</span><span class="show-time">'+aData.startTime+'</span>';
-                        sSeparatorHTML +='-<span class="show-time">'+aData.endTime+'</span>';
-                    }
-                    else {
-                        sSeparatorHTML += '<span class="show-date">'+aData.startDate+'</span><span class="show-time">'+aData.startTime+'</span>';
-                        sSeparatorHTML +='-<span class="show-date">'+aData.endDate+'</span><span class="show-time">'+aData.endTime+'</span>';
-                    }
-
-                    sSeparatorHTML += '</span>';
-
-                    fnPrepareSeparatorRow(sSeparatorHTML, cl, 1);
-                }
-                else if (aData.footer === true) {
-                    //remove the column classes from all tds.
-                    $nRow.find('td').removeClass();
-
-                    $node = $(nRow.children[0]);
-                    cl = 'sb-footer';
-
-                    //check the show's content status.
-                    if (aData.runtime >= 0) {
-                        $node.html('<span class="ui-icon ui-icon-check"></span>');
-                        cl = cl + ' ui-state-highlight';
-                    }
-                    else {
-                        $node.html('<span class="ui-icon ui-icon-notice"></span>');
-                        cl = cl + ' ui-state-error';
-                    }
-
-                    sSeparatorHTML = '<span>'+aData.fRuntime+'</span>';
-                    fnPrepareSeparatorRow(sSeparatorHTML, cl, 1);
-                }
-                else if (aData.empty === true) {
-                    //remove the column classes from all tds.
-                    $nRow.find('td').removeClass();
-
-                    $node = $(nRow.children[0]);
-                    if ($node) {
-                        $node.empty();
-                    }
-
-                    sSeparatorHTML = '<span>'+$.i18n._("Drag tracks here from the library")+'</span>';
-                    cl = cl + " sb-empty odd";
-
-                    fnPrepareSeparatorRow(sSeparatorHTML, cl, 1);
-                }
-                else if (aData.record === true) {
-                    //remove the column classes from all tds.
-                    $nRow.find('td').removeClass();
-
-                    $node = $(nRow.children[0]);
-                    $node.html('');
-
-                    sSeparatorHTML = '<span>'+$.i18n._("Recording From Line In")+'</span>';
-                    cl = cl + " sb-record odd";
-                    fnPrepareSeparatorRow(sSeparatorHTML, cl, 1);
-                }
-                else {
-
-                    //add the play function if the file exists on disk.
-                    $image = $nRow.find('td.sb-image');
-                    $image.empty();
-                    //check if the file exists.
-                    if (aData.image === true) {
-                        $nRow.addClass("lib-audio");
-                        if (!isAudioSupported(aData.mime)) {
-                            //$image.html('<span class="ui-icon ui-icon-locked"></span>');
-                            $image.append(lockedPreviewIcon);
-                        } else {
-                            $image.append(previewIcon.cloneNode(false));
-                            $image.click(function() {
-                                open_show_preview(aData.instance, aData.pos);
-                                return false;
-                            });
-
-                        }
-                    }
-                    else {
-                        $image.html('<span class="ui-icon ui-icon-alert"></span>');
-                        $image.find(".ui-icon-alert").qtip({
-                            content: {
-                                text: $.i18n._("Airtime 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.")
-                            },
-                            style: {
-                                classes: "ui-tooltip-dark"
-                            },
-                            show: 'mouseover',
-                            hide: 'mouseout'
-                        });
-                    }
-
-                    $node = $(nRow.children[0]);
-                    if (aData.allowed === true && aData.scheduled >= 1 && aData.linked_allowed) {
-                        $node.html('<input type="checkbox" name="'+aData.id+'"></input>');
-                    }
-                    else {
-                        $node.empty();
-                    }
-                }
-
-                //add the show colour to the leftmost td
-                if (aData.footer !== true) {
-
-                    if ($nRow.hasClass('sb-header')) {
-                        a = 1;
-                    }
-                    else if ($nRow.hasClass('odd')) {
-                        a = 0.3;
-                    }
-                    else if ($nRow.hasClass('even')) {
-                        a = 0.4;
-                    }
-
-                    //convert from hex to rgb.
-                    r = parseInt((aData.backgroundColor).substring(0,2), 16);
-                    g = parseInt((aData.backgroundColor).substring(2,4), 16);
-                    b = parseInt((aData.backgroundColor).substring(4,6), 16);
-
-                    $nRow.find('td:first').css('background', 'rgba('+r+', '+g+', '+b+', '+a+')');
-                }
-
-                //save some info for reordering purposes.
-                $nRow.data({"aData": aData});
-
-                if (aData.scheduled === 1) {
-                    $nRow.addClass(NOW_PLAYING_CLASS);
-                }
-                else if (aData.scheduled === 0 || aData.scheduled === undefined) {
-                    $nRow.addClass("sb-past");
-                }
-                else {
-                    $nRow.addClass("sb-future");
-                }
-
-                if (aData.allowed !== true || aData.linked_allowed === false) {
-                    $nRow.addClass("sb-not-allowed");
-                }
-                else {
-                    $nRow.addClass("sb-allowed");
-                    $nRow.attr("id", aData.id);
-                    $nRow.attr("si_id", aData.instance);
-                }
-
-                //status used to colour tracks.
-                if (aData.status === 2) {
-                    $nRow.addClass("sb-boundry");
-                }
-                else if (aData.status === 0) {
-                    $nRow.addClass("sb-over");
-                }
-
-                if (aData.currentShow === true) {
-                    $nRow.addClass("sb-current-show");
-                }
-            },
-            //remove any selected nodes before the draw.
-            "fnPreDrawCallback": function( oSettings ) {
-
-                //make sure any dragging helpers are removed or else they'll be stranded on the screen.
-                $("#draggingContainer").remove();
-            },
-            "fnDrawCallback": function fnBuilderDrawCallback(oSettings, json) {
-
-                if (!isInitialized) {
-                    //when coming to 'Now Playing' page we want the page
-                    //to jump to the current track
-                    if ($(this).find("."+NOW_PLAYING_CLASS).length > 0) {
-                        mod.jumpToCurrentTrack();
-                    }
-                }
-
-                isInitialized = true;
-                var aData,
-                    elements,
-                    i, length, temp;
-
-                clearTimeout(mod.timeout);
-
-                //order of importance of elements for setting the next timeout.
-                elements = [
-                    $sbTable.find("tr."+NOW_PLAYING_CLASS),
-                    $sbTable.find("tbody").find("tr.sb-future.sb-footer, tr.sb-future.sb-header").filter(":first")
-                ];
-
-                //check which element we should set a timeout relative to.
-                for (i = 0, length = elements.length; i < length; i++) {
-                    temp = elements[i];
-
-                    if (temp.length > 0) {
-                        aData = temp.data("aData");
-                        // max time interval
-                        // setTimeout allows only up to (2^31)-1 millisecs timeout value
-                        maxRefreshInterval = Math.pow(2, 31) - 1;
-                        refreshInterval = aData.refresh * 1000;
-                        if(refreshInterval > maxRefreshInterval){
-                            refreshInterval = maxRefreshInterval;
-                        }
-                        mod.timeout = setTimeout(function() {mod.refresh(aData.id)}, refreshInterval); //need refresh in milliseconds
-                        break;
-                    }
-                }
-
-
-                mod.checkToolBarIcons();
-
-                var sid;
-                if (selectedRows !== undefined) {
-                    selectedRows.each(function (i, el) {
-                        sid = $(el).attr("id");
-                        var tr = $("#" + sid);
-                        tr.addClass(SB_SELECTED_CLASS);
-                        tr.find("input[type='checkbox']").prop("checked", true);
-                    });
-                    mod.checkToolBarIcons();
-                }
-            },
-
-            // R = ColReorder, C = ColVis
-            "sDom": 'R<"dt-process-rel"r><"sb-padded"<"H"C>><"dataTables_scrolling sb-padded"t><"F">',
-
-            "oColVis": {
-                "aiExclude": [ 0, 1 ],
-                "buttonText": $.i18n._("Columns")
-            },
-
-            "oColReorder": {
-                "iFixedColumns": 2
-            },
-
-            "sAjaxDataProp": "schedule",
-            "oLanguage": getDatatablesStrings({
-                "sZeroRecords":    $.i18n._("There are no shows scheduled during the specified time period."),
-                "sEmptyTable":     $.i18n._("There are no shows scheduled during the specified time period."),
-            }),
-            "sAjaxSource": baseUrl+"showbuilder/builder-feed",
-
-            "bScrollCollapseY": false
-        });
-
-        $sbTable.find("tbody").on("mousedown", "tr:not(.sb-not-allowed, .sb-header, .sb-footer, .sb-past, .sb-empty, :has(td.dataTables_empty)) > td.sb-checkbox", function(ev) {
-            var $tr = $(this).parent(),
-            // Get the ID of the selected row
-                $rowId = $tr.attr("id");
-
-            if (!$tr.hasClass(SB_SELECTED_CLASS)) {
-                if (ev.shiftKey && $previouslySelected !== undefined) {
-                    if ($previouslySelected.attr("id") == $rowId) {
-                        return;
-                    }
-
-                    // If the selected row comes before the previously selected row,
-                    // we want to select previous rows, otherwise we select next
-                    if ($previouslySelected.prevAll("#" + $rowId).length !== 0) {
-                        $previouslySelected.prevUntil($tr).each(function (i, el) {
-                            $(el).addClass(SB_SELECTED_CLASS);
-                            $(el).find(".sb-checkbox > input").prop('checked', true);
-                        });
-                    } else {
-                        $previouslySelected.nextUntil($tr).each(function (i, el) {
-                            $(el).addClass(SB_SELECTED_CLASS);
-                            $(el).find(".sb-checkbox > input").prop('checked', true);
-                        });
-                    }
-                }
-
-                $tr.addClass(SB_SELECTED_CLASS);
-                $tr.find(".sb-checkbox > input").prop('checked', true);
-            } else {
-                flagForDeselection = true;
-            }
-
-            selectedRows = $("." + SB_SELECTED_CLASS);
-            // Remember this row so we can properly multiselect
-            $previouslySelected = $tr;
-        });
-
-        $sbTable.find("tbody").on("mousedown", "tr:not(.sb-not-allowed, .sb-header, .sb-footer, .sb-past, .sb-empty, :has(td.dataTables_empty)) > td:not(.sb-checkbox)", function(ev) {
-            var $tr = $(this).parent(),
-            // Get the ID of the selected row
-                $rowId = $tr.attr("id");
-
-            if (ev.which === 3 /* Right click */) {
-                mod.selectNone();
-                $tr.addClass(SB_SELECTED_CLASS);
-                $tr.find(".sb-checkbox > input").prop('checked', true);
-                mod.checkToolBarIcons();
-                return;
-            }
-
-            if (!$tr.hasClass(SB_SELECTED_CLASS)) {
-                if (ev.shiftKey && $previouslySelected !== undefined) {
-                    if ($previouslySelected.attr("id") == $rowId) {
-                        return;
-                    }
-
-                    // If the selected row comes before the previously selected row,
-                    // we want to select previous rows, otherwise we select next
-                    if ($previouslySelected.prevAll("#" + $rowId).length !== 0) {
-                        $previouslySelected.prevUntil($tr).each(function (i, el) {
-                            $(el).addClass(SB_SELECTED_CLASS);
-                            $(el).find(".sb-checkbox > input").prop('checked', true);
-                        });
-                    } else {
-                        $previouslySelected.nextUntil($tr).each(function (i, el) {
-                            $(el).addClass(SB_SELECTED_CLASS);
-                            $(el).find(".sb-checkbox > input").prop('checked', true);
-                        });
-                    }
-                } else if (!ev.ctrlKey) {
-                    mod.selectNone();
-                }
-
-                $tr.addClass(SB_SELECTED_CLASS);
-                $tr.find(".sb-checkbox > input").prop('checked', true);
-                mod.checkToolBarIcons();
-            } else if (ev.ctrlKey) {
-                flagForDeselection = true;
-            }
-
-            selectedRows = $("." + SB_SELECTED_CLASS);
-            // Remember this row so we can properly multiselect
-            $previouslySelected = $tr;
-        });
-
-        $sbTable.find("tbody").on("click", "tr:not(.sb-not-allowed, .sb-header, .sb-footer, .sb-past, .sb-empty, :has(td.dataTables_empty)) > td.sb-checkbox", function() {
-            var tr = $(this).parent();
-            if (flagForDeselection) {
-                flagForDeselection = false;
-                $previouslySelected = undefined;
-                tr.removeClass(SB_SELECTED_CLASS);
-                tr.find(".sb-checkbox > input").prop('checked', false);
-            } else {
-                tr.addClass(SB_SELECTED_CLASS);
-                tr.find(".sb-checkbox > input").prop('checked', true);
-            }
-
-            mod.checkToolBarIcons();
-            selectedRows = $("." + SB_SELECTED_CLASS);
-        });
-
-        $sbTable.find("tbody").on("click", "tr:not(.sb-not-allowed, .sb-header, .sb-footer, .sb-past, .sb-empty, :has(td.dataTables_empty)) > td:not(.sb-checkbox)", function(e) {
-            var tr = $(this).parent();
-            if (flagForDeselection) {
-                flagForDeselection = false;
-                $previouslySelected = undefined;
-                tr.removeClass(SB_SELECTED_CLASS);
-                tr.find(".sb-checkbox > input").prop('checked', false);
-            } else if (!(e.shiftKey || e.ctrlKey)) {
-                mod.selectNone();
-                tr.addClass(SB_SELECTED_CLASS);
-                tr.find(".sb-checkbox > input").prop('checked', true);
-                $previouslySelected = tr;
-            }
-
-            mod.checkToolBarIcons();
-            selectedRows = $("." + SB_SELECTED_CLASS);
-        });
-
-        //begin context menu initialization.
-        $.contextMenu({
-            selector: '#show_builder tr.lib-audio:not(.sb-not-allowed, .sb-past)',
-            trigger: "right",
-
-            build: function($el, e) {
-                var items,
-                    $tr = $el,
-                    data = $tr.data("aData"),
-                    cursorClass = "cursor-selected-row",
-                    callback;
-
-                function processMenuItems(oItems) {
-
-                    //define a preview callback.
-                    if (oItems.preview !== undefined) {
-
-                        callback = function() {
-                            open_show_preview(data.instance, data.pos);
-                        };
-
-                        oItems.preview.callback = callback;
-                    }
-
-                    //define a select cursor callback.
-                    if (oItems.selCurs !== undefined) {
-
-                        callback = function() {
-                            var $tr = $(this).parents('tr').next();
-
-                            mod.selectCursor($tr);
-                        };
-
-                        oItems.selCurs.callback = callback;
-                    }
-
-                    //define a remove cursor callback.
-                    if (oItems.delCurs !== undefined) {
-
-                        callback = function() {
-                            var $tr = $(this).parents('tr').next();
-
-                            mod.removeCursor($tr);
-                        };
-
-                        oItems.delCurs.callback = callback;
-                    }
-
-                    //define a delete callback.
-                    if (oItems.del !== undefined) {
-
-                        callback = function() {
-                            AIRTIME.showbuilder.fnRemove([{
-                                id: data.id,
-                                timestamp: data.timestamp,
-                                instance: data.instance
-                            }]);
-                        };
-
-                        oItems.del.callback = callback;
-                    }
-
-                    //only show the cursor selecting options if the library is visible on the page.
-                    if ($tr.next().find('.marker').length === 0) {
-                        delete oItems.selCurs;
-                        delete oItems.delCurs;
-                    }
-                    //check to include either select or remove cursor.
-                    else {
-                        if ($tr.next().hasClass(cursorClass)) {
-                            delete oItems.selCurs;
-                        }
-                        else {
-                            delete oItems.delCurs;
-                        }
-                    }
-
-                    items = oItems;
-                }
-
-                request = $.ajax({
-                    url: baseUrl+"showbuilder/context-menu",
-                    type: "GET",
-                    data: {id : data.id, format: "json"},
-                    dataType: "json",
-                    async: false,
-                    success: function(json){
-                        processMenuItems(json.items);
-                    }
-                });
-
-                return {
-                    items: items
-                };
-
-            }
-        });
-
-        var sortableConf = (function(){
-            var origTrs,
-                aItemData = [],
-                oPrevData,
-                fnAdd,
-                fnMove,
-                fnReceive,
-                fnUpdate,
-                i,
-                html,
-                helperData,
-                draggingContainer;
-
-            fnAdd = function() {
-                var aMediaIds = [],
-                    aSchedIds = [];
-
-                for(i = 0; i < aItemData.length; i++) {
-                    aMediaIds.push({"id": aItemData[i].id, "type": aItemData[i].ftype});
-                }
-                aSchedIds.push({"id": oPrevData.id, "instance": oPrevData.instance, "timestamp": oPrevData.timestamp});
-
-                mod.fnAdd(aMediaIds, aSchedIds);
-            };
-
-            fnMove = function() {
-                var aSelect = [],
-                    aAfter = [];
-
-                for(i = 0; i < helperData.length; i++) {
-                    aSelect.push({"id": helperData[i].id, "instance": helperData[i].instance, "timestamp": helperData[i].timestamp});
-                }
-
-                aAfter.push({"id": oPrevData.id, "instance": oPrevData.instance, "timestamp": oPrevData.timestamp});
-
-                mod.fnMove(aSelect, aAfter);
-            };
-
-            fnReceive = function(event, ui) {
-                var aItems = [];
-
-                if (AIRTIME.library.getCurrentTable() == AIRTIME.library.libraryDataTable) {
-                    AIRTIME.library.addToChosen(ui.item);
-                    aItems = AIRTIME.library.getSelectedData();
-                    origTrs = aItems;
-                    html = ui.helper.html();
-                    AIRTIME.library.removeFromChosen(ui.item);
-                } else if (AIRTIME.library.getCurrentTable() == AIRTIME.library.podcastEpisodeDataTable) {
-                    origTrs = [$(ui.item).data("aData")];
-                    html = ui.helper.html();
-                }
-            };
-
-            fnUpdate = function(event, ui) {
-                var prev = ui.item.prev();
-
-                //can't add items outside of shows.
-                if (prev.find("td:first").hasClass("dataTables_empty")
-                    || prev.length === 0) {
-                    alert($.i18n._("Cannot schedule outside a show."));
-                    ui.item.remove();
-                    return;
-                }
-
-                //if item is added after a footer, add the item after the last item in the show.
-                if (prev.hasClass("sb-footer")) {
-                    prev = prev.prev();
-                }
-
-                aItemData = [];
-                oPrevData = prev.data("aData");
-
-                //item was dragged in
-                if (origTrs !== undefined) {
-
-                    $sbTable.find("tr.ui-draggable")
-                        .empty()
-                        .after(html);
-
-                    aItemData = origTrs;
-                    origTrs = undefined;
-                    fnAdd();
-                }
-                //item was reordered.
-                else {
-
-                    //ui.item
-                    //    .empty()
-                    //    .after(draggingContainer.html());
-
-                    aItemData.push(ui.item.data("aData"));
-                    fnMove();
-                }
-            };
-
-            return {
-                placeholder: "sb-placeholder ui-state-highlight",
-                //forcePlaceholderSize: true,
-                distance: 25,
-                helper:
-                    function(event, item) {
-                        var selected = mod.getSelectedData(NOW_PLAYING_CLASS),
-                            thead = $("#show_builder_table thead"),
-                            colspan = thead.find("th").length,
-                            trfirst = thead.find("tr:first"),
-                            width = trfirst.width(),
-                            height = trfirst.height(),
-                            message;
-
-                        //if nothing is checked select the dragged item.
-                        if (selected.length === 0) {
-                            selected = [item.data("aData")];
-                        }
-
-                        if (selected.length === 1) {
-                            message = sprintf($.i18n._("Moving %s"), selected[0].title);
-                            //draggingContainer = item; //Default DataTables drag and drop
-                            draggingContainer = $('<tr/>')
-                                .addClass('sb-helper')
-                                .append('<td/>')
-                                .find("td")
-                                .attr("colspan", colspan)
-                                .width(width)
-                                .height(height)
-                                .addClass("ui-state-highlight")
-                                .append(message)
-                                .end();
-                        }
-                        else {
-                            message = sprintf($.i18n._("Moving %s Items"), selected.length);
-                            draggingContainer = $('<tr/>')
-                                .addClass('sb-helper')
-                                .append('<td/>')
-                                .find("td")
-                                .attr("colspan", colspan)
-                                .width(width)
-                                .height(height)
-                                .addClass("ui-state-highlight")
-                                .append(message)
-                                .end();
-                        }
-
-                        helperData = selected;
-
-                        return draggingContainer;
-                    },
-                items: 'tr:not(:first, :last, .sb-header, .sb-not-allowed, .sb-past, .sb-now-playing, .sb-empty)',
-                cancel: '.sb-footer',
-                receive: fnReceive,
-                update: fnUpdate,
-                axis: "y",
-                containment: "document",
-                start: function(event, ui) {
-                    var elements = $sbTable.find('tr.'+SB_SELECTED_CLASS).not("."+NOW_PLAYING_CLASS);
-                    elements.hide();
-                },
-                stop: function() {
-                    var elements = $sbTable.find('tr.'+SB_SELECTED_CLASS).not("."+NOW_PLAYING_CLASS);
-                    elements.show();
-                }
-            };
-        }());
-
-        $sbTable.sortable(sortableConf);
-
-        //start setup of the builder toolbar.
-        $toolbar = $(".sb-content .fg-toolbar:first");
-        var footer = $(".sb-content .fg-toolbar:last"),
-            timerange = $(".sb-timerange");
-        $toolbar.append(timerange);
-
-        $menu = $("<div class='btn-toolbar'/>");
-        $menu.append("<div class='btn-group'>" +
-            "<button class='btn btn-small dropdown-toggle'  id='timeline-select' data-toggle='dropdown'>" +
-            $.i18n._("Select")+" <span class='caret'></span>" +
-            "</button>" +
-            "<ul class='dropdown-menu'>" +
-            "<li id='timeline-sa'><a href='#'>"+$.i18n._("Select all")+"</a></li>" +
-            "<li id='timeline-sn'><a href='#'>"+$.i18n._("Select none")+"</a></li>" +
-            "</ul>" +
-            "</div>")
-            .append("<div class='btn-group'>" +
-            "<button title='"+$.i18n._("Trim overbooked shows")+"' class='ui-state-disabled btn btn-small btn-icon-text' disabled='disabled'>" +
-            "<i class='icon-white icon-cut'></i>" +
-            "<span>" + $.i18n._('Trim overbooked shows') + "</span>" +
-            "</button></div>")
-            .append("<div class='btn-group'>" +
-            "<button title='"+$.i18n._("Remove selected scheduled items")+"' class='ui-state-disabled btn btn-small btn-icon-text btn-danger' disabled='disabled'>" +
-            "<i class='icon-white icon-trash'></i>" +
-            "<span>" + $.i18n._('Remove') + "</span>" +
-            "</button></div>");
-
-        //if 'Add/Remove content' was chosen from the context menu
-        //in the Calendar do not append these buttons
-        if ($(".ui-dialog-content").length === 0) {
-            $menu.append("<div class='btn-group'>" +
-                "<button  title='"+$.i18n._("Jump to the current playing track")+"' class='ui-state-disabled btn btn-small btn-icon-text' disabled='disabled'>" +
-                "<i class='icon-white icon-step-forward'></i>" +
-                "<span>" + $.i18n._('Jump to Current') + "</span>" +
-                "</button></div>")
-                .append("<div class='btn-group'>" +
-                "<button title='"+$.i18n._("Cancel current show")+"' class='ui-state-disabled btn btn-small btn-icon-text btn-danger' disabled='disabled'>" +
-                "<i class='icon-white icon-ban-circle'></i>" +
-                "<span>" + $.i18n._('Cancel current show') + "</span>" +
-                "</button></div>");
-        }
-
-        if (localStorage.getItem('user-type') != 'G') {
-            $toolbar.append($menu);
-        }
-
-        $menu = undefined;
-
-        $('#timeline-sa').click(function(){mod.selectAll();});
-        $('#timeline-sn').click(function(){mod.selectNone();});
-
-        //cancel current show
-        $toolbar.find('.icon-ban-circle').parent()
-            .click(function() {
-                var $tr,
-                    data,
-                    msg = $.i18n._('Cancel Current Show?');
-
-                if (AIRTIME.button.isDisabled('icon-ban-circle', true) === true) {
-                    return;
-                }
-
-                $tr = $sbTable.find('tr.sb-future:first');
-
-                if ($tr.hasClass('sb-current-show')) {
-                    data = $tr.data("aData");
-
-                    if (data.record === true) {
-                        msg = $.i18n._('Stop recording current show?');
-                    }
-
-                    if (confirm(msg)) {
-                        var url = baseUrl+"Schedule/cancel-current-show";
-                        $.ajax({
-                            url: url,
-                            data: {format: "json", id: data.instance},
-                            success: function(data){
-                                $("#library_content").find("#library_display").dataTable().fnStandingRedraw();
-                                var oTable = $sbTable.dataTable();
-                                oTable.fnDraw();
-                            }
-                        });
-                    }
-                }
+        oData.iCreate = parseInt(oData.iCreate, 10);
+      },
+
+      fnServerData: mod.fnServerData,
+      fnRowCallback: function fnRowCallback(
+        nRow,
+        aData,
+        iDisplayIndex,
+        iDisplayIndexFull
+      ) {
+        var i,
+          length,
+          sSeparatorHTML,
+          fnPrepareSeparatorRow,
+          $node,
+          cl = "",
+          //background-color to imitate calendar color.
+          r,
+          g,
+          b,
+          a,
+          $nRow = $(nRow),
+          $image,
+          $div,
+          headerIcon;
+
+        fnPrepareSeparatorRow = function fnPrepareSeparatorRow(
+          sRowContent,
+          sClass,
+          iNodeIndex
+        ) {
+          //Albert:
+          //$(nRow.children[iNodeIndex]).replaceWith(emptyNode);
+
+          $node = $(nRow.children[iNodeIndex]);
+          $node.html(sRowContent);
+
+          $node.attr("colspan", 100);
+          for (
+            i = iNodeIndex + 1, length = nRow.children.length;
+            i < length;
+            i = i + 1
+          ) {
+            $node = $(nRow.children[i]);
+            $node.html("");
+            $node.attr("style", "display : none");
+          }
+
+          $nRow.addClass(sClass);
+        };
+
+        if (aData.header === true) {
+          //remove the column classes from all tds.
+          $nRow.find("td").removeClass();
+
+          $node = $(nRow.children[0]);
+          $node.html("");
+          cl = "sb-header";
+
+          if (aData.record === true) {
+            $div = $("<div/>", {
+              class: "small-icon " + headerIcon,
             });
+            $node.append($div);
+          } else if (aData.rebroadcast === true) {
+            $div = $("<div/>", {
+              class: "small-icon rebroadcast",
+            });
+            $node.append($div);
+          }
 
-        //jump to current
-        $toolbar.find('.icon-step-forward').parent()
-            .click(function() {
+          sSeparatorHTML =
+            '<span class="show-title">' + aData.title + "</span>";
 
-                if (AIRTIME.button.isDisabled('icon-step-forward', true) === true) {
-                    return;
-                }
-                /*
+          if (aData.rebroadcast === true) {
+            sSeparatorHTML += "<span>" + aData.rebroadcast_title + "</span>";
+          }
+
+          sSeparatorHTML += '<span class="push-right">';
+
+          if (aData.startDate === aData.endDate) {
+            sSeparatorHTML +=
+              '<span class="show-date">' +
+              aData.startDate +
+              '</span><span class="show-time">' +
+              aData.startTime +
+              "</span>";
+            sSeparatorHTML +=
+              '-<span class="show-time">' + aData.endTime + "</span>";
+          } else {
+            sSeparatorHTML +=
+              '<span class="show-date">' +
+              aData.startDate +
+              '</span><span class="show-time">' +
+              aData.startTime +
+              "</span>";
+            sSeparatorHTML +=
+              '-<span class="show-date">' +
+              aData.endDate +
+              '</span><span class="show-time">' +
+              aData.endTime +
+              "</span>";
+          }
+
+          sSeparatorHTML += "</span>";
+
+          fnPrepareSeparatorRow(sSeparatorHTML, cl, 1);
+        } else if (aData.footer === true) {
+          //remove the column classes from all tds.
+          $nRow.find("td").removeClass();
+
+          $node = $(nRow.children[0]);
+          cl = "sb-footer";
+
+          //check the show's content status.
+          if (aData.runtime >= 0) {
+            $node.html('<span class="ui-icon ui-icon-check"></span>');
+            cl = cl + " ui-state-highlight";
+          } else {
+            $node.html('<span class="ui-icon ui-icon-notice"></span>');
+            cl = cl + " ui-state-error";
+          }
+
+          sSeparatorHTML = "<span>" + aData.fRuntime + "</span>";
+          fnPrepareSeparatorRow(sSeparatorHTML, cl, 1);
+        } else if (aData.empty === true) {
+          //remove the column classes from all tds.
+          $nRow.find("td").removeClass();
+
+          $node = $(nRow.children[0]);
+          if ($node) {
+            $node.empty();
+          }
+
+          sSeparatorHTML =
+            "<span>" +
+            $.i18n._("Drag tracks here from the library") +
+            "</span>";
+          cl = cl + " sb-empty odd";
+
+          fnPrepareSeparatorRow(sSeparatorHTML, cl, 1);
+        } else if (aData.record === true) {
+          //remove the column classes from all tds.
+          $nRow.find("td").removeClass();
+
+          $node = $(nRow.children[0]);
+          $node.html("");
+
+          sSeparatorHTML =
+            "<span>" + $.i18n._("Recording From Line In") + "</span>";
+          cl = cl + " sb-record odd";
+          fnPrepareSeparatorRow(sSeparatorHTML, cl, 1);
+        } else {
+          //add the play function if the file exists on disk.
+          $image = $nRow.find("td.sb-image");
+          $image.empty();
+          //check if the file exists.
+          if (aData.image === true) {
+            $nRow.addClass("lib-audio");
+            if (!isAudioSupported(aData.mime)) {
+              //$image.html('<span class="ui-icon ui-icon-locked"></span>');
+              $image.append(lockedPreviewIcon);
+            } else {
+              $image.append(previewIcon.cloneNode(false));
+              $image.click(function () {
+                open_show_preview(aData.instance, aData.pos);
+                return false;
+              });
+            }
+          } else {
+            $image.html('<span class="ui-icon ui-icon-alert"></span>');
+            $image.find(".ui-icon-alert").qtip({
+              content: {
+                text: $.i18n._(
+                  'Airtime 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.'
+                ),
+              },
+              style: {
+                classes: "ui-tooltip-dark",
+              },
+              show: "mouseover",
+              hide: "mouseout",
+            });
+          }
+
+          $node = $(nRow.children[0]);
+          if (
+            aData.allowed === true &&
+            aData.scheduled >= 1 &&
+            aData.linked_allowed
+          ) {
+            $node.html(
+              '<input type="checkbox" name="' + aData.id + '"></input>'
+            );
+          } else {
+            $node.empty();
+          }
+        }
+
+        //add the show colour to the leftmost td
+        if (aData.footer !== true) {
+          if ($nRow.hasClass("sb-header")) {
+            a = 1;
+          } else if ($nRow.hasClass("odd")) {
+            a = 0.3;
+          } else if ($nRow.hasClass("even")) {
+            a = 0.4;
+          }
+
+          //convert from hex to rgb.
+          r = parseInt(aData.backgroundColor.substring(0, 2), 16);
+          g = parseInt(aData.backgroundColor.substring(2, 4), 16);
+          b = parseInt(aData.backgroundColor.substring(4, 6), 16);
+
+          $nRow
+            .find("td:first")
+            .css(
+              "background",
+              "rgba(" + r + ", " + g + ", " + b + ", " + a + ")"
+            );
+        }
+
+        //save some info for reordering purposes.
+        $nRow.data({ aData: aData });
+
+        if (aData.scheduled === 1) {
+          $nRow.addClass(NOW_PLAYING_CLASS);
+        } else if (aData.scheduled === 0 || aData.scheduled === undefined) {
+          $nRow.addClass("sb-past");
+        } else {
+          $nRow.addClass("sb-future");
+        }
+
+        if (aData.allowed !== true || aData.linked_allowed === false) {
+          $nRow.addClass("sb-not-allowed");
+        } else {
+          $nRow.addClass("sb-allowed");
+          $nRow.attr("id", aData.id);
+          $nRow.attr("si_id", aData.instance);
+        }
+
+        //status used to colour tracks.
+        if (aData.status === 2) {
+          $nRow.addClass("sb-boundry");
+        } else if (aData.status === 0) {
+          $nRow.addClass("sb-over");
+        }
+
+        if (aData.currentShow === true) {
+          $nRow.addClass("sb-current-show");
+        }
+      },
+      //remove any selected nodes before the draw.
+      fnPreDrawCallback: function (oSettings) {
+        //make sure any dragging helpers are removed or else they'll be stranded on the screen.
+        $("#draggingContainer").remove();
+      },
+      fnDrawCallback: function fnBuilderDrawCallback(oSettings, json) {
+        if (!isInitialized) {
+          //when coming to 'Now Playing' page we want the page
+          //to jump to the current track
+          if ($(this).find("." + NOW_PLAYING_CLASS).length > 0) {
+            mod.jumpToCurrentTrack();
+          }
+        }
+
+        isInitialized = true;
+        var aData, elements, i, length, temp;
+
+        clearTimeout(mod.timeout);
+
+        //order of importance of elements for setting the next timeout.
+        elements = [
+          $sbTable.find("tr." + NOW_PLAYING_CLASS),
+          $sbTable
+            .find("tbody")
+            .find("tr.sb-future.sb-footer, tr.sb-future.sb-header")
+            .filter(":first"),
+        ];
+
+        //check which element we should set a timeout relative to.
+        for (i = 0, length = elements.length; i < length; i++) {
+          temp = elements[i];
+
+          if (temp.length > 0) {
+            aData = temp.data("aData");
+            // max time interval
+            // setTimeout allows only up to (2^31)-1 millisecs timeout value
+            maxRefreshInterval = Math.pow(2, 31) - 1;
+            refreshInterval = aData.refresh * 1000;
+            if (refreshInterval > maxRefreshInterval) {
+              refreshInterval = maxRefreshInterval;
+            }
+            mod.timeout = setTimeout(function () {
+              mod.refresh(aData.id);
+            }, refreshInterval); //need refresh in milliseconds
+            break;
+          }
+        }
+
+        mod.checkToolBarIcons();
+
+        var sid;
+        if (selectedRows !== undefined) {
+          selectedRows.each(function (i, el) {
+            sid = $(el).attr("id");
+            var tr = $("#" + sid);
+            tr.addClass(SB_SELECTED_CLASS);
+            tr.find("input[type='checkbox']").prop("checked", true);
+          });
+          mod.checkToolBarIcons();
+        }
+      },
+
+      // R = ColReorder, C = ColVis
+      sDom: 'R<"dt-process-rel"r><"sb-padded"<"H"C>><"dataTables_scrolling sb-padded"t><"F">',
+
+      oColVis: {
+        aiExclude: [0, 1],
+        buttonText: $.i18n._("Columns"),
+      },
+
+      oColReorder: {
+        iFixedColumns: 2,
+      },
+
+      sAjaxDataProp: "schedule",
+      oLanguage: getDatatablesStrings({
+        sZeroRecords: $.i18n._(
+          "There are no shows scheduled during the specified time period."
+        ),
+        sEmptyTable: $.i18n._(
+          "There are no shows scheduled during the specified time period."
+        ),
+      }),
+      sAjaxSource: baseUrl + "showbuilder/builder-feed",
+
+      bScrollCollapseY: false,
+    });
+
+    $sbTable
+      .find("tbody")
+      .on(
+        "mousedown",
+        "tr:not(.sb-not-allowed, .sb-header, .sb-footer, .sb-past, .sb-empty, :has(td.dataTables_empty)) > td.sb-checkbox",
+        function (ev) {
+          var $tr = $(this).parent(),
+            // Get the ID of the selected row
+            $rowId = $tr.attr("id");
+
+          if (!$tr.hasClass(SB_SELECTED_CLASS)) {
+            if (ev.shiftKey && $previouslySelected !== undefined) {
+              if ($previouslySelected.attr("id") == $rowId) {
+                return;
+              }
+
+              // If the selected row comes before the previously selected row,
+              // we want to select previous rows, otherwise we select next
+              if ($previouslySelected.prevAll("#" + $rowId).length !== 0) {
+                $previouslySelected.prevUntil($tr).each(function (i, el) {
+                  $(el).addClass(SB_SELECTED_CLASS);
+                  $(el).find(".sb-checkbox > input").prop("checked", true);
+                });
+              } else {
+                $previouslySelected.nextUntil($tr).each(function (i, el) {
+                  $(el).addClass(SB_SELECTED_CLASS);
+                  $(el).find(".sb-checkbox > input").prop("checked", true);
+                });
+              }
+            }
+
+            $tr.addClass(SB_SELECTED_CLASS);
+            $tr.find(".sb-checkbox > input").prop("checked", true);
+          } else {
+            flagForDeselection = true;
+          }
+
+          selectedRows = $("." + SB_SELECTED_CLASS);
+          // Remember this row so we can properly multiselect
+          $previouslySelected = $tr;
+        }
+      );
+
+    $sbTable
+      .find("tbody")
+      .on(
+        "mousedown",
+        "tr:not(.sb-not-allowed, .sb-header, .sb-footer, .sb-past, .sb-empty, :has(td.dataTables_empty)) > td:not(.sb-checkbox)",
+        function (ev) {
+          var $tr = $(this).parent(),
+            // Get the ID of the selected row
+            $rowId = $tr.attr("id");
+
+          if (ev.which === 3 /* Right click */) {
+            mod.selectNone();
+            $tr.addClass(SB_SELECTED_CLASS);
+            $tr.find(".sb-checkbox > input").prop("checked", true);
+            mod.checkToolBarIcons();
+            return;
+          }
+
+          if (!$tr.hasClass(SB_SELECTED_CLASS)) {
+            if (ev.shiftKey && $previouslySelected !== undefined) {
+              if ($previouslySelected.attr("id") == $rowId) {
+                return;
+              }
+
+              // If the selected row comes before the previously selected row,
+              // we want to select previous rows, otherwise we select next
+              if ($previouslySelected.prevAll("#" + $rowId).length !== 0) {
+                $previouslySelected.prevUntil($tr).each(function (i, el) {
+                  $(el).addClass(SB_SELECTED_CLASS);
+                  $(el).find(".sb-checkbox > input").prop("checked", true);
+                });
+              } else {
+                $previouslySelected.nextUntil($tr).each(function (i, el) {
+                  $(el).addClass(SB_SELECTED_CLASS);
+                  $(el).find(".sb-checkbox > input").prop("checked", true);
+                });
+              }
+            } else if (!ev.ctrlKey) {
+              mod.selectNone();
+            }
+
+            $tr.addClass(SB_SELECTED_CLASS);
+            $tr.find(".sb-checkbox > input").prop("checked", true);
+            mod.checkToolBarIcons();
+          } else if (ev.ctrlKey) {
+            flagForDeselection = true;
+          }
+
+          selectedRows = $("." + SB_SELECTED_CLASS);
+          // Remember this row so we can properly multiselect
+          $previouslySelected = $tr;
+        }
+      );
+
+    $sbTable
+      .find("tbody")
+      .on(
+        "click",
+        "tr:not(.sb-not-allowed, .sb-header, .sb-footer, .sb-past, .sb-empty, :has(td.dataTables_empty)) > td.sb-checkbox",
+        function () {
+          var tr = $(this).parent();
+          if (flagForDeselection) {
+            flagForDeselection = false;
+            $previouslySelected = undefined;
+            tr.removeClass(SB_SELECTED_CLASS);
+            tr.find(".sb-checkbox > input").prop("checked", false);
+          } else {
+            tr.addClass(SB_SELECTED_CLASS);
+            tr.find(".sb-checkbox > input").prop("checked", true);
+          }
+
+          mod.checkToolBarIcons();
+          selectedRows = $("." + SB_SELECTED_CLASS);
+        }
+      );
+
+    $sbTable
+      .find("tbody")
+      .on(
+        "click",
+        "tr:not(.sb-not-allowed, .sb-header, .sb-footer, .sb-past, .sb-empty, :has(td.dataTables_empty)) > td:not(.sb-checkbox)",
+        function (e) {
+          var tr = $(this).parent();
+          if (flagForDeselection) {
+            flagForDeselection = false;
+            $previouslySelected = undefined;
+            tr.removeClass(SB_SELECTED_CLASS);
+            tr.find(".sb-checkbox > input").prop("checked", false);
+          } else if (!(e.shiftKey || e.ctrlKey)) {
+            mod.selectNone();
+            tr.addClass(SB_SELECTED_CLASS);
+            tr.find(".sb-checkbox > input").prop("checked", true);
+            $previouslySelected = tr;
+          }
+
+          mod.checkToolBarIcons();
+          selectedRows = $("." + SB_SELECTED_CLASS);
+        }
+      );
+
+    //begin context menu initialization.
+    $.contextMenu({
+      selector: "#show_builder tr.lib-audio:not(.sb-not-allowed, .sb-past)",
+      trigger: "right",
+
+      build: function ($el, e) {
+        var items,
+          $tr = $el,
+          data = $tr.data("aData"),
+          cursorClass = "cursor-selected-row",
+          callback;
+
+        function processMenuItems(oItems) {
+          //define a preview callback.
+          if (oItems.preview !== undefined) {
+            callback = function () {
+              open_show_preview(data.instance, data.pos);
+            };
+
+            oItems.preview.callback = callback;
+          }
+
+          //define a select cursor callback.
+          if (oItems.selCurs !== undefined) {
+            callback = function () {
+              var $tr = $(this).parents("tr").next();
+
+              mod.selectCursor($tr);
+            };
+
+            oItems.selCurs.callback = callback;
+          }
+
+          //define a remove cursor callback.
+          if (oItems.delCurs !== undefined) {
+            callback = function () {
+              var $tr = $(this).parents("tr").next();
+
+              mod.removeCursor($tr);
+            };
+
+            oItems.delCurs.callback = callback;
+          }
+
+          //define a delete callback.
+          if (oItems.del !== undefined) {
+            callback = function () {
+              AIRTIME.showbuilder.fnRemove([
+                {
+                  id: data.id,
+                  timestamp: data.timestamp,
+                  instance: data.instance,
+                },
+              ]);
+            };
+
+            oItems.del.callback = callback;
+          }
+
+          //only show the cursor selecting options if the library is visible on the page.
+          if ($tr.next().find(".marker").length === 0) {
+            delete oItems.selCurs;
+            delete oItems.delCurs;
+          }
+          //check to include either select or remove cursor.
+          else {
+            if ($tr.next().hasClass(cursorClass)) {
+              delete oItems.selCurs;
+            } else {
+              delete oItems.delCurs;
+            }
+          }
+
+          items = oItems;
+        }
+
+        request = $.ajax({
+          url: baseUrl + "showbuilder/context-menu",
+          type: "GET",
+          data: { id: data.id, format: "json" },
+          dataType: "json",
+          async: false,
+          success: function (json) {
+            processMenuItems(json.items);
+          },
+        });
+
+        return {
+          items: items,
+        };
+      },
+    });
+
+    var sortableConf = (function () {
+      var origTrs,
+        aItemData = [],
+        oPrevData,
+        fnAdd,
+        fnMove,
+        fnReceive,
+        fnUpdate,
+        i,
+        html,
+        helperData,
+        draggingContainer;
+
+      fnAdd = function () {
+        var aMediaIds = [],
+          aSchedIds = [];
+
+        for (i = 0; i < aItemData.length; i++) {
+          aMediaIds.push({ id: aItemData[i].id, type: aItemData[i].ftype });
+        }
+        aSchedIds.push({
+          id: oPrevData.id,
+          instance: oPrevData.instance,
+          timestamp: oPrevData.timestamp,
+        });
+
+        mod.fnAdd(aMediaIds, aSchedIds);
+      };
+
+      fnMove = function () {
+        var aSelect = [],
+          aAfter = [];
+
+        for (i = 0; i < helperData.length; i++) {
+          aSelect.push({
+            id: helperData[i].id,
+            instance: helperData[i].instance,
+            timestamp: helperData[i].timestamp,
+          });
+        }
+
+        aAfter.push({
+          id: oPrevData.id,
+          instance: oPrevData.instance,
+          timestamp: oPrevData.timestamp,
+        });
+
+        mod.fnMove(aSelect, aAfter);
+      };
+
+      fnReceive = function (event, ui) {
+        var aItems = [];
+
+        if (
+          AIRTIME.library.getCurrentTable() == AIRTIME.library.libraryDataTable
+        ) {
+          AIRTIME.library.addToChosen(ui.item);
+          aItems = AIRTIME.library.getSelectedData();
+          origTrs = aItems;
+          html = ui.helper.html();
+          AIRTIME.library.removeFromChosen(ui.item);
+        } else if (
+          AIRTIME.library.getCurrentTable() ==
+          AIRTIME.library.podcastEpisodeDataTable
+        ) {
+          origTrs = [$(ui.item).data("aData")];
+          html = ui.helper.html();
+        }
+      };
+
+      fnUpdate = function (event, ui) {
+        var prev = ui.item.prev();
+
+        //can't add items outside of shows.
+        if (
+          prev.find("td:first").hasClass("dataTables_empty") ||
+          prev.length === 0
+        ) {
+          alert($.i18n._("Cannot schedule outside a show."));
+          ui.item.remove();
+          return;
+        }
+
+        //if item is added after a footer, add the item after the last item in the show.
+        if (prev.hasClass("sb-footer")) {
+          prev = prev.prev();
+        }
+
+        aItemData = [];
+        oPrevData = prev.data("aData");
+
+        //item was dragged in
+        if (origTrs !== undefined) {
+          $sbTable.find("tr.ui-draggable").empty().after(html);
+
+          aItemData = origTrs;
+          origTrs = undefined;
+          fnAdd();
+        }
+        //item was reordered.
+        else {
+          //ui.item
+          //    .empty()
+          //    .after(draggingContainer.html());
+
+          aItemData.push(ui.item.data("aData"));
+          fnMove();
+        }
+      };
+
+      return {
+        placeholder: "sb-placeholder ui-state-highlight",
+        //forcePlaceholderSize: true,
+        distance: 25,
+        helper: function (event, item) {
+          var selected = mod.getSelectedData(NOW_PLAYING_CLASS),
+            thead = $("#show_builder_table thead"),
+            colspan = thead.find("th").length,
+            trfirst = thead.find("tr:first"),
+            width = trfirst.width(),
+            height = trfirst.height(),
+            message;
+
+          //if nothing is checked select the dragged item.
+          if (selected.length === 0) {
+            selected = [item.data("aData")];
+          }
+
+          if (selected.length === 1) {
+            message = sprintf($.i18n._("Moving %s"), selected[0].title);
+            //draggingContainer = item; //Default DataTables drag and drop
+            draggingContainer = $("<tr/>")
+              .addClass("sb-helper")
+              .append("<td/>")
+              .find("td")
+              .attr("colspan", colspan)
+              .width(width)
+              .height(height)
+              .addClass("ui-state-highlight")
+              .append(message)
+              .end();
+          } else {
+            message = sprintf($.i18n._("Moving %s Items"), selected.length);
+            draggingContainer = $("<tr/>")
+              .addClass("sb-helper")
+              .append("<td/>")
+              .find("td")
+              .attr("colspan", colspan)
+              .width(width)
+              .height(height)
+              .addClass("ui-state-highlight")
+              .append(message)
+              .end();
+          }
+
+          helperData = selected;
+
+          return draggingContainer;
+        },
+        items:
+          "tr:not(:first, :last, .sb-header, .sb-not-allowed, .sb-past, .sb-now-playing, .sb-empty)",
+        cancel: ".sb-footer",
+        receive: fnReceive,
+        update: fnUpdate,
+        axis: "y",
+        containment: "document",
+        start: function (event, ui) {
+          var elements = $sbTable
+            .find("tr." + SB_SELECTED_CLASS)
+            .not("." + NOW_PLAYING_CLASS);
+          elements.hide();
+        },
+        stop: function () {
+          var elements = $sbTable
+            .find("tr." + SB_SELECTED_CLASS)
+            .not("." + NOW_PLAYING_CLASS);
+          elements.show();
+        },
+      };
+    })();
+
+    $sbTable.sortable(sortableConf);
+
+    //start setup of the builder toolbar.
+    $toolbar = $(".sb-content .fg-toolbar:first");
+    var footer = $(".sb-content .fg-toolbar:last"),
+      timerange = $(".sb-timerange");
+    $toolbar.append(timerange);
+
+    $menu = $("<div class='btn-toolbar'/>");
+    $menu
+      .append(
+        "<div class='btn-group'>" +
+          "<button class='btn btn-small dropdown-toggle'  id='timeline-select' data-toggle='dropdown'>" +
+          $.i18n._("Select") +
+          " <span class='caret'></span>" +
+          "</button>" +
+          "<ul class='dropdown-menu'>" +
+          "<li id='timeline-sa'><a href='#'>" +
+          $.i18n._("Select all") +
+          "</a></li>" +
+          "<li id='timeline-sn'><a href='#'>" +
+          $.i18n._("Select none") +
+          "</a></li>" +
+          "</ul>" +
+          "</div>"
+      )
+      .append(
+        "<div class='btn-group'>" +
+          "<button title='" +
+          $.i18n._("Trim overbooked shows") +
+          "' class='ui-state-disabled btn btn-small btn-icon-text' disabled='disabled'>" +
+          "<i class='icon-white icon-cut'></i>" +
+          "<span>" +
+          $.i18n._("Trim overbooked shows") +
+          "</span>" +
+          "</button></div>"
+      )
+      .append(
+        "<div class='btn-group'>" +
+          "<button title='" +
+          $.i18n._("Remove selected scheduled items") +
+          "' class='ui-state-disabled btn btn-small btn-icon-text btn-danger' disabled='disabled'>" +
+          "<i class='icon-white icon-trash'></i>" +
+          "<span>" +
+          $.i18n._("Remove") +
+          "</span>" +
+          "</button></div>"
+      );
+
+    //if 'Add/Remove content' was chosen from the context menu
+    //in the Calendar do not append these buttons
+    if ($(".ui-dialog-content").length === 0) {
+      $menu
+        .append(
+          "<div class='btn-group'>" +
+            "<button  title='" +
+            $.i18n._("Jump to the current playing track") +
+            "' class='ui-state-disabled btn btn-small btn-icon-text' disabled='disabled'>" +
+            "<i class='icon-white icon-step-forward'></i>" +
+            "<span>" +
+            $.i18n._("Jump to Current") +
+            "</span>" +
+            "</button></div>"
+        )
+        .append(
+          "<div class='btn-group'>" +
+            "<button title='" +
+            $.i18n._("Cancel current show") +
+            "' class='ui-state-disabled btn btn-small btn-icon-text btn-danger' disabled='disabled'>" +
+            "<i class='icon-white icon-ban-circle'></i>" +
+            "<span>" +
+            $.i18n._("Cancel current show") +
+            "</span>" +
+            "</button></div>"
+        );
+    }
+
+    if (localStorage.getItem("user-type") != "G") {
+      $toolbar.append($menu);
+    }
+
+    $menu = undefined;
+
+    $("#timeline-sa").click(function () {
+      mod.selectAll();
+    });
+    $("#timeline-sn").click(function () {
+      mod.selectNone();
+    });
+
+    //cancel current show
+    $toolbar
+      .find(".icon-ban-circle")
+      .parent()
+      .click(function () {
+        var $tr,
+          data,
+          msg = $.i18n._("Cancel Current Show?");
+
+        if (AIRTIME.button.isDisabled("icon-ban-circle", true) === true) {
+          return;
+        }
+
+        $tr = $sbTable.find("tr.sb-future:first");
+
+        if ($tr.hasClass("sb-current-show")) {
+          data = $tr.data("aData");
+
+          if (data.record === true) {
+            msg = $.i18n._("Stop recording current show?");
+          }
+
+          if (confirm(msg)) {
+            var url = baseUrl + "Schedule/cancel-current-show";
+            $.ajax({
+              url: url,
+              data: { format: "json", id: data.instance },
+              success: function (data) {
+                $("#library_content")
+                  .find("#library_display")
+                  .dataTable()
+                  .fnStandingRedraw();
+                var oTable = $sbTable.dataTable();
+                oTable.fnDraw();
+              },
+            });
+          }
+        }
+      });
+
+    //jump to current
+    $toolbar
+      .find(".icon-step-forward")
+      .parent()
+      .click(function () {
+        if (AIRTIME.button.isDisabled("icon-step-forward", true) === true) {
+          return;
+        }
+        /*
                  var $scroll = $sbContent.find(".dataTables_scrolling"),
                  scrolled = $scroll.scrollTop(),
                  scrollingTop = $scroll.offset().top,
@@ -1250,79 +1455,82 @@ var AIRTIME = (function(AIRTIME){
 
                  $scroll.scrollTop(currentTop - scrollingTop + scrolled);
                  */
-                mod.jumpToCurrentTrack();
-            });
+        mod.jumpToCurrentTrack();
+      });
 
-        //delete overbooked tracks.
-        $toolbar.find('.icon-cut', true).parent()
-            .click(function() {
+    //delete overbooked tracks.
+    $toolbar
+      .find(".icon-cut", true)
+      .parent()
+      .click(function () {
+        if (AIRTIME.button.isDisabled("icon-cut", true) === true) {
+          return;
+        }
 
-                if (AIRTIME.button.isDisabled('icon-cut', true) === true) {
-                    return;
-                }
+        var temp,
+          aItems = [],
+          trs = $sbTable.find(".sb-over.sb-future.sb-allowed");
 
-                var temp,
-                    aItems = [],
-                    trs = $sbTable.find(".sb-over.sb-future.sb-allowed");
-
-                trs.each(function(){
-                    temp = $(this).data("aData");
-                    aItems.push({"id": temp.id, "instance": temp.instance, "timestamp": temp.timestamp});
-                });
-
-                mod.fnRemove(aItems);
-            });
-
-        //delete selected tracks
-        $toolbar.find('.icon-trash').parent()
-            .click(function() {
-
-                var button = $("#show_builder").find(".icon-trash").parent();
-
-                if (button.hasClass(DISABLED_CLASS)) {
-                    return;
-                }
-
-                mod.fnRemoveSelectedItems();
-            });
-
-        //add events to cursors.
-        $sbTable.find("tbody").on("click", "div.marker", function(event) {
-            var $tr = $(this).parents("tr"),
-                $trs;
-
-            if ($tr.hasClass(CURSOR_SELECTED_CLASS)) {
-                mod.removeCursor($tr);
-            }
-            else {
-                mod.selectCursor($tr);
-            }
-
-            if (event.ctrlKey === false) {
-                $trs = $sbTable.find('.'+CURSOR_SELECTED_CLASS).not($tr);
-                mod.removeCursor($trs);
-            }
-
-            return false;
+        trs.each(function () {
+          temp = $(this).data("aData");
+          aItems.push({
+            id: temp.id,
+            instance: temp.instance,
+            timestamp: temp.timestamp,
+          });
         });
 
-        /*
-         * Select button dropdown state in the toolbar.
-         * The button has to be disabled to prevent the dropdown
-         * from opening
-         */
-        $sbContent.on("mouseenter", ".btn-group #timeline-select", function(ev) {
-            $el = $(this);
+        mod.fnRemove(aItems);
+      });
 
-            if ($el.hasClass("ui-state-disabled")) {
-                $el.attr("disabled", "disabled");
-            }
-            else {
-                $el.removeAttr("disabled");
-            }
-        });
-    };
+    //delete selected tracks
+    $toolbar
+      .find(".icon-trash")
+      .parent()
+      .click(function () {
+        var button = $("#show_builder").find(".icon-trash").parent();
 
-    return AIRTIME;
+        if (button.hasClass(DISABLED_CLASS)) {
+          return;
+        }
 
-}(AIRTIME || {}));
+        mod.fnRemoveSelectedItems();
+      });
+
+    //add events to cursors.
+    $sbTable.find("tbody").on("click", "div.marker", function (event) {
+      var $tr = $(this).parents("tr"),
+        $trs;
+
+      if ($tr.hasClass(CURSOR_SELECTED_CLASS)) {
+        mod.removeCursor($tr);
+      } else {
+        mod.selectCursor($tr);
+      }
+
+      if (event.ctrlKey === false) {
+        $trs = $sbTable.find("." + CURSOR_SELECTED_CLASS).not($tr);
+        mod.removeCursor($trs);
+      }
+
+      return false;
+    });
+
+    /*
+     * Select button dropdown state in the toolbar.
+     * The button has to be disabled to prevent the dropdown
+     * from opening
+     */
+    $sbContent.on("mouseenter", ".btn-group #timeline-select", function (ev) {
+      $el = $(this);
+
+      if ($el.hasClass("ui-state-disabled")) {
+        $el.attr("disabled", "disabled");
+      } else {
+        $el.removeAttr("disabled");
+      }
+    });
+  };
+
+  return AIRTIME;
+})(AIRTIME || {});
diff --git a/legacy/public/js/airtime/showbuilder/main_builder.js b/legacy/public/js/airtime/showbuilder/main_builder.js
index df4cccbdc..bcc7dce85 100644
--- a/legacy/public/js/airtime/showbuilder/main_builder.js
+++ b/legacy/public/js/airtime/showbuilder/main_builder.js
@@ -1,376 +1,382 @@
-AIRTIME = (function(AIRTIME) {
+AIRTIME = (function (AIRTIME) {
+  var viewport,
+    $lib,
+    $libWrapper,
+    $builder,
+    $fs,
+    widgetHeight,
+    screenWidth,
+    resizeTimeout,
+    oBaseDatePickerSettings,
+    oBaseTimePickerSettings,
+    oRange,
+    dateStartId = "#sb_date_start",
+    timeStartId = "#sb_time_start",
+    dateEndId = "#sb_date_end",
+    timeEndId = "#sb_time_end",
+    mod;
 
-    var viewport,
-        $lib,
-        $libWrapper,
-        $builder,
-        $fs,
-        widgetHeight,
-        screenWidth,
-        resizeTimeout,
-        oBaseDatePickerSettings,
-        oBaseTimePickerSettings,
-        oRange,
-        dateStartId = "#sb_date_start",
-        timeStartId = "#sb_time_start",
-        dateEndId = "#sb_date_end",
-        timeEndId = "#sb_time_end",
-        mod;
+  if (AIRTIME.builderMain === undefined) {
+    AIRTIME.builderMain = {};
+  }
+  mod = AIRTIME.builderMain;
 
-    if (AIRTIME.builderMain === undefined) {
-        AIRTIME.builderMain = {};
+  oBaseDatePickerSettings = {
+    dateFormat: "yy-mm-dd",
+    //i18n_months, i18n_days_short are in common.js
+    monthNames: i18n_months,
+    dayNamesMin: i18n_days_short,
+    onClick: function (sDate, oDatePicker) {
+      $(this).datepicker("setDate", sDate);
+    },
+    onClose: validateTimeRange,
+  };
+
+  oBaseTimePickerSettings = {
+    showPeriodLabels: false,
+    showCloseButton: true,
+    closeButtonText: $.i18n._("Done"),
+    showLeadingZero: false,
+    defaultTime: "0:00",
+    hourText: $.i18n._("Hour"),
+    minuteText: $.i18n._("Minute"),
+    onClose: validateTimeRange,
+  };
+
+  function setWidgetSize() {
+    viewport = AIRTIME.utilities.findViewportDimensions();
+    widgetHeight = viewport.height - 180;
+    screenWidth = Math.floor(viewport.width - 50);
+
+    var libTableHeight = widgetHeight - 175,
+      builderTableHeight = widgetHeight - 95,
+      oTable;
+
+    if ($fs.is(":visible")) {
+      builderTableHeight = builderTableHeight - 40;
     }
-    mod = AIRTIME.builderMain;
 
-    oBaseDatePickerSettings = {
-        dateFormat: 'yy-mm-dd',
-        //i18n_months, i18n_days_short are in common.js
-        monthNames: i18n_months,
-        dayNamesMin: i18n_days_short,
-        onClick: function(sDate, oDatePicker) {
-            $(this).datepicker( "setDate", sDate );
+    //set the heights of the main widgets.
+    $builder //.height(widgetHeight)
+      .find(".dataTables_scrolling")
+      //.css("max-height", builderTableHeight)
+      .end();
+    //.width(screenWidth);
+
+    $lib //.height(widgetHeight)
+      .find(".dataTables_scrolling")
+      //.css("max-height", libTableHeight)
+      .end();
+
+    if ($lib.filter(":visible").length > 0) {
+      //$lib.width(Math.floor(screenWidth * 0.47));
+
+      $builder //.width(Math.floor(screenWidth * 0.47))
+        .find("#sb_edit")
+        .remove()
+        .end()
+        .find("#sb_date_start")
+        .css("margin-left", 0)
+        .end();
+
+      oTable = $("#show_builder_table").dataTable();
+      //oTable.fnDraw();
+    }
+  }
+
+  function showSearchSubmit() {
+    var fn,
+      op,
+      oTable = $("#show_builder_table").dataTable(),
+      check;
+
+    check = validateTimeRange();
+
+    if (check.isValid) {
+      //reset timestamp value since input values could have changed.
+      AIRTIME.showbuilder.resetTimestamp();
+
+      fn = oTable.fnSettings().fnServerData;
+      fn.start = check.start;
+      fn.end = check.end;
+
+      op = $("div.sb-options-form");
+      if (op.is(":visible")) {
+        if (fn.ops === undefined) {
+          fn.ops = {};
+        }
+        fn.ops.showFilter = op.find("#sb_show_filter").val();
+        // Hacky?
+        fn.ops.myShows = fn.ops.showFilter == -1 ? 1 : 0;
+      }
+
+      oTable.fnDraw();
+    }
+  }
+
+  function highlightMediaTypeSelector() {
+    $(".media_type_selector:first").addClass("highlight");
+    var selected;
+    if (location.hash === "") {
+      location.hash = "tracks";
+      selected = $("a[href$='#tracks']");
+    } else {
+      selected = $("a[href$='" + location.hash + "']");
+    }
+
+    selected.parent().addClass("selected");
+    $("#library_filter").text(selected.text());
+
+    $(window).on("hashchange", function () {
+      var selected = $("a[href$='" + location.hash + "']"),
+        dashboardLink = $(".media_type_selector:first"),
+        tableType;
+
+      if (
+        selected.parent().data("selection-id") ==
+        AIRTIME.library.MediaTypeIntegerEnum.PODCAST
+      ) {
+        tableType = AIRTIME.library.DataTableTypeEnum.PODCAST;
+      } else {
+        tableType = AIRTIME.library.DataTableTypeEnum.LIBRARY;
+      }
+
+      dashboardLink.find("a").attr("href", selected.attr("href"));
+      AIRTIME.library.selectNone();
+      $(".media_type_selector").each(function () {
+        $(this).removeClass("selected");
+      });
+      selected.parent().addClass("selected");
+      AIRTIME.library.setCurrentTable(tableType);
+      $("#library_filter").text(selected.text());
+      // Highlight the dashboard link
+      dashboardLink.addClass("highlight");
+    });
+  }
+
+  mod.onReady = function () {
+    // Normally we would just use audio/*, but it includes file types that we can't handle (like .m4a)
+    // We initialize the acceptedMimeTypes variable in Bootstrap so we don't have to duplicate the list
+    Dropzone.options.content = {
+      url: "/rest/media",
+      clickable: false,
+      acceptedFiles: acceptedMimeTypes.join(),
+      init: function () {
+        this.on("sending", function (file, xhr, data) {
+          data.append("csrf_token", $("#csrf").val());
+        });
+      },
+      dictDefaultMessage: "",
+      createImageThumbnails: false,
+      previewTemplate: '<div style="display:none"></div>',
+    };
+
+    // define module vars.
+    $lib = $("#library_content");
+    $builder = $("#show_builder");
+    $fs = $builder.find("fieldset");
+
+    //Highlight the media type selector we're currently on.
+    highlightMediaTypeSelector();
+
+    // always re-show builder if dashboard button was clicked
+    $(".media_type_selector:first").on("click", function () {
+      $builder.show();
+      AIRTIME.tabs.openScheduleTab();
+    });
+
+    /*
+     * Icon hover states for search.
+     */
+    $builder.on("mouseenter", ".sb-timerange .ui-button", function (ev) {
+      $(this).addClass("ui-state-hover");
+    });
+    $builder.on("mouseleave", ".sb-timerange .ui-button", function (ev) {
+      $(this).removeClass("ui-state-hover");
+    });
+
+    $builder
+      .find(dateStartId)
+      .datepicker(oBaseDatePickerSettings)
+      .blur(validateTimeRange);
+
+    $builder
+      .find(timeStartId)
+      .timepicker(oBaseTimePickerSettings)
+      .blur(validateTimeRange);
+
+    $builder
+      .find(dateEndId)
+      .datepicker(oBaseDatePickerSettings)
+      .blur(validateTimeRange);
+
+    $builder
+      .find(timeEndId)
+      .timepicker(oBaseTimePickerSettings)
+      .blur(validateTimeRange);
+
+    oRange = AIRTIME.utilities.fnGetScheduleRange(
+      dateStartId,
+      timeStartId,
+      dateEndId,
+      timeEndId
+    );
+    AIRTIME.showbuilder.fnServerData.start = oRange.start;
+    AIRTIME.showbuilder.fnServerData.end = oRange.end;
+
+    //the user might not have the library on the page (guest user)
+    if (AIRTIME.library !== undefined) {
+      AIRTIME.library.libraryInit();
+    }
+
+    AIRTIME.showbuilder.builderDataTable();
+    setWidgetSize();
+
+    $libWrapper = $lib.find("#library_display_wrapper");
+    //$builder.find('.dataTables_scrolling').css("max-height",
+    //        widgetHeight - 95);
+
+    $builder.on("click", "#sb_submit", showSearchSubmit);
+
+    $builder.on("click", "#sb_edit", function (ev) {
+      var schedTable = $("#show_builder_table").dataTable();
+
+      // reset timestamp to redraw the cursors.
+      AIRTIME.showbuilder.resetTimestamp();
+
+      $lib.show().width(Math.floor(screenWidth * 0.48));
+
+      $builder
+        .width(Math.floor(screenWidth * 0.48))
+        .find("#sb_edit")
+        .remove()
+        .end()
+        .find("#sb_date_start")
+        .css("margin-left", 0)
+        .end();
+
+      schedTable.fnDraw();
+
+      $.ajax({
+        url: baseUrl + "usersettings/set-now-playing-screen-settings",
+        type: "POST",
+        data: {
+          settings: {
+            library: true,
+          },
+          format: "json",
         },
-        onClose: validateTimeRange
-    };
+        dataType: "json",
+        success: function () {},
+      });
+    });
 
-    oBaseTimePickerSettings = {
-        showPeriodLabels: false,
-        showCloseButton: true,
-        closeButtonText: $.i18n._("Done"),
-        showLeadingZero: false,
-        defaultTime: '0:00',
-        hourText: $.i18n._("Hour"),
-        minuteText: $.i18n._("Minute"),
-        onClose: validateTimeRange
-    };
+    $lib.on("click", "#sb_lib_close", function () {
+      var schedTable = $("#show_builder_table").dataTable();
 
-    function setWidgetSize() {
-        viewport = AIRTIME.utilities.findViewportDimensions();
-        widgetHeight = viewport.height - 180;
-        screenWidth = Math.floor(viewport.width - 50);
+      $lib.hide();
+      $builder
+        .width(screenWidth)
+        .find(".sb-timerange")
+        .find("#sb_date_start")
+        .css("margin-left", 30)
+        .end()
+        .end();
 
-        var libTableHeight = widgetHeight - 175,
-            builderTableHeight = widgetHeight - 95,
-            oTable;
+      schedTable.fnDraw();
 
-        if ($fs.is(':visible')) {
-            builderTableHeight = builderTableHeight - 40;
-        }
+      $.ajax({
+        url: baseUrl + "usersettings/set-now-playing-screen-settings",
+        type: "POST",
+        data: {
+          settings: {
+            library: false,
+          },
+          format: "json",
+        },
+        dataType: "json",
+        success: function () {},
+      });
+    });
 
-        //set the heights of the main widgets.
-        $builder//.height(widgetHeight)
-            .find(".dataTables_scrolling")
-                    //.css("max-height", builderTableHeight)
-                    .end();
-            //.width(screenWidth);
+    $builder.find("legend").click(function (ev, item) {
+      if ($fs.hasClass("closed")) {
+        $fs.removeClass("closed");
+        //$builder.find('.dataTables_scrolling').css(
+        //        "max-height", widgetHeight - 150);
+      } else {
+        $fs.addClass("closed");
 
-        $lib//.height(widgetHeight)
-            .find(".dataTables_scrolling")
-                //.css("max-height", libTableHeight)
-                .end();
+        // set defaults for the options.
+        $fs.find("select").val(0);
+        $fs.find('input[type="checkbox"]').attr("checked", false);
+        //$builder.find('.dataTables_scrolling').css(
+        //        "max-height", widgetHeight - 110);
+      }
+    });
 
-        if ($lib.filter(':visible').length > 0) {
+    // set click event for all my shows checkbox.
+    $builder.on("click", "#sb_my_shows", function (ev) {
+      if ($(this).is(":checked")) {
+        $(ev.delegateTarget).find("#sb_show_filter").val(0);
+      }
 
-            //$lib.width(Math.floor(screenWidth * 0.47));
+      showSearchSubmit();
+    });
 
-            $builder//.width(Math.floor(screenWidth * 0.47))
-                .find("#sb_edit")
-                    .remove()
-                    .end()
-                .find("#sb_date_start")
-                    .css("margin-left", 0)
-                    .end();
+    //set select event for choosing a show.
+    $builder.on("change", "#sb_show_filter", function (ev) {
+      if ($(this).val() !== 0) {
+        $(ev.delegateTarget).find("#sb_my_shows").attr("checked", false);
+      }
 
-            oTable = $('#show_builder_table').dataTable();
-            //oTable.fnDraw();
-        }
-    }
+      showSearchSubmit();
+    });
 
-    function showSearchSubmit() {
-        var fn,
-            op,
-            oTable = $('#show_builder_table').dataTable(),
-            check;
+    function checkScheduleUpdates() {
+      var data = {},
+        oTable = $("#show_builder_table").dataTable(),
+        fn = oTable.fnSettings().fnServerData,
+        start = fn.start,
+        end = fn.end;
 
-        check = validateTimeRange();
+      data["format"] = "json";
+      data["start"] = start;
+      data["end"] = end;
+      data["timestamp"] = AIRTIME.showbuilder.getTimestamp();
+      data["instances"] = AIRTIME.showbuilder.getShowInstances();
 
-        if (check.isValid) {
-            //reset timestamp value since input values could have changed.
-            AIRTIME.showbuilder.resetTimestamp();
-
-            fn = oTable.fnSettings().fnServerData;
-            fn.start = check.start;
-            fn.end = check.end;
-
-            op = $("div.sb-options-form");
-            if (op.is(":visible")) {
-
-                if (fn.ops === undefined) {
-                    fn.ops = {};
-                }
-                fn.ops.showFilter = op.find("#sb_show_filter").val();
-                // Hacky?
-                fn.ops.myShows = (fn.ops.showFilter == -1) ? 1 : 0;
-            }
+      if (fn.hasOwnProperty("ops")) {
+        data["myShows"] = fn.ops.myShows;
+        data["showFilter"] = fn.ops.showFilter;
+        data["showInstanceFilter"] = fn.ops.showInstanceFilter;
+      }
 
+      $.ajax({
+        dataType: "json",
+        type: "GET",
+        url: baseUrl + "showbuilder/check-builder-feed",
+        data: data,
+        success: function (json) {
+          if (json.update === true) {
             oTable.fnDraw();
-        }
+          }
+          setTimeout(checkScheduleUpdates, 5000);
+        },
+      });
+
+      //check if the timeline view needs updating.
+      setTimeout(checkScheduleUpdates, 5000);
     }
+  };
 
-    function highlightMediaTypeSelector()
-    {
-        $(".media_type_selector:first").addClass("highlight");
-        var selected;
-        if (location.hash === "") {
-            location.hash = "tracks";
-            selected = $("a[href$='#tracks']");
-        } else {
-            selected = $("a[href$='"+location.hash+"']");
-        }
+  mod.onResize = function () {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(setWidgetSize, 100);
+  };
 
-        selected.parent().addClass("selected");
-        $("#library_filter").text(selected.text());
-
-        $(window).on('hashchange', function() {
-            var selected = $("a[href$='"+location.hash+"']"),
-                dashboardLink = $(".media_type_selector:first"),
-                tableType;
-
-            if (selected.parent().data("selection-id") == AIRTIME.library.MediaTypeIntegerEnum.PODCAST) {
-                tableType = AIRTIME.library.DataTableTypeEnum.PODCAST;
-            } else {
-                tableType = AIRTIME.library.DataTableTypeEnum.LIBRARY;
-            }
-
-            dashboardLink.find("a").attr("href", selected.attr("href"));
-            AIRTIME.library.selectNone();
-            $(".media_type_selector").each(function () {
-                $(this).removeClass("selected");
-            });
-            selected.parent().addClass("selected");
-            AIRTIME.library.setCurrentTable(tableType);
-            $("#library_filter").text(selected.text());
-            // Highlight the dashboard link
-            dashboardLink.addClass("highlight");
-        });
-    }
-
-
-    mod.onReady = function() {
-        // Normally we would just use audio/*, but it includes file types that we can't handle (like .m4a)
-        // We initialize the acceptedMimeTypes variable in Bootstrap so we don't have to duplicate the list
-        Dropzone.options.content = {
-            url:'/rest/media',
-            clickable: false,
-            acceptedFiles: acceptedMimeTypes.join(),
-            init: function () {
-                this.on("sending", function (file, xhr, data) {
-                    data.append("csrf_token", $("#csrf").val());
-                });
-            },
-            dictDefaultMessage: '',
-            createImageThumbnails: false,
-            previewTemplate : '<div style="display:none"></div>'
-        };
-
-        // define module vars.
-        $lib = $("#library_content");
-        $builder = $("#show_builder");
-        $fs = $builder.find('fieldset');
-
-        //Highlight the media type selector we're currently on.
-        highlightMediaTypeSelector();
-
-        // always re-show builder if dashboard button was clicked
-        $('.media_type_selector:first').on('click', function() {
-            $builder.show();
-            AIRTIME.tabs.openScheduleTab();
-        });
-
-        /*
-         * Icon hover states for search.
-         */
-        $builder.on("mouseenter", ".sb-timerange .ui-button", function(ev) {
-            $(this).addClass("ui-state-hover");
-        });
-        $builder.on("mouseleave", ".sb-timerange .ui-button", function(ev) {
-            $(this).removeClass("ui-state-hover");
-        });
-
-        $builder.find(dateStartId)
-        	.datepicker(oBaseDatePickerSettings)
-        	.blur(validateTimeRange);
-
-        $builder.find(timeStartId)
-        	.timepicker(oBaseTimePickerSettings)
-        	.blur(validateTimeRange);
-
-        $builder.find(dateEndId)
-        	.datepicker(oBaseDatePickerSettings)
-        	.blur(validateTimeRange);
-
-        $builder.find(timeEndId)
-        	.timepicker(oBaseTimePickerSettings)
-        	.blur(validateTimeRange);
-
-
-        oRange = AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId,
-                dateEndId, timeEndId);
-        AIRTIME.showbuilder.fnServerData.start = oRange.start;
-        AIRTIME.showbuilder.fnServerData.end = oRange.end;
-
-        //the user might not have the library on the page (guest user)
-        if (AIRTIME.library !== undefined) {
-        	AIRTIME.library.libraryInit();
-        }
-
-        AIRTIME.showbuilder.builderDataTable();
-        setWidgetSize();
-
-        $libWrapper = $lib.find("#library_display_wrapper");
-        //$builder.find('.dataTables_scrolling').css("max-height",
-        //        widgetHeight - 95);
-
-        $builder.on("click", "#sb_submit", showSearchSubmit);
-
-        $builder.on("click", "#sb_edit", function(ev) {
-            var schedTable = $("#show_builder_table").dataTable();
-
-            // reset timestamp to redraw the cursors.
-            AIRTIME.showbuilder.resetTimestamp();
-
-            $lib.show().width(Math.floor(screenWidth * 0.48));
-
-            $builder.width(Math.floor(screenWidth * 0.48)).find("#sb_edit")
-                    .remove().end().find("#sb_date_start")
-                    .css("margin-left", 0).end();
-
-            schedTable.fnDraw();
-
-            $.ajax( {
-                url : baseUrl+"usersettings/set-now-playing-screen-settings",
-                type : "POST",
-                data : {
-                    settings : {
-                        library : true
-                    },
-                    format : "json"
-                },
-                dataType : "json",
-                success : function() {
-                }
-            });
-        });
-
-        $lib.on("click", "#sb_lib_close", function() {
-            var schedTable = $("#show_builder_table").dataTable();
-
-            $lib.hide();
-            $builder.width(screenWidth).find(".sb-timerange").find("#sb_date_start").css("margin-left", 30)
-                    .end().end();
-
-            schedTable.fnDraw();
-
-            $.ajax( {
-                url : baseUrl+"usersettings/set-now-playing-screen-settings",
-                type : "POST",
-                data : {
-                    settings : {
-                        library : false
-                    },
-                    format : "json"
-                },
-                dataType : "json",
-                success : function() {
-                }
-            });
-        });
-
-        $builder.find('legend').click(
-                function(ev, item) {
-
-                    if ($fs.hasClass("closed")) {
-
-                        $fs.removeClass("closed");
-                        //$builder.find('.dataTables_scrolling').css(
-                        //        "max-height", widgetHeight - 150);
-                    } else {
-                        $fs.addClass("closed");
-
-                        // set defaults for the options.
-                        $fs.find('select').val(0);
-                        $fs.find('input[type="checkbox"]').attr("checked",
-                                false);
-                        //$builder.find('.dataTables_scrolling').css(
-                        //        "max-height", widgetHeight - 110);
-                    }
-                });
-
-        // set click event for all my shows checkbox.
-        $builder.on("click", "#sb_my_shows", function(ev) {
-
-            if ($(this).is(':checked')) {
-                $(ev.delegateTarget).find('#sb_show_filter').val(0);
-            }
-
-            showSearchSubmit();
-        });
-
-        //set select event for choosing a show.
-        $builder.on("change", '#sb_show_filter', function(ev) {
-
-            if ($(this).val() !== 0) {
-                $(ev.delegateTarget).find('#sb_my_shows')
-                        .attr("checked", false);
-            }
-
-            showSearchSubmit();
-
-        });
-
-        function checkScheduleUpdates() {
-            var data = {}, oTable = $('#show_builder_table').dataTable(), fn = oTable
-                    .fnSettings().fnServerData, start = fn.start, end = fn.end;
-
-            data["format"] = "json";
-            data["start"] = start;
-            data["end"] = end;
-            data["timestamp"] = AIRTIME.showbuilder.getTimestamp();
-            data["instances"] = AIRTIME.showbuilder.getShowInstances();
-
-            if (fn.hasOwnProperty("ops")) {
-                data["myShows"] = fn.ops.myShows;
-                data["showFilter"] = fn.ops.showFilter;
-                data["showInstanceFilter"] = fn.ops.showInstanceFilter;
-            }
-
-            $.ajax( {
-                "dataType" : "json",
-                "type" : "GET",
-                "url" : baseUrl+"showbuilder/check-builder-feed",
-                "data" : data,
-                "success" : function(json) {
-                    if (json.update === true) {
-                        oTable.fnDraw();
-                    }
-                    setTimeout(checkScheduleUpdates, 5000);
-                }
-            });
-
-            //check if the timeline view needs updating.
-            setTimeout(checkScheduleUpdates, 5000);
-        }
-    };
-
-    mod.onResize = function() {
-
-        clearTimeout(resizeTimeout);
-        resizeTimeout = setTimeout(setWidgetSize, 100);
-    };
-
-    return AIRTIME;
-
-} (AIRTIME || {}));
+  return AIRTIME;
+})(AIRTIME || {});
 
 $(document).ready(AIRTIME.builderMain.onReady);
 $(window).resize(AIRTIME.builderMain.onResize);
diff --git a/legacy/public/js/airtime/showbuilder/tabs.js b/legacy/public/js/airtime/showbuilder/tabs.js
index 105dfae26..338d99856 100644
--- a/legacy/public/js/airtime/showbuilder/tabs.js
+++ b/legacy/public/js/airtime/showbuilder/tabs.js
@@ -1,426 +1,446 @@
-var AIRTIME = (function(AIRTIME){
-        /**
-         * AIRTIME module namespace object
-         */
-    var mod,
-        /**
-         * Tab counter to use as unique tab IDs that can be
-         * retrieved from the DOM
-         *
-         * @type {number}
-         */
-        $tabCount = 0,
-        /**
-         * Map of Tab IDs (by tabCount) to object UIDs so
-         * Tabs can be referenced either by ID (from the DOM)
-         * or by UID (from object data)
-         *
-         * @type {{}}
-         */
-        $tabMap = {},
-        /**
-         * Map of object UIDs to currently open Tab objects
-         *
-         * @type {{}}
-         */
-        $openTabs = {},
-        /**
-         * The currently active (open) Tab object
-         *
-         * @type {Tab}
-         */
-        $activeTab,
-        /**
-         * Singleton object used to reference the schedule tab
-         *
-         * @type {ScheduleTab}
-         */
-        $scheduleTab;
+var AIRTIME = (function (AIRTIME) {
+  /**
+   * AIRTIME module namespace object
+   */
+  var mod,
+    /**
+     * Tab counter to use as unique tab IDs that can be
+     * retrieved from the DOM
+     *
+     * @type {number}
+     */
+    $tabCount = 0,
+    /**
+     * Map of Tab IDs (by tabCount) to object UIDs so
+     * Tabs can be referenced either by ID (from the DOM)
+     * or by UID (from object data)
+     *
+     * @type {{}}
+     */
+    $tabMap = {},
+    /**
+     * Map of object UIDs to currently open Tab objects
+     *
+     * @type {{}}
+     */
+    $openTabs = {},
+    /**
+     * The currently active (open) Tab object
+     *
+     * @type {Tab}
+     */
+    $activeTab,
+    /**
+     * Singleton object used to reference the schedule tab
+     *
+     * @type {ScheduleTab}
+     */
+    $scheduleTab;
 
-    if (AIRTIME.tabs === undefined) {
-        AIRTIME.tabs = {};
-    }
-    mod = AIRTIME.tabs;
+  if (AIRTIME.tabs === undefined) {
+    AIRTIME.tabs = {};
+  }
+  mod = AIRTIME.tabs;
 
-    /*  #####################################################
+  /*  #####################################################
                   Object Initialization and Functions
         ##################################################### */
 
-    /**
-     * Tab object constructor
-     *
-     * @param {string} html the HTML to render as the tab contents
-     * @param {string} uid  the unique ID for the tab. Uses the values in
-     *                      AIRTIME.library.MediaTypeStringEnum and the object ID
-     *                      to create a string of the form TYPE_ID.
-     * @returns {Tab}       the created Tab object
-     * @constructor
-     */
-    var Tab = function(html, uid) {
-        var self = this;
+  /**
+   * Tab object constructor
+   *
+   * @param {string} html the HTML to render as the tab contents
+   * @param {string} uid  the unique ID for the tab. Uses the values in
+   *                      AIRTIME.library.MediaTypeStringEnum and the object ID
+   *                      to create a string of the form TYPE_ID.
+   * @returns {Tab}       the created Tab object
+   * @constructor
+   */
+  var Tab = function (html, uid) {
+    var self = this;
 
-        AIRTIME.library.selectNone();
+    AIRTIME.library.selectNone();
 
-        var existingTab = $openTabs[uid];
-        if (existingTab) {
-            existingTab.switchTo();
-            return existingTab;
-        }
-        self.id = ++$tabCount;
-        self.uid = uid;
+    var existingTab = $openTabs[uid];
+    if (existingTab) {
+      existingTab.switchTo();
+      return existingTab;
+    }
+    self.id = ++$tabCount;
+    self.uid = uid;
 
-        // TODO: clean this up a bit and use js instead of strings to create elements
-        var wrapper = "<div data-tab-id='" + self.id + "' id='pl-tab-content-" + self.id + "' class='side_playlist pl-content'><div class='editor_pane_wrapper'></div></div>",
-            t = $("#show_builder").append(wrapper).find("#pl-tab-content-" + self.id),
-            pane = $(".editor_pane_wrapper:last").append(html),
-            name = pane.find("#track_title").length > 0 ? pane.find("#track_title").val() + $.i18n._(" - Metadata Editor")
-                : pane.find(".playlist_name_display").val(),
-            tab =
-                "<li data-tab-id='" + self.id + "' id='pl-tab-" + self.id + "' role='presentation' class='active'>" +
-                    "<a href='javascript:void(0)'>" +
-                        "<span class='tab-name'>" + name + "</span>" +
-                        "<span href='#' class='lib_pl_close icon-remove'></span>" +
-                    "</a>" +
-                "</li>",
-            tabs = $(".nav.nav-tabs");
+    // TODO: clean this up a bit and use js instead of strings to create elements
+    var wrapper =
+        "<div data-tab-id='" +
+        self.id +
+        "' id='pl-tab-content-" +
+        self.id +
+        "' class='side_playlist pl-content'><div class='editor_pane_wrapper'></div></div>",
+      t = $("#show_builder")
+        .append(wrapper)
+        .find("#pl-tab-content-" + self.id),
+      pane = $(".editor_pane_wrapper:last").append(html),
+      name =
+        pane.find("#track_title").length > 0
+          ? pane.find("#track_title").val() + $.i18n._(" - Metadata Editor")
+          : pane.find(".playlist_name_display").val(),
+      tab =
+        "<li data-tab-id='" +
+        self.id +
+        "' id='pl-tab-" +
+        self.id +
+        "' role='presentation' class='active'>" +
+        "<a href='javascript:void(0)'>" +
+        "<span class='tab-name'>" +
+        name +
+        "</span>" +
+        "<span href='#' class='lib_pl_close icon-remove'></span>" +
+        "</a>" +
+        "</li>",
+      tabs = $(".nav.nav-tabs");
 
-        $(".nav.nav-tabs li").removeClass("active");
-        tabs.append(tab);
+    $(".nav.nav-tabs li").removeClass("active");
+    tabs.append(tab);
 
-        var newTab = $("#pl-tab-" + self.id);
+    var newTab = $("#pl-tab-" + self.id);
 
-        self.wrapper = pane;
-        self.contents = t;
-        self.tab = newTab;
+    self.wrapper = pane;
+    self.contents = t;
+    self.tab = newTab;
 
-        $openTabs[uid] = self;
-        $tabMap[self.id] = uid;
+    $openTabs[uid] = self;
+    $tabMap[self.id] = uid;
 
-        self._init();
+    self._init();
+    self.switchTo();
+    return self;
+  };
+
+  /**
+   * Private initialization function for Tab objects
+   *
+   * Assigns default action handlers to the tab DOM element
+   *
+   * @private
+   */
+  Tab.prototype._init = function () {
+    var self = this;
+    self.assignTabClickHandler(function (e) {
+      if (!$(this).hasClass("active")) {
         self.switchTo();
-        return self;
-    };
+      }
+    });
 
-    /**
-     * Private initialization function for Tab objects
-     *
-     * Assigns default action handlers to the tab DOM element
-     *
-     * @private
-     */
-    Tab.prototype._init = function() {
-        var self = this;
-        self.assignTabClickHandler(function(e) {
-            if (!$(this).hasClass('active')) {
-                self.switchTo();
-            }
-        });
+    self.assignTabCloseClickHandler(function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      $(this).unbind("click"); // Prevent repeated clicks in quick succession from closing multiple tabs
 
-        self.assignTabCloseClickHandler(function(e) {
-            e.preventDefault();
-            e.stopPropagation();
-            $(this).unbind("click"); // Prevent repeated clicks in quick succession from closing multiple tabs
+      // 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();
+      self.close();
+    });
 
-            // 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();
-            self.close();
-        });
+    self.contents.on("click", ".toggle-editor-form", function (event) {
+      self.contents.find(".inner_editor_wrapper").slideToggle(200);
+      var buttonIcon = $(this).find(".icon-white");
+      buttonIcon.toggleClass("icon-chevron-up");
+      buttonIcon.toggleClass("icon-chevron-down");
+    });
+  };
 
-        self.contents.on("click", ".toggle-editor-form", function(event) {
-            self.contents.find(".inner_editor_wrapper").slideToggle(200);
-            var buttonIcon = $(this).find('.icon-white');
-            buttonIcon.toggleClass('icon-chevron-up');
-            buttonIcon.toggleClass('icon-chevron-down');
-        });
-    };
+  /**
+   * Internal destructor. Can be assigned via assignOnCloseHandler
+   *
+   * @private
+   */
+  Tab.prototype._destroy = function () {};
 
-    /**
-     * Internal destructor. Can be assigned via assignOnCloseHandler
-     *
-     * @private
-     */
-    Tab.prototype._destroy = function () {};
+  /**
+   * Assign the given function f as the click handler for the tab
+   *
+   * @param {function} f the function to call when the tab is clicked
+   */
+  Tab.prototype.assignTabClickHandler = function (f) {
+    var self = this;
+    self.tab.unbind("click").on("click", function (e) {
+      // Always close on middle mouse press
+      if (e.which == 2) {
+        // Simulate a click on the close tab button so any
+        // additional on-close behaviour is executed
+        self.tab.find(".lib_pl_close").click();
+        return;
+      }
+      f();
+    });
+  };
 
-    /**
-     * Assign the given function f as the click handler for the tab
-     *
-     * @param {function} f the function to call when the tab is clicked
-     */
-    Tab.prototype.assignTabClickHandler = function(f) {
-        var self = this;
-        self.tab.unbind("click").on("click", function (e) {
-            // Always close on middle mouse press
-            if (e.which == 2) {
-                // Simulate a click on the close tab button so any
-                // additional on-close behaviour is executed
-                self.tab.find(".lib_pl_close").click();
-                return;
-            }
-            f();
-        });
-    };
+  /**
+   * Assign the given function f as the click handler for the tab close button
+   *
+   * @param {function} f the function to call when the tab's close button is clicked
+   */
+  Tab.prototype.assignTabCloseClickHandler = function (f) {
+    this.tab.find(".lib_pl_close").unbind("click").click(f);
+  };
 
-    /**
-     * Assign the given function f as the click handler for the tab close button
-     *
-     * @param {function} f the function to call when the tab's close button is clicked
-     */
-    Tab.prototype.assignTabCloseClickHandler = function(f) {
-        this.tab.find(".lib_pl_close").unbind("click").click(f);
-    };
+  /**
+   * Assign an implicit destructor
+   *
+   * @param {function} fn function to run when this Tab is destroyed
+   */
+  Tab.prototype.assignOnCloseHandler = function (fn) {
+    this._destroy = fn;
+  };
 
-    /**
-     * Assign an implicit destructor
-     *
-     * @param {function} fn function to run when this Tab is destroyed
-     */
-    Tab.prototype.assignOnCloseHandler = function (fn) {
-        this._destroy = fn;
-    };
+  /**
+   * Open this tab in the right-hand pane and set it as the currently active tab
+   */
+  Tab.prototype.switchTo = function () {
+    var self = this;
+    $activeTab.contents.hide().removeClass("active-tab");
+    self.contents.addClass("active-tab").show();
 
-    /**
-     * Open this tab in the right-hand pane and set it as the currently active tab
-     */
-    Tab.prototype.switchTo = function() {
-        var self = this;
-        $activeTab.contents.hide().removeClass("active-tab");
-        self.contents.addClass("active-tab").show();
+    $activeTab.tab.removeClass("active");
+    self.tab.addClass("active");
 
-        $activeTab.tab.removeClass("active");
-        self.tab.addClass("active");
+    mod.updateActiveTab();
 
-        mod.updateActiveTab();
+    // In case we're adding a tab that wraps to the next row
+    // It's better to call this here so we don't have to call it in multiple places
+    mod.onResize();
+    return this; // For chaining
+  };
 
-        // In case we're adding a tab that wraps to the next row
-        // It's better to call this here so we don't have to call it in multiple places
-        mod.onResize();
-        return this;  // For chaining
-    };
+  /**
+   * Close the tab. Switches to the nearest open tab, prioritizing the
+   * more recent (rightmost) tabs
+   */
+  Tab.prototype.close = function () {
+    var self = this;
 
-    /**
-     * Close the tab. Switches to the nearest open tab, prioritizing the
-     * more recent (rightmost) tabs
-     */
-    Tab.prototype.close = function() {
-        var self = this;
+    var ascTabs = Object.keys($openTabs).sort(function (a, b) {
+        return a - b;
+      }),
+      pos = ascTabs.indexOf(self.uid),
+      toTab =
+        pos < ascTabs.length - 1
+          ? $openTabs[ascTabs[++pos]]
+          : $openTabs[ascTabs[--pos]];
+    delete $openTabs[self.uid]; // Remove this tab from the open tab array
+    delete $tabMap[self.id]; // Remove this tab from the internal tab mapping
 
-        var ascTabs = Object.keys($openTabs).sort(function(a, b){return a-b}),
-            pos = ascTabs.indexOf(self.uid),
-            toTab = pos < ascTabs.length-1 ? $openTabs[ascTabs[++pos]] : $openTabs[ascTabs[--pos]];
-        delete $openTabs[self.uid];  // Remove this tab from the open tab array
-        delete $tabMap[self.id];  // Remove this tab from the internal tab mapping
+    // Remove the relevant DOM elements (the tab and its contents)
+    if (self.uid !== 0) {
+      self.tab.remove();
+      self.contents.remove();
+    } else {
+      // only hide scheduled shows tab so we can still interact with it.
+      self.tab.hide();
+      self.contents.hide();
+    }
 
-        // Remove the relevant DOM elements (the tab and its contents)
-        if (self.uid !== 0) {
-            self.tab.remove();
-            self.contents.remove();
-        } else {
-            // only hide scheduled shows tab so we can still interact with it.
-            self.tab.hide();
-            self.contents.hide();
-        }
+    if (self.isActive() && toTab) {
+      // Closing the current tab, otherwise we don't need to switch tabs
+      toTab.switchTo();
+    } else {
+      mod.onResize();
+    }
 
+    if (Object.keys($openTabs).length < 1) {
+      $("#show_builder").hide();
+    }
 
-        if (self.isActive() && toTab) {  // Closing the current tab, otherwise we don't need to switch tabs
-            toTab.switchTo();
-        } else {
-            mod.onResize();
-        }
+    self._destroy();
+  };
 
-        if (Object.keys($openTabs).length < 1) {
-            $('#show_builder').hide();
-        }
+  /**
+   * Set the visible Tab name to the given string
+   *
+   * @param {string} name the name to set
+   */
+  Tab.prototype.setName = function (name) {
+    this.tab.find(".tab-name").text(name);
+    return this; // For chaining
+  };
 
-        self._destroy();
-    };
+  /**
+   * Check if the Tab object is the currently active (open) Tab
+   *
+   * @returns {boolean} true if the Tab is the currently active Tab
+   */
+  Tab.prototype.isActive = function () {
+    return this.contents.get(0) == $activeTab.contents.get(0);
+  };
 
-    /**
-     * Set the visible Tab name to the given string
-     *
-     * @param {string} name the name to set
-     */
-    Tab.prototype.setName = function(name) {
-        this.tab.find(".tab-name").text(name);
-        return this;  // For chaining
-    };
+  /**
+   * ScheduledTab object constructor
+   *
+   * The schedule tab is present in the DOM already on load, and we
+   * need to be able to reference it in the same way as other tabs
+   * (to avoid duplication and confusion) so we define it statically
+   *
+   * @constructor
+   */
+  var ScheduleTab = function () {
+    var self = this,
+      uid = 0,
+      tab = $("#schedule-tab"),
+      pane = $("#show_builder"),
+      contents = pane.find(".outer-datatable-wrapper");
+    self.id = 0;
+    self.uid = uid;
 
-    /**
-     * Check if the Tab object is the currently active (open) Tab
-     *
-     * @returns {boolean} true if the Tab is the currently active Tab
-     */
-    Tab.prototype.isActive = function() {
-        return this.contents.get(0) == $activeTab.contents.get(0);
-    };
+    tab.data("tab-id", self.id);
 
-    /**
-     * ScheduledTab object constructor
-     *
-     * The schedule tab is present in the DOM already on load, and we
-     * need to be able to reference it in the same way as other tabs
-     * (to avoid duplication and confusion) so we define it statically
-     *
-     * @constructor
-     */
-    var ScheduleTab = function() {
-        var self = this, uid = 0,
-            tab = $("#schedule-tab"),
-            pane = $("#show_builder"),
-            contents = pane.find(".outer-datatable-wrapper");
-        self.id = 0;
-        self.uid = uid;
+    self.wrapper = pane;
+    self.contents = contents;
+    self.tab = tab;
 
-        tab.data("tab-id", self.id);
+    self.assignTabClickHandler(function (e) {
+      if (!self.isActive()) {
+        self.switchTo();
+      }
+    });
 
-        self.wrapper = pane;
-        self.contents = contents;
-        self.tab = tab;
+    self.assignTabCloseClickHandler(function (e) {
+      self.close();
+    });
 
-        self.assignTabClickHandler(function(e) {
-            if (!self.isActive()) {
-                self.switchTo();
-            }
-        });
+    $openTabs[uid] = self;
+    $tabMap[self.id] = uid;
+  };
+  /**
+   * Subclass the Tab object
+   * @type {Tab}
+   */
+  ScheduleTab.prototype = Object.create(Tab.prototype);
+  ScheduleTab.prototype.constructor = ScheduleTab;
 
-        self.assignTabCloseClickHandler(function(e) {
-            self.close();
-        });
-
-        $openTabs[uid] = self;
-        $tabMap[self.id] = uid;
-    };
-    /**
-     * Subclass the Tab object
-     * @type {Tab}
-     */
-    ScheduleTab.prototype = Object.create(Tab.prototype);
-    ScheduleTab.prototype.constructor = ScheduleTab;
-
-    /*  #####################################################
+  /*  #####################################################
                            Module Functions
         ##################################################### */
 
-    /**
-     * Initialize the singleton ScheduleTab object on startup
-     */
-    mod.initScheduleTab = function() {
-        $scheduleTab = new ScheduleTab();
-        $activeTab = $scheduleTab;
-    };
+  /**
+   * Initialize the singleton ScheduleTab object on startup
+   */
+  mod.initScheduleTab = function () {
+    $scheduleTab = new ScheduleTab();
+    $activeTab = $scheduleTab;
+  };
 
-    /**
-     * Create a new Tab object and open it in the ShowBuilder pane
-     *
-     * @param {string} html         the HTML to render as the tab contents
-     * @param {string} uid          the unique ID for the tab. Uses the values in
-     *                              AIRTIME.library.MediaTypeStringEnum and the object ID
-     * @param {function} callback   an optional callback function to call once the
-     *                              Tab object is initialized
-     * @returns {Tab}               the created Tab object
-     */
-    mod.openTab = function(html, uid, callback) {
-        $('#show_builder').show();
-        var newTab = new Tab(html, uid);
-        if (callback) callback(newTab);
-        return newTab;
-    };
+  /**
+   * Create a new Tab object and open it in the ShowBuilder pane
+   *
+   * @param {string} html         the HTML to render as the tab contents
+   * @param {string} uid          the unique ID for the tab. Uses the values in
+   *                              AIRTIME.library.MediaTypeStringEnum and the object ID
+   * @param {function} callback   an optional callback function to call once the
+   *                              Tab object is initialized
+   * @returns {Tab}               the created Tab object
+   */
+  mod.openTab = function (html, uid, callback) {
+    $("#show_builder").show();
+    var newTab = new Tab(html, uid);
+    if (callback) callback(newTab);
+    return newTab;
+  };
 
-    /**
-     * open the schedule tab if if was closed
-     *
-     * @returns {Tab}
-     */
-    mod.openScheduleTab = function() {
-        var $scheduleTab = this.getScheduleTab();
-        $('#show_builder').show();
-        $openTabs[0] = $scheduleTab;
-        $scheduleTab.tab.show();
-        $scheduleTab.contents.show();
-        $scheduleTab.switchTo();
-        $scheduleTab.assignTabCloseClickHandler(function(e) {
-            $scheduleTab.close();
-        });
-    };
-
-    /**
-     * Updates the currently active tab
-     *
-     * Called when the user switches tabs for any reason
-     *
-     * NOTE: this function updates the currently active playlist
-     *       as a side-effect, which is necessary for playlist tabs
-     *       but not for other types of tabs... would be good to
-     *       get rid of this dependency at some point
-     */
-    mod.updateActiveTab = function() {
-        var t = $(".nav.nav-tabs .active");
-        $activeTab = mod.get(t.data("tab-id"));
-        if (!$activeTab) $activeTab = $scheduleTab;
-        if ($activeTab.contents.hasClass("pl-content")) {
-            AIRTIME.playlist.setCurrent($activeTab.contents);
-        }
-    };
-
-    /**
-     * Get the ScheduleTab object
-     *
-     * @returns {ScheduleTab}
-     */
-    mod.getScheduleTab = function() {
-        return $scheduleTab;
-    };
-
-    /**
-     * Get the currently active (open) Tab object
-     *
-     * @returns {Tab} the currently active tab
-     */
-    mod.getActiveTab = function() {
-        return $activeTab;
-    };
-
-    /**
-     * Given a tab id, get the corresponding Tab object
-     *
-     * @param {int|string}      id the tab or object ID of the Tab to retrieve
-     * @returns {Tab|undefined} the Tab object with the given ID, or undefined
-     *                          if no Tab with the given ID exists
-     */
-    mod.get = function(id) {
-        return $.isNumeric(id) ? $openTabs[$tabMap[id]] : $openTabs[id];
-    };
-
-    /**
-     * Adjust the margins on the right-hand pane when we have multiple rows of tabs
-     */
-    mod.onResize = function() {
-        var h = $(".panel-header .nav").height();
-        $(".pl-content").css("margin-top", h + 5); // 8px extra for padding
-        $("#show_builder_table_wrapper").css("top", h + 5);
-    };
-
-    /**
-     * Expose the Tab object so it can be subclassed
-     *
-     * @type {Function}
-     */
-    mod.Tab = Tab;
-
-    return AIRTIME;
-
-}(AIRTIME || {}));
-
-$(document).ready(function() {
-    var sb = $("#show_builder");
-    // Add text scrolling to tab names
-    sb.addTitles(".tab-name");
-    sb.find(".nav.nav-tabs").sortable({
-        containment: "parent",
-        distance: 25
+  /**
+   * open the schedule tab if if was closed
+   *
+   * @returns {Tab}
+   */
+  mod.openScheduleTab = function () {
+    var $scheduleTab = this.getScheduleTab();
+    $("#show_builder").show();
+    $openTabs[0] = $scheduleTab;
+    $scheduleTab.tab.show();
+    $scheduleTab.contents.show();
+    $scheduleTab.switchTo();
+    $scheduleTab.assignTabCloseClickHandler(function (e) {
+      $scheduleTab.close();
     });
-    // Initialize the ScheduleTab
-    AIRTIME.tabs.initScheduleTab();
+  };
+
+  /**
+   * Updates the currently active tab
+   *
+   * Called when the user switches tabs for any reason
+   *
+   * NOTE: this function updates the currently active playlist
+   *       as a side-effect, which is necessary for playlist tabs
+   *       but not for other types of tabs... would be good to
+   *       get rid of this dependency at some point
+   */
+  mod.updateActiveTab = function () {
+    var t = $(".nav.nav-tabs .active");
+    $activeTab = mod.get(t.data("tab-id"));
+    if (!$activeTab) $activeTab = $scheduleTab;
+    if ($activeTab.contents.hasClass("pl-content")) {
+      AIRTIME.playlist.setCurrent($activeTab.contents);
+    }
+  };
+
+  /**
+   * Get the ScheduleTab object
+   *
+   * @returns {ScheduleTab}
+   */
+  mod.getScheduleTab = function () {
+    return $scheduleTab;
+  };
+
+  /**
+   * Get the currently active (open) Tab object
+   *
+   * @returns {Tab} the currently active tab
+   */
+  mod.getActiveTab = function () {
+    return $activeTab;
+  };
+
+  /**
+   * Given a tab id, get the corresponding Tab object
+   *
+   * @param {int|string}      id the tab or object ID of the Tab to retrieve
+   * @returns {Tab|undefined} the Tab object with the given ID, or undefined
+   *                          if no Tab with the given ID exists
+   */
+  mod.get = function (id) {
+    return $.isNumeric(id) ? $openTabs[$tabMap[id]] : $openTabs[id];
+  };
+
+  /**
+   * Adjust the margins on the right-hand pane when we have multiple rows of tabs
+   */
+  mod.onResize = function () {
+    var h = $(".panel-header .nav").height();
+    $(".pl-content").css("margin-top", h + 5); // 8px extra for padding
+    $("#show_builder_table_wrapper").css("top", h + 5);
+  };
+
+  /**
+   * Expose the Tab object so it can be subclassed
+   *
+   * @type {Function}
+   */
+  mod.Tab = Tab;
+
+  return AIRTIME;
+})(AIRTIME || {});
+
+$(document).ready(function () {
+  var sb = $("#show_builder");
+  // Add text scrolling to tab names
+  sb.addTitles(".tab-name");
+  sb.find(".nav.nav-tabs").sortable({
+    containment: "parent",
+    distance: 25,
+  });
+  // Initialize the ScheduleTab
+  AIRTIME.tabs.initScheduleTab();
 });
 $(window).resize(AIRTIME.tabs.onResize);
diff --git a/legacy/public/js/airtime/status/status.js b/legacy/public/js/airtime/status/status.js
index 0f75069fc..28e7e36b0 100644
--- a/legacy/public/js/airtime/status/status.js
+++ b/legacy/public/js/airtime/status/status.js
@@ -1,79 +1,101 @@
-function generatePartitions(partitions){
+function generatePartitions(partitions) {
+  var rowTemplate =
+    '<tr class="partition-info">' +
+    '<td><span class="strong">' +
+    $.i18n._("Disk") +
+    " #%s</span>" +
+    '<ul id="watched-dir-list-%s">' +
+    "</ul>" +
+    "</td>" +
+    "<td>%sGB of %sGB</td>" +
+    '<td colspan="3">' +
+    '<div class="big">' +
+    '<div class="diskspace" style="width:%s%%;">' +
+    "</div>" +
+    "</div>" +
+    "<div>%s%% " +
+    $.i18n._("in use") +
+    "</div>" +
+    "</td>" +
+    "</tr>";
 
-    var rowTemplate =
-            '<tr class="partition-info">'+
-                '<td><span class="strong">'+$.i18n._("Disk")+' #%s</span>'+
-                    '<ul id="watched-dir-list-%s">'+
-                    '</ul>'+
-                '</td>'+
-                '<td>%sGB of %sGB</td>'+
-                '<td colspan="3">'+
-                    '<div class="big">'+
-                        '<div class="diskspace" style="width:%s%%;">'+
-                        '</div>'+
-                    '</div>'+
-                    '<div>%s%% '+$.i18n._("in use")+'</div>'+
-                '</td>'+
-            '</tr>';
+  $(".partition-info").remove();
+  var lastElement = $("#partitions");
+  for (var i = 0; i < partitions.length; i++) {
+    var spaceUsed = partitions[i].totalSpace - partitions[i].totalFreeSpace;
+    var totalSpace = partitions[i].totalSpace;
+    var percUsed = sprintf("%01.1f", (spaceUsed / totalSpace) * 100);
 
-    $(".partition-info").remove();
-    var lastElement = $('#partitions');
-    for (var i=0; i<partitions.length; i++){
-        var spaceUsed = partitions[i].totalSpace-partitions[i].totalFreeSpace;
-        var totalSpace = partitions[i].totalSpace;
-        var percUsed = sprintf("%01.1f", spaceUsed/totalSpace*100);
+    var spaceUsedGb = sprintf("%01.1f", spaceUsed / Math.pow(2, 30));
+    var totalSpaceGb = sprintf("%01.1f", totalSpace / Math.pow(2, 30));
 
-        var spaceUsedGb = sprintf("%01.1f", spaceUsed/Math.pow(2, 30));
-        var totalSpaceGb = sprintf("%01.1f", totalSpace/Math.pow(2, 30));
+    var row = sprintf(
+      rowTemplate,
+      i + 1,
+      i,
+      spaceUsedGb,
+      totalSpaceGb,
+      percUsed,
+      percUsed
+    );
+    var tr = $(row);
+    lastElement.after(tr);
 
-        var row = sprintf(rowTemplate, i+1, i, spaceUsedGb, totalSpaceGb, percUsed, percUsed);
-        var tr = $(row);
-        lastElement.after(tr);
-
-        if (partitions[i].dirs){
-            var watched_dirs_ul = $('#watched-dir-list-'+i);
-            for (var j=0; j<partitions[i].dirs.length; j++){
-                watched_dirs_ul.append('<li>'+partitions[i].dirs[j]+'</li>');
-            }
-        }
-        lastElement = tr;
+    if (partitions[i].dirs) {
+      var watched_dirs_ul = $("#watched-dir-list-" + i);
+      for (var j = 0; j < partitions[i].dirs.length; j++) {
+        watched_dirs_ul.append("<li>" + partitions[i].dirs[j] + "</li>");
+      }
     }
-
+    lastElement = tr;
+  }
 }
 
-function success(data, textStatus, jqXHR){
-    var services = data.status.services;
+function success(data, textStatus, jqXHR) {
+  var services = data.status.services;
 
-    for (var key in services) {
-        var s = services[key];
-        if (s) {
-            var children = $("#"+s.name).children();
-            $(children[0]).text(s.name);
+  for (var key in services) {
+    var s = services[key];
+    if (s) {
+      var children = $("#" + s.name).children();
+      $(children[0]).text(s.name);
 
-            var status_class = "not-available-icon";
-            if (s.status == 0){
-                status_class = "checked-icon";
-            } else if (s.status == 1) {
-                status_class = "warning-icon";
-            }
+      var status_class = "not-available-icon";
+      if (s.status == 0) {
+        status_class = "checked-icon";
+      } else if (s.status == 1) {
+        status_class = "warning-icon";
+      }
 
-            $($(children[1]).children()[0]).attr("class", status_class);
-            $(children[2]).text(sprintf('%(days)sd %(hours)sh %(minutes)sm %(seconds)ss', convertSecondsToDaysHoursMinutesSeconds(s.uptime_seconds)));
-            $(children[3]).text(s.cpu_perc);
-            $(children[4]).text(sprintf('%01.1fMB (%s)', parseInt(s.memory_kb)/1000, s.memory_perc));
-        }
+      $($(children[1]).children()[0]).attr("class", status_class);
+      $(children[2]).text(
+        sprintf(
+          "%(days)sd %(hours)sh %(minutes)sm %(seconds)ss",
+          convertSecondsToDaysHoursMinutesSeconds(s.uptime_seconds)
+        )
+      );
+      $(children[3]).text(s.cpu_perc);
+      $(children[4]).text(
+        sprintf("%01.1fMB (%s)", parseInt(s.memory_kb) / 1000, s.memory_perc)
+      );
     }
-    if (data.status.partitions){
-        generatePartitions(data.status.partitions);
-    }
-    setTimeout(function(){updateStatus(false);}, 5000);
+  }
+  if (data.status.partitions) {
+    generatePartitions(data.status.partitions);
+  }
+  setTimeout(function () {
+    updateStatus(false);
+  }, 5000);
 }
 
-function updateStatus(getDiskInfo){
-    $.getJSON( baseUrl+"api/status/format/json/diskinfo/"+getDiskInfo, null, success);
-
+function updateStatus(getDiskInfo) {
+  $.getJSON(
+    baseUrl + "api/status/format/json/diskinfo/" + getDiskInfo,
+    null,
+    success
+  );
 }
 
-$(document).ready(function() {
-    updateStatus(true);
+$(document).ready(function () {
+  updateStatus(true);
 });
diff --git a/legacy/public/js/airtime/tracktype/tracktype.js b/legacy/public/js/airtime/tracktype/tracktype.js
index 7c75daa6e..2adff1b04 100644
--- a/legacy/public/js/airtime/tracktype/tracktype.js
+++ b/legacy/public/js/airtime/tracktype/tracktype.js
@@ -1,151 +1,190 @@
+function populateForm(entries) {
+  $(".errors").remove();
+  $(".success").remove();
 
-function populateForm(entries){
+  $("#tracktype_id").val(entries.id);
+  $("#code").val(entries.code);
+  $("#type_name").val(entries.type_name);
+  $("#description").val(entries.description);
 
-    $('.errors').remove();
-    $('.success').remove();
+  if (entries.visibility) {
+    var visibility_value = 1;
+  } else {
+    var visibility_value = 0;
+  }
+  $("#visibility").val(visibility_value);
 
-    $('#tracktype_id').val(entries.id);
-    $('#code').val(entries.code);
-    $('#type_name').val(entries.type_name);
-    $('#description').val(entries.description);
-
-    if (entries.visibility) {
-      var visibility_value = 1;
-    } else {
-      var visibility_value = 0;
-    }
-    $('#visibility').val(visibility_value);
-
-    if (entries.id.length != 0){
-        $('#code').attr('readonly', 'readonly');
-    } else {
-        $('#code').removeAttr('readonly');
-    }
+  if (entries.id.length != 0) {
+    $("#code").attr("readonly", "readonly");
+  } else {
+    $("#code").removeAttr("readonly");
+  }
 }
 
-function rowClickCallback(row_id){
-      $.ajax({ url: baseUrl+'Tracktype/get-tracktype-data/id/'+ row_id +'/format/json', dataType:"json", success:function(data){
-        populateForm(data.entries);
-          $("#tracktype_details").css("visibility", "visible");
-	  }});
+function rowClickCallback(row_id) {
+  $.ajax({
+    url: baseUrl + "Tracktype/get-tracktype-data/id/" + row_id + "/format/json",
+    dataType: "json",
+    success: function (data) {
+      populateForm(data.entries);
+      $("#tracktype_details").css("visibility", "visible");
+    },
+  });
 }
 
 function removeTracktypeCallback(row_id, nRow) {
-    if (confirm($.i18n._("Are you sure you want to delete this tracktype?"))) {
-        $.ajax({
-            url: baseUrl + 'Tracktype/remove-tracktype/id/' + row_id + '/format/json',
-            dataType: "text",
-            success: function (data) {
-                var o = $('#tracktypes_datatable').dataTable().fnDeleteRow(nRow);
-            }
-        });
-    }
+  if (confirm($.i18n._("Are you sure you want to delete this tracktype?"))) {
+    $.ajax({
+      url: baseUrl + "Tracktype/remove-tracktype/id/" + row_id + "/format/json",
+      dataType: "text",
+      success: function (data) {
+        var o = $("#tracktypes_datatable").dataTable().fnDeleteRow(nRow);
+      },
+    });
+  }
 }
 
-function rowCallback( nRow, aData, iDisplayIndex ){
-    $(nRow).click(function(){rowClickCallback(aData['id'])});
-    if( aData['delete'] != "self"){
-    	$('td:eq(4)', nRow).append( '<span class="ui-icon ui-icon-closethick"></span>').children('span').click(function(e){e.stopPropagation(); removeTracktypeCallback(aData['id'], nRow)});
-    }else{
-    	$('td:eq(4)', nRow).empty().append( '<span class="ui-icon ui-icon-closethick"></span>').children('span').click(function(e){e.stopPropagation(); alert("Can't delete yourself!")});
-    }
+function rowCallback(nRow, aData, iDisplayIndex) {
+  $(nRow).click(function () {
+    rowClickCallback(aData["id"]);
+  });
+  if (aData["delete"] != "self") {
+    $("td:eq(4)", nRow)
+      .append('<span class="ui-icon ui-icon-closethick"></span>')
+      .children("span")
+      .click(function (e) {
+        e.stopPropagation();
+        removeTracktypeCallback(aData["id"], nRow);
+      });
+  } else {
+    $("td:eq(4)", nRow)
+      .empty()
+      .append('<span class="ui-icon ui-icon-closethick"></span>')
+      .children("span")
+      .click(function (e) {
+        e.stopPropagation();
+        alert("Can't delete yourself!");
+      });
+  }
 
-    if ( aData['visibility'] == "1" ) {
-	    $('td:eq(3)', nRow).html( $.i18n._('Enabled') );
-    } else {
-	    $('td:eq(3)', nRow).html( $.i18n._('Disabled') );
-    }
+  if (aData["visibility"] == "1") {
+    $("td:eq(3)", nRow).html($.i18n._("Enabled"));
+  } else {
+    $("td:eq(3)", nRow).html($.i18n._("Disabled"));
+  }
 
-    return nRow;
+  return nRow;
 }
 
 function populateTracktypeTable() {
-    var dt = $('#tracktypes_datatable');
-    dt.dataTable( {
-        "bProcessing": true,
-        "bServerSide": true,
-        "sAjaxSource": baseUrl+"Tracktype/get-tracktype-data-table-info/format/json",
-        "fnServerData": function ( sSource, aoData, fnCallback ) {
-            $.ajax( {
-                "dataType": 'json',
-                "type": "POST",
-                "url": sSource,
-                "data": aoData,
-                "success": fnCallback
-            } );
-        },
-        "fnRowCallback": rowCallback,
-        "aoColumns": [
-            /* Id */         { "sName": "id", "bSearchable": false, "bVisible": false, "mDataProp": "id" },
-            /* code */  { "sName": "code", "mDataProp": "code" },
-            /* type_name */ { "sName": "type_name", "mDataProp": "type_name" },
-            /* description */  { "sName": "description", "mDataProp": "description" },
-            /* visibility */  { "sName": "visibility", "bSearchable": false, "mDataProp": "visibility" },
-            /* del button */ { "sName": "null as delete", "bSearchable": false, "bSortable": false, "mDataProp": "delete"}
-        ],
-        "bJQueryUI": true,
-        "bAutoWidth": false,
-        "bLengthChange": false,
-        "oLanguage": getDatatablesStrings({
-            "sEmptyTable": $.i18n._("No track types were found."),
-            "sEmptyTable":     $.i18n._("No track types found"),
-            "sZeroRecords":    $.i18n._("No matching track types found"),
-            "sInfo":           $.i18n._("Showing _START_ to _END_ of _TOTAL_ track types"),
-            "sInfoEmpty":      $.i18n._("Showing 0 to 0 of 0 track types"),
-            "sInfoFiltered":   $.i18n._("(filtered from _MAX_ total track types)"),
-        }),
-        "sDom": '<"H"lf<"dt-process-rel"r>><"#tracktype_list_inner_wrapper"t><"F"ip>'
-    });
+  var dt = $("#tracktypes_datatable");
+  dt.dataTable({
+    bProcessing: true,
+    bServerSide: true,
+    sAjaxSource:
+      baseUrl + "Tracktype/get-tracktype-data-table-info/format/json",
+    fnServerData: function (sSource, aoData, fnCallback) {
+      $.ajax({
+        dataType: "json",
+        type: "POST",
+        url: sSource,
+        data: aoData,
+        success: fnCallback,
+      });
+    },
+    fnRowCallback: rowCallback,
+    aoColumns: [
+      /* Id */ {
+        sName: "id",
+        bSearchable: false,
+        bVisible: false,
+        mDataProp: "id",
+      },
+      /* code */ { sName: "code", mDataProp: "code" },
+      /* type_name */ { sName: "type_name", mDataProp: "type_name" },
+      /* description */ { sName: "description", mDataProp: "description" },
+      /* visibility */ {
+        sName: "visibility",
+        bSearchable: false,
+        mDataProp: "visibility",
+      },
+      /* del button */ {
+        sName: "null as delete",
+        bSearchable: false,
+        bSortable: false,
+        mDataProp: "delete",
+      },
+    ],
+    bJQueryUI: true,
+    bAutoWidth: false,
+    bLengthChange: false,
+    oLanguage: getDatatablesStrings({
+      sEmptyTable: $.i18n._("No track types were found."),
+      sEmptyTable: $.i18n._("No track types found"),
+      sZeroRecords: $.i18n._("No matching track types found"),
+      sInfo: $.i18n._("Showing _START_ to _END_ of _TOTAL_ track types"),
+      sInfoEmpty: $.i18n._("Showing 0 to 0 of 0 track types"),
+      sInfoFiltered: $.i18n._("(filtered from _MAX_ total track types)"),
+    }),
+    sDom: '<"H"lf<"dt-process-rel"r>><"#tracktype_list_inner_wrapper"t><"F"ip>',
+  });
 }
 
 function sizeFormElements() {
-    $("dt[id$='label']").addClass('tracktype-form-label');
-    $("dd[id$='element']").addClass('tracktype-form-element');
+  $("dt[id$='label']").addClass("tracktype-form-label");
+  $("dd[id$='element']").addClass("tracktype-form-element");
 }
 
 function initTracktypeData() {
-    var visibility = $('#visibility');
+  var visibility = $("#visibility");
 
-    var table = $("#tracktypes_datable");//.DataTable();
-    $('.datatable tbody').on( 'click', 'tr', function () {
-        $(this).parent().find('tr.selected').removeClass('selected');
-        $(this).addClass('selected');
-    } );
+  var table = $("#tracktypes_datable"); //.DataTable();
+  $(".datatable tbody").on("click", "tr", function () {
+    $(this).parent().find("tr.selected").removeClass("selected");
+    $(this).addClass("selected");
+  });
 
-    $('#button').click( function () {
-        table.row('.selected').remove().draw( false );
-    } );
+  $("#button").click(function () {
+    table.row(".selected").remove().draw(false);
+  });
 
-    var newTracktype = {code:"", type_name:"", description:"", visibility:"1", id:""};
+  var newTracktype = {
+    code: "",
+    type_name: "",
+    description: "",
+    visibility: "1",
+    id: "",
+  };
 
-    $('#add_tracktype_button').live('click', function(){
-        populateForm(newTracktype);
-        $("#tracktype_details").css("visibility", "visible");
-    });
+  $("#add_tracktype_button").live("click", function () {
+    populateForm(newTracktype);
+    $("#tracktype_details").css("visibility", "visible");
+  });
 }
 
-$(document).ready(function() {
+$(document).ready(function () {
+  populateTracktypeTable();
+  initTracktypeData();
 
-    populateTracktypeTable();
-    initTracktypeData();
+  $("#save_tracktype").live("click", function () {
+    var data = $("#tracktype_form").serialize();
+    var url = baseUrl + "Tracktype/add-tracktype";
 
-    $('#save_tracktype').live('click', function(){
-        var data = $('#tracktype_form').serialize();
-        var url = baseUrl+'Tracktype/add-tracktype';
-
-        $.post(url, {format: "json", data: data}, function(json){
-            if (json.valid === "true") {
-                $('#content').empty().append(json.html);
-                populateTracktypeTable();
-                init(); // Reinitialize
-            } else {
-                //if form is invalid we only need to redraw the form
-                $('#tracktype_form').empty().append($(json.html).find('#tracktype_form').children());
-            }
-            setTimeout(removeSuccessMsg, 5000);
-            sizeFormElements();
-        });
+    $.post(url, { format: "json", data: data }, function (json) {
+      if (json.valid === "true") {
+        $("#content").empty().append(json.html);
+        populateTracktypeTable();
+        init(); // Reinitialize
+      } else {
+        //if form is invalid we only need to redraw the form
+        $("#tracktype_form")
+          .empty()
+          .append($(json.html).find("#tracktype_form").children());
+      }
+      setTimeout(removeSuccessMsg, 5000);
+      sizeFormElements();
     });
+  });
 
-    sizeFormElements();
+  sizeFormElements();
 });
diff --git a/legacy/public/js/airtime/user/user.js b/legacy/public/js/airtime/user/user.js
index e43efb6b8..bd7cdd119 100644
--- a/legacy/public/js/airtime/user/user.js
+++ b/legacy/public/js/airtime/user/user.js
@@ -1,258 +1,314 @@
-function populateForm(entries){
-    //$('#user_details').show();
+function populateForm(entries) {
+  //$('#user_details').show();
 
-    $('.errors').remove();
-    $('.success').remove();
+  $(".errors").remove();
+  $(".success").remove();
 
-    if (entries.type === 'S')
-    {
-    	$("#user_details").hide();
-    	$("#user_details_superadmin_message").show();
-    	$('#type').attr('disabled', '1');
-    } else {
-    	$("#user_details").show();
-    	$("#user_details_superadmin_message").hide();
-    	$('#type').removeAttr('disabled');
-    }
+  if (entries.type === "S") {
+    $("#user_details").hide();
+    $("#user_details_superadmin_message").show();
+    $("#type").attr("disabled", "1");
+  } else {
+    $("#user_details").show();
+    $("#user_details_superadmin_message").hide();
+    $("#type").removeAttr("disabled");
+  }
 
-    $('#user_id').val(entries.id);
-    $('#login').val(entries.login);
-    $('#first_name').val(entries.first_name);
-    $('#last_name').val(entries.last_name);
-    $('#type').val(entries.type);
-    $('#email').val(entries.email);
-    $('#cell_phone').val(entries.cell_phone);
-    $('#skype').val(entries.skype_contact);
-    $('#jabber').val(entries.jabber_contact);
+  $("#user_id").val(entries.id);
+  $("#login").val(entries.login);
+  $("#first_name").val(entries.first_name);
+  $("#last_name").val(entries.last_name);
+  $("#type").val(entries.type);
+  $("#email").val(entries.email);
+  $("#cell_phone").val(entries.cell_phone);
+  $("#skype").val(entries.skype_contact);
+  $("#jabber").val(entries.jabber_contact);
 
-    if (entries.id.length != 0){
-        $('#login').attr('readonly', 'readonly');
-        $('#password').val("xxxxxx");
-        $('#passwordVerify').val("xxxxxx");
-    } else {
-        $('#login').removeAttr('readonly');
-        $('#password').val("");
-        $('#passwordVerify').val("");
-    }
+  if (entries.id.length != 0) {
+    $("#login").attr("readonly", "readonly");
+    $("#password").val("xxxxxx");
+    $("#passwordVerify").val("xxxxxx");
+  } else {
+    $("#login").removeAttr("readonly");
+    $("#password").val("");
+    $("#passwordVerify").val("");
+  }
 }
 
-function rowClickCallback(row_id){
-      $.ajax({ url: baseUrl+'User/get-user-data/id/'+ row_id +'/format/json', dataType:"json", success:function(data){
-        populateForm(data.entries);
-          $("#user_details").css("visibility", "visible");
-	  }});
+function rowClickCallback(row_id) {
+  $.ajax({
+    url: baseUrl + "User/get-user-data/id/" + row_id + "/format/json",
+    dataType: "json",
+    success: function (data) {
+      populateForm(data.entries);
+      $("#user_details").css("visibility", "visible");
+    },
+  });
 }
 
 function removeUserCallback(row_id, nRow) {
-    if (confirm($.i18n._("Are you sure you want to delete this user?"))) {
-        $.ajax({
-            url: baseUrl + 'User/remove-user/id/' + row_id + '/format/json',
-            dataType: "text",
-            success: function (data) {
-                var o = $('#users_datatable').dataTable().fnDeleteRow(nRow);
-            }
-        });
-    }
+  if (confirm($.i18n._("Are you sure you want to delete this user?"))) {
+    $.ajax({
+      url: baseUrl + "User/remove-user/id/" + row_id + "/format/json",
+      dataType: "text",
+      success: function (data) {
+        var o = $("#users_datatable").dataTable().fnDeleteRow(nRow);
+      },
+    });
+  }
 }
 
-function rowCallback( nRow, aData, iDisplayIndex ){
-    $(nRow).click(function(){rowClickCallback(aData['id'])});
-    if( aData['delete'] != "self"){
-    	$('td:eq(4)', nRow).append( '<span class="ui-icon ui-icon-closethick"></span>').children('span').click(function(e){e.stopPropagation(); removeUserCallback(aData['id'], nRow)});
-    }else{
-    	$('td:eq(4)', nRow).empty().append( '<span class="ui-icon ui-icon-closethick"></span>').children('span').click(function(e){e.stopPropagation(); alert($.i18n._("Can't delete yourself!"))});
-    }
+function rowCallback(nRow, aData, iDisplayIndex) {
+  $(nRow).click(function () {
+    rowClickCallback(aData["id"]);
+  });
+  if (aData["delete"] != "self") {
+    $("td:eq(4)", nRow)
+      .append('<span class="ui-icon ui-icon-closethick"></span>')
+      .children("span")
+      .click(function (e) {
+        e.stopPropagation();
+        removeUserCallback(aData["id"], nRow);
+      });
+  } else {
+    $("td:eq(4)", nRow)
+      .empty()
+      .append('<span class="ui-icon ui-icon-closethick"></span>')
+      .children("span")
+      .click(function (e) {
+        e.stopPropagation();
+        alert($.i18n._("Can't delete yourself!"));
+      });
+  }
 
-    if ( aData['type'] == "A" )
-    {
-	    $('td:eq(3)', nRow).html( $.i18n._('Admin') );
-    } else if ( aData['type'] == "H" )
-    {
-	    $('td:eq(3)', nRow).html( $.i18n._('DJ') );
-    } else if ( aData['type'] == "G" )
-    {
-	    $('td:eq(3)', nRow).html( $.i18n._('Guest') );
-    } else if ( aData['type'] == "P" )
-    {
-    	$('td:eq(3)', nRow).html( $.i18n._('Program Manager') );
-    } else if ( aData['type'] == "S" )
-    {
-    	$('td:eq(3)', nRow).html( $.i18n._('Super Admin') );
-    	$('td:eq(4)', nRow).html(""); //Disable deleting the super admin
-    }
+  if (aData["type"] == "A") {
+    $("td:eq(3)", nRow).html($.i18n._("Admin"));
+  } else if (aData["type"] == "H") {
+    $("td:eq(3)", nRow).html($.i18n._("DJ"));
+  } else if (aData["type"] == "G") {
+    $("td:eq(3)", nRow).html($.i18n._("Guest"));
+  } else if (aData["type"] == "P") {
+    $("td:eq(3)", nRow).html($.i18n._("Program Manager"));
+  } else if (aData["type"] == "S") {
+    $("td:eq(3)", nRow).html($.i18n._("Super Admin"));
+    $("td:eq(4)", nRow).html(""); //Disable deleting the super admin
+  }
 
-    return nRow;
+  return nRow;
 }
 
 function populateUserTable() {
-    var dt = $('#users_datatable');
-    dt.dataTable( {
-        "bProcessing": true,
-        "bServerSide": true,
-        "sAjaxSource": baseUrl+"User/get-user-data-table-info/format/json",
-        "fnServerData": function ( sSource, aoData, fnCallback ) {
-            $.ajax( {
-                "dataType": 'json',
-                "type": "POST",
-                "url": sSource,
-                "data": aoData,
-                "success": fnCallback
-            } );
-        },
-        "fnRowCallback": rowCallback,
-        "aoColumns": [
-            /* Id */         { "sName": "id", "bSearchable": false, "bVisible": false, "mDataProp": "id" },
-            /* user name */  { "sName": "login", "mDataProp": "login" },
-            /* first name */ { "sName": "first_name", "mDataProp": "first_name" },
-            /* last name */  { "sName": "last_name", "mDataProp": "last_name" },
-            /* user type */  { "sName": "type", "bSearchable": false, "mDataProp": "type" },
-            /* del button */ { "sName": "null as delete", "bSearchable": false, "bSortable": false, "mDataProp": "delete"}
-        ],
-        "bJQueryUI": true,
-        "bAutoWidth": false,
-        "bLengthChange": false,
-        "oLanguage": getDatatablesStrings({
-            "sEmptyTable": $.i18n._("No users were found."),
-            "sEmptyTable":     $.i18n._("No users found"),
-            "sZeroRecords":    $.i18n._("No matching users found"),
-            "sInfo":           $.i18n._("Showing _START_ to _END_ of _TOTAL_ users"),
-            "sInfoEmpty":      $.i18n._("Showing 0 to 0 of 0 users"),
-            "sInfoFiltered":   $.i18n._("(filtered from _MAX_ total users)"),
-        }),
-        "sDom": '<"H"lf<"dt-process-rel"r>><"#user_list_inner_wrapper"t><"F"ip>'
-    });
+  var dt = $("#users_datatable");
+  dt.dataTable({
+    bProcessing: true,
+    bServerSide: true,
+    sAjaxSource: baseUrl + "User/get-user-data-table-info/format/json",
+    fnServerData: function (sSource, aoData, fnCallback) {
+      $.ajax({
+        dataType: "json",
+        type: "POST",
+        url: sSource,
+        data: aoData,
+        success: fnCallback,
+      });
+    },
+    fnRowCallback: rowCallback,
+    aoColumns: [
+      /* Id */ {
+        sName: "id",
+        bSearchable: false,
+        bVisible: false,
+        mDataProp: "id",
+      },
+      /* user name */ { sName: "login", mDataProp: "login" },
+      /* first name */ { sName: "first_name", mDataProp: "first_name" },
+      /* last name */ { sName: "last_name", mDataProp: "last_name" },
+      /* user type */ { sName: "type", bSearchable: false, mDataProp: "type" },
+      /* del button */ {
+        sName: "null as delete",
+        bSearchable: false,
+        bSortable: false,
+        mDataProp: "delete",
+      },
+    ],
+    bJQueryUI: true,
+    bAutoWidth: false,
+    bLengthChange: false,
+    oLanguage: getDatatablesStrings({
+      sEmptyTable: $.i18n._("No users were found."),
+      sEmptyTable: $.i18n._("No users found"),
+      sZeroRecords: $.i18n._("No matching users found"),
+      sInfo: $.i18n._("Showing _START_ to _END_ of _TOTAL_ users"),
+      sInfoEmpty: $.i18n._("Showing 0 to 0 of 0 users"),
+      sInfoFiltered: $.i18n._("(filtered from _MAX_ total users)"),
+    }),
+    sDom: '<"H"lf<"dt-process-rel"r>><"#user_list_inner_wrapper"t><"F"ip>',
+  });
 }
 
 function sizeFormElements() {
-    $("dt[id$='label']").addClass('user-form-label');
-    $("dd[id$='element']").addClass('user-form-element');
+  $("dt[id$='label']").addClass("user-form-label");
+  $("dd[id$='element']").addClass("user-form-element");
 }
 
 function assignUserRightsToUserTypes() {
-    //assign user-rights and id to each user type option so we can
-    //display user rights for each with tipsy tooltip
-    $.each($('#type').children(), function(i, opt) {
-        switch ($(this).val()) {
-            case 'G':
-                $(this).attr('id', 'user-type-G');
-                $(this).attr('user-rights',
-                    $.i18n._('Guests can do the following:')+'<br><br>'+
-                    $.i18n._('View schedule')+'<br>'+
-                    $.i18n._('View show content')
-                );
-                break;
-            case 'H':
-                $(this).attr('id', 'user-type-H');
-                $(this).attr('user-rights',
-                    $.i18n._('DJs can do the following:')+'<br><br>'+
-                    $.i18n._('View schedule')+'<br>'+
-                    $.i18n._('View show content')+'<br>'+
-                    $.i18n._('Manage assigned show content')+'<br>'+
-                    $.i18n._('Import media files')+'<br>'+
-                    $.i18n._('Create playlists, smart blocks, and webstreams')+'<br>'+
-                    $.i18n._('Manage their own library content')
-                );
-                break;
-            case 'P':
-                $(this).attr('id', 'user-type-P');
-                $(this).attr('user-rights',
-                    $.i18n._('Program Managers can do the following:')+'<br><br>'+
-                    $.i18n._('View schedule')+'<br>'+
-                    $.i18n._('View and manage show content')+'<br>'+
-                    $.i18n._('Schedule shows')+'<br>'+
-                    $.i18n._('Import media files')+'<br>'+
-                    $.i18n._('Create playlists, smart blocks, and webstreams')+'<br>'+
-                    $.i18n._('Manage all library content')
-                );
-                break;
-            case 'A':
-                $(this).attr('id', 'user-type-A');
-                $(this).attr('user-rights',
-                    $.i18n._('Admins can do the following:')+'<br><br>'+
-                    $.i18n._('Manage preferences')+'<br>'+
-                    $.i18n._('Manage users')+'<br>'+
-                    $.i18n._('Manage watched folders')+'<br>'+
-                    $.i18n._('Send support feedback')+'<br>'+
-                    $.i18n._('View system status')+'<br>'+
-                    $.i18n._('Access playout history')+'<br>'+
-                    $.i18n._('View listener stats')+'<br>'+
-                    $.i18n._('View schedule')+'<br>'+
-                    $.i18n._('View and manage show content')+'<br>'+
-                    $.i18n._('Schedule shows')+'<br>'+
-                    $.i18n._('Import media files')+'<br>'+
-                    $.i18n._('Create playlists, smart blocks, and webstreams')+'<br>'+
-                    $.i18n._('Manage all library content')
-                );
-                break;
-        }
-    });
+  //assign user-rights and id to each user type option so we can
+  //display user rights for each with tipsy tooltip
+  $.each($("#type").children(), function (i, opt) {
+    switch ($(this).val()) {
+      case "G":
+        $(this).attr("id", "user-type-G");
+        $(this).attr(
+          "user-rights",
+          $.i18n._("Guests can do the following:") +
+            "<br><br>" +
+            $.i18n._("View schedule") +
+            "<br>" +
+            $.i18n._("View show content")
+        );
+        break;
+      case "H":
+        $(this).attr("id", "user-type-H");
+        $(this).attr(
+          "user-rights",
+          $.i18n._("DJs can do the following:") +
+            "<br><br>" +
+            $.i18n._("View schedule") +
+            "<br>" +
+            $.i18n._("View show content") +
+            "<br>" +
+            $.i18n._("Manage assigned show content") +
+            "<br>" +
+            $.i18n._("Import media files") +
+            "<br>" +
+            $.i18n._("Create playlists, smart blocks, and webstreams") +
+            "<br>" +
+            $.i18n._("Manage their own library content")
+        );
+        break;
+      case "P":
+        $(this).attr("id", "user-type-P");
+        $(this).attr(
+          "user-rights",
+          $.i18n._("Program Managers can do the following:") +
+            "<br><br>" +
+            $.i18n._("View schedule") +
+            "<br>" +
+            $.i18n._("View and manage show content") +
+            "<br>" +
+            $.i18n._("Schedule shows") +
+            "<br>" +
+            $.i18n._("Import media files") +
+            "<br>" +
+            $.i18n._("Create playlists, smart blocks, and webstreams") +
+            "<br>" +
+            $.i18n._("Manage all library content")
+        );
+        break;
+      case "A":
+        $(this).attr("id", "user-type-A");
+        $(this).attr(
+          "user-rights",
+          $.i18n._("Admins can do the following:") +
+            "<br><br>" +
+            $.i18n._("Manage preferences") +
+            "<br>" +
+            $.i18n._("Manage users") +
+            "<br>" +
+            $.i18n._("Manage watched folders") +
+            "<br>" +
+            $.i18n._("Send support feedback") +
+            "<br>" +
+            $.i18n._("View system status") +
+            "<br>" +
+            $.i18n._("Access playout history") +
+            "<br>" +
+            $.i18n._("View listener stats") +
+            "<br>" +
+            $.i18n._("View schedule") +
+            "<br>" +
+            $.i18n._("View and manage show content") +
+            "<br>" +
+            $.i18n._("Schedule shows") +
+            "<br>" +
+            $.i18n._("Import media files") +
+            "<br>" +
+            $.i18n._("Create playlists, smart blocks, and webstreams") +
+            "<br>" +
+            $.i18n._("Manage all library content")
+        );
+        break;
+    }
+  });
 }
 
 function initUserData() {
-    var type = $('#type');
+  var type = $("#type");
 
-    type.live("change", function(){
-        //when the title changes on live tipsy tooltips the changes take
-        //affect the next time tipsy is shown so we need to hide and re-show it
-        $(this).tipsy('hide').tipsy('show');
-    });
+  type.live("change", function () {
+    //when the title changes on live tipsy tooltips the changes take
+    //affect the next time tipsy is shown so we need to hide and re-show it
+    $(this).tipsy("hide").tipsy("show");
+  });
 
-    type.tipsy({
-        gravity: 'w',
-        html: true,
-        opacity: 0.9,
-        trigger: 'manual',
-        live: true,
-        title: function() {
-            return $('#user-type-'+$(this).val()).attr('user-rights');
-        }
-    });
+  type.tipsy({
+    gravity: "w",
+    html: true,
+    opacity: 0.9,
+    trigger: "manual",
+    live: true,
+    title: function () {
+      return $("#user-type-" + $(this).val()).attr("user-rights");
+    },
+  });
 
-    var table = $("#users_datable");//.DataTable();
-    $('.datatable tbody').on( 'click', 'tr', function () {
-        $(this).parent().find('tr.selected').removeClass('selected');
-        $(this).addClass('selected');
-    } );
+  var table = $("#users_datable"); //.DataTable();
+  $(".datatable tbody").on("click", "tr", function () {
+    $(this).parent().find("tr.selected").removeClass("selected");
+    $(this).addClass("selected");
+  });
 
-    $('#button').click( function () {
-        table.row('.selected').remove().draw( false );
-    } );
+  $("#button").click(function () {
+    table.row(".selected").remove().draw(false);
+  });
 
-    type.tipsy('show');
+  type.tipsy("show");
 
-    var newUser = {login:"", first_name:"", last_name:"", type:"G", id:""};
+  var newUser = { login: "", first_name: "", last_name: "", type: "G", id: "" };
 
-    $('#add_user_button').live('click', function(){
-        populateForm(newUser);
-        $("#user_details").css("visibility", "visible");
-    });
+  $("#add_user_button").live("click", function () {
+    populateForm(newUser);
+    $("#user_details").css("visibility", "visible");
+  });
 }
 
-$(document).ready(function() {
-    populateUserTable();
-    assignUserRightsToUserTypes();
-    initUserData();
+$(document).ready(function () {
+  populateUserTable();
+  assignUserRightsToUserTypes();
+  initUserData();
 
-    $('#save_user').live('click', function(){
-        var data = $('#user_form').serialize();
-        var url = baseUrl+'User/add-user';
+  $("#save_user").live("click", function () {
+    var data = $("#user_form").serialize();
+    var url = baseUrl + "User/add-user";
 
-        $.post(url, {format: "json", data: data}, function(json){
-            if (json.valid === "true") {
-                $('#content').empty().append(json.html);
-                populateUserTable();
-                assignUserRightsToUserTypes();
-                init(); // Reinitialize
-            } else {
-                //if form is invalid we only need to redraw the form
-                $('#user_form').empty().append($(json.html).find('#user_form').children());
-                $('#password').val("");
-                $('#passwordVerify').val("");
-            }
-            setTimeout(removeSuccessMsg, 5000);
-            sizeFormElements();
-        });
+    $.post(url, { format: "json", data: data }, function (json) {
+      if (json.valid === "true") {
+        $("#content").empty().append(json.html);
+        populateUserTable();
+        assignUserRightsToUserTypes();
+        init(); // Reinitialize
+      } else {
+        //if form is invalid we only need to redraw the form
+        $("#user_form")
+          .empty()
+          .append($(json.html).find("#user_form").children());
+        $("#password").val("");
+        $("#passwordVerify").val("");
+      }
+      setTimeout(removeSuccessMsg, 5000);
+      sizeFormElements();
     });
+  });
 
-    sizeFormElements();
+  sizeFormElements();
 });
diff --git a/legacy/public/js/airtime/utilities/utilities.js b/legacy/public/js/airtime/utilities/utilities.js
index 42fdb6c8a..5f21ef08a 100644
--- a/legacy/public/js/airtime/utilities/utilities.js
+++ b/legacy/public/js/airtime/utilities/utilities.js
@@ -1,76 +1,80 @@
-var AIRTIME = (function(AIRTIME){
-	var mod;
+var AIRTIME = (function (AIRTIME) {
+  var mod;
 
-	if (AIRTIME.utilities === undefined) {
-		AIRTIME.utilities = {};
-	}
-	mod = AIRTIME.utilities;
+  if (AIRTIME.utilities === undefined) {
+    AIRTIME.utilities = {};
+  }
+  mod = AIRTIME.utilities;
 
-	mod.findViewportDimensions = function() {
-		var viewportwidth,
-			viewportheight;
+  mod.findViewportDimensions = function () {
+    var viewportwidth, viewportheight;
 
-		// the more standards compliant browsers (mozilla/netscape/opera/IE7) use
-		// window.innerWidth and window.innerHeight
-		if (typeof window.innerWidth != 'undefined') {
-			viewportwidth = window.innerWidth, viewportheight = window.innerHeight;
-		}
-		// IE6 in standards compliant mode (i.e. with a valid doctype as the first
-		// line in the document)
-		else if (typeof document.documentElement != 'undefined'
-				&& typeof document.documentElement.clientWidth != 'undefined'
-				&& document.documentElement.clientWidth != 0) {
-			viewportwidth = document.documentElement.clientWidth;
-			viewportheight = document.documentElement.clientHeight;
-		}
-		// older versions of IE
-		else {
-			viewportwidth = document.getElementsByTagName('body')[0].clientWidth;
-			viewportheight = document.getElementsByTagName('body')[0].clientHeight;
-		}
+    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use
+    // window.innerWidth and window.innerHeight
+    if (typeof window.innerWidth != "undefined") {
+      (viewportwidth = window.innerWidth),
+        (viewportheight = window.innerHeight);
+    }
+    // IE6 in standards compliant mode (i.e. with a valid doctype as the first
+    // line in the document)
+    else if (
+      typeof document.documentElement != "undefined" &&
+      typeof document.documentElement.clientWidth != "undefined" &&
+      document.documentElement.clientWidth != 0
+    ) {
+      viewportwidth = document.documentElement.clientWidth;
+      viewportheight = document.documentElement.clientHeight;
+    }
+    // older versions of IE
+    else {
+      viewportwidth = document.getElementsByTagName("body")[0].clientWidth;
+      viewportheight = document.getElementsByTagName("body")[0].clientHeight;
+    }
 
-		return {
-			width: viewportwidth,
-			height: viewportheight
-		};
-	};
+    return {
+      width: viewportwidth,
+      height: viewportheight,
+    };
+  };
 
-	/*
-	 * Returns an object containing a unix timestamp in seconds for the start/end range
-	 *
-	 * @return Object {"start", "end", "range"}
-	 */
-	mod.fnGetScheduleRange = function(dateStartId, timeStartId, dateEndId, timeEndId) {
-		var start,
-			end,
-			time;
+  /*
+   * Returns an object containing a unix timestamp in seconds for the start/end range
+   *
+   * @return Object {"start", "end", "range"}
+   */
+  mod.fnGetScheduleRange = function (
+    dateStartId,
+    timeStartId,
+    dateEndId,
+    timeEndId
+  ) {
+    var start, end, time;
 
-		start = $(dateStartId).val();
-		start = start === "" ? null : start;
+    start = $(dateStartId).val();
+    start = start === "" ? null : start;
 
-		time = $(timeStartId).val();
-		time = time === "" ? "00:00" : time;
+    time = $(timeStartId).val();
+    time = time === "" ? "00:00" : time;
 
-		if (start) {
-			start = start + " " + time;
-		}
+    if (start) {
+      start = start + " " + time;
+    }
 
-		end = $(dateEndId).val();
-		end = end === "" ? null : end;
+    end = $(dateEndId).val();
+    end = end === "" ? null : end;
 
-		time = $(timeEndId).val();
-		time = time === "" ? "00:00" : time;
+    time = $(timeEndId).val();
+    time = time === "" ? "00:00" : time;
 
-		if (end) {
-			end = end + " " + time;
-		}
+    if (end) {
+      end = end + " " + time;
+    }
 
-		return {
-			start: start,
-			end: end
-		};
-	};
+    return {
+      start: start,
+      end: end,
+    };
+  };
 
-return AIRTIME;
-
-}(AIRTIME || {}));
+  return AIRTIME;
+})(AIRTIME || {});
diff --git a/legacy/public/js/airtime/widgets/table-example.js b/legacy/public/js/airtime/widgets/table-example.js
index ba1066837..d4df965bf 100644
--- a/legacy/public/js/airtime/widgets/table-example.js
+++ b/legacy/public/js/airtime/widgets/table-example.js
@@ -2,31 +2,77 @@
  * Created by asantoni on 11/09/15.
  */
 
+$(document).ready(function () {
+  var aoColumns = [
+    /* Artwork */ {
+      sTitle: $.i18n._("Artwork"),
+      mDataProp: "artwork",
+      bVisible: false,
+      sClass: "library_artwork",
+      sWidth: "150px",
+    },
+    /* Title */ {
+      sTitle: $.i18n._("Title"),
+      mDataProp: "track_title",
+      sClass: "library_title",
+      sWidth: "170px",
+    },
+    /* Creator */ {
+      sTitle: $.i18n._("Creator"),
+      mDataProp: "artist_name",
+      sClass: "library_creator",
+      sWidth: "160px",
+    },
+    /* Upload Time */ {
+      sTitle: $.i18n._("Uploaded"),
+      mDataProp: "utime",
+      bVisible: false,
+      sClass: "library_upload_time",
+      sWidth: "155px",
+    },
+    /* Website */ {
+      sTitle: $.i18n._("Website"),
+      mDataProp: "info_url",
+      bVisible: false,
+      sClass: "library_url",
+      sWidth: "150px",
+    },
+    /* Year */ {
+      sTitle: $.i18n._("Year"),
+      mDataProp: "year",
+      bVisible: false,
+      sClass: "library_year",
+      sWidth: "60px",
+    },
+  ];
+  var ajaxSourceURL = baseUrl + "rest/media";
 
-$(document).ready(function() {
-    var aoColumns = [
-    /* Artwork */         { "sTitle" : $.i18n._("Artwork")            , "mDataProp" : "artwork"      , "bVisible"    : false                 , "sClass"      : "library_artwork"           , "sWidth" : "150px"        },
-    /* Title */           { "sTitle" : $.i18n._("Title")              , "mDataProp" : "track_title"  , "sClass"      : "library_title"       , "sWidth"      : "170px"                 },
-    /* Creator */         { "sTitle" : $.i18n._("Creator")            , "mDataProp" : "artist_name"  , "sClass"      : "library_creator"     , "sWidth"      : "160px"                 },
-    /* Upload Time */     { "sTitle" : $.i18n._("Uploaded")           , "mDataProp" : "utime"        , "bVisible"    : false                 , "sClass"      : "library_upload_time"   , "sWidth" : "155px"        },
-    /* Website */         { "sTitle" : $.i18n._("Website")            , "mDataProp" : "info_url"     , "bVisible"    : false                 , "sClass"      : "library_url"           , "sWidth" : "150px"        },
-    /* Year */            { "sTitle" : $.i18n._("Year")               , "mDataProp" : "year"         , "bVisible"    : false                 , "sClass"      : "library_year"          , "sWidth" : "60px"         },
-    ];
-    var ajaxSourceURL = baseUrl+"rest/media";
+  var myToolbarButtons = AIRTIME.widgets.Table.getStandardToolbarButtons();
+  myToolbarButtons[
+    AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.NEW
+  ].eventHandlers.click = function (e) {
+    alert("New!");
+  };
+  myToolbarButtons[
+    AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.EDIT
+  ].eventHandlers.click = function (e) {
+    alert("Edit!");
+  };
+  myToolbarButtons[
+    AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.DELETE
+  ].eventHandlers.click = function (e) {
+    alert("Delete!");
+  };
 
-    var myToolbarButtons = AIRTIME.widgets.Table.getStandardToolbarButtons();
-    myToolbarButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.NEW].eventHandlers.click = function(e) { alert('New!'); };
-    myToolbarButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.EDIT].eventHandlers.click = function(e) { alert('Edit!'); };
-    myToolbarButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.DELETE].eventHandlers.click = function(e) { alert('Delete!'); };
-
-
-    //Set up the div with id "example-table" as a datatable.
-    var table = new AIRTIME.widgets.Table(
-        $('#example-table'), //DOM node to create the table inside.
-        true,                //Enable item selection
-        myToolbarButtons,    //Toolbar buttons
-        {                    //Datatables overrides.
-            'aoColumns' : aoColumns,
-            'sAjaxSource' : ajaxSourceURL
-        });
+  //Set up the div with id "example-table" as a datatable.
+  var table = new AIRTIME.widgets.Table(
+    $("#example-table"), //DOM node to create the table inside.
+    true, //Enable item selection
+    myToolbarButtons, //Toolbar buttons
+    {
+      //Datatables overrides.
+      aoColumns: aoColumns,
+      sAjaxSource: ajaxSourceURL,
+    }
+  );
 });
diff --git a/legacy/public/js/airtime/widgets/table.js b/legacy/public/js/airtime/widgets/table.js
index 8c9ff371b..fbbb81cdb 100644
--- a/legacy/public/js/airtime/widgets/table.js
+++ b/legacy/public/js/airtime/widgets/table.js
@@ -2,538 +2,625 @@
  * Created by asantoni on 11/09/15.
  */
 
-var AIRTIME = (function(AIRTIME) {
+var AIRTIME = (function (AIRTIME) {
+  //Module initialization
+  if (AIRTIME.widgets === undefined) {
+    AIRTIME.widgets = {};
+  }
 
-    //Module initialization
-    if (AIRTIME.widgets === undefined) {
-        AIRTIME.widgets = {};
+  //Table widget constructor
+  /**
+   *
+   *
+   * @param wrapperDOMNode
+   * @param {boolean} bItemSelection
+   * @param {Object} toolbarButtons
+   * @param {Object} dataTablesOptions
+   * @param {Object} [emptyPlaceholder]
+   * @param {string} emptyPlaceholder.html
+   * @param {string} emptyPlaceholder.iconClass
+   *
+   * @returns {Table}
+   * @constructor
+   */
+  var Table = function (
+    wrapperDOMNode,
+    bItemSelection,
+    toolbarButtons,
+    dataTablesOptions,
+    emptyPlaceholder
+  ) {
+    var self = this;
+
+    self.HUGE_INT = Math.pow(2, 53) - 1;
+
+    //Constants and enumerations
+    self.SELECTION_MODE = {
+      SINGLE: 0,
+      MULTI_SHIFT: 1,
+      MULTI_CTRL: 2,
+    };
+
+    //Member variables
+    self._datatable = null;
+    self._selectedRows = []; //An array containing the underlying objects for each selected row. (Easy to use!)
+    //self._selectedRowVisualIdxMap = []; //A map of the visual index of a selected rows onto the actual row data.
+    self._selectedRowVisualIdxMin = self.HUGE_INT;
+    self._selectedRowVisualIdxMax = -1;
+    self._$wrapperDOMNode = null;
+    self._toolbarButtons = null;
+    //Save some of the constructor parameters
+    self._$wrapperDOMNode = $(wrapperDOMNode);
+    self._toolbarButtons = toolbarButtons;
+    self._emptyPlaceholder = emptyPlaceholder;
+
+    // Exclude the leftmost column if we're implementing item selection
+    self._colVisExcludeColumns = bItemSelection ? [0] : [];
+
+    //Finish initialization of the datatable since everything is declared by now.
+
+    // If selection is enabled, add in the checkbox column.
+    if (bItemSelection) {
+      dataTablesOptions["aoColumns"].unshift(
+        /* Checkbox */ {
+          sTitle: "",
+          mData: self._datatablesCheckboxDataDelegate.bind(this),
+          bSortable: false,
+          bSearchable: false,
+          sWidth: "24px",
+          sClass: "airtime_table_checkbox",
+        }
+      );
     }
 
-    //Table widget constructor
-    /**
-     *
-     *
-     * @param wrapperDOMNode
-     * @param {boolean} bItemSelection
-     * @param {Object} toolbarButtons
-     * @param {Object} dataTablesOptions
-     * @param {Object} [emptyPlaceholder]
-     * @param {string} emptyPlaceholder.html
-     * @param {string} emptyPlaceholder.iconClass
-     *
-     * @returns {Table}
-     * @constructor
+    var options = {
+      aoColumns: [
+        /* Title */ {
+          sTitle: $.i18n._("Make sure to override me"),
+          mDataProp: "track_title",
+          sClass: "library_title",
+          sWidth: "170px",
+        },
+      ],
+      bProcessing: true,
+      bServerSide: true,
+      sAjaxSource: baseUrl + "rest/media", //Override me
+      sAjaxDataProp: "aaData",
+      bScrollCollapse: false,
+      deferLoading: 1, //0 tells it there's zero elements loaded and disables the automatic AJAX. We don't want to load until after we bind all our event handlers, to prevent a race condition with the "init" event callback.
+      sPaginationType: "full_numbers",
+      bJQueryUI: true,
+      bAutoWidth: false,
+      aaSorting: [],
+      iDisplayLength: 25,
+      aLengthMenu: [25, 50, 100],
+      oLanguage: getDatatablesStrings({
+        sEmptyTable: $.i18n._(""),
+        sZeroRecords: $.i18n._("No matching results found."),
+      }),
+      oColVis: {
+        sAlign: "right",
+        aiExclude: self._colVisExcludeColumns,
+        buttonText: $.i18n._("Columns"),
+        iOverlayFade: 0,
+      },
+      // z = ColResize, R = ColReorder, C = ColVis
+      sDom: 'Rf<"dt-process-rel"r><"H"<"table_toolbar"C>><"dataTables_scrolling"t<".empty_placeholder"<".empty_placeholder_image"><".empty_placeholder_text">>><"F"lip>>',
+
+      fnPreDrawCallback: function () {
+        $("#draggingContainer").remove();
+      },
+      fnServerData: self._fetchData.bind(self),
+      //"fnInitComplete" : function() { self._setupEventHandlers(bItemSelection) }
+      fnDrawCallback: function () {
+        self.clearSelection();
+      },
+    };
+
+    //Override any options with those passed in as arguments to this constructor.
+    for (var key in dataTablesOptions) {
+      options[key] = dataTablesOptions[key];
+    }
+
+    if (options.fnCreatedRow) {
+      options.fnCreatedRow = options.fnCreatedRow.bind(self);
+    }
+    if (options.fnDrawCallback) {
+      options.fnDrawCallback = options.fnDrawCallback.bind(self);
+    }
+
+    self._datatable = self._$wrapperDOMNode.dataTable(options);
+    // self._datatable.fnDraw(); //Load the AJAX data now that our event handlers have been bound.
+    self._setupEventHandlers(bItemSelection);
+
+    //return self._datatable;
+    return self;
+  };
+
+  Table.prototype.assignDblClickHandler = function (fn) {
+    $(this._datatable, "tbody tr").on(
+      "dblclick",
+      this._SELECTORS.SELECTION_TABLE_ROW,
+      fn
+    );
+  };
+
+  /* Set up global event handlers for the datatable.
+   *  @param bItemSelection Whether or not row selection behaviour should be enabled for this widget.
+   * */
+  Table.prototype._setupEventHandlers = function (bItemSelection) {
+    var self = this;
+
+    /** This table row event handler is created once and catches events for any row. (It's less resource intensive
+     *  than having a per-row callback...)
      */
-    var Table = function(wrapperDOMNode, bItemSelection, toolbarButtons, dataTablesOptions, emptyPlaceholder) {
+    if (bItemSelection) {
+      $(self._datatable, "tbody tr").on(
+        "click contextmenu",
+        self._SELECTORS.SELECTION_TABLE_ROW,
+        function (e) {
+          var aData = self._datatable.fnGetData(this);
+          var iDisplayIndex = $(this).index(); // The index of the row in the current page in the table.
+          var nRow = this;
 
-        var self = this;
+          e.stopPropagation();
+          e.preventDefault();
+          document.getSelection().removeAllRanges();
 
-        self.HUGE_INT = Math.pow(2, 53) - 1;
+          var selectionMode = self.SELECTION_MODE.SINGLE;
+          if (e.shiftKey) {
+            selectionMode = self.SELECTION_MODE.MULTI_SHIFT;
+          } else if (e.ctrlKey) {
+            selectionMode = self.SELECTION_MODE.MULTI_CTRL;
+          }
 
-        //Constants and enumerations
-        self.SELECTION_MODE = {
-            SINGLE : 0,
-            MULTI_SHIFT : 1,
-            MULTI_CTRL : 2
-        };
-
-        //Member variables
-        self._datatable = null;
-        self._selectedRows = []; //An array containing the underlying objects for each selected row. (Easy to use!)
-        //self._selectedRowVisualIdxMap = []; //A map of the visual index of a selected rows onto the actual row data.
-        self._selectedRowVisualIdxMin = self.HUGE_INT;
-        self._selectedRowVisualIdxMax = -1;
-        self._$wrapperDOMNode = null;
-        self._toolbarButtons = null;
-        //Save some of the constructor parameters
-        self._$wrapperDOMNode = $(wrapperDOMNode);
-        self._toolbarButtons = toolbarButtons;
-        self._emptyPlaceholder = emptyPlaceholder;
-
-        // Exclude the leftmost column if we're implementing item selection
-        self._colVisExcludeColumns = bItemSelection ? [0] : [];
-
-        //Finish initialization of the datatable since everything is declared by now.
-
-        // If selection is enabled, add in the checkbox column.
-        if (bItemSelection) {
-            dataTablesOptions["aoColumns"].unshift(
-                /* Checkbox */        { "sTitle" : "", "mData" : self._datatablesCheckboxDataDelegate.bind(this), "bSortable"   : false                 , "bSearchable" : false                   , "sWidth" : "24px"         , "sClass" : "airtime_table_checkbox" }
-            );
+          if (e.button == 2) {
+            selectionMode = self.SELECTION_MODE.SINGLE;
+          }
+          self.selectRow(nRow, aData, selectionMode, iDisplayIndex);
         }
+      );
 
-        var options = {
-            "aoColumns": [
-                /* Title */           { "sTitle" : $.i18n._("Make sure to override me")              , "mDataProp" : "track_title"  , "sClass"      : "library_title"       , "sWidth"      : "170px"                 },
-            ],
-            "bProcessing": true,
-            "bServerSide": true,
-            "sAjaxSource": baseUrl+"rest/media", //Override me
-            "sAjaxDataProp": "aaData",
-            "bScrollCollapse": false,
-            "deferLoading" : 1, //0 tells it there's zero elements loaded and disables the automatic AJAX. We don't want to load until after we bind all our event handlers, to prevent a race condition with the "init" event callback.
-            "sPaginationType": "full_numbers",
-            "bJQueryUI": true,
-            "bAutoWidth": false,
-            "aaSorting": [],
-            "iDisplayLength": 25,
-            "aLengthMenu": [25, 50, 100],
-            "oLanguage" : getDatatablesStrings({
-                "sEmptyTable": $.i18n._(""),
-                "sZeroRecords": $.i18n._("No matching results found.")
-            }),
-            "oColVis": {
-                "sAlign": "right",
-                "aiExclude": self._colVisExcludeColumns,
-                "buttonText": $.i18n._("Columns"),
-                "iOverlayFade": 0
-            },
-            // z = ColResize, R = ColReorder, C = ColVis
-            "sDom": 'Rf<"dt-process-rel"r><"H"<"table_toolbar"C>><"dataTables_scrolling"t<".empty_placeholder"<".empty_placeholder_image"><".empty_placeholder_text">>><"F"lip>>',
+      $(self._datatable, "tbody tr").on(
+        "click",
+        self._SELECTORS.SELECTION_CHECKBOX,
+        function (e) {
+          $this = $(this);
 
-            "fnPreDrawCallback": function () {
-                $("#draggingContainer").remove();
-            },
-            "fnServerData": self._fetchData.bind(self),
-            //"fnInitComplete" : function() { self._setupEventHandlers(bItemSelection) }
-            "fnDrawCallback": function () {
-                self.clearSelection();
-            }
-        };
-
-        //Override any options with those passed in as arguments to this constructor.
-        for (var key in dataTablesOptions)
-        {
-            options[key] = dataTablesOptions[key];
+          var iVisualRowIdx = $this.parent().index();
+          var aData = self._datatable.fnGetData(iVisualRowIdx);
+          var selectionMode = self.SELECTION_MODE.MULTI_CTRL; //Behaviour for checkboxes.
+          if (e.shiftKey) {
+            selectionMode = self.SELECTION_MODE.MULTI_SHIFT;
+          }
+          self.selectRow($this.parent(), aData, selectionMode, iVisualRowIdx); //Always multiselect for checkboxes
+          e.stopPropagation();
+          return true;
         }
+      );
 
-        if (options.fnCreatedRow) {
-            options.fnCreatedRow = options.fnCreatedRow.bind(self);
-        }
-        if (options.fnDrawCallback) {
-            options.fnDrawCallback = options.fnDrawCallback.bind(self);
-        }
+      // Clear selection when switching pages
+      $(self._datatable).on("page", function () {
+        self.clearSelection();
+      });
+    }
 
-        self._datatable = self._$wrapperDOMNode.dataTable(options);
-        // self._datatable.fnDraw(); //Load the AJAX data now that our event handlers have been bound.
-        self._setupEventHandlers(bItemSelection);
+    // On filter, display the number of total and filtered results in the search bar
+    $(self._datatable).on("filter", function () {
+      var dt = self._datatable,
+        f = dt.closest(".dataTables_wrapper").find(".filter-message"),
+        totalRecords = dt.fnSettings().fnRecordsTotal(),
+        totalDisplayRecords = dt.fnSettings().fnRecordsDisplay();
 
-        //return self._datatable;
-        return self;
-    };
+      if (f.length === 0) {
+        var el = document.createElement("span");
+        el.setAttribute("class", "filter-message");
+        f = dt
+          .closest(".dataTables_wrapper")
+          .find(".dataTables_filter")
+          .append(el)
+          .find(".filter-message");
+      }
 
-    Table.prototype.assignDblClickHandler = function(fn) {
-        $(this._datatable, 'tbody tr').on('dblclick', this._SELECTORS.SELECTION_TABLE_ROW, fn);
-    };
+      f.text(
+        totalRecords > totalDisplayRecords
+          ? $.i18n._("Filtering out ") +
+              (totalRecords - totalDisplayRecords) +
+              $.i18n._(" of ") +
+              totalRecords +
+              $.i18n._(" records")
+          : ""
+      );
 
+      dt.closest(".dataTables_wrapper")
+        .find('.dataTables_filter input[type="text"]')
+        .css("padding-right", f.outerWidth());
+    });
 
-    /* Set up global event handlers for the datatable.
-     *  @param bItemSelection Whether or not row selection behaviour should be enabled for this widget.
-     * */
-    Table.prototype._setupEventHandlers = function(bItemSelection) {
+    //Since this function is already called when the datatables initialization is complete, we know the DOM
+    //structure for the datatable exists and can just proceed to setup the toolbar DOM elements now.
+    self._setupToolbarButtons(self._toolbarButtons);
+  };
 
-        var self = this;
+  /**
+   * Member functions
+   *
+   */
 
-        /** This table row event handler is created once and catches events for any row. (It's less resource intensive
-         *  than having a per-row callback...)
-         */
-        if (bItemSelection) {
-            $(self._datatable, 'tbody tr').on('click contextmenu', self._SELECTORS.SELECTION_TABLE_ROW, function (e) {
-                var aData = self._datatable.fnGetData(this);
-                var iDisplayIndex = $(this).index();  // The index of the row in the current page in the table.
-                var nRow = this;
+  /** Populate the toolbar with buttons.
+   *
+   * @param buttons A list of objects which contain button definitions. See self.TOOLBAR_BUTTON_ROLES for an example, or use getStandardToolbarButtons() to get a list of them.
+   * @private
+   */
+  Table.prototype._setupToolbarButtons = function (buttons) {
+    var self = this;
+    var $menu = self._$wrapperDOMNode
+      .parent()
+      .parent()
+      .find("div.table_toolbar");
+    $menu.addClass("btn-toolbar");
 
-                e.stopPropagation();
-                e.preventDefault();
-                document.getSelection().removeAllRanges();
-
-                var selectionMode = self.SELECTION_MODE.SINGLE;
-                if (e.shiftKey) {
-                    selectionMode = self.SELECTION_MODE.MULTI_SHIFT;
-                } else if (e.ctrlKey) {
-                    selectionMode = self.SELECTION_MODE.MULTI_CTRL;
-                }
-
-                if (e.button == 2) {
-                    selectionMode = self.SELECTION_MODE.SINGLE;
-                }
-                self.selectRow(nRow, aData, selectionMode, iDisplayIndex);
-            });
-
-            $(self._datatable, 'tbody tr').on('click', self._SELECTORS.SELECTION_CHECKBOX, function(e) {
-                $this = $(this);
-
-                var iVisualRowIdx = $this.parent().index();
-                var aData = self._datatable.fnGetData(iVisualRowIdx);
-                var selectionMode = self.SELECTION_MODE.MULTI_CTRL; //Behaviour for checkboxes.
-                if (e.shiftKey) {
-                    selectionMode = self.SELECTION_MODE.MULTI_SHIFT;
-                }
-                self.selectRow($this.parent(), aData, selectionMode, iVisualRowIdx); //Always multiselect for checkboxes
-                e.stopPropagation();
-                return true;
-            });
-
-            // Clear selection when switching pages
-            $(self._datatable).on('page', function () {
-                self.clearSelection();
-            });
-        }
-
-        // On filter, display the number of total and filtered results in the search bar
-        $(self._datatable).on('filter', function() {
-            var dt = self._datatable, f = dt.closest(".dataTables_wrapper").find(".filter-message"),
-                totalRecords = dt.fnSettings().fnRecordsTotal(),
-                totalDisplayRecords = dt.fnSettings().fnRecordsDisplay();
-
-            if (f.length === 0) {
-                var el = document.createElement("span");
-                el.setAttribute("class", "filter-message");
-                f = dt.closest(".dataTables_wrapper").find(".dataTables_filter").append(el).find(".filter-message");
-            }
-
-            f.text(totalRecords > totalDisplayRecords ?
-                $.i18n._("Filtering out ") + (totalRecords - totalDisplayRecords)
-                + $.i18n._(" of ") + totalRecords
-                + $.i18n._(" records") : ""
-            );
-
-            dt.closest(".dataTables_wrapper").find('.dataTables_filter input[type="text"]')
-                .css('padding-right', f.outerWidth());
+    //Create the toolbar buttons.
+    $.each(buttons, function (idx, btn) {
+      var buttonElement = self._createToolbarButton(
+        btn.title,
+        btn.iconClass,
+        btn.extraBtnClass,
+        btn.elementId
+      );
+      $menu.append(buttonElement);
+      btn.element = buttonElement; //Save this guy in case you need it later.
+      //Bind event handlers to each button
+      $.each(btn.eventHandlers, function (eventName, eventCallback) {
+        $(buttonElement).on(eventName, function () {
+          if ($(buttonElement).find("button").is(":disabled")) {
+            return;
+          }
+          eventCallback();
         });
+      });
+    });
 
-        //Since this function is already called when the datatables initialization is complete, we know the DOM
-        //structure for the datatable exists and can just proceed to setup the toolbar DOM elements now.
-        self._setupToolbarButtons(self._toolbarButtons);
-    };
+    self._checkToolbarButtons();
+  };
 
+  /**
+   * Check each of the toolbar buttons for the table and disable them if their constraints are invalid.
+   *
+   * Passes current Table object context to function calls.
+   */
+  Table.prototype._checkToolbarButtons = function () {
+    var self = this;
+    $.each(self._toolbarButtons, function (idx, btn) {
+      var btnNode = $(btn.element).find("button").get(0);
+      btnNode.disabled = btn.disabled = !btn.validateConstraints.call(self);
+    });
+  };
 
-    /**
-     * Member functions
-     *
-     */
+  /** Create the DOM element for a toolbar button and return it. */
+  Table.prototype._createToolbarButton = function (
+    title,
+    iconClass,
+    extraBtnClass,
+    elementId
+  ) {
+    if (!iconClass) {
+      iconClass = "icon-plus";
+    }
 
-    /** Populate the toolbar with buttons.
-     *
-     * @param buttons A list of objects which contain button definitions. See self.TOOLBAR_BUTTON_ROLES for an example, or use getStandardToolbarButtons() to get a list of them.
-     * @private
-     */
-    Table.prototype._setupToolbarButtons = function(buttons) {
-        var self = this;
-        var $menu = self._$wrapperDOMNode.parent().parent().find("div.table_toolbar");
-        $menu.addClass("btn-toolbar");
+    // var title = $.i18n._('Delete');
+    var outerDiv = document.createElement("div");
+    outerDiv.className = "btn-group";
+    outerDiv.title = title;
+    var innerButton = document.createElement("button");
+    //innerButton.className = 'btn btn-small ' + extraBtnClass;
+    innerButton.className = "btn " + extraBtnClass;
+    innerButton.id = elementId;
+    var innerIcon = document.createElement("i");
+    innerIcon.className = "icon-white " + iconClass;
+    var innerTextSpan = document.createElement("span");
+    var innerText = document.createTextNode(title);
+    innerTextSpan.appendChild(innerText);
+    innerButton.appendChild(innerIcon);
+    innerButton.appendChild(innerTextSpan);
+    outerDiv.appendChild(innerButton);
 
-        //Create the toolbar buttons.
-        $.each(buttons, function(idx, btn) {
-            var buttonElement = self._createToolbarButton(btn.title, btn.iconClass, btn.extraBtnClass, btn.elementId);
-            $menu.append(buttonElement);
-            btn.element = buttonElement; //Save this guy in case you need it later.
-            //Bind event handlers to each button
-            $.each(btn.eventHandlers, function(eventName, eventCallback) {
-                $(buttonElement).on(eventName, function () {
-                    if ($(buttonElement).find("button").is(':disabled')) { return; }
-                    eventCallback();
-                });
-            });
-        });
-
-        self._checkToolbarButtons();
-    };
-
-    /**
-     * Check each of the toolbar buttons for the table and disable them if their constraints are invalid.
-     *
-     * Passes current Table object context to function calls.
-     */
-    Table.prototype._checkToolbarButtons = function () {
-        var self = this;
-        $.each(self._toolbarButtons, function (idx, btn) {
-            var btnNode = $(btn.element).find("button").get(0);
-            btnNode.disabled = btn.disabled = !btn.validateConstraints.call(self);
-        });
-    };
-
-    /** Create the DOM element for a toolbar button and return it. */
-    Table.prototype._createToolbarButton = function(title, iconClass, extraBtnClass, elementId) {
-
-        if (!iconClass) {
-            iconClass = 'icon-plus';
-        }
-
-        // var title = $.i18n._('Delete');
-        var outerDiv = document.createElement("div");
-        outerDiv.className = 'btn-group';
-        outerDiv.title = title;
-        var innerButton = document.createElement("button");
-        //innerButton.className = 'btn btn-small ' + extraBtnClass;
-        innerButton.className = 'btn ' + extraBtnClass;
-        innerButton.id = elementId;
-        var innerIcon = document.createElement("i");
-        innerIcon.className = 'icon-white ' + iconClass;
-        var innerTextSpan = document.createElement('span');
-        var innerText = document.createTextNode(title);
-        innerTextSpan.appendChild(innerText);
-        innerButton.appendChild(innerIcon);
-        innerButton.appendChild(innerTextSpan);
-        outerDiv.appendChild(innerButton);
-
-        /* Here's an example of what the button HTML should look like:
+    /* Here's an example of what the button HTML should look like:
          "<div class='btn-group' title=" + $.i18n._('Delete') + ">" +
          "<button class='btn btn-small btn-danger' id='sb-trash'>" +
          "<i class='icon-white icon-trash'></i>" +
          "<span>" + $.i18n._('Delete') + "</span>" +
          "</button>" +
          "</div>"*/
-        return outerDiv;
-    };
+    return outerDiv;
+  };
 
-    Table.prototype.clearSelection = function() {
-        this._selectedRows = [];
-        //self._selectedRowVisualIdxMap = [];
-        this._selectedRowVisualIdxMin = self.HUGE_INT;
-        this._selectedRowVisualIdxMax = -1;
-        this._$wrapperDOMNode.find('.selected').removeClass('selected');
-        this._$wrapperDOMNode.find(this._SELECTORS.SELECTION_CHECKBOX).find('input').attr('checked', false);
-        this._checkToolbarButtons();
-    };
+  Table.prototype.clearSelection = function () {
+    this._selectedRows = [];
+    //self._selectedRowVisualIdxMap = [];
+    this._selectedRowVisualIdxMin = self.HUGE_INT;
+    this._selectedRowVisualIdxMax = -1;
+    this._$wrapperDOMNode.find(".selected").removeClass("selected");
+    this._$wrapperDOMNode
+      .find(this._SELECTORS.SELECTION_CHECKBOX)
+      .find("input")
+      .attr("checked", false);
+    this._checkToolbarButtons();
+  };
 
-    /** @param nRow is a tr DOM node (non-jQuery)
-     * @param aData is an array containing the raw data for the row. Can be null if you don't have it.
-     * @param selectionMode is an SELECT_MODE enum. Specify what selection mode you want to use for this action.
-     * @param iVisualRowIdx is an integer which corresponds to the index of the clicked row, as it appears to the user.
-     *             eg. The 5th row in the table will have an iVisualRowIdx of 4 (0-based).
-     */
-    Table.prototype.selectRow = function(nRow, aData, selectionMode, iVisualRowIdx) {
+  /** @param nRow is a tr DOM node (non-jQuery)
+   * @param aData is an array containing the raw data for the row. Can be null if you don't have it.
+   * @param selectionMode is an SELECT_MODE enum. Specify what selection mode you want to use for this action.
+   * @param iVisualRowIdx is an integer which corresponds to the index of the clicked row, as it appears to the user.
+   *             eg. The 5th row in the table will have an iVisualRowIdx of 4 (0-based).
+   */
+  Table.prototype.selectRow = function (
+    nRow,
+    aData,
+    selectionMode,
+    iVisualRowIdx
+  ) {
+    var self = this;
 
-        var self = this;
+    //Default to single item selection.
+    if (selectionMode == undefined) {
+      selectionMode = self.SELECTION_MODE.SINGLE;
+    }
 
-        //Default to single item selection.
-        if (selectionMode == undefined) {
-            selectionMode = self.SELECTION_MODE.SINGLE;
-        }
+    var $nRow = $(nRow);
 
-        var $nRow = $(nRow);
+    //Regular single left-click mode
+    if (selectionMode == self.SELECTION_MODE.SINGLE) {
+      self.clearSelection();
 
-        //Regular single left-click mode
-        if (selectionMode == self.SELECTION_MODE.SINGLE) {
-            self.clearSelection();
+      self._selectedRows.push(aData);
+      self._selectedRowVisualIdxMin = iVisualRowIdx;
+      self._selectedRowVisualIdxMax = iVisualRowIdx;
+      //self._selectedRowVisualIdxMap[iVisualRowIdx] = aData;
 
-            self._selectedRows.push(aData);
-            self._selectedRowVisualIdxMin = iVisualRowIdx;
-            self._selectedRowVisualIdxMax = iVisualRowIdx;
-            //self._selectedRowVisualIdxMap[iVisualRowIdx] = aData;
+      $nRow.addClass("selected");
+      $nRow
+        .find(self._SELECTORS.SELECTION_CHECKBOX)
+        .find("input")
+        .attr("checked", true);
+    }
+    //Ctrl-click multi row selection mode
+    else if (selectionMode == self.SELECTION_MODE.MULTI_CTRL) {
+      var foundAtIdx = $.inArray(aData, self._selectedRows);
 
-            $nRow.addClass('selected');
-            $nRow.find(self._SELECTORS.SELECTION_CHECKBOX).find('input').attr('checked', true);
-        }
-        //Ctrl-click multi row selection mode
-        else if (selectionMode == self.SELECTION_MODE.MULTI_CTRL) {
+      //console.log('checkbox mouse', iVisualRowIdx, foundAtIdx);
 
-            var foundAtIdx = $.inArray(aData, self._selectedRows);
+      //If the clicked row is already selected, deselect it.
+      if (foundAtIdx >= 0 && self._selectedRows.length >= 1) {
+        self._selectedRows.splice(foundAtIdx, 1);
+        $nRow.removeClass("selected");
+        $nRow
+          .find(self._SELECTORS.SELECTION_CHECKBOX)
+          .find("input")
+          .attr("checked", false);
+      } else {
+        self._selectedRows.push(aData);
 
-            //console.log('checkbox mouse', iVisualRowIdx, foundAtIdx);
+        self._selectedRowVisualIdxMin = iVisualRowIdx;
+        self._selectedRowVisualIdxMax = iVisualRowIdx;
 
-            //If the clicked row is already selected, deselect it.
-            if (foundAtIdx >= 0 && self._selectedRows.length >= 1) {
-                self._selectedRows.splice(foundAtIdx, 1);
-                $nRow.removeClass('selected');
-                $nRow.find(self._SELECTORS.SELECTION_CHECKBOX).find('input').attr('checked', false);
-            }
-            else {
-                self._selectedRows.push(aData);
+        $nRow.addClass("selected");
+        $nRow
+          .find(self._SELECTORS.SELECTION_CHECKBOX)
+          .find("input")
+          .attr("checked", true);
+      }
+    }
+    //Shift-click multi row selection mode
+    else if (selectionMode == self.SELECTION_MODE.MULTI_SHIFT) {
+      //If there's no rows selected, just behave like single selection.
+      if (self._selectedRows.length == 0) {
+        return self.selectRow(
+          nRow,
+          aData,
+          self.SELECTION_MODE.SINGLE,
+          iVisualRowIdx
+        );
+      }
 
-                self._selectedRowVisualIdxMin = iVisualRowIdx;
-                self._selectedRowVisualIdxMax = iVisualRowIdx;
+      if (iVisualRowIdx > self._selectedRowVisualIdxMax) {
+        self._selectedRowVisualIdxMax = iVisualRowIdx;
+      }
+      if (iVisualRowIdx < self._selectedRowVisualIdxMin) {
+        self._selectedRowVisualIdxMin = iVisualRowIdx;
+      }
 
-                $nRow.addClass('selected');
-                $nRow.find(self._SELECTORS.SELECTION_CHECKBOX).find('input').attr('checked', true);
-            }
-        }
-        //Shift-click multi row selection mode
-        else if (selectionMode == self.SELECTION_MODE.MULTI_SHIFT) {
+      var selectionStartRowIdx = Math.min(
+        iVisualRowIdx,
+        self._selectedRowVisualIdxMin
+      );
+      var selectionEndRowIdx = Math.min(
+        iVisualRowIdx,
+        self._selectedRowVisualIdxMax
+      );
 
-            //If there's no rows selected, just behave like single selection.
-            if (self._selectedRows.length == 0) {
-                return self.selectRow(nRow, aData, self.SELECTION_MODE.SINGLE, iVisualRowIdx);
-            }
+      //We can assume there's at least 1 row already selected now.
+      var allRows = self._datatable.fnGetData();
 
-            if (iVisualRowIdx > self._selectedRowVisualIdxMax) {
-                self._selectedRowVisualIdxMax = iVisualRowIdx;
-            }
-            if (iVisualRowIdx < self._selectedRowVisualIdxMin) {
-                self._selectedRowVisualIdxMin = iVisualRowIdx;
-            }
+      self._selectedRows = [];
+      for (
+        var i = self._selectedRowVisualIdxMin;
+        i <= self._selectedRowVisualIdxMax;
+        i++
+      ) {
+        self._selectedRows.push(allRows[i]);
+        $row = $($nRow.parent().children()[i]);
+        $row.addClass("selected");
+        $row
+          .find(self._SELECTORS.SELECTION_CHECKBOX)
+          .find("input")
+          .attr("checked", true);
+      }
+    } else {
+      console.log("Unimplemented selection mode");
+    }
 
-            var selectionStartRowIdx = Math.min(iVisualRowIdx, self._selectedRowVisualIdxMin);
-            var selectionEndRowIdx = Math.min(iVisualRowIdx, self._selectedRowVisualIdxMax);
+    self._checkToolbarButtons();
+  };
 
+  Table.prototype.getSelectedRows = function () {
+    return this._selectedRows;
+  };
 
-            //We can assume there's at least 1 row already selected now.
-            var allRows = self._datatable.fnGetData();
+  Table.prototype.getEmptyPlaceholder = function () {
+    return this._emptyPlaceholder;
+  };
 
-            self._selectedRows = [];
-            for (var i = self._selectedRowVisualIdxMin; i <= self._selectedRowVisualIdxMax; i++)
-            {
-                self._selectedRows.push(allRows[i]);
-                $row = $($nRow.parent().children()[i]);
-                $row.addClass('selected');
-                $row.find(self._SELECTORS.SELECTION_CHECKBOX).find('input').attr('checked', true);
-            }
+  Table.prototype._handleAjaxError = function (r) {
+    // If the request was denied due to permissioning
+    if (r.status === 403) {
+      $(".dt-process-rel").hide();
+      $(".empty_placeholder_text").text(
+        $.i18n._("You don't have permission to view this resource.")
+      );
+      $(".empty_placeholder").show();
+    }
+  };
 
-        }
-        else {
-            console.log("Unimplemented selection mode");
-        }
+  /** Grab data from a REST API and format so that DataTables can display it.
+   *  This is the DataTables REST adapter function, basically.
+   * */
+  Table.prototype._fetchData = function (
+    sSource,
+    aoData,
+    fnCallback,
+    oSettings
+  ) {
+    var self = this;
+    var echo = aoData[0].value; //Datatables state tracking. Must be included.
 
-        self._checkToolbarButtons();
-    };
+    var sortColName = "";
+    var sortDir = "";
+    var search = self._$wrapperDOMNode
+      .closest(".dataTables_wrapper")
+      .find(".dataTables_filter")
+      .find("input")
+      .val();
+    if (oSettings.aaSorting.length > 0) {
+      var sortColIdx = oSettings.aaSorting[0][0];
+      sortColName = oSettings.aoColumns[sortColIdx].mDataProp;
+      sortDir = oSettings.aaSorting[0][1].toUpperCase();
+    }
 
-    Table.prototype.getSelectedRows = function() {
-        return this._selectedRows;
-    };
+    // FIXME: We should probably just be sending aoData back here..?
+    $.ajax({
+      dataType: "json",
+      type: "GET",
+      url: sSource,
+      data: {
+        limit: oSettings._iDisplayLength,
+        offset: oSettings._iDisplayStart,
+        sort: sortColName,
+        sort_dir: sortDir,
+        search: search,
+      },
+      success: function (json, textStatus, jqXHR) {
+        var rawResponseJSON = json;
+        json = [];
+        json.aaData = rawResponseJSON;
+        json.iTotalRecords = jqXHR.getResponseHeader("X-TOTAL-COUNT");
+        json.iTotalDisplayRecords = json.iTotalRecords;
+        json.sEcho = echo;
 
-    Table.prototype.getEmptyPlaceholder = function () {
-        return this._emptyPlaceholder;
-    };
-
-    Table.prototype._handleAjaxError = function(r) {
-        // If the request was denied due to permissioning
-        if (r.status === 403) {
-            $(".dt-process-rel").hide();
-            $('.empty_placeholder_text').text($.i18n._("You don't have permission to view this resource."));
-            $('.empty_placeholder').show();
-        }
-    };
-
-    /** Grab data from a REST API and format so that DataTables can display it.
-     *  This is the DataTables REST adapter function, basically.
-     * */
-    Table.prototype._fetchData = function ( sSource, aoData, fnCallback, oSettings )
-    {
-        var self = this;
-        var echo = aoData[0].value; //Datatables state tracking. Must be included.
-
-        var sortColName = "";
-        var sortDir = "";
-        var search = self._$wrapperDOMNode.closest(".dataTables_wrapper").find(".dataTables_filter").find("input").val();
-        if (oSettings.aaSorting.length > 0) {
-            var sortColIdx = oSettings.aaSorting[0][0];
-            sortColName = oSettings.aoColumns[sortColIdx].mDataProp;
-            sortDir = oSettings.aaSorting[0][1].toUpperCase();
-        }
-
-        // FIXME: We should probably just be sending aoData back here..?
-        $.ajax({
-            "dataType": 'json',
-            "type": "GET",
-            "url": sSource,
-            "data": {
-                "limit": oSettings._iDisplayLength,
-                "offset": oSettings._iDisplayStart,
-                "sort": sortColName,
-                "sort_dir": sortDir,
-                "search": search
-            },
-            "success": function (json, textStatus, jqXHR) {
-                var rawResponseJSON = json;
-                json = [];
-                json.aaData = rawResponseJSON;
-                json.iTotalRecords = jqXHR.getResponseHeader('X-TOTAL-COUNT');
-                json.iTotalDisplayRecords = json.iTotalRecords;
-                json.sEcho = echo;
-
-                //Pass it along to datatables.
-                fnCallback(json);
-            },
-            "error": self._handleAjaxError
-        });
-    };
-
-    Table.prototype._datatablesCheckboxDataDelegate = function(rowData, callType, dataToSave) {
-
-        if (callType == undefined) {
-            //Supposed to return the raw data for the type here.
-            return null;
-        } else if (callType == 'display') {
-            return "<input type='checkbox'>";
-        } else if (callType == 'sort') {
-            return null;
-        } else if (callType == 'type') {
-            return "input";
-        } else if (callType == 'set') {
-            //The data to set is in dataToSave.
-            return;
-        } else if (callType == 'filter') {
-            return null;
-        }
-
-        //For all other calls, just return the data as this:
-        return "check";
-    };
-
-
-    //Accessors / Mutators
-
-    Table.prototype.getDatatable = function() {
-        return this._datatable;
-    };
-
-
-    //Static initializers / Class variables
-
-    Table.prototype._SELECTORS = Object.freeze({
-        SELECTION_CHECKBOX: ".airtime_table_checkbox",
-        SELECTION_TABLE_ROW: "tr"
+        //Pass it along to datatables.
+        fnCallback(json);
+      },
+      error: self._handleAjaxError,
     });
+  };
 
+  Table.prototype._datatablesCheckboxDataDelegate = function (
+    rowData,
+    callType,
+    dataToSave
+  ) {
+    if (callType == undefined) {
+      //Supposed to return the raw data for the type here.
+      return null;
+    } else if (callType == "display") {
+      return "<input type='checkbox'>";
+    } else if (callType == "sort") {
+      return null;
+    } else if (callType == "type") {
+      return "input";
+    } else if (callType == "set") {
+      //The data to set is in dataToSave.
+      return;
+    } else if (callType == "filter") {
+      return null;
+    }
 
-    Table.TOOLBAR_BUTTON_ROLES = {
-        NEW :    0,
-        EDIT :   1,
-        DELETE : 2
-    };
-    Object.freeze(Table.TOOLBAR_BUTTON_ROLES);
+    //For all other calls, just return the data as this:
+    return "check";
+  };
 
+  //Accessors / Mutators
 
-    //Set of standard buttons. Use getStandardToolbarButtons() to grab these and pass them to the init() function.
-    Table._STANDARD_TOOLBAR_BUTTONS = {};
-    Table._STANDARD_TOOLBAR_BUTTONS[Table.TOOLBAR_BUTTON_ROLES.NEW] = {
-        title : $.i18n._('New'),
-        iconClass : "icon-plus",
-        extraBtnClass : "btn-small btn-new",
-        elementId : '',
-        eventHandlers : {},
-        validateConstraints: function () { return true; }
-    };
-    Table._STANDARD_TOOLBAR_BUTTONS[Table.TOOLBAR_BUTTON_ROLES.EDIT] = {
-        title : $.i18n._('Edit'),
-        iconClass : "icon-pencil",
-        extraBtnClass : "btn-small",
-        elementId : '',
-        eventHandlers : {},
-        validateConstraints: function () { return true; }
-    };
-    Table._STANDARD_TOOLBAR_BUTTONS[Table.TOOLBAR_BUTTON_ROLES.DELETE] = {
-        title : $.i18n._('Delete'),
-        iconClass : "icon-trash",
-        extraBtnClass : "btn-small btn-danger",
-        elementId : '',
-        eventHandlers : {},
-        validateConstraints: function () { return true; }
-    };
-    Object.freeze(Table._STANDARD_TOOLBAR_BUTTONS);
+  Table.prototype.getDatatable = function () {
+    return this._datatable;
+  };
 
+  //Static initializers / Class variables
 
-    //Static method
-    Table.getStandardToolbarButtons = function() {
-        //Return a deep copy
-        return jQuery.extend(true, {}, Table._STANDARD_TOOLBAR_BUTTONS);
-    };
+  Table.prototype._SELECTORS = Object.freeze({
+    SELECTION_CHECKBOX: ".airtime_table_checkbox",
+    SELECTION_TABLE_ROW: "tr",
+  });
 
-    //Add Table to the widgets namespace
-    AIRTIME.widgets.Table = Table;
+  Table.TOOLBAR_BUTTON_ROLES = {
+    NEW: 0,
+    EDIT: 1,
+    DELETE: 2,
+  };
+  Object.freeze(Table.TOOLBAR_BUTTON_ROLES);
 
+  //Set of standard buttons. Use getStandardToolbarButtons() to grab these and pass them to the init() function.
+  Table._STANDARD_TOOLBAR_BUTTONS = {};
+  Table._STANDARD_TOOLBAR_BUTTONS[Table.TOOLBAR_BUTTON_ROLES.NEW] = {
+    title: $.i18n._("New"),
+    iconClass: "icon-plus",
+    extraBtnClass: "btn-small btn-new",
+    elementId: "",
+    eventHandlers: {},
+    validateConstraints: function () {
+      return true;
+    },
+  };
+  Table._STANDARD_TOOLBAR_BUTTONS[Table.TOOLBAR_BUTTON_ROLES.EDIT] = {
+    title: $.i18n._("Edit"),
+    iconClass: "icon-pencil",
+    extraBtnClass: "btn-small",
+    elementId: "",
+    eventHandlers: {},
+    validateConstraints: function () {
+      return true;
+    },
+  };
+  Table._STANDARD_TOOLBAR_BUTTONS[Table.TOOLBAR_BUTTON_ROLES.DELETE] = {
+    title: $.i18n._("Delete"),
+    iconClass: "icon-trash",
+    extraBtnClass: "btn-small btn-danger",
+    elementId: "",
+    eventHandlers: {},
+    validateConstraints: function () {
+      return true;
+    },
+  };
+  Object.freeze(Table._STANDARD_TOOLBAR_BUTTONS);
 
-    return AIRTIME;
+  //Static method
+  Table.getStandardToolbarButtons = function () {
+    //Return a deep copy
+    return jQuery.extend(true, {}, Table._STANDARD_TOOLBAR_BUTTONS);
+  };
 
-}(AIRTIME || {}));
+  //Add Table to the widgets namespace
+  AIRTIME.widgets.Table = Table;
+
+  return AIRTIME;
+})(AIRTIME || {});