diff --git a/application/controllers/ScheduleController.php b/application/controllers/ScheduleController.php
index a1ee638b4..6cc2b0e49 100644
--- a/application/controllers/ScheduleController.php
+++ b/application/controllers/ScheduleController.php
@@ -177,7 +177,7 @@ class ScheduleController extends Zend_Controller_Action
 
     public function getSchedulerTimeAction()
     {
-        $this->view->headScript()->appendFile('/js/progressbar/jquery.progressbar.min.js','text/javascript');
+        $this->view->headScript()->appendFile('/js/playlist/playlist.js','text/javascript');
     }
 
     public function getCurrentPlaylistAction()
diff --git a/application/views/scripts/schedule/get-scheduler-time.phtml b/application/views/scripts/schedule/get-scheduler-time.phtml
index 03e1d2a0f..48f23dee4 100644
--- a/application/views/scripts/schedule/get-scheduler-time.phtml
+++ b/application/views/scripts/schedule/get-scheduler-time.phtml
@@ -1,110 +1,10 @@
 <div>
+
 <script>
-    function convertDateToPosixTime(s){
-        var year = s.substring(0, 4);
-        var month = s.substring(5, 7);
-        var day = s.substring(8, 10);
-        var hour = s.substring(11, 13);
-        var minute = s.substring(14, 16);
-        var sec = 0;
-        var msec = 0;
-        if (s.length >= 20){
-        	sec = s.substring(17, 19);
-			msec = s.substring(20);
-		} else {
-			sec = s.substring(17);
-		}
-		
-        return Date.UTC(year, month, day, hour, minute, sec, msec);
-    }
-
-    var schedulePosixTime;
-
-	var previousSong;
-    var currentSong;
-    var nextSong;
-
-    var updatedSchedule = false;
-
-    function secondsTimer(){
-        schedulePosixTime += 1000;
-        updateProgressBarValue();
-    }
-
-    function updateProgressBarValue(){
-        var percentDone = (schedulePosixTime - currentSong.songStartPosixTime)/currentSong.songLengthMs*100;
-        if (percentDone <= 100){
-            $('#spaceused1').progressBar(percentDone);
-            setTimeout(secondsTimer, 1000);
-            
-            if (!updatedSchedule && (currentSong.songEndPosixTime - schedulePosixTime < 5000)){
-                updatedSchedule = true;
-                getScheduleFromServer();
-            }
-        } else {
-            currentSong = nextSong;
-            updatedSchedule = false;
-        }
-    }
-
-    function getCurrentPlayingItem(currentItem){
-        var songStartPosixTime = convertDateToPosixTime(currentItem.starts);
-        var songEndPosixTime = convertDateToPosixTime(currentItem.ends);
-
-        return {songLengthMs:songEndPosixTime-songStartPosixTime, songStartPosixTime:songStartPosixTime, songEndPosixTime:songEndPosixTime};
-       
-    }
-
-    function prepareNextPlayingItem(obj){
-        if (obj.next.length > 0){
-            var nextItem = obj.next[0];
-        }        
-    }
-
-    function parseItems(obj){
-        schedulePosixTime = convertDateToPosixTime(obj.schedulerTime);
-        if (obj.previous.length > 0){
-            previousSong = getCurrentPlayingItem(obj.previous[0]);
-            $("#previous").html(obj.schedulerTime + " " + schedulePosixTime + "<br>" +
-            	obj.previous[0].clip_length + " " + previousSong.songLengthMs + "<br>" +
-            	obj.previous[0].starts + " " + previousSong.songStartPosixTime + "<br>" +
-            	obj.previous[0].ends + " " + previousSong.songEndPosixTime + "<br>" + 
-            	obj.previous[0].name + "<br>");
-        }
-        if (obj.current.length > 0){
-            currentSong = getCurrentPlayingItem(obj.current[0]);
-            $("#current").html(obj.schedulerTime + " " + schedulePosixTime + "<br>" +
-            	obj.current[0].clip_length + " " + currentSong.songLengthMs + "<br>" +
-            	obj.current[0].starts + " " + currentSong.songStartPosixTime + "<br>" +
-            	obj.current[0].ends + " " + currentSong.songEndPosixTime + "<br>" + 
-            	obj.current[0].name + "<br>");
-        }
-        if (obj.next.length > 0){
-            nextSong = getCurrentPlayingItem(obj.next[0]);
-            $("#next").html(obj.schedulerTime + " " + schedulePosixTime + "<br>" +
-            	obj.next[0].clip_length + " " + nextSong.songLengthMs + "<br>" +
-            	obj.next[0].starts + " " + nextSong.songStartPosixTime + "<br>" +
-            	obj.next[0].ends + " " + nextSong.songEndPosixTime + "<br>" + 
-            	obj.next[0].name + "<br>");
-        }
-        updateProgressBarValue();
-    }
-
-    function getScheduleFromServer(){
-        $.ajax({ url: "/Schedule/get-current-playlist/format/json", dataType:"json", success:function(data){
-                //alert(data);
-                parseItems(data.entries);
-              }});
-    }
-
 	$(document).ready(function() {
-		$("#spaceused1").progressBar();
-        getScheduleFromServer();
+		$("#list0").playlistViewer();
 	});
 </script>
-<div id="previous" style="background: blue;"></div>
-<div id="current" style="background: white;"></div>
-<span class="progressBar" id="spaceused1">0%</span>
-<div id="next" style="background: yellow;"></div>
+<div id="list0"></div>
 
 </div>
