From ae0d3c560cbdefd6dc86f9d5a90c640c93ece150 Mon Sep 17 00:00:00 2001
From: Daniel <daniel@daniel-PC.(none)>
Date: Thu, 15 Mar 2012 17:56:51 -0400
Subject: [PATCH] CC-3394: Add play button to timeline table. - added image
 information to row in ShowBuilder.php to enable audio preview of shows. -
 moved around code so the audio preview functionaly is standalone - fixed the
 firefox bug for issue CC-3429

---
 airtime_mvc/application/Bootstrap.php         |    2 +-
 airtime_mvc/application/configs/ACL.php       |    6 +-
 .../controllers/AudiopreviewController.php    |  192 +++
 .../controllers/PlaylistController.php        |   69 -
 .../application/models/ShowBuilder.php        |    9 +-
 .../audio-preview.phtml}                      |   12 +-
 .../public/js/airtime/common/common.js        |   65 +-
 .../public/js/airtime/library/library.js      |   63 +-
 .../public/js/airtime/showbuilder/builder.js  | 1158 +++++++++--------
 .../public/js/jplayer/preview_jplayer.js      |  153 ++-
 .../jplayer.audio-preview.blue.monday.css     |    7 +-
 11 files changed, 977 insertions(+), 759 deletions(-)
 create mode 100644 airtime_mvc/application/controllers/AudiopreviewController.php
 rename airtime_mvc/application/views/scripts/{playlist/playlist-preview.phtml => audiopreview/audio-preview.phtml} (89%)

diff --git a/airtime_mvc/application/Bootstrap.php b/airtime_mvc/application/Bootstrap.php
index a473e4628..4ed8cb979 100644
--- a/airtime_mvc/application/Bootstrap.php
+++ b/airtime_mvc/application/Bootstrap.php
@@ -88,7 +88,7 @@ class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
         $view->headScript()->appendFile($baseUrl.'/js/airtime/common/common.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
 
         if (Application_Model_Preference::GetPlanLevel() != "disabled"
-                && ($_SERVER['REQUEST_URI'] != '/Dashboard/stream-player' || $_SERVER['REQUEST_URI'] != '/Playlist/audio-preview-player')) {
+                && ($_SERVER['REQUEST_URI'] != '/Dashboard/stream-player' || $_SERVER['REQUEST_URI'] != '/audiopreview/audio-preview-player')) {
             $client_id = Application_Model_Preference::GetClientId();
             $view->headScript()->appendScript("var livechat_client_id = '$client_id';");
             $view->headScript()->appendFile($baseUrl . '/js/airtime/common/livechat.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');
diff --git a/airtime_mvc/application/configs/ACL.php b/airtime_mvc/application/configs/ACL.php
index d2ce2e23a..8aec515da 100644
--- a/airtime_mvc/application/configs/ACL.php
+++ b/airtime_mvc/application/configs/ACL.php
@@ -27,7 +27,8 @@ $ccAcl->add(new Zend_Acl_Resource('library'))
       ->add(new Zend_Acl_Resource('showbuilder'))
       ->add(new Zend_Acl_Resource('auth'))
       ->add(new Zend_Acl_Resource('playouthistory'))
-      ->add(new Zend_Acl_Resource('usersettings'));
+      ->add(new Zend_Acl_Resource('usersettings'))
+      ->add(new Zend_Acl_Resource('audiopreview'));
 
 /** Creating permissions */
 $ccAcl->allow('G', 'index')
@@ -48,7 +49,8 @@ $ccAcl->allow('G', 'index')
 	  ->allow('A', 'playouthistory')
 	  ->allow('A', 'user')
 	  ->allow('A', 'systemstatus')
-      ->allow('A', 'preference');
+      ->allow('A', 'preference')
+      ->allow('A', 'audiopreview');
 
 $aclPlugin = new Zend_Controller_Plugin_Acl($ccAcl);
 
diff --git a/airtime_mvc/application/controllers/AudiopreviewController.php b/airtime_mvc/application/controllers/AudiopreviewController.php
new file mode 100644
index 000000000..4bed2ff35
--- /dev/null
+++ b/airtime_mvc/application/controllers/AudiopreviewController.php
@@ -0,0 +1,192 @@
+<?php
+
+class AudiopreviewController extends Zend_Controller_Action
+{
+    public function init()
+    {
+        $ajaxContext = $this->_helper->getHelper('AjaxContext');
+        $ajaxContext->addActionContext('show-preview', 'json')
+                    ->addActionContext('audio-preview', 'json')
+                    ->addActionContext('get-show', 'json')
+                    ->addActionContext('playlist-preview', 'json')
+                    ->addActionContext('get-playlist', 'json')
+                    ->initContext();
+    }
+
+    /**
+     * Simply sets up the view to play the required audio track.
+     *  Gets the parameters from the request and sets them to the view.
+     */
+    public function audioPreviewAction()
+    {
+        $audioFileID = $this->_getParam('audioFileID');
+        $audioFileArtist = $this->_getParam('audioFileArtist');
+        $audioFileTitle = $this->_getParam('audioFileTitle');
+        
+        $request = $this->getRequest();
+        $baseUrl = $request->getBaseUrl();
+        
+        $baseDir = dirname($_SERVER['SCRIPT_FILENAME']);
+
+        $this->view->headScript()->appendFile($baseUrl.'/js/jplayer/preview_jplayer.js?'.filemtime($baseDir.'/js/jplayer/preview_jplayer.js'),'text/javascript');
+        $this->view->headScript()->appendFile($baseUrl.'/js/jplayer/jplayer.playlist.min.js?'.filemtime($baseDir.'/js/jplayer/jplayer.playlist.min.js'),'text/javascript');
+        $this->view->headLink()->appendStylesheet($baseUrl.'/js/jplayer/skin/jplayer.audio-preview.blue.monday.css?'.filemtime($baseDir.'/js/jplayer/skin/jplayer.audio-preview.blue.monday.css'));
+        $this->_helper->layout->setLayout('audioPlayer');
+
+        $logo = Application_Model_Preference::GetStationLogo();
+        if($logo){
+            $this->view->logo = "data:image/png;base64,$logo";
+        } else {
+            $this->view->logo = "$baseUrl/css/images/airtime_logo_jp.png";
+        }
+        $this->view->audioFileID = $audioFileID;
+        $this->view->audioFileArtist = $audioFileArtist;
+        $this->view->audioFileTitle = $audioFileTitle;
+
+        $this->_helper->viewRenderer->setRender('audio-preview');
+    }
+
+    /**
+     * Simply sets up the view to play the required playlist track.
+     *  Gets the parameters from the request and sets them to the view.
+     */
+    public function playlistPreviewAction()
+    {
+        $playlistIndex = $this->_getParam('playlistIndex');
+        $playlistID = $this->_getParam('playlistID');
+
+        $request = $this->getRequest();
+        $baseUrl = $request->getBaseUrl();
+        
+        $baseDir = dirname($_SERVER['SCRIPT_FILENAME']);
+
+        $this->view->headScript()->appendFile($baseUrl.'/js/jplayer/preview_jplayer.js?'.filemtime($baseDir.'/js/jplayer/preview_jplayer.js'),'text/javascript');
+        $this->view->headScript()->appendFile($baseUrl.'/js/jplayer/jplayer.playlist.min.js?'.filemtime($baseDir.'/js/jplayer/jplayer.playlist.min.js'),'text/javascript');
+        $this->view->headLink()->appendStylesheet($baseUrl.'/js/jplayer/skin/jplayer.audio-preview.blue.monday.css?'.filemtime($baseDir.'/js/jplayer/skin/jplayer.audio-preview.blue.monday.css'));
+        $this->_helper->layout->setLayout('audioPlayer');
+
+        $logo = Application_Model_Preference::GetStationLogo();
+        if($logo){
+            $this->view->logo = "data:image/png;base64,$logo";
+        } else {
+            $this->view->logo = "$baseUrl/css/images/airtime_logo_jp.png";
+        }
+        $this->view->playlistIndex= $playlistIndex;
+        $this->view->playlistID = $playlistID;
+
+        $this->_helper->viewRenderer->setRender('audio-preview');
+    }
+
+    /**
+     *Function will load and return the contents of the requested playlist.
+     */
+    public function getPlaylistAction(){
+        // disable the view and the layout
+        $this->view->layout()->disableLayout();
+        $this->_helper->viewRenderer->setNoRender(true);
+        
+        $playlistID = $this->_getParam('playlistID');
+        
+        if (!isset($playlistID)){
+            return;
+        }
+        
+        $pl = new Application_Model_Playlist($playlistID);
+        $result = Array();
+        
+        foreach ( $pl->getContents() as $track ){
+            
+            $elementMap = array( 'element_title' => isset($track['CcFiles']['track_title'])?$track['CcFiles']['track_title']:"",
+                              'element_artist' => isset($track['CcFiles']['artist_name'])?$track['CcFiles']['artist_name']:"",
+                              'element_id' => isset($track['id'])?$track['id']:"",
+                              'element_position' => isset($track['position'])?$track['position']:"",
+                            );
+            $fileExtension = pathinfo($track['CcFiles']['filepath'], PATHINFO_EXTENSION);
+            if ($fileExtension === 'mp3'){
+                $elementMap['element_mp3'] = $track['CcFiles']['gunid'].'.'.$fileExtension;
+            } else if( $fileExtension === 'ogg') {
+                $elementMap['element_oga'] = $track['CcFiles']['gunid'].'.'.$fileExtension;
+            } else {
+                //the media was neither mp3 or ogg
+            }
+            $result[] = $elementMap;
+        }
+
+        $this->_helper->json($result);
+    }
+
+    /**
+     * Simply sets up the view to play the required show track.
+     *  Gets the parameters from the request and sets them to the view.
+     */
+    public function showPreviewAction()
+    {
+        $showID = $this->_getParam('showID');
+        $showIndex = $this->_getParam('showIndex');
+        
+        $request = $this->getRequest();
+        $baseUrl = $request->getBaseUrl();
+        
+        $baseDir = dirname($_SERVER['SCRIPT_FILENAME']);
+
+        $this->view->headScript()->appendFile($baseUrl.'/js/jplayer/preview_jplayer.js?'.filemtime($baseDir.'/js/jplayer/preview_jplayer.js'),'text/javascript');
+        $this->view->headScript()->appendFile($baseUrl.'/js/jplayer/jplayer.playlist.min.js?'.filemtime($baseDir.'/js/jplayer/jplayer.playlist.min.js'),'text/javascript');
+        $this->view->headLink()->appendStylesheet($baseUrl.'/js/jplayer/skin/jplayer.audio-preview.blue.monday.css?'.filemtime($baseDir.'/js/jplayer/skin/jplayer.audio-preview.blue.monday.css'));
+        $this->_helper->layout->setLayout('audioPlayer');
+
+        $logo = Application_Model_Preference::GetStationLogo();
+        if($logo){
+            $this->view->logo = "data:image/png;base64,$logo";
+        } else {
+            $this->view->logo = "$baseUrl/css/images/airtime_logo_jp.png";
+        }
+        
+        $this->view->showID = $showID;
+        $this->view->showIndex = $showIndex;
+        
+        $this->_helper->viewRenderer->setRender('audio-preview');
+    }
+    
+    /**
+     *Function will load and return the contents of the requested show.
+     */
+    public function getShowAction()
+    {
+        Logging::log("in audio previews getShowAction");
+
+        // disable the view and the layout
+        $this->view->layout()->disableLayout();
+        $this->_helper->viewRenderer->setNoRender(true);
+        
+        $showID = $this->_getParam('showID');
+
+        if (!isset($showID)){
+            return;
+        }
+        
+        $showInstance = new Application_Model_ShowInstance($showID);
+        $result = Array();
+        $position = 0;
+        foreach ( $showInstance->getShowListContent() as $track ){
+            
+            $elementMap = array( 'element_title' => isset($track['track_title'])?$track['track_title']:"",
+                              'element_artist' => isset($track['artist_name'])?$track['artist_name']:"",
+                              'element_position' => $position,
+                              'element_id' => ++$position,
+                            );
+            
+            $fileExtension = pathinfo($track['filepath'], PATHINFO_EXTENSION);
+            if ($fileExtension === 'mp3'){
+                $elementMap['element_mp3'] = $track['gunid'].'.'.$fileExtension;
+            } else if( $fileExtension === 'ogg') {
+                $elementMap['element_oga'] = $track['gunid'].'.'.$fileExtension;
+            } else {
+                //the media was neither mp3 or ogg
+            }
+            $result[] = $elementMap;
+        }
+
+        $this->_helper->json($result);
+
+    }
+}
\ No newline at end of file
diff --git a/airtime_mvc/application/controllers/PlaylistController.php b/airtime_mvc/application/controllers/PlaylistController.php
index dc67546f6..a3715a6f5 100644
--- a/airtime_mvc/application/controllers/PlaylistController.php
+++ b/airtime_mvc/application/controllers/PlaylistController.php
@@ -198,75 +198,6 @@ class PlaylistController extends Zend_Controller_Action
         }
     }
     
