-begin adding datagrids

application/views/scripts/nowplaying/get-data-grid-data.phtml

@@ -0,0 +1,3 @@
+<?php 
+echo $this->entries;
+?>

application/views/scripts/nowplaying/index.phtml

@@ -0,0 +1,52 @@
+<div id='col0' style='float:left; width: 10%; height: 100%;'>
+	<div>Listen</div>
+	<div>Volume</div>
+</div>
+	
+<div id='col1' style='float:left; width: 25%; height: 100%;'>
+	<div>Show: <span id='show'></span></div>
+	<div>Playlist: <span id='playlist'></span></div>
+	<div>Host: <span id='host'></span></div>
+</div>
+	
+<div id='col2' style='float:left; width: 30%; height: 100%;'>
+	<div>Previous: <span id='previous'></span></div>
+	<div>Current: <span id='current'></span></div>
+	<div>Upcoming: <span id='next'></span></div>
+</div>
+
+<div id='list0' style='float:left; width: 35%; height: 100%;'></div>
+	<div>Start: <span id='start'></span></div>
+	<div>End: <span id='end'></span></div>
+	<div><span id='progressbar'></span> <span id='songposition'></span> | <span id='songlength'></span></div>
+</div>
+<div id='demo'></div>
+<script>
+
+function createDataGrid(obj){
+	$('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
+	$('#example').dataTable( {
+		"bSort" : false,
+		"bJQueryUI": true,
+		"bFilter": true,
+		"bInfo": false,
+		"bLengthChange": false,
+		"aaData": obj.rows,
+		"aoColumns": obj.columnHeaders
+	} );	
+}
+
+function init2(){
+	  $.ajax({ url: "/Nowplaying/get-data-grid-data/format/json", dataType:"json", success:function(data){
+		//alert(data);
+		createDataGrid(data.entries);
+	  }});
+}
+
+
+$(document).ready(function() {
+	
+	//initialize the playlist bar in the included playlist.js
+	init("nowplayingbar");
+});
+</script>