diff --git a/public/js/playlist/playlist.js b/public/js/playlist/playlist.js
new file mode 100644
index 000000000..b4ea360e4
--- /dev/null
+++ b/public/js/playlist/playlist.js
@@ -0,0 +1,142 @@
+(function($) {  
+    // jQuery plugin definition  
+    $.fn.playlistViewer = function(params) {  
+        // merge default and user parameters  
+        params = $.extend( {minlength: 0, maxlength: 99999}, params);  
+
+
+    var $t;
+
+    // traverse all nodes  
+    return this.each(function() {
+        // express a single node as a jQuery object  
+        $t = $(this);  
+
+        getScheduleFromServer();
+        updateProgressBarValue();             
+    });  
+
+    function convertDateToPosixTime(s){
+        var year = s.substring(0, 4);
+        var month = s.substring(5, 7);
+        var day = s.substring(8, 10);
+        var hour = s.substring(11, 13);
+        var minute = s.substring(14, 16);
+        var sec = 0;
+        var msec = 0;
+        if (s.length >= 20){
+        	sec = s.substring(17, 19);
+			msec = s.substring(20);
+		} else {
+			sec = s.substring(17);
+		}
+		
+        return Date.UTC(year, month, day, hour, minute, sec, msec);
+    }
+
+    var estimatedSchedulePosixTime = -1;
+    var schedulePosixTime;
+
+	var previousSongs;
+    var currentSong;
+    var nextSongs;
+    
+    function secondsTimer(){
+        estimatedSchedulePosixTime += 1000;
+        updateProgressBarValue();
+    }
+
+    function updateProgressBarValue(){
+        alert(estimatedSchedulePosixTime);
+    	if (estimatedSchedulePosixTime != -1){
+	    	if (currentSong.length > 0){
+		        var percentDone = (estimatedSchedulePosixTime - currentSong[0].songStartPosixTime)/currentSong[0].songLengthMs*100;
+		        if (percentDone <= 100){
+		            //$('#spaceused1').progressBar(percentDone);
+		        } else {
+		        	if (nextSongs.length > 0){
+		            	currentSong[0] = nextSongs.shift();
+		            } else {
+		            	currentSong = new Array();
+		            }
+		            //$('#spaceused1').progressBar(0);
+		            estimatedSchedulePosixTime = schedulePosixTime;
+		        }
+	        }
+	        updatePlaylist();
+	    }
+        setTimeout(secondsTimer, 1000);
+    }
+    
+    function createPlaylistElementString(song){
+  		return "Start time: " + song.starts + "<br>" +
+    			"End time: " + song.ends + "<br>" + 
+    			"Clip length: " + song.clip_length + "<br>" + 
+    			"Name: " + song.name + "<br>";   	
+    }
+    
+    function updatePlaylist(){
+    	$('#previous').empty();
+    	$('#current').empty();
+    	$('#next').empty();
+    	for (var i=0; i<previousSongs.length; i++){
+    		//var divElem = document.createElement('div');
+    		//divElem.innerHTML = createPlaylistElementString(previousSongs[i]);
+            $t.text(createPlaylistElementString(previousSongs[i])); 
+    		//$('#previous').append(divElem);
+    	}
+     	for (var i=0; i<currentSong.length; i++){
+    		//var divElem = document.createElement('div');
+    		//divElem.innerHTML = createPlaylistElementString(currentSong[i]);
+    		//$('#current').append(divElem);
+            $t.text(createPlaylistElementString(currentSong[i]));
+    	}    
+    	for (var i=0; i<nextSongs.length; i++){
+    		//var divElem = document.createElement('div');
+    		//divElem.innerHTML = createPlaylistElementString(nextSongs[i]);
+    		//$('#next').append(divElem);
+            $t.text(createPlaylistElementString(nextSongs[i]));
+    	}    
+    }
+
+    function calcAdditionalData(currentItem){
+    	for (var i=0; i<currentItem.length; i++){
+    		currentItem[i].songStartPosixTime = convertDateToPosixTime(currentItem[i].starts);
+    		currentItem[i].songEndPosixTime = convertDateToPosixTime(currentItem[i].ends);
+    		currentItem[i].songLengthMs = currentItem[i].songEndPosixTime - currentItem[i].songStartPosixTime;
+    	}
+    }
+
+    function prepareNextPlayingItem(obj){
+        if (obj.next.length > 0){
+            var nextItem = obj.next[0];
+        }        
+    }
+
+    function parseItems(obj){
+        schedulePosixTime = convertDateToPosixTime(obj.schedulerTime);
+        
+        if (estimatedSchedulePosixTime == -1)
+        	estimatedSchedulePosixTime = schedulePosixTime;
+        
+        previousSongs = obj.previous;
+        currentSong = obj.current;
+        nextSongs = obj.next;
+        
+        calcAdditionalData(previousSongs);
+        calcAdditionalData(currentSong);
+        calcAdditionalData(nextSongs);
+        
+        //updatePlaylist();
+        //updateProgressBarValue();
+    }
+
+    function getScheduleFromServer(){
+        $.ajax({ url: "http://localhost/Schedule/get-current-playlist/format/json", dataType:"json", success:function(data){
+                parseItems(data.entries);
+              }});
+        setTimeout(getScheduleFromServer, 5000);
+    }
+ 
+    };  
+})(jQuery);