-    public function playlistPreviewAction()
-    {
-        $audioFileID = $this->_getParam('audioFileID');
-        $audioFileArtist = $this->_getParam('audioFileArtist');
-        $audioFileTitle = $this->_getParam('audioFileTitle');
-        $playlistIndex = $this->_getParam('playlistIndex');
-        $playlistID = $this->_getParam('playlistID');
-
-        $request = $this->getRequest();
-        $baseUrl = $request->getBaseUrl();
-        
-        $baseDir = dirname($_SERVER['SCRIPT_FILENAME']);
-
-        $this->view->headScript()->appendFile($baseUrl.'/js/jplayer/preview_jplayer.js?'.filemtime($baseDir.'/js/jplayer/preview_jplayer.js'),'text/javascript');
-        $this->view->headScript()->appendFile($baseUrl.'/js/jplayer/jplayer.playlist.min.js?'.filemtime($baseDir.'/js/jplayer/jplayer.playlist.min.js'),'text/javascript');
-        $this->view->headLink()->appendStylesheet($baseUrl.'/js/jplayer/skin/jplayer.audio-preview.blue.monday.css?'.filemtime($baseDir.'/js/jplayer/skin/jplayer.audio-preview.blue.monday.css'));
-        $this->_helper->layout->setLayout('audioPlayer');
-
-        $logo = Application_Model_Preference::GetStationLogo();
-        if($logo){
-            $this->view->logo = "data:image/png;base64,$logo";
-        } else {
-            $this->view->logo = "$baseUrl/css/images/airtime_logo_jp.png";
-        }
-        
-        $this->view->audioFileID = $audioFileID;
-        $this->view->audioFileArtist = $audioFileArtist;
-        $this->view->audioFileTitle = $audioFileTitle;
-        $this->view->playlistIndex= $playlistIndex;
-        $this->view->playlistID = $playlistID;
-
-    }
-
-    public function getPlaylistAction(){
-        
-        // disable the view and the layout
-        $this->view->layout()->disableLayout();
-        $this->_helper->viewRenderer->setNoRender(true);
-        
-        $playlistID = $this->_getParam('playlistID');
-        
-        if (!isset($playlistID)){
-            return;
-        }
-        
-        $pl = new Application_Model_Playlist($playlistID);
-        $result = Array();
-        
-        foreach ( $pl->getContents() as $track ){
-            
-            $trackMap = array( 'title' => isset($track['CcFiles']['track_title'])?$track['CcFiles']['track_title']:"",
-                              'artist' => isset($track['CcFiles']['artist_name'])?$track['CcFiles']['artist_name']:"",
-                              'id' => isset($track['id'])?$track['id']:"",
-                              'position' => isset($track['position'])?$track['position']:"",
-                            );
-            $fileExtension = pathinfo($track['CcFiles']['filepath'], PATHINFO_EXTENSION);
-            if ($fileExtension === 'mp3'){
-                $trackMap['mp3'] = $track['CcFiles']['gunid'].'.'.$fileExtension;
-            } else if( $fileExtension === 'ogg') {
-                $trackMap['oga'] = $track['CcFiles']['gunid'].'.'.$fileExtension;
-            } else {
-                //the media was neither mp3 or ogg
-            }
-            $result[] = $trackMap;
-        }
-
-        $this->_helper->json($result);
-    }
-    
     public function addItemsAction()
     {
         $ids = $this->_getParam('ids', array());
diff --git a/airtime_mvc/application/models/ShowBuilder.php b/airtime_mvc/application/models/ShowBuilder.php
index bb87c9e6a..07d4fb684 100644
--- a/airtime_mvc/application/models/ShowBuilder.php
+++ b/airtime_mvc/application/models/ShowBuilder.php
@@ -126,6 +126,7 @@ class Application_Model_ShowBuilder {
         $row["duration"] = $showEndDT->format("U") - $showStartDT->format("U");
         $row["title"] = $p_item["show_name"];
         $row["instance"] = intval($p_item["si_id"]);
+        $row["image"] = '';
 
         $this->contentDT = $showStartDT;
 
@@ -156,10 +157,11 @@ class Application_Model_ShowBuilder {
             $this->isCurrent($startsEpoch, min($endsEpoch, $showEndEpoch), $row);
 
             $row["id"] = intval($p_item["sched_id"]);
+            $row["image"] = '<img src="/css/images/icon_audioclip.png">';
             $row["instance"] = intval($p_item["si_id"]);
             $row["starts"] = $schedStartDT->format("H:i:s");
             $row["ends"] = $schedEndDT->format("H:i:s");
-
+        
             $formatter = new LengthFormatter($p_item['file_length']);
             $row['runtime'] = $formatter->format();
 
@@ -177,12 +179,14 @@ class Application_Model_ShowBuilder {
         //show is empty or is a special kind of show (recording etc)
         else if (intval($p_item["si_record"]) === 1) {
             $row["record"] = true;
+            $row["image"] = '';
         }
         else {
 
             $row["empty"] = true;
             $row["id"] = 0 ;
             $row["instance"] = intval($p_item["si_id"]);
+            $row["image"] = '';
         }
 
         return $row;
@@ -201,7 +205,7 @@ class Application_Model_ShowBuilder {
 
         $timeFilled = new TimeFilledFormatter($runtime);
         $row["fRuntime"] = $timeFilled->format();
-
+        $row["image"] = '';
         return $row;
     }
 
@@ -293,7 +297,6 @@ class Application_Model_ShowBuilder {
         }
         
         if (!$this->hasCurrent) {
-        	
         }
 
         return $display_items;
diff --git a/airtime_mvc/application/views/scripts/playlist/playlist-preview.phtml b/airtime_mvc/application/views/scripts/audiopreview/audio-preview.phtml
similarity index 89%
rename from airtime_mvc/application/views/scripts/playlist/playlist-preview.phtml
rename to airtime_mvc/application/views/scripts/audiopreview/audio-preview.phtml
index fd5ba3c0a..0ec94a16a 100644
--- a/airtime_mvc/application/views/scripts/playlist/playlist-preview.phtml
+++ b/airtime_mvc/application/views/scripts/audiopreview/audio-preview.phtml
@@ -1,11 +1,17 @@
 <div id="jquery_jplayer_1" class="jp-jplayer"></div>
 <div id="jp_container_1" class="jp-audio">
+<span class='testing'></span>
+<?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->audioFileID)) { ?>
     <span class='audioFileID'><?php echo "$this->audioFileID" ?></span>
     <span class='audioFileTitle'><?php echo "$this->audioFileTitle" ?></span>
     <span class='audioFileArtist'><?php echo "$this->audioFileArtist" ?></span>
-    <span class='playlistID'><?php echo "$this->playlistID" ?></span>
-    <span class='playlistIndex'><?php echo "$this->playlistIndex" ?></span>
-    
+<?php } elseif (isset($this->showID)) { ?>
+    <span class='showID'><?php echo "$this->showID" ?></span>
+    <span class='showIndex'><?php echo "$this->showIndex" ?></span>
+<?php } ?>
     <div class="jp-type-playlist">
         <div class="jp-gui jp-interface">
             <ul class="jp-controls">
diff --git a/airtime_mvc/public/js/airtime/common/common.js b/airtime_mvc/public/js/airtime/common/common.js
index 85fe984e6..334b2a2de 100644
--- a/airtime_mvc/public/js/airtime/common/common.js
+++ b/airtime_mvc/public/js/airtime/common/common.js
@@ -16,6 +16,69 @@ function adjustDateToServerDate(date, serverTimezoneOffset){
     
     /* date object has been shifted to artificial UTC time. Now let's
      * shift it to the server's timezone */
-    
     return date;
 }
+
+/**
+ *handle to the jplayer window
+ */
+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();
+    
+    var audioFileID = $(this).attr('audioFile');
+    var playlistID = $('#pl_id:first').attr('value');
+    var playlistIndex = $(this).parent().parent().attr('id');
+    playlistIndex = playlistIndex.substring(4); //remove the spl_
+    
+    open_playlist_preview(playlistID, playlistIndex);
+}
+
+function open_audio_preview(audioFileID, audioFileTitle, audioFileArtist) {
+    openPreviewWindow('audiopreview/audio-preview/audioFileID/'+audioFileID+'/audioFileArtist/'+audioFileArtist+'/audioFileTitle/'+audioFileTitle);
+    _preview_window.focus();
+}
+/**
+ *Opens a jPlayer window for the specified info, for either an audio file or playlist.
+ *If audioFile, audioFileTitle, audioFileArtist is supplied the jplayer opens for one file
+ *Otherwise the playlistID and playlistIndex was supplied and a playlist is played starting with the
+ *given index.
+ */
+function open_playlist_preview(p_playlistID, p_playlistIndex) {
+    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('audiopreview/playlist-preview/playlistIndex/'+p_playlistIndex+'/playlistID/'+p_playlistID);
+    _preview_window.focus();
+}
+
+/**
+ *Opens a jPlayer window for the specified info, for either an audio file or playlist.
+ *If audioFile, audioFileTitle, audioFileArtist is supplied the jplayer opens for one file
+ *Otherwise the playlistID and playlistIndex was supplied and a playlist is played starting with the
+ *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('audiopreview/show-preview/showID/'+p_showID+'/showIndex/'+p_showIndex);
+    _preview_window.focus();
+}
+
+function openPreviewWindow(url) {
+    //$.post(baseUri+'Playlist/audio-preview-player', {fileName: fileName, cueIn: cueIn, cueOut: cueOut, fadeIn: fadeIn, fadeInFileName: fadeInFileName, fadeOut: fadeOut, fadeOutFileName: fadeOutFileName})
+    _preview_window = window.open(url, 'Audio Player', 'width=450,height=800');
+    //Set the play button to pause.
+    //var elemID = "spl_"+elemIndexString;
+    //$('#'+elemID+' div.list-item-container a span').attr("class", "ui-icon ui-icon-pause");
+    return false;
+}
\ No newline at end of file
diff --git a/airtime_mvc/public/js/airtime/library/library.js b/airtime_mvc/public/js/airtime/library/library.js
index a18e701e2..78aa08b13 100644
--- a/airtime_mvc/public/js/airtime/library/library.js
+++ b/airtime_mvc/public/js/airtime/library/library.js
@@ -43,12 +43,12 @@ var AIRTIME = (function(AIRTIME) {
     
     libraryInit = function() {
         var oTable,
-        	libContentDiv = $("#library_content");
-        	tableHeight = libContentDiv.height() - 140;
+            libContentDiv = $("#library_content");
+            tableHeight = libContentDiv.height() - 140;
         
         oTable = $('#library_display').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.
             "aoColumns": [
               /* ftype */         {"sTitle": "", "mDataProp": "ftype", "bSearchable": false, "bVisible": false},
               /* Checkbox */      {"sTitle": "<input type='checkbox' name='pl_cb_all'>", "mDataProp": "checkbox", "bSortable": false, "bSearchable": false, "sWidth": "25px", "sClass": "library_checkbox"},
@@ -62,7 +62,7 @@ var AIRTIME = (function(AIRTIME) {
               /* Upload Time */   {"sTitle": "Uploaded", "mDataProp": "utime", "sClass": "library_upload_time"},
               /* Last Modified */ {"sTitle": "Last Modified", "mDataProp": "mtime", "bVisible": false, "sClass": "library_modified_time"},
               /* Track Number */  {"sTitle": "Track", "mDataProp": "track_number", "bSearchable": false, "bVisible": false, "sClass": "library_track", "sWidth": "65px"},
-              /* Mood */  		  {"sTitle": "Mood", "mDataProp": "mood", "bSearchable": false, "bVisible": false, "sClass": "library_mood"},
+              /* Mood */          {"sTitle": "Mood", "mDataProp": "mood", "bSearchable": false, "bVisible": false, "sClass": "library_mood"},
               /* BPM */  {"sTitle": "BPM", "mDataProp": "bpm", "bSearchable": false, "bVisible": false, "sClass": "library_bpm"},
               /* Composer */  {"sTitle": "Composer", "mDataProp": "composer", "bSearchable": false, "bVisible": false, "sClass": "library_composer"},
               /* Website */  {"sTitle": "Website", "mDataProp": "info_url", "bSearchable": false, "bVisible": false, "sClass": "library_url"},
@@ -167,9 +167,9 @@ var AIRTIME = (function(AIRTIME) {
                 $(nRow).find('td.library_type').click(function(){
                     if (aData.ftype === 'playlist' && aData.length !== '0.0'){
                         playlistIndex = $(this).parent().attr('id').substring(3); //remove the pl_
-                        open_playlist_preview(aData.audioFile, "", "", playlistIndex, 0);
+                        open_playlist_preview(playlistIndex, 0);
                     } else if (aData.ftype === 'audioclip') {
-                        open_playlist_preview(aData.audioFile, aData.track_title, aData.artist_name);
+                        open_audio_preview(aData.audioFile, aData.track_title, aData.artist_name);
                     }
                     return false;
                 });
@@ -374,9 +374,9 @@ var AIRTIME = (function(AIRTIME) {
                         callback = function() {
                            if (data.ftype === 'playlist' && data.length !== '0.0'){
                                 playlistIndex = $(this).parent().attr('id').substring(3); //remove the pl_
-                                open_playlist_preview(data.audioFile, "", "", playlistIndex, 0);
+                                open_playlist_preview(playlistIndex, 0);
                             } else if (data.ftype === 'audioclip') {
-                                open_playlist_preview(data.audioFile, data.track_title, data.artist_name);
+                                open_audio_preview(data.audioFile, data.track_title, data.artist_name);
                             }
                         };
                         oItems.play.callback = callback;
@@ -652,50 +652,3 @@ function addQtipToSCIcons(){
         }
     });
 }
-
-/**
- *handle to the jplayer window
- */
-var preview_window = null;
-
-/**
- *Gets the info from the view when menu action play choosen and opens the jplayer window.
- */
-function openAudioPreview(event) {
-    event.stopPropagation();
-    
-    var audioFileID = $(this).attr('audioFile');
-    var playlistID = $('#pl_id:first').attr('value');
-    var playlistIndex = $(this).parent().parent().attr('id');
-    playlistIndex = playlistIndex.substring(4); //remove the spl_
-    
-    open_playlist_preview(audioFileID, "", "", playlistID, playlistIndex);
-}
-
-/**
- *Opens a jPlayer window for the specified info, for either an audio file or playlist.
- *If audioFile, audioFileTitle, audioFileArtist is supplied the jplayer opens for one file
- *Otherwise the playlistID and playlistIndex was supplied and a playlist is played starting with the
- *given index.
- */
-function open_playlist_preview(audioFileID, audioFileTitle, audioFileArtist, playlistID, playlistIndex) {
-    if (playlistIndex != undefined) {
-        if (playlistIndex == undefined) //Use a resonable default.
-            playlistIndex = 0;
-        url = 'Playlist/playlist-preview/audioFileID/'+audioFileID+'/playlistIndex/'+playlistIndex+'/playlistID/'+playlistID;
-    } else {
-        url = 'Playlist/playlist-preview/audioFileID/'+audioFileID+'/audioFileArtist/'+audioFileArtist+'/audioFileTitle/'+audioFileTitle;
-    }
-    //$.post(baseUri+'Playlist/audio-preview-player', {fileName: fileName, cueIn: cueIn, cueOut: cueOut, fadeIn: fadeIn, fadeInFileName: fadeInFileName, fadeOut: fadeOut, fadeOutFileName: fadeOutFileName})
-    if (preview_window == null || preview_window.closed || playlistIndex === undefined){
-        preview_window = window.open(url, 'Audio Player', 'width=450,height=800');
-    } else if (!preview_window.closed) {
-        preview_window.playAll(playlistID, playlistIndex);
-    }
-    //Set the play button to pause.
-    //var elemID = "spl_"+elemIndexString;
-    //$('#'+elemID+' div.list-item-container a span').attr("class", "ui-icon ui-icon-pause");
-
-    preview_window.focus();
-    return false;
-}
diff --git a/airtime_mvc/public/js/airtime/showbuilder/builder.js b/airtime_mvc/public/js/airtime/showbuilder/builder.js
index fd0e0dc84..93616d52a 100644
--- a/airtime_mvc/public/js/airtime/showbuilder/builder.js
+++ b/airtime_mvc/public/js/airtime/showbuilder/builder.js
@@ -1,576 +1,592 @@
 var AIRTIME = (function(AIRTIME){
-	var mod,
-		oSchedTable,
-		fnServerData;
-	
-	if (AIRTIME.showbuilder === undefined) {
-		AIRTIME.showbuilder = {};
-	}
-	mod = AIRTIME.showbuilder;
-	
-	function checkError(json) {
-		if (json.error !== undefined) {
-			alert(json.error);
-		}
-	}
-	
-	mod.timeout = undefined;
-	
-	mod.resetTimestamp = function() {
-		var timestamp = $("#sb_timestamp");
-		//reset timestamp value since input values could have changed.
-		timestamp.val(-1);
-	};
-	
-	mod.setTimestamp = function(timestamp) {
-		$("#sb_timestamp").val(timestamp);
-	};
-	
-	mod.getTimestamp = function() {
-		var timestamp = $("#sb_timestamp"),
-			val;
-		
-		//if the timestamp field is on the page return it, or give the default of -1
-		//to ensure a page refresh.
-		if (timestamp.length === 1) {
-			val = timestamp.val();
-		}
-		else {
-			val = -1;
-		}
-		
-		return val;
-	};
-	
-	mod.fnAdd = function(aMediaIds, aSchedIds) {
-		var oLibTT = TableTools.fnGetInstance('library_display');
-		
-		$.post("/showbuilder/schedule-add", 
-			{"format": "json", "mediaIds": aMediaIds, "schedIds": aSchedIds}, 
-			function(json){
-				checkError(json);
-				oSchedTable.fnDraw();
-				oLibTT.fnSelectNone();
-			});
-	};
-	
-	mod.fnMove = function(aSelect, aAfter) {
-		
-		$.post("/showbuilder/schedule-move", 
-			{"format": "json", "selectedItem": aSelect, "afterItem": aAfter},  
-			function(json){
-				checkError(json);
-				oSchedTable.fnDraw();
-			});
-	};
-	
-	mod.fnRemove = function(aItems) {
-		
-		$.post( "/showbuilder/schedule-remove",
-			{"items": aItems, "format": "json"},
-			function(json) {
-				checkError(json);
-				oSchedTable.fnDraw();
-			});
-	};
-	
-	fnServerData = function ( sSource, aoData, fnCallback ) {
-		
-		aoData.push( { name: "timestamp", value: AIRTIME.showbuilder.getTimestamp()} );
-		aoData.push( { name: "format", value: "json"} );
-		
-		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("ops")) {
-			aoData.push( { name: "myShows", value: fnServerData.ops.myShows} );
-			aoData.push( { name: "showFilter", value: fnServerData.ops.showFilter} );
-		}
-		
-		$.ajax( {
-			"dataType": "json",
-			"type": "GET",
-			"url": sSource,
-			"data": aoData,
-			"success": function(json) {
-				AIRTIME.showbuilder.setTimestamp(json.timestamp);
-				fnCallback(json);
-			}
-		} );
-	};
-	
-	mod.fnServerData = fnServerData;
-	
-	mod.builderDataTable = function() {
-		var tableDiv = $('#show_builder_table'),
-			oTable,
-			fnRemoveSelectedItems,
-			tableHeight;
+var mod,
+    oSchedTable,
+    fnServerData;
 
-		fnRemoveSelectedItems = function() {
-			var oTT = TableTools.fnGetInstance('show_builder_table'),
-				aData = oTT.fnGetSelectedData(),
-				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}); 	
-			}
-			
-			AIRTIME.showbuilder.fnRemove(aItems);
-		};
-		
-		oTable = tableDiv.dataTable( {
-			"aoColumns": [
-		    /* checkbox */ {"mDataProp": "allowed", "sTitle": "<input type='checkbox' name='sb_cb_all'>", "sWidth": "15px"},
-	        /* starts */{"mDataProp": "starts", "sTitle": "Start"},
-	        /* ends */{"mDataProp": "ends", "sTitle": "End"},
-	        /* runtime */{"mDataProp": "runtime", "sTitle": "Duration", "sClass": "library_length"},
-	        /* title */{"mDataProp": "title", "sTitle": "Title"},
-	        /* creator */{"mDataProp": "creator", "sTitle": "Creator"},
-	        /* album */{"mDataProp": "album", "sTitle": "Album"},
-	        /* cue in */{"mDataProp": "cuein", "sTitle": "Cue In", "bVisible": false},
-	        /* cue out */{"mDataProp": "cueout", "sTitle": "Cue Out", "bVisible": false},
-	        /* fade in */{"mDataProp": "fadein", "sTitle": "Fade In", "bVisible": false},
-	        /* fade out */{"mDataProp": "fadeout", "sTitle": "Fade Out", "bVisible": false}
-	        ],
-	        
-	        "bJQueryUI": true,
-	        "bSort": false,
-	        "bFilter": false,
-	        "bProcessing": true,
-			"bServerSide": true,
-			"bInfo": false,
-			"bAutoWidth": false,
-			
-			"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) {
-	           
-	    		$.ajax({
-				  url: "/usersettings/set-timeline-datatable",
-				  type: "POST",
-				  data: {settings : oData, format: "json"},
-				  dataType: "json",
-				  success: function(){},
-				  error: function (jqXHR, textStatus, errorThrown) {
-					  var x;
-				  }
-				});
-	        },
-	        "fnStateLoad": function (oSettings) {
-	        	var o;
+if (AIRTIME.showbuilder === undefined) {
+    AIRTIME.showbuilder = {};
+}
+mod = AIRTIME.showbuilder;
 
-	        	$.ajax({
-	  			  url: "/usersettings/get-timeline-datatable",
-	  			  type: "GET",
-	  			  data: {format: "json"},
-	  			  dataType: "json",
-	  			  async: false,
-	  			  success: function(json){
-	  				  o = json.settings;
-	  			  },
-	  			  error: function (jqXHR, textStatus, errorThrown) {
-					  var x;
-				  }
-	  			});
-	        	
-	        	return o;
-	        },
-	        "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++) {	
-		        	a[i] = (a[i] === "true") ? true : false;
-		        }
-		        
-		        a = oData.ColReorder;
-		        for (i = 0, length = a.length; i < length; i++) {	
-		        	a[i] = parseInt(a[i], 10);
-		        }
-		       
-		        oData.iCreate = parseInt(oData.iCreate, 10);
-	        },
-	        
-			"fnServerData": AIRTIME.showbuilder.fnServerData,
-			"fnRowCallback": function ( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
-				var i,
-					sSeparatorHTML,
-					fnPrepareSeparatorRow,
-					node,
-					cl="";
-				
-				//save some info for reordering purposes.
-				$(nRow).data({"aData": aData});
-				
-				if (aData.current === true) {
-					$(nRow).addClass("sb-now-playing");
-				}
-				
-				if (aData.allowed !== true) {
-					$(nRow).addClass("sb-not-allowed");
-				}
-				else {
-					$(nRow).addClass("sb-allowed");
-				}
-				
-				//status used to colour tracks.
-				if (aData.status === 2) {
-					$(nRow).addClass("sb-boundry");
-				}
-				else if (aData.status === 0) {
-					$(nRow).addClass("sb-over");
-				}
-				
-				fnPrepareSeparatorRow = function(sRowContent, sClass, iNodeIndex) {
-					
-					node = nRow.children[iNodeIndex];
-					node.innerHTML = sRowContent;
-					node.setAttribute('colspan',100);
-					for (i = iNodeIndex + 1; i < nRow.children.length; i = i+1) {
-						node = nRow.children[i];
-						node.innerHTML = "";
-						node.setAttribute("style", "display : none");
-					}
-					
-					$(nRow).addClass(sClass);
-				};
-				
-				if (aData.header === true) {
-					cl = 'sb-header';
-					
-					sSeparatorHTML = '<span>'+aData.title+'</span><span>'+aData.starts+'</span><span>'+aData.ends+'</span>';
-					fnPrepareSeparatorRow(sSeparatorHTML, cl, 0);
-				}
-				else if (aData.footer === true) {
-					node = nRow.children[0];
-					cl = 'sb-footer';
-					
-					//check the show's content status.
-					if (aData.runtime > 0) {
-						node.innerHTML = '<span class="ui-icon ui-icon-check"></span>';
-						cl = cl + ' ui-state-highlight';
-					}
-					else {
-						node.innerHTML = '<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) {
-					
-					sSeparatorHTML = '<span>Show Empty</span>';
-					cl = cl + " sb-empty odd";
-					
-					fnPrepareSeparatorRow(sSeparatorHTML, cl, 0);
-				}
-				else if (aData.record === true) {
-					
-					sSeparatorHTML = '<span>Recording From Line In</span>';
-					cl = cl + " sb-record odd";
-					
-					fnPrepareSeparatorRow(sSeparatorHTML, cl, 0);
-				}
-				else {
-					
-					node = nRow.children[0];
-					if (aData.allowed === true) {
-						node.innerHTML = '<input type="checkbox" name="'+aData.id+'"></input>';
-					}
-					else {
-						node.innerHTML = '';
-					}
-				}
-			},
-			"fnDrawCallback": function(oSettings, json) {
-				var wrapperDiv,
-					markerDiv,
-					td,
-					$lib = $("#library_content"),
-					tr,
-					oTable = $('#show_builder_table').dataTable(),
-					aData;
-				
-				clearTimeout(AIRTIME.showbuilder.timeout);
-				
-				//only create the cursor arrows if the library is on the page.
-				if ($lib.length > 0 && $lib.filter(":visible").length > 0) {
-					
-					//create cursor arrows.
-					tableDiv.find("tr.sb-now-playing, tr:not(:first, .sb-footer, .sb-empty, .sb-not-allowed)").each(function(i, el) {
-				    	td = $(el).find("td:first");
-				    	if (td.hasClass("dataTables_empty")) {
-				    		return false;
-				    	}
-				    	
-				    	wrapperDiv = $("<div />", {
-				    		"class": "innerWrapper",
-				    		"css": {
-				    			"height": td.height()
-				    		}
-				    	});
-				    	markerDiv = $("<div />", {
-				    		"class": "marker"
-				    	});
-				    	
-			    		td.append(markerDiv).wrapInner(wrapperDiv);
-				    });
-				}
-				
-				//if the now playing song is visible set a timeout to redraw the table at the start of the next song.
-				tr = tableDiv.find("tr.sb-now-playing");
-				
-				if (tr.length > 0) {
-					aData = tr.data("aData");
-					
-					setTimeout(function(){
-						AIRTIME.showbuilder.resetTimestamp();
-						oTable.fnDraw();
-					}, aData.refresh * 1000); //need refresh in milliseconds
-				}
-				//current song is not set, set a timeout to refresh when the first item on the timeline starts.
-				else {
-					tr = tableDiv.find("tbody tr.sb-allowed.sb-header:first");
-					
-					if (tr.length > 0) {
-						aData = tr.data("aData");
-						
-						AIRTIME.showbuilder.timeout = setTimeout(function(){
-							AIRTIME.showbuilder.resetTimestamp();
-							oTable.fnDraw();
-						}, aData.timeUntil * 1000); //need refresh in milliseconds
-					}	
-				}
-		    },
-			"fnHeaderCallback": function(nHead) {
-				$(nHead).find("input[type=checkbox]").attr("checked", false);
-			},
-			//remove any selected nodes before the draw.
-			"fnPreDrawCallback": function( oSettings ) {
-				var oTT;
-				
-				oTT = TableTools.fnGetInstance('show_builder_table');
-				oTT.fnSelectNone();
-		    },
-			
-			"oColVis": {
-				"aiExclude": [ 0, 1 ]
-			},
-			
-			"oColReorder": {
-				"iFixedColumns": 2
-			},
-			
-			"oTableTools": {
-	        	"sRowSelect": "multi",
-				"aButtons": [],
-				"fnPreRowSelect": function ( e ) {
-					var node = e.currentTarget;
-					//don't select separating rows, or shows without privileges.
-					if ($(node).hasClass("sb-header")
-						|| $(node).hasClass("sb-footer")
-						|| $(node).hasClass("sb-empty")
-						|| $(node).hasClass("sb-not-allowed")) {
-						return false;
-					}
-					return true;
-	            },
-				"fnRowSelected": function ( node ) {
+function checkError(json) {
+    if (json.error !== undefined) {
+        alert(json.error);
+    }
+}
+
+mod.timeout = undefined;
+
+mod.resetTimestamp = function() {
+    var timestamp = $("#sb_timestamp");
+    //reset timestamp value since input values could have changed.
+    timestamp.val(-1);
+};
+
+mod.setTimestamp = function(timestamp) {
+    $("#sb_timestamp").val(timestamp);
+};
+
+mod.getTimestamp = function() {
+    var timestamp = $("#sb_timestamp"),
+        val;
+    
+    //if the timestamp field is on the page return it, or give the default of -1
+    //to ensure a page refresh.
+    if (timestamp.length === 1) {
+        val = timestamp.val();
+    }
+    else {
+        val = -1;
+    }
+    
+    return val;
+};
+
+mod.fnAdd = function(aMediaIds, aSchedIds) {
+    var oLibTT = TableTools.fnGetInstance('library_display');
+    
+    $.post("/showbuilder/schedule-add", 
+        {"format": "json", "mediaIds": aMediaIds, "schedIds": aSchedIds}, 
+        function(json){
+            checkError(json);
+            oSchedTable.fnDraw();
+            oLibTT.fnSelectNone();
+        });
+};
+
+mod.fnMove = function(aSelect, aAfter) {
+    
+    $.post("/showbuilder/schedule-move", 
+        {"format": "json", "selectedItem": aSelect, "afterItem": aAfter},  
+        function(json){
+            checkError(json);
+            oSchedTable.fnDraw();
+        });
+};
+
+mod.fnRemove = function(aItems) {
+    
+    $.post( "/showbuilder/schedule-remove",
+        {"items": aItems, "format": "json"},
+        function(json) {
+            checkError(json);
+            oSchedTable.fnDraw();
+        });
+};
+
+fnServerData = function ( sSource, aoData, fnCallback ) {
+    
+    aoData.push( { name: "timestamp", value: AIRTIME.showbuilder.getTimestamp()} );
+    aoData.push( { name: "format", value: "json"} );
+    
+    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("ops")) {
+        aoData.push( { name: "myShows", value: fnServerData.ops.myShows} );
+        aoData.push( { name: "showFilter", value: fnServerData.ops.showFilter} );
+    }
+    
+    $.ajax( {
+        "dataType": "json",
+        "type": "GET",
+        "url": sSource,
+        "data": aoData,
+        "success": function(json) {
+            AIRTIME.showbuilder.setTimestamp(json.timestamp);
+            fnCallback(json);
+        }
+    } );
+};
+
+mod.fnServerData = fnServerData;
+
+mod.builderDataTable = function() {
+    var tableDiv = $('#show_builder_table'),
+        oTable,
+        fnRemoveSelectedItems,
+        tableHeight;
+
+    fnRemoveSelectedItems = function() {
+        var oTT = TableTools.fnGetInstance('show_builder_table'),
+            aData = oTT.fnGetSelectedData(),
+            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}); 	
+        }
+        
+        AIRTIME.showbuilder.fnRemove(aItems);
+    };
+    
+    oTable = tableDiv.dataTable( {
+        "aoColumns": [
+        /* checkbox */ {"mDataProp": "allowed", "sTitle": "<input type='checkbox' name='sb_cb_all'>", "sWidth": "15px"},
+        /* Type */ {"mDataProp": "image", "sTitle": "", "sClass": "library_image", "sWidth": "25px", "bVisible": true},
+        /* starts */{"mDataProp": "starts", "sTitle": "Start"},
+        /* ends */{"mDataProp": "ends", "sTitle": "End"},
+        /* runtime */{"mDataProp": "runtime", "sTitle": "Duration", "sClass": "library_length"},
+        /* title */{"mDataProp": "title", "sTitle": "Title"},
+        /* creator */{"mDataProp": "creator", "sTitle": "Creator"},
+        /* album */{"mDataProp": "album", "sTitle": "Album"},
+        /* cue in */{"mDataProp": "cuein", "sTitle": "Cue In", "bVisible": false},
+        /* cue out */{"mDataProp": "cueout", "sTitle": "Cue Out", "bVisible": false},
+        /* fade in */{"mDataProp": "fadein", "sTitle": "Fade In", "bVisible": false},
+        /* fade out */{"mDataProp": "fadeout", "sTitle": "Fade Out", "bVisible": false}
+        ],
+        
+        "bJQueryUI": true,
+        "bSort": false,
+        "bFilter": false,
+        "bProcessing": true,
+        "bServerSide": true,
+        "bInfo": false,
+        "bAutoWidth": false,
+        
+        "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) {
+           
+            $.ajax({
+              url: "/usersettings/set-timeline-datatable",
+              type: "POST",
+              data: {settings : oData, format: "json"},
+              dataType: "json",
+              success: function(){},
+              error: function (jqXHR, textStatus, errorThrown) {
+                  var x;
+              }
+            });
+        },
+        "fnStateLoad": function (oSettings) {
+            var o;
+
+            $.ajax({
+              url: "/usersettings/get-timeline-datatable",
+              type: "GET",
+              data: {format: "json"},
+              dataType: "json",
+              async: false,
+              success: function(json){
+                  o = json.settings;
+              },
+              error: function (jqXHR, textStatus, errorThrown) {
+                  var x;
+              }
+            });
+            
+            return o;
+        },
+        "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++) {	
+                a[i] = (a[i] === "true") ? true : false;
+            }
+            
+            a = oData.ColReorder;
+            for (i = 0, length = a.length; i < length; i++) {	
+                a[i] = parseInt(a[i], 10);
+            }
+           
+            oData.iCreate = parseInt(oData.iCreate, 10);
+        },
+        
+        "fnServerData": AIRTIME.showbuilder.fnServerData,
+        "fnRowCallback": function ( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
+            var i,
+                sSeparatorHTML,
+                fnPrepareSeparatorRow,
+                node,
+                cl="";
+            
+            
+                
+            //save some info for reordering purposes.
+            $(nRow).data({"aData": aData});
+            
+            if (aData.current === true) {
+                $(nRow).addClass("sb-now-playing");
+            }
+            
+            if (aData.allowed !== true) {
+                $(nRow).addClass("sb-not-allowed");
+            }
+            else {
+                $(nRow).addClass("sb-allowed");
+            }
+            
+            //status used to colour tracks.
+            if (aData.status === 2) {
+                $(nRow).addClass("sb-boundry");
+            }
+            else if (aData.status === 0) {
+                $(nRow).addClass("sb-over");
+            }
+            
+            fnPrepareSeparatorRow = function(sRowContent, sClass, iNodeIndex) {
+                
+                node = nRow.children[iNodeIndex];
+                node.innerHTML = sRowContent;
+                node.setAttribute('colspan',100);
+                for (i = iNodeIndex + 1; i < nRow.children.length; i = i+1) {
+                    node = nRow.children[i];
+                    node.innerHTML = "";
+                    node.setAttribute("style", "display : none");
+                }
+                
+                $(nRow).addClass(sClass);
+            };
+            
+            //add the play function to the library_type td or the speaker
+            $(nRow).find('td.library_image').click(function(){
+                open_show_preview(aData.instance, iDisplayIndex);
+                return false;
+            });
+            
+            
+            if (aData.header === true) {
+                cl = 'sb-header';
+                
+                sSeparatorHTML = '<span>'+aData.title+'</span><span>'+aData.starts+'</span><span>'+aData.ends+'</span>';
+                fnPrepareSeparatorRow(sSeparatorHTML, cl, 0);
+                
+                //add the play function to the show row...could be confusing so leave it out for now
+                //$(nRow).click(function(){
+                //    open_show_preview(aData.instance);
+                //    return false;
+                //});
+            }
+            else if (aData.footer === true) {
+                node = nRow.children[0];
+                cl = 'sb-footer';
+                
+                //check the show's content status.
+                if (aData.runtime > 0) {
+                    node.innerHTML = '<span class="ui-icon ui-icon-check"></span>';
+                    cl = cl + ' ui-state-highlight';
+                }
+                else {
+                    node.innerHTML = '<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) {
+                
+                sSeparatorHTML = '<span>Show Empty</span>';
+                cl = cl + " sb-empty odd";
+                
+                fnPrepareSeparatorRow(sSeparatorHTML, cl, 0);
+            }
+            else if (aData.record === true) {
+                
+                sSeparatorHTML = '<span>Recording From Line In</span>';
+                cl = cl + " sb-record odd";
+                
+                fnPrepareSeparatorRow(sSeparatorHTML, cl, 0);
+            }
+            else {
+                
+                node = nRow.children[0];
+                if (aData.allowed === true) {
+                    node.innerHTML = '<input type="checkbox" name="'+aData.id+'"></input>';
+                }
+                else {
+                    node.innerHTML = '';
+                }
+            }
+        },
+        "fnDrawCallback": function(oSettings, json) {
+            var wrapperDiv,
+                markerDiv,
+                td,
+                $lib = $("#library_content"),
+                tr,
+                oTable = $('#show_builder_table').dataTable(),
+                aData;
+            
+            clearTimeout(AIRTIME.showbuilder.timeout);
+            
+            //only create the cursor arrows if the library is on the page.
+            if ($lib.length > 0 && $lib.filter(":visible").length > 0) {
+                
+                //create cursor arrows.
+                tableDiv.find("tr.sb-now-playing, tr:not(:first, .sb-footer, .sb-empty, .sb-not-allowed)").each(function(i, el) {
+                    td = $(el).find("td:first");
+                    if (td.hasClass("dataTables_empty")) {
+                        return false;
+                    }
+                    
+                    wrapperDiv = $("<div />", {
+                        "class": "innerWrapper",
+                        "css": {
+                            "height": td.height()
+                        }
+                    });
+                    markerDiv = $("<div />", {
+                        "class": "marker"
+                    });
+                    
+                    td.append(markerDiv).wrapInner(wrapperDiv);
+                });
+            }
+            
+            //if the now playing song is visible set a timeout to redraw the table at the start of the next song.
+            tr = tableDiv.find("tr.sb-now-playing");
+            
+            if (tr.length > 0) {
+                aData = tr.data("aData");
+                
+                setTimeout(function(){
+                    AIRTIME.showbuilder.resetTimestamp();
+                    oTable.fnDraw();
+                }, aData.refresh * 1000); //need refresh in milliseconds
+            }
+            //current song is not set, set a timeout to refresh when the first item on the timeline starts.
+            else {
+                tr = tableDiv.find("tbody tr.sb-allowed.sb-header:first");
+                
+                if (tr.length > 0) {
+                    aData = tr.data("aData");
+                    
+                    AIRTIME.showbuilder.timeout = setTimeout(function(){
+                        AIRTIME.showbuilder.resetTimestamp();
+                        oTable.fnDraw();
+                    }, aData.timeUntil * 1000); //need refresh in milliseconds
+                }
+            }
+        },
+        "fnHeaderCallback": function(nHead) {
+            $(nHead).find("input[type=checkbox]").attr("checked", false);
+        },
+        //remove any selected nodes before the draw.
+        "fnPreDrawCallback": function( oSettings ) {
+            var oTT;
+            
+            oTT = TableTools.fnGetInstance('show_builder_table');
+            oTT.fnSelectNone();
+        },
+        
+        "oColVis": {
+            "aiExclude": [ 0, 1 ]
+        },
+        
+        "oColReorder": {
+            "iFixedColumns": 2
+        },
+        
+        "oTableTools": {
+            "sRowSelect": "multi",
+            "aButtons": [],
+            "fnPreRowSelect": function ( e ) {
+                var node = e.currentTarget;
+                //don't select separating rows, or shows without privileges.
+                if ($(node).hasClass("sb-header")
+                    || $(node).hasClass("sb-footer")
+                    || $(node).hasClass("sb-empty")
+                    || $(node).hasClass("sb-not-allowed")) {
+                    return false;
+                }
+                return true;
+            },
+            "fnRowSelected": function ( node ) {
+
+                //seems to happen if everything is selected
+                if ( node === null) {
+                    oTable.find("input[type=checkbox]").attr("checked", true);
+                }
+                else {
+                    $(node).find("input[type=checkbox]").attr("checked", true);
+                }
+                
+                //checking to enable buttons
+                AIRTIME.button.enableButton("sb_delete");
+            },
+            "fnRowDeselected": function ( node ) {
+                var selected;
+                            
+              //seems to happen if everything is deselected
+                if ( node === null) {
+                    tableDiv.find("input[type=checkbox]").attr("checked", false);
+                    selected = [];
+                }
+                else {
+                    $(node).find("input[type=checkbox]").attr("checked", false);
+                    selected = tableDiv.find("input[type=checkbox]").filter(":checked");
+                }
+                
+                //checking to disable buttons
+                if (selected.length === 0) {
+                    AIRTIME.button.disableButton("sb_delete");
+                }
+            }
+        },
+        
+        // R = ColReorderResize, C = ColVis, T = TableTools
+        "sDom": 'Rr<"H"CT>t',
+        
+        "sAjaxDataProp": "schedule",
+        "sAjaxSource": "/showbuilder/builder-feed"	
+    });
+    
+    $('[name="sb_cb_all"]').click(function(){
+        var oTT = TableTools.fnGetInstance('show_builder_table');
+        
+        if ($(this).is(":checked")) {
+            var allowedNodes;
+            
+            allowedNodes = oTable.find('tr:not(:first, .sb-header, .sb-empty, .sb-footer, .sb-not-allowed)');
+            
+            allowedNodes.each(function(i, el){
+                oTT.fnSelect(el);
+            });	
+        }
+        else {
+            oTT.fnSelectNone();
+        }       
+    });
+    
+    var sortableConf = (function(){
+        var origTrs,
+            aItemData = [],
+            oPrevData,
+            fnAdd,
+            fnMove,
+            fnReceive,
+            fnUpdate,
+            i, 
+            html;
+        
+        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});
+            
+            AIRTIME.showbuilder.fnAdd(aMediaIds, aSchedIds);
+        };
+        
+        fnMove = function() {
+            var aSelect = [],
+                aAfter = [];
+        
+            aSelect.push({"id": aItemData[0].id, "instance": aItemData[0].instance, "timestamp": aItemData[0].timestamp});
+            aAfter.push({"id": oPrevData.id, "instance": oPrevData.instance, "timestamp": oPrevData.timestamp});
+    
+            AIRTIME.showbuilder.fnMove(aSelect, aAfter);
+        };
+        
+        fnReceive = function(event, ui) {
+            var aItems = [],
+                oLibTT = TableTools.fnGetInstance('library_display');
+        
+            aItems = oLibTT.fnGetSelectedData();
+            
+            //if nothing is checked select the dragged item.
+            if (aItems.length === 0) {
+                aItems.push(ui.item.data("aData"));
+            }
+            
+            origTrs = aItems;
+            html = ui.helper.html();
+        };
+        
+        fnUpdate = function(event, ui) {
+            var prev = ui.item.prev();
+            
+            //can't add items outside of shows.
+            if (prev.hasClass("sb-footer") 
+                    || prev.find("td:first").hasClass("dataTables_empty")
+                    || prev.length === 0) {
+                alert("Cannot schedule outside a show.");
+                ui.item.remove();
+                return;
+            }
+            
+            aItemData = [];
+            oPrevData = prev.data("aData");
+            
+            //item was dragged in
+            if (origTrs !== undefined) {
+                
+                $("#show_builder_table tr.ui-draggable")
+                    .empty()
+                    .after(html);
+                
+                aItemData = origTrs;
+                origTrs = undefined;
+                fnAdd();
+            }
+            //item was reordered.
+            else {
+                aItemData.push(ui.item.data("aData"));
+                fnMove();
+            }
+        };
+        
+        return {
+            placeholder: "placeholder show-builder-placeholder ui-state-highlight",
+            forcePlaceholderSize: true,
+            items: 'tr:not(:first, :last, .sb-header, .sb-footer, .sb-not-allowed)',
+            receive: fnReceive,
+            update: fnUpdate
+        };
+    }());
+    
+    tableDiv.sortable(sortableConf);
+    
+    $("#show_builder .fg-toolbar")
+        .append('<div class="ColVis TableTools sb_delete"><button class="ui-button ui-state-default ui-state-disabled"><span>Delete</span></button></div>')
+        .click(fnRemoveSelectedItems);
+    
+    //set things like a reference to the table.
+    AIRTIME.showbuilder.init(oTable);
+    
+    //add event to cursors.
+    tableDiv.find("tbody").on("click", "div.marker", function(event){
+        var tr = $(this).parents("tr"),
+            cursorSelClass = "cursor-selected-row";
+        
+        if (tr.hasClass(cursorSelClass)) {
+            tr.removeClass(cursorSelClass);
+        }
+        else {
+            tr.addClass(cursorSelClass);
+        }
+        
+        //check if add button can still be enabled.
+        AIRTIME.library.events.enableAddButtonCheck();
+        
+        return false;
+    });
+    
+};
+
+mod.init = function(oTable) {
+    oSchedTable = oTable;
+};
+
+return AIRTIME;
 
-	                //seems to happen if everything is selected
-	                if ( node === null) {
-	                	oTable.find("input[type=checkbox]").attr("checked", true);
-	                }
-	                else {
-	                	$(node).find("input[type=checkbox]").attr("checked", true);
-	                }
-	                
-	                //checking to enable buttons
-	                AIRTIME.button.enableButton("sb_delete");
-	            },
-	            "fnRowDeselected": function ( node ) {
-	            	var selected;
-	            		       	
-	              //seems to happen if everything is deselected
-	                if ( node === null) {
-	                	tableDiv.find("input[type=checkbox]").attr("checked", false);
-	                	selected = [];
-	                }
-	                else {
-	                	$(node).find("input[type=checkbox]").attr("checked", false);
-	                	selected = tableDiv.find("input[type=checkbox]").filter(":checked");
-	                }
-	                
-	                //checking to disable buttons
-	                if (selected.length === 0) {
-	                	AIRTIME.button.disableButton("sb_delete");
-	                }
-	            }
-			},
-			
-	        // R = ColReorderResize, C = ColVis, T = TableTools
-	        "sDom": 'Rr<"H"CT>t',
-	        
-	        "sAjaxDataProp": "schedule",
-			"sAjaxSource": "/showbuilder/builder-feed"	
-		});
-		
-		$('[name="sb_cb_all"]').click(function(){
-	    	var oTT = TableTools.fnGetInstance('show_builder_table');
-	    	
-	    	if ($(this).is(":checked")) {
-	    		var allowedNodes;
-	    		
-	    		allowedNodes = oTable.find('tr:not(:first, .sb-header, .sb-empty, .sb-footer, .sb-not-allowed)');
-	    		
-	    		allowedNodes.each(function(i, el){
-	    			oTT.fnSelect(el);
-	    		});	
-	    	}
-	    	else {
-	    		oTT.fnSelectNone();
-	    	}       
-	    });
-		
-		var sortableConf = (function(){
-			var origTrs,
-				aItemData = [],
-				oPrevData,
-				fnAdd,
-				fnMove,
-				fnReceive,
-				fnUpdate,
-				i, 
-				html;
-			
-			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});
-				
-				AIRTIME.showbuilder.fnAdd(aMediaIds, aSchedIds);
-			};
-			
-			fnMove = function() {
-				var aSelect = [],
-					aAfter = [];
-			
-				aSelect.push({"id": aItemData[0].id, "instance": aItemData[0].instance, "timestamp": aItemData[0].timestamp});
-				aAfter.push({"id": oPrevData.id, "instance": oPrevData.instance, "timestamp": oPrevData.timestamp});
-		
-				AIRTIME.showbuilder.fnMove(aSelect, aAfter);
-			};
-			
-			fnReceive = function(event, ui) {
-				var aItems = [],
-					oLibTT = TableTools.fnGetInstance('library_display');
-			
-				aItems = oLibTT.fnGetSelectedData();
-				
-				//if nothing is checked select the dragged item.
-			    if (aItems.length === 0) {
-			    	aItems.push(ui.item.data("aData"));
-			    }
-			    
-				origTrs = aItems;
-				html = ui.helper.html();
-			};
-			
-			fnUpdate = function(event, ui) {
-				var prev = ui.item.prev();
-				
-				//can't add items outside of shows.
-				if (prev.hasClass("sb-footer") 
-						|| prev.find("td:first").hasClass("dataTables_empty")
-						|| prev.length === 0) {
-					alert("Cannot schedule outside a show.");
-					ui.item.remove();
-					return;
-				}
-				
-				aItemData = [];
-				oPrevData = prev.data("aData");
-				
-				//item was dragged in
-				if (origTrs !== undefined) {
-					
-					$("#show_builder_table tr.ui-draggable")
-						.empty()
-						.after(html);
-					
-					aItemData = origTrs;
-					origTrs = undefined;
-					fnAdd();
-				}
-				//item was reordered.
-				else {
-					aItemData.push(ui.item.data("aData"));
-					fnMove();
-				}
-			};
-			
-			return {
-				placeholder: "placeholder show-builder-placeholder ui-state-highlight",
-				forcePlaceholderSize: true,
-				items: 'tr:not(:first, :last, .sb-header, .sb-footer, .sb-not-allowed)',
-				receive: fnReceive,
-				update: fnUpdate
-			};
-		}());
-		
-		tableDiv.sortable(sortableConf);
-		
-		$("#show_builder .fg-toolbar")
-			.append('<div class="ColVis TableTools sb_delete"><button class="ui-button ui-state-default ui-state-disabled"><span>Delete</span></button></div>')
-			.click(fnRemoveSelectedItems);
-		
-		//set things like a reference to the table.
-		AIRTIME.showbuilder.init(oTable);
-		
-		//add event to cursors.
-		tableDiv.find("tbody").on("click", "div.marker", function(event){
-			var tr = $(this).parents("tr"),
-				cursorSelClass = "cursor-selected-row";
-			
-			if (tr.hasClass(cursorSelClass)) {
-				tr.removeClass(cursorSelClass);
-			}
-			else {
-				tr.addClass(cursorSelClass);
-			}
-			
-			//check if add button can still be enabled.
-			AIRTIME.library.events.enableAddButtonCheck();
-			
-			return false;
-		});
-		
-	};
-	
-	mod.init = function(oTable) {
-		oSchedTable = oTable;
-	};
-	
-	return AIRTIME;
-	
 }(AIRTIME || {}));
\ No newline at end of file
diff --git a/airtime_mvc/public/js/jplayer/preview_jplayer.js b/airtime_mvc/public/js/jplayer/preview_jplayer.js
index 00ca8f255..2f6c2bd6f 100644
--- a/airtime_mvc/public/js/jplayer/preview_jplayer.js
+++ b/airtime_mvc/public/js/jplayer/preview_jplayer.js
@@ -1,27 +1,38 @@
-var playlist_jplayer;
-var idToPostionLookUp;
+var _playlist_jplayer;
+var _idToPostionLookUp;
 
+/**
+ *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(){
-    var audioFileID = $('.audioFileID').text();
-    var playlistID = $('.playlistID').text();
-    var playlistIndex = $('.playlistIndex').text();
-    playlist_jplayer = new jPlayerPlaylist({
+
+    _playlist_jplayer = new jPlayerPlaylist({
         jPlayer: "#jquery_jplayer_1",
         cssSelectorAncestor: "#jp_container_1"
     },[], //array of songs will be filled with below's json call
     {
         swfPath: "/js/jplayer",
-        supplied: "mp3, oga",
+        //supplied: "mp3,oga",
         wmode: "window"
     });
     
     $.jPlayer.timeFormat.showHour = true;
     
-    if (playlistID != undefined && playlistID !== "")
-        playAll(playlistID, playlistIndex);
-    else
+    var audioFileID = $('.audioFileID').text();
+    var playlistID = $('.playlistID').text();
+    var playlistIndex = $('.playlistIndex').text();
+    var showID = $('.showID').text();
+    var showIndex = $('.showIndex').text();
+
+    if (playlistID != "" && playlistID !== ""){
+        playAllPlaylist(playlistID, playlistIndex);
+    }else if (audioFileID != "") {
         playOne(audioFileID);
-    
+    }else if (showID != "") {
+        playAllShow(showID, showIndex);
+    }
 });
 
 /**
@@ -30,67 +41,103 @@ $(document).ready(function(){
  *  - 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 playAll(playlistID, playlistIndex) {
+function playAllPlaylist(p_playlistID, p_playlistIndex) {
     var viewsPlaylistID = $('.playlistID').text();
     
-    if ( idToPostionLookUp !== undefined && viewsPlaylistID == playlistID ) {
-        play(playlistIndex);
+    if ( _idToPostionLookUp !== undefined && viewsPlaylistID == p_playlistID ) {
+        play(p_playlistIndex);
     }else {
-        idToPostionLookUp = Array();
-        $.getJSON("/playlist/get-playlist/playlistID/"+playlistID, function(data){  // get the JSON array produced by my PHP
-            var myPlaylist = new Array();
-            var media;
-            var index;
-            
-            for(index in data){
-                console.log(data[index]);
-                if (data[index]['mp3'] != undefined){
-                    media = {title: data[index]['title'],
-                            artist: data[index]['artist'],
-                            mp3:"/api/get-media/fileID/"+data[index]['mp3']
-                    };
-                }else if (data[index]['oga'] != undefined) {
-                    media = {title: data[index]['title'],
-                            artist: data[index]['artist'],
-                            oga:"/api/get-media/fileID/"+data[index]['oga']
-                    };
-                }
-                console.log(media);
-                myPlaylist[index] = media;
-                
-                idToPostionLookUp[data[index]['id']] = data[index]['position'];
-            }
-            playlist_jplayer.setPlaylist(myPlaylist);
-            playlist_jplayer.option("autoPlay", true);
-            play(playlistIndex);
-        });
+        buildplaylist("/audiopreview/get-playlist/playlistID/"+p_playlistID, p_playlistIndex);
     }
 }
 
-function play(playlistIndex){
-    playlistIndex = idToPostionLookUp[playlistIndex];
-    playlist_jplayer.play(playlistIndex);
+/**
+ * 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("/audiopreview/get-show/showID/"+p_showID, p_index);
+    }
 }
 
-function playOne(audioFileID) {
+/**
+ * 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;
+        for(index in data){
+            
+            if (data[index]['element_mp3'] != undefined){
+                media = {title: data[index]['element_title'],
+                        artist: data[index]['element_artist'],
+                        mp3:"/api/get-media/fileID/"+data[index]['element_mp3']
+                };
+            }else if (data[index]['element_oga'] != undefined) {
+                media = {title: data[index]['element_title'],
+                        artist: data[index]['element_artist'],
+                        oga:"/api/get-media/fileID/"+data[index]['element_oga']
+                };
+            }
+            myPlaylist[index] = media;
+            
+            _idToPostionLookUp[data[index]['element_id']] = data[index]['element_position'];
+        }
+        
+        _playlist_jplayer.setPlaylist(myPlaylist);
+        _playlist_jplayer.option("autoPlay", true);
+        play(p_playIndex);
+    });
+}
+
+/**
+ *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];
+    //_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(p_audioFileID) {
     var playlist = new Array();
-    var fileExtensioin = audioFileID.split('.').pop();
+    var fileExtensioin = p_audioFileID.split('.').pop();
     
     if (fileExtensioin === 'mp3') {
         media = {title: $('.audioFileTitle').text() !== 'null' ?$('.audioFileTitle').text():"",
             artist: $('.audioFileArtist').text() !== 'null' ?$('.audioFileArtist').text():"",
-            mp3:"/api/get-media/fileID/"+audioFileID
+            mp3:"/api/get-media/fileID/"+p_audioFileID
         };
     }else if (fileExtensioin === 'ogg' ) {
         media = {title: $('.audioFileTitle').text() != 'null' ?$('.audioFileTitle').text():"",
             artist: $('.audioFileArtist').text() != 'null' ?$('.audioFileArtist').text():"",
-            oga:"/api/get-media/fileID/"+audioFileID
+            oga:"/api/get-media/fileID/"+p_audioFileID
         };
     }
-    playlist_jplayer.option("autoPlay", true);
+    _playlist_jplayer.option("autoPlay", true);
     
     playlist[0] = media;
-    //playlist_jplayer.setPlaylist(playlist); --if I use this the player will call _init on the setPlaylist and on the ready
-    playlist_jplayer._initPlaylist(playlist);
-    playlist_jplayer.play(0);
+    //_playlist_jplayer.setPlaylist(playlist); --if I use this the player will call _init on the setPlaylist and on the ready
+    _playlist_jplayer._initPlaylist(playlist);
+    _playlist_jplayer.play(0);
 }
\ No newline at end of file
diff --git a/airtime_mvc/public/js/jplayer/skin/jplayer.audio-preview.blue.monday.css b/airtime_mvc/public/js/jplayer/skin/jplayer.audio-preview.blue.monday.css
index 8e7ebd77c..1172a27ce 100644
--- a/airtime_mvc/public/js/jplayer/skin/jplayer.audio-preview.blue.monday.css
+++ b/airtime_mvc/public/js/jplayer/skin/jplayer.audio-preview.blue.monday.css
@@ -105,7 +105,12 @@ span.playlistID {
 span.playlistIndex {
     display:none; 
 }
-
+span.showID {
+    display:none; 
+}
+span.showIndex {
+    display:none; 
+}
 /* @group CONTROLS */
 
 div.jp-controls-holder {