diff --git a/airtime_mvc/application/controllers/LibraryController.php b/airtime_mvc/application/controllers/LibraryController.php
index f0b72099d..acbba568d 100644
--- a/airtime_mvc/application/controllers/LibraryController.php
+++ b/airtime_mvc/application/controllers/LibraryController.php
@@ -11,6 +11,7 @@ class LibraryController extends Zend_Controller_Action
         $ajaxContext = $this->_helper->getHelper('AjaxContext');
         $ajaxContext->addActionContext('contents', 'json')
                     ->addActionContext('delete', 'json')
+                    ->addActionContext('delete-group', 'json')
                     ->addActionContext('context-menu', 'json')
                     ->addActionContext('get-file-meta-data', 'html')
                     ->addActionContext('upload-file-soundcloud', 'json')
@@ -31,12 +32,16 @@ class LibraryController extends Zend_Controller_Action
         $this->view->headScript()->appendFile($baseUrl.'/js/datatables/js/jquery.dataTables.js','text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'/js/datatables/plugin/dataTables.pluginAPI.js','text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'/js/datatables/plugin/dataTables.fnSetFilteringDelay.js','text/javascript');
+        $this->view->headScript()->appendFile($baseUrl.'/js/datatables/plugin/dataTables.ColVis.js','text/javascript');
+        $this->view->headScript()->appendFile($baseUrl.'/js/datatables/plugin/dataTables.ColReorder.js','text/javascript');
+        $this->view->headScript()->appendFile($baseUrl.'/js/datatables/plugin/dataTables.FixedColumns.js','text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'/js/airtime/library/library.js','text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'/js/airtime/library/advancedsearch.js','text/javascript');
 
         $this->view->headLink()->appendStylesheet($baseUrl.'/css/media_library.css');
         $this->view->headLink()->appendStylesheet($baseUrl.'/css/contextmenu.css');
-
+        $this->view->headLink()->appendStylesheet($baseUrl.'/css/datatables/css/ColVis.css');
+        $this->view->headLink()->appendStylesheet($baseUrl.'/css/datatables/css/ColReorder.css');
 
         $this->_helper->layout->setLayout('library');
         $this->_helper->viewRenderer->setResponseSegment('library');
@@ -178,10 +183,50 @@ class LibraryController extends Zend_Controller_Action
             $this->view->id = $id;
         }
     }
+    
+    public function deleteGroupAction()
+    {
+        $ids = $this->_getParam('ids');
+        $userInfo = Zend_Auth::getInstance()->getStorage()->read();
+        $user = new Application_Model_User($userInfo->id);
+
+        if ($user->isAdmin()) {
+
+            if (!is_null($ids)) {
+                foreach ($ids as $key => $id) {
+                    $file = Application_Model_StoredFile::Recall($id);
+
+                    if (PEAR::isError($file)) {
+                        $this->view->message = $file->getMessage();
+                        return;
+                    }
+                    else if(is_null($file)) {
+                        $this->view->message = "file doesn't exist";
+                        return;
+                    }
+
+                    $res = $file->delete();
+
+                    if (PEAR::isError($res)) {
+                        $this->view->message = $res->getMessage();
+                        return;
+                    }
+                    else {
+                        $res = settype($res, "integer");
+                        $data = array("filepath" => $file->getFilePath(), "delete" => $res);
+                        Application_Model_RabbitMq::SendMessageToMediaMonitor("file_delete", $data);
+                    }
+                }
+                
+                $this->view->ids = $ids;
+            }
+        }
+    }
 
     public function contentsAction()
     {
         $post = $this->getRequest()->getPost();
+        Logging::log(print_r($post, true));
         $datatables = Application_Model_StoredFile::searchFilesForPlaylistBuilder($post);
 
         //format clip lengh to 1 decimal
diff --git a/airtime_mvc/application/controllers/PlaylistController.php b/airtime_mvc/application/controllers/PlaylistController.php
index 9c3bc11ec..7618d94c9 100644
--- a/airtime_mvc/application/controllers/PlaylistController.php
+++ b/airtime_mvc/application/controllers/PlaylistController.php
@@ -8,18 +8,20 @@ class PlaylistController extends Zend_Controller_Action
     {
         $ajaxContext = $this->_helper->getHelper('AjaxContext');
         $ajaxContext->addActionContext('add-item', 'json')
-					->addActionContext('delete-item', 'json')
-					->addActionContext('set-fade', 'json')
-					->addActionContext('set-cue', 'json')
-					->addActionContext('move-item', 'json')
-					->addActionContext('close', 'json')
-					->addActionContext('new', 'json')
-					->addActionContext('edit', 'json')
-					->addActionContext('delete-active', 'json')
-					->addActionContext('delete', 'json')
+                    ->addActionContext('delete-item', 'json')
+                    ->addActionContext('add-group', 'json')
+                    ->addActionContext('delete-group', 'json')
+                    ->addActionContext('set-fade', 'json')
+                    ->addActionContext('set-cue', 'json')
+                    ->addActionContext('move-item', 'json')
+                    ->addActionContext('close', 'json')
+                    ->addActionContext('new', 'json')
+                    ->addActionContext('edit', 'json')
+                    ->addActionContext('delete-active', 'json')
+                    ->addActionContext('delete', 'json')
                     ->addActionContext('set-playlist-fades', 'json')
                     ->addActionContext('set-playlist-name', 'json')
-					->addActionContext('set-playlist-description', 'json')
+                    ->addActionContext('set-playlist-description', 'json')
                     ->initContext();
 
         $this->pl_sess = new Zend_Session_Namespace(UI_PLAYLIST_SESSNAME);
@@ -209,6 +211,59 @@ class PlaylistController extends Zend_Controller_Action
 		unset($this->view->pl);
     }
 
+    public function addGroupAction()
+    {
+        $ids = $this->_getParam('ids');
+        $pos = $this->_getParam('pos', null);
+
+        if (!is_null($ids)) {
+            $pl = $this->getPlaylist();
+            if ($pl === false) {
+                $this->view->playlist_error = true;
+                return false;
+            }
+            
+            foreach ($ids as $key => $value) {
+                $res = $pl->addAudioClip($value);
+                if (PEAR::isError($res)) {
+                    $this->view->message = $res->getMessage();
+                    break;
+                }
+            }
+
+            $this->view->pl = $pl;
+            $this->view->html = $this->view->render('playlist/update.phtml');
+            $this->view->name = $pl->getName();
+            $this->view->length = $pl->getLength();
+            $this->view->description = $pl->getDescription();
+            return;
+        }
+        $this->view->message =  "a file is not chosen";
+    }
+    
+    public function deleteGroupAction()
+    {
+        $ids = $this->_getParam('ids', null);
+        
+        foreach ($ids as $key => $id) {
+            $pl = Application_Model_Playlist::Recall($id);
+
+            if ($pl !== FALSE) {
+                Application_Model_Playlist::Delete($id);
+                $pl_sess = $this->pl_sess;
+                if($pl_sess->id === $id){
+                    unset($pl_sess->id);
+                }
+            } else {
+                $this->view->playlist_error = true;
+                return false;
+            }
+        }
+        
+        $this->view->ids = $ids;
+        $this->view->html = $this->view->render('playlist/index.phtml');
+    }
+    
     public function setCueAction()
     {
 		$pos = $this->_getParam('pos');
diff --git a/airtime_mvc/application/models/StoredFile.php b/airtime_mvc/application/models/StoredFile.php
index d48c3c420..3e98b0d7e 100644
--- a/airtime_mvc/application/models/StoredFile.php
+++ b/airtime_mvc/application/models/StoredFile.php
@@ -488,6 +488,7 @@ class Application_Model_StoredFile {
     {
         $file = new CcFiles();
         $file->setDbGunid(md5(uniqid("", true)));
+        $file->setDbMtime(new DateTime("now"), new DateTimeZone("UTC"));
 
         $storedFile = new Application_Model_StoredFile();
         $storedFile->_file = $file;
@@ -628,50 +629,52 @@ class Application_Model_StoredFile {
         return $res;
     }
 
-	public static function searchFilesForPlaylistBuilder($datatables) {
-		global $CC_CONFIG;
+    public static function searchFilesForPlaylistBuilder($datatables)
+    {
+        global $CC_CONFIG;
 
-		$displayData = array("track_title", "artist_name", "album_title", "genre", "length", "ftype");
+        $displayData = array("track_title", "artist_name", "album_title", "genre", "length", "year", "upload_time", "ftype");
 
-		$plSelect = "SELECT ";
+        $plSelect = "SELECT ";
         $fileSelect = "SELECT ";
-        foreach ($displayData as $key){
+        foreach ($displayData as $key) {
 
-            if($key === "track_title"){
+            if ($key === "track_title") {
                 $plSelect .= "name AS ".$key.", ";
                 $fileSelect .= $key.", ";
-            }
-			else if ($key === "ftype"){
+            } else if ($key === "ftype") {
                 $plSelect .= "'playlist' AS ".$key.", ";
                 $fileSelect .= $key.", ";
-            }
-            else if ($key === "artist_name"){
+            } else if ($key === "artist_name") {
                 $plSelect .= "creator AS ".$key.", ";
                 $fileSelect .= $key.", ";
-            }
-            else if ($key === "length"){
+            } else if ($key === "length") {
                 $plSelect .= $key.", ";
                 $fileSelect .= $key.", ";
-            }
-            else {
+            } else if ($key === "year") {
+                $plSelect .= "CAST(mtime AS varchar) AS ".$key.", ";
+                $fileSelect .= $key.", ";
+            } else if ($key === "upload_time") {
+                $plSelect .= "mtime AS ".$key.", ";
+                $fileSelect .= "mtime AS ".$key.", ";
+            } else {
                 $plSelect .= "NULL AS ".$key.", ";
                 $fileSelect .= $key.", ";
             }
         }
 
-		$fromTable = " ((".$plSelect."PL.id
-		    FROM ".$CC_CONFIG["playListTable"]." AS PL
-			LEFT JOIN ".$CC_CONFIG['playListTimeView']." AS PLT USING(id))
+        $fromTable = " ((".$plSelect."PL.id
+            FROM ".$CC_CONFIG["playListTable"]." AS PL
+                LEFT JOIN ".$CC_CONFIG['playListTimeView']." AS PLT USING(id))
 
-		    UNION
+            UNION
 
-		    (".$fileSelect."id FROM ".$CC_CONFIG["filesTable"]." AS FILES)) AS RESULTS";
+            (".$fileSelect."id FROM ".$CC_CONFIG["filesTable"]." AS FILES)) AS RESULTS";
+        
+        return Application_Model_StoredFile::searchFiles($fromTable, $datatables);
+    }
 
-		return Application_Model_StoredFile::searchFiles($fromTable, $datatables);
-
-	}
-
-	public static function searchPlaylistsForSchedule($datatables)
+    public static function searchPlaylistsForSchedule($datatables)
     {
 		$fromTable = "cc_playlist AS pl LEFT JOIN cc_playlisttimes AS plt USING(id) LEFT JOIN cc_subjs AS sub ON pl.editedby = sub.id";
         //$datatables["optWhere"][] = "INTERVAL '{$time_remaining}' > INTERVAL '00:00:00'";
@@ -690,7 +693,12 @@ class Application_Model_StoredFile {
 			$searchTerms = explode(" ", $data["sSearch"]);
 
 		$selectorCount = "SELECT COUNT(*)";
-		$selectorRows = "SELECT ". join("," , $columnsDisplayed);
+		foreach( $columnsDisplayed as $key=>$col){
+		  if($col == ''){
+		      unset($columnsDisplayed[$key]);
+		  }
+		}
+		$selectorRows = "SELECT " . join(',', $columnsDisplayed );
 
         $sql = $selectorCount." FROM ".$fromTable;
 		$totalRows = $CC_DBC->getOne($sql);
@@ -733,7 +741,7 @@ class Application_Model_StoredFile {
 		// End Order By clause
 
 		//ordered by integer as expected by datatables.
-		$CC_DBC->setFetchMode(DB_FETCHMODE_ORDERED);
+		//$CC_DBC->setFetchMode(DB_FETCHMODE_ORDERED);
 
 		if(isset($where)) {
 			$where = join(" AND ", $where);
@@ -746,6 +754,18 @@ class Application_Model_StoredFile {
 		}
 
 		$results = $CC_DBC->getAll($sql);
+		foreach($results as &$row){
+                    // add checkbox row
+		    $row['checkbox'] = "<input type='checkbox' name='cb_".$row[id]."'>";
+                    
+                    // a full timestamp is being returned for playlists' year column;
+                    // split it and grab only the year info
+                    $yearSplit = explode('-', $row['year']);
+                    $row['year'] = $yearSplit[0];
+		}
+		//$results['checkbox']
+		//$results = $CC_DBC->getAssoc($sql);
+		Logging::log(print_r($results, true));
 		//echo $results;
 		//echo $sql;
 
diff --git a/airtime_mvc/public/css/datatables/css/ColReorder.css b/airtime_mvc/public/css/datatables/css/ColReorder.css
new file mode 100644
index 000000000..6bb55e22c
--- /dev/null
+++ b/airtime_mvc/public/css/datatables/css/ColReorder.css
@@ -0,0 +1,14 @@
+/*
+ * Namespace DTCR - "DataTables ColReorder" plug-in
+ */
+
+table.DTCR_clonedTable {
+	background-color: white;
+	z-index: 998;
+}
+
+div.DTCR_pointer {
+	width: 1px;
+	background-color: #5B5B5B;
+	z-index: 997;
+}
\ No newline at end of file
diff --git a/airtime_mvc/public/css/datatables/css/ColVis.css b/airtime_mvc/public/css/datatables/css/ColVis.css
new file mode 100644
index 000000000..95987b876
--- /dev/null
+++ b/airtime_mvc/public/css/datatables/css/ColVis.css
@@ -0,0 +1,75 @@
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * ColVis styles
+ */
+.ColVis {
+	float: right;
+	margin-bottom: 1em;
+}
+
+.ColVis_Button {
+	position: relative;
+	float: left;
+	margin-right: 3px;
+	padding: 3px 5px;
+	height: 30px;
+	background-color: #fff;
+	border: 1px solid #d0d0d0;
+	cursor: pointer;
+}
+
+button.ColVis_Button::-moz-focus-inner { 
+	border: none !important;
+	padding: 0;
+}
+
+.ColVis_text_hover {
+	border: 1px solid #999;
+	background-color: #f0f0f0;
+}
+
+div.ColVis_collectionBackground {
+	background-color: black;
+	z-index: 996;
+}
+
+div.ColVis_collection {
+	position: relative;
+	width: 130px;
+	background-color: #999;
+	padding: 3px;
+	border: 1px solid #ccc;
+	z-index: 998;
+}
+
+div.ColVis_collection button.ColVis_Button {
+	background-color: white;
+	width: 100%;
+	float: none;
+	margin-bottom: 2px;
+}
+
+div.ColVis_catcher {
+	position: absolute;
+	z-index: 997;
+}
+
+.disabled {
+	color: #999;
+}
+
+
+
+button.ColVis_Button {
+	text-align: left;
+}
+
+div.ColVis_collection button.ColVis_Button:hover {
+	border: 1px solid #999;
+	background-color: #f0f0f0;
+}
+
+span.ColVis_radio {
+	display: inline-block;
+	width: 20px;
+}
diff --git a/airtime_mvc/public/css/media_library.css b/airtime_mvc/public/css/media_library.css
index dbef3052a..925baa36a 100644
--- a/airtime_mvc/public/css/media_library.css
+++ b/airtime_mvc/public/css/media_library.css
@@ -66,4 +66,12 @@
   -moz-user-select: none;
   -o-user-select: none;
   user-select: none;
-}
\ No newline at end of file
+}
+
+.datatable_checkbox {
+    text-align: center;
+}
+
+.datatable_checkbox .DataTables_sort_wrapper {
+    text-align: center;
+}
diff --git a/airtime_mvc/public/css/styles.css b/airtime_mvc/public/css/styles.css
index 7b95307f7..e2acc5daa 100644
--- a/airtime_mvc/public/css/styles.css
+++ b/airtime_mvc/public/css/styles.css
@@ -607,10 +607,10 @@ dl.inline-list dd {
 }
 .dataTables_filter input {
     background: url("images/search_auto_bg.png") no-repeat scroll 0 0 #DDDDDD;
-	width: 60%;
-	border: 1px solid #5B5B5B;
-    margin: 0;
-    padding: 4px 3px 4px 25px;	
+    width: 60%;
+    border: 1px solid #5B5B5B;
+    margin-left: -8px;
+    padding: 4px 3px 4px 25px;
 }
 .dataTables_length select {
     background-color: #DDDDDD;
@@ -622,6 +622,30 @@ dl.inline-list dd {
     padding: 2px 2px 2px 0;
     vertical-align: top;
 }
+#library_display thead th, #library_display tbody td {
+    cursor: pointer;
+}
+#library_display thead th.library_checkbox,
+#library_display thead th.library_id,
+#library_display thead th.library_title {
+    cursor: default;
+}
+
+.ColVis.TableTools .ui-button {
+    height: 21px;
+}
+button.ColVis_Button.ColVis_ShowAll {
+    text-align: center;
+    margin-top: 10px;
+}
+.library_toolbar .ui-button, .ColVis.TableTools .ui-button {
+    float: right;
+    text-align:center;
+    font-size:12px;
+    font-weight:normal;
+    padding: 0.2em 1em;
+    margin: 0.5em 0.2em -0.5em 0.2em;
+}
 
 /*----END Data Table----*/
 
diff --git a/airtime_mvc/public/js/airtime/library/library.js b/airtime_mvc/public/js/airtime/library/library.js
index eefa73ccf..0bd77535a 100644
--- a/airtime_mvc/public/js/airtime/library/library.js
+++ b/airtime_mvc/public/js/airtime/library/library.js
@@ -1,13 +1,17 @@
+var dTable;
+var checkedCount = 0;
+var checkedPLCount = 0;
+
 //used by jjmenu
 function getId() {
-	var tr_id =  $(this.triggerElement).attr("id");
+	var tr_id =  $(this.triggerElement).parent().attr("id");
 	tr_id = tr_id.split("_");
 
 	return tr_id[1];
 }
 
 function getType() {
-	var tr_id =  $(this.triggerElement).attr("id");
+	var tr_id =  $(this.triggerElement).parent().attr("id");
 	tr_id = tr_id.split("_");
 
 	return tr_id[0];
@@ -30,8 +34,20 @@ function deleteAudioClip(json) {
 		return;
 	}
 
-	deleteItem("au", json.id);
+        if (json.ids != undefined) {
+            for (var i = json.ids.length - 1; i >= 0; i--) {
+                deleteItem("au", json.ids[i]);
+            }
+        } else if (json.id != undefined) {
+            deleteItem("au", json.id);
+        }
 	location.reload(true);
+} 
+
+function confirmDeleteGroup() {
+    if(confirm('Are you sure you want to delete the selected items?')){
+        groupDelete();
+    }
 }
 
 //callbacks called by jjmenu
@@ -73,11 +89,17 @@ function checkImportStatus(){
 
 function deletePlaylist(json) {
 	if(json.message) {
-		alert(json.message);
-		return;
+            alert(json.message);
+            return;
 	}
-
-	deleteItem("pl", json.id);
+        
+        if (json.ids != undefined) {
+            for (var i = json.ids.length - 1; i >= 0; i--) {
+                deleteItem("pl", json.ids[i]);
+            }
+        } else if (json.id != undefined) {
+            deleteItem("pl", json.id);
+        }
 	window.location.reload();
 }
 //end callbacks called by jjmenu
@@ -90,7 +112,7 @@ function addLibraryItemEvents() {
 			cursor: 'pointer'
 		});
 
-	$('#library_display tbody tr')
+	$('#library_display tbody tr td').not('[class=library_checkbox]')
 		.jjmenu("click",
 			[{get:"/Library/context-menu/format/json/id/#id#/type/#type#"}],
 			{id: getId, type: getType},
@@ -101,36 +123,36 @@ function addLibraryItemEvents() {
 function dtRowCallback( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
 	var id, type, once;
 
-    type = aData[6].substring(0,2);
-    id = aData[0];
-
+    type = aData["ftype"].substring(0,2);
+    id = aData["id"];
+    
     if(type == "au") {
-        $('td:eq(5)', nRow).html( '<img src="css/images/icon_audioclip.png">' );
-    }
-    else if(type == "pl") {
-        $('td:eq(5)', nRow).html( '<img src="css/images/icon_playlist.png">' );
+        $('td.library_type', nRow).html( '<img src="css/images/icon_audioclip.png">' );
+    } else if(type == "pl") {
+        $('td.library_type', nRow).html( '<img src="css/images/icon_playlist.png">' );
     }
 
-	$(nRow).attr("id", type+'_'+id);
+    $(nRow).attr("id", type+'_'+id);
 
-	// insert id on lenth field
-	$('td:eq(4)', nRow).attr("id", "length");
+    // insert id on lenth field
+    $('td.library_length', nRow).attr("id", "length");
 
-	return nRow;
+    return nRow;
 }
 
 function dtDrawCallback() {
-	addLibraryItemEvents();
-	addMetadataQtip();
-        saveNumEntriesSetting();
+    addLibraryItemEvents();
+    addMetadataQtip();
+    saveNumEntriesSetting();
+    setupGroupActions();
 }
 
 function addProgressIcon(id) {
-    if($("#au_"+id).find("td:eq(0)").find("span").length > 0){
-        $("#au_"+id).find("td:eq(0)").find("span").removeClass();
+    if($("#au_"+id).find("td.library_title").find("span").length > 0){
+        $("#au_"+id).find("td.library_title").find("span").removeClass();
         $("span[id="+id+"]").addClass("small-icon progress");
     }else{
-        $("#au_"+id).find("td:eq(0)").append('<span id="'+id+'" class="small-icon progress"></span>')
+        $("#au_"+id).find("td.library_title").append('<span id="'+id+'" class="small-icon progress"></span>')
     }
 }
 
@@ -229,7 +251,7 @@ function addQtipToSCIcons(){
 function addMetadataQtip(){
     var tableRow = $('#library_display tbody tr');
     tableRow.each(function(){
-        var title = $(this).find('td:eq(0)').html()
+        var title = $(this).find('td.library_title').html()
         var info = $(this).attr("id")
         info = info.split("_");
         var id = info[1];
@@ -297,31 +319,215 @@ function getNumEntriesPreference(data) {
     return parseInt(data.libraryInit.numEntries);
 }
 
+function groupAdd() {
+    if (checkedPLCount > 0) {
+        alert("Can't add playlist to another playlist");
+        return;
+    }
+    disableGroupBtn('library_group_add');
+    
+    var ids = new Array();
+    var addGroupUrl = '/Playlist/add-group';
+    var newSPLUrl = '/Playlist/new/format/json';
+    var dirty = true;
+    $('#library_display tbody tr').each(function() {
+        var idSplit = $(this).attr('id').split("_");
+        var id = idSplit.pop();
+        var type = idSplit.pop();
+        if (dirty && $(this).find(":checkbox").attr("checked")) {
+            if (type == "au") {
+                ids.push(id);
+            } else if (type == "pl") {
+                alert("Can't add playlist to another playlist");
+                dirty = false;
+            }
+        }
+    });
+    
+    if (dirty && ids.length > 0) {
+        stopAudioPreview();
+        
+        if ($('#spl_sortable').length == 0) {
+            $.post(newSPLUrl, function(json) {
+                openDiffSPL(json);
+		redrawDataTablePage();
+                
+                $.post(addGroupUrl, {format: "json", ids: ids}, setSPLContent);
+            });
+        } else {
+            $.post(addGroupUrl, {format: "json", ids: ids}, setSPLContent);
+        }
+    }
+}
+
+function groupDelete() {
+    disableGroupBtn('library_group_delete');
+    
+    var auIds = new Array();
+    var plIds = new Array();
+    var auUrl = '/Library/delete-group';
+    var plUrl = '/Playlist/delete-group';
+    var dirty = true;
+    $('#library_display tbody tr').each(function() {
+        var idSplit = $(this).attr('id').split("_");
+        var id = idSplit.pop();
+        var type = idSplit.pop();
+        if (dirty && $(this).find(":checkbox").attr("checked")) {
+            if (type == "au") {
+                auIds.push(id);
+            } else if (type == "pl") {
+                plIds.push(id);
+            }
+        }
+    });
+    
+    if (dirty && (auIds.length > 0 || plIds.length > 0)) {
+        stopAudioPreview();
+        
+        if (auIds.length > 0) {
+            $.post(auUrl, {format: "json", ids: auIds}, deleteAudioClip);
+        }
+        if (plIds.length > 0) {
+            $.post(plUrl, {format: "json", ids: plIds}, deletePlaylist);
+        }
+    }
+}
+
+function toggleAll() {
+    var checked = $(this).attr("checked");
+    $('#library_display tr').each(function() {
+        var idSplit = $(this).attr('id').split("_");
+        var type = idSplit[0];
+        $(this).find(":checkbox").attr("checked", checked);
+        if (checked) {
+            if (type == "pl") {
+                checkedPLCount++;
+            }
+            $(this).addClass('selected');
+        } else {
+            if (type == "pl") {
+                checkedPLCount--;
+            }
+            $(this).removeClass('selected');
+        }
+    });
+    
+    if (checked) {
+        checkedCount = $('#library_display tbody tr').size();
+        enableGroupBtn('library_group_add', groupAdd);
+        enableGroupBtn('library_group_delete', confirmDeleteGroup);
+    } else {
+        checkedCount = 0;
+        checkedPLCount = 0;
+        disableGroupBtn('library_group_add');
+        disableGroupBtn('library_group_delete');
+    }
+}
+
+function enableGroupBtn(btnId, func) {
+    btnId = '#' + btnId;
+    if ($(btnId).hasClass('ui-state-disabled')) {
+        $(btnId).removeClass('ui-state-disabled');
+        $(btnId).click(func);
+    }
+}
+
+function disableGroupBtn(btnId) {
+    btnId = '#' + btnId;
+    if (!$(btnId).hasClass('ui-state-disabled')) {
+        $(btnId).addClass('ui-state-disabled');
+        $(btnId).unbind("click");
+    }
+}
+
+function checkBoxChanged() {
+    var cbAll = $('#library_display thead').find(":checkbox");
+    var cbAllChecked = cbAll.attr("checked");
+    var checked = $(this).attr("checked");
+    var size = $('#library_display tbody tr').size();
+    var idSplit = $(this).parent().parent().attr('id').split("_");
+    var type = idSplit[0];
+    if (checked) {
+       if (checkedCount < size) {
+           checkedCount++;
+       }
+       if (type == "pl" && checkedPLCount < size) {
+           checkedPLCount++;
+       }
+       enableGroupBtn('library_group_add', groupAdd);
+       enableGroupBtn('library_group_delete', confirmDeleteGroup);
+       $(this).parent().parent().addClass('selected');
+    } else {
+        if (checkedCount > 0) {
+            checkedCount--;
+        }
+        if (type == "pl" && checkedPLCount > 0) {
+           checkedPLCount--;
+        }
+        if (checkedCount == 0) {
+            disableGroupBtn('library_group_add');
+            disableGroupBtn('library_group_delete');
+        }
+        $(this).parent().parent().removeClass('selected');
+    }
+    
+    if (cbAllChecked && checkedCount < size) {
+        cbAll.attr("checked", false);
+    } else if (!cbAllChecked && checkedCount == size) {
+        cbAll.attr("checked", true);
+    }
+    
+    
+}
+
+function setupGroupActions() {
+    checkedCount = 0;
+    $('#library_display tr:nth-child(1)').find(":checkbox").attr("checked", false);
+    $('#library_display thead').find(":checkbox").change(toggleAll);
+    $('#library_display tbody tr').each(function() {
+        $(this).find(":checkbox").change(checkBoxChanged);
+    });
+    
+    disableGroupBtn('library_group_add');
+    disableGroupBtn('library_group_delete');
+}
+
+function fnShowHide(iCol) {
+	/* Get the DataTables object again - this is not a recreation, just a get of the object */
+	var oTable = dTable;
+	
+	var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
+	oTable.fnSetColumnVis( iCol, bVis ? false : true );
+}
+
 function createDataTable(data) {
-    var dTable = $('#library_display').dataTable( {
+    dTable = $('#library_display').dataTable( {
 		"bProcessing": true,
 		"bServerSide": true,
 		"sAjaxSource": "/Library/contents/format/json",
-		"fnServerData": function ( sSource, aoData, fnCallback ) {
+		"fnServerData": function ( sSource, aoData, testCallback ) {
 			$.ajax( {
 				"dataType": 'json',
 				"type": "POST",
 				"url": sSource,
 				"data": aoData,
-				"success": fnCallback
+				"success": testCallback
 			} );
 		},
 		"fnRowCallback": dtRowCallback,
 		"fnDrawCallback": dtDrawCallback,
 		"aoColumns": [
-			/* Id */		{ "sName": "id", "bSearchable": false, "bVisible": false },
-			/* Title */		{ "sTitle": "Title", "sName": "track_title" },
-			/* Creator */	{ "sTitle": "Creator", "sName": "artist_name" },
-			/* Album */		{ "sTitle": "Album", "sName": "album_title" },
-			/* Genre */		{ "sTitle": "Genre", "sName": "genre" },
-			/* Length */	{ "sTitle": "Length", "sName": "length" },
-			/* Type */		{ "sTitle": "Type", "sName": "ftype", "bSearchable": false }
-		],
+                    /* Checkbox */      {"sTitle": "<input type='checkbox' name='cb_all'>", "bSortable": false, "bSearchable": false, "mDataProp": "checkbox", "sWidth": "25px", "sClass": "library_checkbox"},
+                    /* Id */            {"sName": "id", "bSearchable": false, "bVisible": false, "mDataProp": "id", "sClass": "library_id"},
+                    /* Title */         {"sTitle": "Title", "sName": "track_title", "mDataProp": "track_title", "sClass": "library_title"},
+                    /* Creator */       {"sTitle": "Creator", "sName": "artist_name", "mDataProp": "artist_name", "sClass": "library_creator"},
+                    /* Album */         {"sTitle": "Album", "sName": "album_title", "mDataProp": "album_title", "sClass": "library_album"},
+                    /* Genre */         {"sTitle": "Genre", "sName": "genre", "mDataProp": "genre", "sWidth": "10%", "sClass": "library_genre"},
+                    /* Year */          {"sTitle": "Year", "sName": "year", "mDataProp": "year", "sWidth": "8%", "sClass": "library_year"},
+                    /* Length */        {"sTitle": "Length", "sName": "length", "mDataProp": "length", "sWidth": "16%", "sClass": "library_length"},
+                    /* Type */          {"sTitle": "Type", "sName": "ftype", "bSearchable": false, "mDataProp": "ftype", "sWidth": "9%", "sClass": "library_type"},
+                    /* Upload Time */   {"sTitle": "Upload Time", "sName": "upload_time", "mDataProp": "upload_time", "sClass": "library_upload_time"},
+                ],
 		"aaSorting": [[2,'asc']],
 		"sPaginationType": "full_numbers",
 		"bJQueryUI": true,
@@ -330,9 +536,31 @@ function createDataTable(data) {
                     "sSearch": ""
                 },
                 "iDisplayLength": getNumEntriesPreference(data),
-                "bStateSave": true
+                "bStateSave": true,
+                // R = ColReorder, C = ColVis, see datatables doc for others
+                "sDom": 'Rlfr<"H"C<"library_toolbar">>t<"F"ip>',
+                "oColVis": {
+                    "buttonText": "Show/Hide Columns",
+                    "sAlign": "right",
+                    "aiExclude": [0, 1, 2],
+                    "sSize": "css",
+                    "bShowAll": true
+		},
+                "oColReorder": {
+                    "aiOrder": [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ] /* code this */,
+                    "iFixedColumns": 3
+		}
     });
     dTable.fnSetFilteringDelay(350);
+    
+    $("div.library_toolbar").html('<span class="fg-button ui-button ui-state-default" id="library_order_reset">Reset Order</span>' + 
+        '<span class="fg-button ui-button ui-state-default ui-state-disabled" id="library_group_delete">Delete</span>' + 
+        '<span class="fg-button ui-button ui-state-default ui-state-disabled" id="library_group_add">Add</span>');
+    
+    $('#library_order_reset').click(function() {
+        ColReorder.fnReset( dTable );
+        return false;
+    });
 }
 
 $(document).ready(function() {
@@ -341,7 +569,7 @@ $(document).ready(function() {
     $.ajax({ url: "/Api/library-init/format/json", dataType:"json", success:createDataTable, 
         error:function(jqXHR, textStatus, errorThrown){}});
     
-    checkImportStatus()
+    checkImportStatus();
     setInterval( "checkImportStatus()", 5000 );
     setInterval( "checkSCUploadStatus()", 5000 );
 
diff --git a/airtime_mvc/public/js/datatables/plugin/dataTables.ColReorder.js b/airtime_mvc/public/js/datatables/plugin/dataTables.ColReorder.js
new file mode 100644
index 000000000..95c39fcec
--- /dev/null
+++ b/airtime_mvc/public/js/datatables/plugin/dataTables.ColReorder.js
@@ -0,0 +1,987 @@
+/*
+ * File:        ColReorder.js
+ * Version:     1.0.4
+ * CVS:         $Id$
+ * Description: Controls for column visiblity in DataTables
+ * Author:      Allan Jardine (www.sprymedia.co.uk)
+ * Created:     Wed Sep 15 18:23:29 BST 2010
+ * Modified:    $Date$ by $Author$
+ * Language:    Javascript
+ * License:     GPL v2 or BSD 3 point style
+ * Project:     DataTables
+ * Contact:     www.sprymedia.co.uk/contact
+ * 
+ * Copyright 2010-2011 Allan Jardine, all rights reserved.
+ *
+ * This source file is free software, under either the GPL v2 license or a
+ * BSD style license, available at:
+ *   http://datatables.net/license_gpl2
+ *   http://datatables.net/license_bsd
+ *
+ */
+
+
+(function($, window, document) {
+
+
+/**
+ * Switch the key value pairing of an index array to be value key (i.e. the old value is now the
+ * key). For example consider [ 2, 0, 1 ] this would be returned as [ 1, 2, 0 ].
+ *  @method  fnInvertKeyValues
+ *  @param   array aIn Array to switch around
+ *  @returns array
+ */
+function fnInvertKeyValues( aIn )
+{
+	var aRet=[];
+	for ( var i=0, iLen=aIn.length ; i<iLen ; i++ )
+	{
+		aRet[ aIn[i] ] = i;
+	}
+	return aRet;
+}
+
+
+/**
+ * Modify an array by switching the position of two elements
+ *  @method  fnArraySwitch
+ *  @param   array aArray Array to consider, will be modified by reference (i.e. no return)
+ *  @param   int iFrom From point
+ *  @param   int iTo Insert point
+ *  @returns void
+ */
+function fnArraySwitch( aArray, iFrom, iTo )
+{
+	var mStore = aArray.splice( iFrom, 1 )[0];
+	aArray.splice( iTo, 0, mStore );
+}
+
+
+/**
+ * Switch the positions of nodes in a parent node (note this is specifically designed for 
+ * table rows). Note this function considers all element nodes under the parent!
+ *  @method  fnDomSwitch
+ *  @param   string sTag Tag to consider
+ *  @param   int iFrom Element to move
+ *  @param   int Point to element the element to (before this point), can be null for append
+ *  @returns void
+ */
+function fnDomSwitch( nParent, iFrom, iTo )
+{
+	var anTags = [];
+	for ( var i=0, iLen=nParent.childNodes.length ; i<iLen ; i++ )
+	{
+		if ( nParent.childNodes[i].nodeType == 1 )
+		{
+			anTags.push( nParent.childNodes[i] );
+		}
+	}
+	var nStore = anTags[ iFrom ];
+	
+	if ( iTo !== null )
+	{
+		nParent.insertBefore( nStore, anTags[iTo] );
+	}
+	else
+	{
+		nParent.appendChild( nStore );
+	}
+}
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * DataTables plug-in API functions
+ *
+ * This are required by ColReorder in order to perform the tasks required, and also keep this
+ * code portable, to be used for other column reordering projects with DataTables, if needed.
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+
+/**
+ * Plug-in for DataTables which will reorder the internal column structure by taking the column
+ * from one position (iFrom) and insert it into a given point (iTo).
+ *  @method  $.fn.dataTableExt.oApi.fnColReorder
+ *  @param   object oSettings DataTables settings object - automatically added by DataTables! 
+ *  @param   int iFrom Take the column to be repositioned from this point
+ *  @param   int iTo and insert it into this point
+ *  @returns void
+ */
+$.fn.dataTableExt.oApi.fnColReorder = function ( oSettings, iFrom, iTo )
+{
+	var i, iLen, j, jLen, iCols=oSettings.aoColumns.length, nTrs, oCol;
+	
+	/* Sanity check in the input */
+	if ( iFrom == iTo )
+	{
+		/* Pointless reorder */
+		return;
+	}
+	
+	if ( iFrom < 0 || iFrom >= iCols )
+	{
+		this.oApi._fnLog( oSettings, 1, "ColReorder 'from' index is out of bounds: "+iFrom );
+		return;
+	}
+	
+	if ( iTo < 0 || iTo >= iCols )
+	{
+		this.oApi._fnLog( oSettings, 1, "ColReorder 'to' index is out of bounds: "+iTo );
+		return;
+	}
+	
+	/*
+	 * Calculate the new column array index, so we have a mapping between the old and new
+	 */
+	var aiMapping = [];
+	for ( i=0, iLen=iCols ; i<iLen ; i++ )
+	{
+		aiMapping[i] = i;
+	}
+	fnArraySwitch( aiMapping, iFrom, iTo );
+	var aiInvertMapping = fnInvertKeyValues( aiMapping );
+	
+	
+	/*
+	 * Convert all internal indexing to the new column order indexes
+	 */
+	/* Sorting */
+	for ( i=0, iLen=oSettings.aaSorting.length ; i<iLen ; i++ )
+	{
+		oSettings.aaSorting[i][0] = aiInvertMapping[ oSettings.aaSorting[i][0] ];
+	}
+	
+	/* Fixed sorting */
+	if ( oSettings.aaSortingFixed !== null )
+	{
+		for ( i=0, iLen=oSettings.aaSortingFixed.length ; i<iLen ; i++ )
+		{
+			oSettings.aaSortingFixed[i][0] = aiInvertMapping[ oSettings.aaSortingFixed[i][0] ];
+		}
+	}
+	
+	/* Data column sorting (the column which the sort for a given column should take place on) */
+	for ( i=0, iLen=iCols ; i<iLen ; i++ )
+	{
+		oSettings.aoColumns[i].iDataSort = aiInvertMapping[ oSettings.aoColumns[i].iDataSort ];
+	}
+	
+	/* Update the Get and Set functions for each column */
+	for ( i=0, iLen=iCols ; i<iLen ; i++ )
+	{
+		oCol = oSettings.aoColumns[i];
+		if ( typeof oCol.mDataProp == 'number' ) {
+			oCol.mDataProp = aiInvertMapping[ oCol.mDataProp ];
+			oCol.fnGetData = oSettings.oApi._fnGetObjectDataFn( oCol.mDataProp );
+			oCol.fnSetData = oSettings.oApi._fnSetObjectDataFn( oCol.mDataProp );
+		}
+	}
+	
+	
+	/*
+	 * Move the DOM elements
+	 */
+	if ( oSettings.aoColumns[iFrom].bVisible )
+	{
+		/* Calculate the current visible index and the point to insert the node before. The insert
+		 * before needs to take into account that there might not be an element to insert before,
+		 * in which case it will be null, and an appendChild should be used
+		 */
+		var iVisibleIndex = this.oApi._fnColumnIndexToVisible( oSettings, iFrom );
+		var iInsertBeforeIndex = null;
+		
+		i = iTo < iFrom ? iTo : iTo + 1;
+		while ( iInsertBeforeIndex === null && i < iCols )
+		{
+			iInsertBeforeIndex = this.oApi._fnColumnIndexToVisible( oSettings, i );
+			i++;
+		}
+		
+		/* Header */
+		nTrs = oSettings.nTHead.getElementsByTagName('tr');
+		for ( i=0, iLen=nTrs.length ; i<iLen ; i++ )
+		{
+			fnDomSwitch( nTrs[i], iVisibleIndex, iInsertBeforeIndex );
+		}
+		
+		/* Footer */
+		if ( oSettings.nTFoot !== null )
+		{
+			nTrs = oSettings.nTFoot.getElementsByTagName('tr');
+			for ( i=0, iLen=nTrs.length ; i<iLen ; i++ )
+			{
+				fnDomSwitch( nTrs[i], iVisibleIndex, iInsertBeforeIndex );
+			}
+		}
+		
+		/* Body */
+		for ( i=0, iLen=oSettings.aoData.length ; i<iLen ; i++ )
+		{
+			if ( oSettings.aoData[i].nTr !== null )
+			{
+				fnDomSwitch( oSettings.aoData[i].nTr, iVisibleIndex, iInsertBeforeIndex );
+			}
+		}
+	}
+	
+	
+	/* 
+	 * Move the internal array elements
+	 */
+	/* Columns */
+	fnArraySwitch( oSettings.aoColumns, iFrom, iTo );
+	
+	/* Search columns */
+	fnArraySwitch( oSettings.aoPreSearchCols, iFrom, iTo );
+	
+	/* Array array - internal data anodes cache */
+	for ( i=0, iLen=oSettings.aoData.length ; i<iLen ; i++ )
+	{
+		if ( $.isArray( oSettings.aoData[i]._aData ) ) {
+		  fnArraySwitch( oSettings.aoData[i]._aData, iFrom, iTo );
+		}
+		fnArraySwitch( oSettings.aoData[i]._anHidden, iFrom, iTo );
+	}
+	
+	/* Reposition the header elements in the header layout array */
+	for ( i=0, iLen=oSettings.aoHeader.length ; i<iLen ; i++ )
+	{
+		fnArraySwitch( oSettings.aoHeader[i], iFrom, iTo );
+	}
+	
+	if ( oSettings.aoFooter !== null )
+	{
+		for ( i=0, iLen=oSettings.aoFooter.length ; i<iLen ; i++ )
+		{
+			fnArraySwitch( oSettings.aoFooter[i], iFrom, iTo );
+		}
+	}
+	
+	
+	/*
+	 * Update DataTables' event handlers
+	 */
+	
+	/* Sort listener */
+	for ( i=0, iLen=iCols ; i<iLen ; i++ )
+	{
+		$(oSettings.aoColumns[i].nTh).unbind('click');
+		this.oApi._fnSortAttachListener( oSettings, oSettings.aoColumns[i].nTh, i );
+	}
+	
+	
+	/*
+	 * Any extra operations for the other plug-ins
+	 */
+	if ( typeof ColVis != 'undefined' )
+	{
+		ColVis.fnRebuild( oSettings.oInstance );
+	}
+	
+	if ( typeof oSettings.oInstance._oPluginFixedHeader != 'undefined' )
+	{
+		oSettings.oInstance._oPluginFixedHeader.fnUpdate();
+	}
+};
+
+
+
+
+/** 
+ * ColReorder provides column visiblity control for DataTables
+ * @class ColReorder
+ * @constructor
+ * @param {object} DataTables object
+ * @param {object} ColReorder options
+ */
+ColReorder = function( oTable, oOpts )
+{
+	/* Santiy check that we are a new instance */
+	if ( !this.CLASS || this.CLASS != "ColReorder" )
+	{
+		alert( "Warning: ColReorder must be initialised with the keyword 'new'" );
+	}
+	
+	if ( typeof oOpts == 'undefined' )
+	{
+		oOpts = {};
+	}
+	
+	
+	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+	 * Public class variables
+	 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+	
+	/**
+	 * @namespace Settings object which contains customisable information for ColReorder instance
+	 */
+	this.s = {
+		/**
+		 * DataTables settings object
+		 *  @property dt
+		 *  @type     Object
+		 *  @default  null
+		 */
+		"dt": null,
+		
+		/**
+		 * Initialisation object used for this instance
+		 *  @property init
+		 *  @type     object
+		 *  @default  {}
+		 */
+		"init": oOpts,
+		
+		/**
+		 * Number of columns to fix (not allow to be reordered)
+		 *  @property fixed
+		 *  @type     int
+		 *  @default  0
+		 */
+		"fixed": 0,
+		
+		/**
+		 * Callback function for once the reorder has been done
+		 *  @property dropcallback
+		 *  @type     function
+		 *  @default  null
+		 */
+		"dropCallback": null,
+		
+		/**
+		 * @namespace Information used for the mouse drag
+		 */
+		"mouse": {
+			"startX": -1,
+			"startY": -1,
+			"offsetX": -1,
+			"offsetY": -1,
+			"target": -1,
+			"targetIndex": -1,
+			"fromIndex": -1
+		},
+		
+		/**
+		 * Information which is used for positioning the insert cusor and knowing where to do the
+		 * insert. Array of objects with the properties:
+		 *   x: x-axis position
+		 *   to: insert point
+		 *  @property aoTargets
+		 *  @type     array
+		 *  @default  []
+		 */
+		"aoTargets": []
+	};
+	
+	
+	/**
+	 * @namespace Common and useful DOM elements for the class instance
+	 */
+	this.dom = {
+		/**
+		 * Dragging element (the one the mouse is moving)
+		 *  @property drag
+		 *  @type     element
+		 *  @default  null
+		 */
+		"drag": null,
+		
+		/**
+		 * The insert cursor
+		 *  @property pointer
+		 *  @type     element
+		 *  @default  null
+		 */
+		"pointer": null
+	};
+	
+	
+	/* Constructor logic */
+	this.s.dt = oTable.fnSettings();
+	this._fnConstruct();
+	
+	/* Store the instance for later use */
+	ColReorder.aoInstances.push( this );
+	return this;
+};
+
+
+
+ColReorder.prototype = {
+	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+	 * Public methods
+	 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+	
+	"fnReset": function ()
+	{
+		var a = [];
+		for ( var i=0, iLen=this.s.dt.aoColumns.length ; i<iLen ; i++ )
+		{
+			a.push( this.s.dt.aoColumns[i]._ColReorder_iOrigCol );
+		}
+		
+		this._fnOrderColumns( a );
+	},
+	
+	
+	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+	 * Private methods (they are of course public in JS, but recommended as private)
+	 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+	
+	/**
+	 * Constructor logic
+	 *  @method  _fnConstruct
+	 *  @returns void
+	 *  @private 
+	 */
+	"_fnConstruct": function ()
+	{
+		var that = this;
+		var i, iLen;
+		
+		/* Columns discounted from reordering - counting left to right */
+		if ( typeof this.s.init.iFixedColumns != 'undefined' )
+		{
+			this.s.fixed = this.s.init.iFixedColumns;
+		}
+		
+		/* Drop callback initialisation option */
+		if ( typeof this.s.init.fnReorderCallback != 'undefined' )
+		{
+			this.s.dropCallback = this.s.init.fnReorderCallback;
+		}
+		
+		/* Add event handlers for the drag and drop, and also mark the original column order */
+		for ( i=0, iLen=this.s.dt.aoColumns.length ; i<iLen ; i++ )
+		{
+			if ( i > this.s.fixed-1 )
+			{
+				this._fnMouseListener( i, this.s.dt.aoColumns[i].nTh );
+			}
+			
+			/* Mark the original column order for later reference */
+			this.s.dt.aoColumns[i]._ColReorder_iOrigCol = i;
+		}
+		
+		/* State saving */
+		this.s.dt.aoStateSave.push( {
+			"fn": function (oS, sVal) {
+				return that._fnStateSave.call( that, sVal );
+			},
+			"sName": "ColReorder_State"
+		} );
+		
+		/* An initial column order has been specified */
+		var aiOrder = null;
+		if ( typeof this.s.init.aiOrder != 'undefined' )
+		{
+			aiOrder = this.s.init.aiOrder.slice();
+		}
+		
+		/* State loading, overrides the column order given */
+		if ( this.s.dt.oLoadedState && typeof this.s.dt.oLoadedState.ColReorder != 'undefined' &&
+		  this.s.dt.oLoadedState.ColReorder.length == this.s.dt.aoColumns.length )
+		{
+			aiOrder = this.s.dt.oLoadedState.ColReorder;
+		}
+		
+		/* If we have an order to apply - do so */
+		if ( aiOrder )
+		{
+			/* We might be called during or after the DataTables initialisation. If before, then we need
+			 * to wait until the draw is done, if after, then do what we need to do right away
+			 */
+			if ( !that.s.dt._bInitComplete )
+			{
+				var bDone = false;
+				this.s.dt.aoDrawCallback.push( {
+					"fn": function () {
+						if ( !that.s.dt._bInitComplete && !bDone )
+						{
+							bDone = true;
+							var resort = fnInvertKeyValues( aiOrder );
+							that._fnOrderColumns.call( that, resort );
+						}
+					},
+					"sName": "ColReorder_Pre"
+				} );
+			}
+			else
+			{
+				var resort = fnInvertKeyValues( aiOrder );
+				that._fnOrderColumns.call( that, resort );
+			}
+		}
+	},
+	
+	
+	/**
+	 * Set the column order from an array
+	 *  @method  _fnOrderColumns
+	 *  @param   array a An array of integers which dictate the column order that should be applied
+	 *  @returns void
+	 *  @private 
+	 */
+	"_fnOrderColumns": function ( a )
+	{
+		if ( a.length != this.s.dt.aoColumns.length )
+		{
+			this.s.dt.oInstance.oApi._fnLog( oDTSettings, 1, "ColReorder - array reorder does not "+
+			 	"match known number of columns. Skipping." );
+			return;
+		}
+		
+		for ( var i=0, iLen=a.length ; i<iLen ; i++ )
+		{
+			var currIndex = $.inArray( i, a );
+			if ( i != currIndex )
+			{
+				/* Reorder our switching array */
+				fnArraySwitch( a, currIndex, i );
+				
+				/* Do the column reorder in the table */
+				this.s.dt.oInstance.fnColReorder( currIndex, i );
+			}
+		}
+		
+		/* When scrolling we need to recalculate the column sizes to allow for the shift */
+		if ( this.s.dt.oScroll.sX !== "" || this.s.dt.oScroll.sY !== "" )
+		{
+			this.s.dt.oInstance.fnAdjustColumnSizing();
+		}
+			
+		/* Save the state */
+		this.s.dt.oInstance.oApi._fnSaveState( this.s.dt );
+	},
+	
+	
+	/**
+	 * This function effectively replaces the state saving function in DataTables (this is needed
+	 * because otherwise DataTables would state save the columns in their reordered state, not the
+	 * original which is needed on first draw). This is sensitive to any changes in the DataTables
+	 * state saving method!
+	 *  @method  _fnStateSave
+	 *  @param   string sCurrentVal 
+	 *  @returns string JSON encoded cookie string for DataTables
+	 *  @private 
+	 */
+	"_fnStateSave": function ( sCurrentVal )
+	{
+		var i, iLen, sTmp;
+		var sValue = sCurrentVal.split('"aaSorting"')[0];
+		var a = [];
+		var oSettings = this.s.dt;
+		
+		/* Sorting */
+		sValue += '"aaSorting":[ ';
+		for ( i=0 ; i<oSettings.aaSorting.length ; i++ )
+		{
+			sValue += '['+oSettings.aoColumns[ oSettings.aaSorting[i][0] ]._ColReorder_iOrigCol+
+				',"'+oSettings.aaSorting[i][1]+'"],';
+		}
+		sValue = sValue.substring(0, sValue.length-1);
+		sValue += "],";
+		
+		/* Column filter */
+		for ( i=0, iLen=oSettings.aoColumns.length ; i<iLen ; i++ )
+		{
+			a[ oSettings.aoColumns[i]._ColReorder_iOrigCol ] = {
+				"sSearch": encodeURIComponent(oSettings.aoPreSearchCols[i].sSearch),
+				"bRegex": !oSettings.aoPreSearchCols[i].bRegex
+			};
+		}
+		
+		sValue += '"aaSearchCols":[ ';
+		for ( i=0 ; i<a.length ; i++ )
+		{
+			sValue += '["'+a[i].sSearch+'",'+a[i].bRegex+'],';
+		}
+		sValue = sValue.substring(0, sValue.length-1);
+		sValue += "],";
+		
+		/* Visibility */
+		a = [];
+		for ( i=0, iLen=oSettings.aoColumns.length ; i<iLen ; i++ )
+		{
+			a[ oSettings.aoColumns[i]._ColReorder_iOrigCol ] = oSettings.aoColumns[i].bVisible;
+		}
+		
+		sValue += '"abVisCols":[ ';
+		for ( i=0 ; i<a.length ; i++ )
+		{
+			sValue += a[i]+",";
+		}
+		sValue = sValue.substring(0, sValue.length-1);
+		sValue += "],";
+		
+		/* Column reordering */
+		a = [];
+		for ( i=0, iLen=oSettings.aoColumns.length ; i<iLen ; i++ ) {
+			a.push( oSettings.aoColumns[i]._ColReorder_iOrigCol );
+		}
+		sValue += '"ColReorder":['+a.join(',')+']';
+		
+		return sValue;
+	},
+	
+	
+	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+	 * Mouse drop and drag
+	 */
+	
+	/**
+	 * Add a mouse down listener to a particluar TH element
+	 *  @method  _fnMouseListener
+	 *  @param   int i Column index
+	 *  @param   element nTh TH element clicked on
+	 *  @returns void
+	 *  @private 
+	 */
+	"_fnMouseListener": function ( i, nTh )
+	{
+		var that = this;
+		$(nTh).bind( 'mousedown.ColReorder', function (e) {
+			that._fnMouseDown.call( that, e, nTh );
+			return false;
+		} );
+	},
+	
+	
+	/**
+	 * Mouse down on a TH element in the table header
+	 *  @method  _fnMouseDown
+	 *  @param   event e Mouse event
+	 *  @param   element nTh TH element to be dragged
+	 *  @returns void
+	 *  @private 
+	 */
+	"_fnMouseDown": function ( e, nTh )
+	{
+		var
+			that = this,
+			aoColumns = this.s.dt.aoColumns;
+		
+		/* Store information about the mouse position */
+		var nThTarget = e.target.nodeName == "TH" ? e.target : $(e.target).parents('TH')[0];
+		var offset = $(nThTarget).offset();
+		this.s.mouse.startX = e.pageX;
+		this.s.mouse.startY = e.pageY;
+		this.s.mouse.offsetX = e.pageX - offset.left;
+		this.s.mouse.offsetY = e.pageY - offset.top;
+		this.s.mouse.target = nTh;
+		this.s.mouse.targetIndex = $('th', nTh.parentNode).index( nTh );
+		this.s.mouse.fromIndex = this.s.dt.oInstance.oApi._fnVisibleToColumnIndex( this.s.dt, 
+			this.s.mouse.targetIndex );
+		
+		/* Calculate a cached array with the points of the column inserts, and the 'to' points */
+		this.s.aoTargets.splice( 0, this.s.aoTargets.length );
+		
+		this.s.aoTargets.push( {
+			"x":  $(this.s.dt.nTable).offset().left,
+			"to": 0
+		} );
+		
+		var iToPoint = 0;
+		for ( var i=0, iLen=aoColumns.length ; i<iLen ; i++ )
+		{
+			/* For the column / header in question, we want it's position to remain the same if the 
+			 * position is just to it's immediate left or right, so we only incremement the counter for
+			 * other columns
+			 */
+			if ( i != this.s.mouse.fromIndex )
+			{
+				iToPoint++;
+			}
+			
+			if ( aoColumns[i].bVisible )
+			{
+				this.s.aoTargets.push( {
+					"x":  $(aoColumns[i].nTh).offset().left + $(aoColumns[i].nTh).outerWidth(),
+					"to": iToPoint
+				} );
+			}
+		}
+		
+		/* Disallow columns for being reordered by drag and drop, counting left to right */
+		if ( this.s.fixed !== 0 )
+		{
+			this.s.aoTargets.splice( 0, this.s.fixed );
+		}
+		
+		/* Add event handlers to the document */
+		$(document).bind( 'mousemove.ColReorder', function (e) {
+			that._fnMouseMove.call( that, e );
+		} );
+		
+		$(document).bind( 'mouseup.ColReorder', function (e) {
+			that._fnMouseUp.call( that, e );
+		} );
+	},
+	
+	
+	/**
+	 * Deal with a mouse move event while dragging a node
+	 *  @method  _fnMouseMove
+	 *  @param   event e Mouse event
+	 *  @returns void
+	 *  @private 
+	 */
+	"_fnMouseMove": function ( e )
+	{
+		var that = this;
+		
+		if ( this.dom.drag === null )
+		{
+			/* Only create the drag element if the mouse has moved a specific distance from the start
+			 * point - this allows the user to make small mouse movements when sorting and not have a
+			 * possibly confusing drag element showing up
+			 */
+			if ( Math.pow(
+				Math.pow(e.pageX - this.s.mouse.startX, 2) + 
+				Math.pow(e.pageY - this.s.mouse.startY, 2), 0.5 ) < 5 )
+			{
+				return;
+			}
+			this._fnCreateDragNode();
+		}
+		
+		/* Position the element - we respect where in the element the click occured */
+		this.dom.drag.style.left = (e.pageX - this.s.mouse.offsetX) + "px";
+		this.dom.drag.style.top = (e.pageY - this.s.mouse.offsetY) + "px";
+		
+		/* Based on the current mouse position, calculate where the insert should go */
+		var bSet = false;
+		for ( var i=1, iLen=this.s.aoTargets.length ; i<iLen ; i++ )
+		{
+			if ( e.pageX < this.s.aoTargets[i-1].x + ((this.s.aoTargets[i].x-this.s.aoTargets[i-1].x)/2) )
+			{
+				this.dom.pointer.style.left = this.s.aoTargets[i-1].x +"px";
+				this.s.mouse.toIndex = this.s.aoTargets[i-1].to;
+				bSet = true;
+				break;
+			}
+		}
+		
+		/* The insert element wasn't positioned in the array (less than operator), so we put it at 
+		 * the end
+		 */
+		if ( !bSet )
+		{
+			this.dom.pointer.style.left = this.s.aoTargets[this.s.aoTargets.length-1].x +"px";
+			this.s.mouse.toIndex = this.s.aoTargets[this.s.aoTargets.length-1].to;
+		}
+	},
+	
+	
+	/**
+	 * Finish off the mouse drag and insert the column where needed
+	 *  @method  _fnMouseUp
+	 *  @param   event e Mouse event
+	 *  @returns void
+	 *  @private 
+	 */
+	"_fnMouseUp": function ( e )
+	{
+		var that = this;
+		
+		$(document).unbind( 'mousemove.ColReorder' );
+		$(document).unbind( 'mouseup.ColReorder' );
+		
+		if ( this.dom.drag !== null )
+		{
+			/* Remove the guide elements */
+			document.body.removeChild( this.dom.drag );
+			document.body.removeChild( this.dom.pointer );
+			this.dom.drag = null;
+			this.dom.pointer = null;
+			
+			/* Actually do the reorder */
+			this.s.dt.oInstance.fnColReorder( this.s.mouse.fromIndex, this.s.mouse.toIndex );
+			
+			/* When scrolling we need to recalculate the column sizes to allow for the shift */
+			if ( this.s.dt.oScroll.sX !== "" || this.s.dt.oScroll.sY !== "" )
+			{
+				this.s.dt.oInstance.fnAdjustColumnSizing();
+			}
+			
+			if ( this.s.dropCallback !== null )
+			{
+				this.s.dropCallback.call( this );
+			}
+			
+			/* Save the state */
+			this.s.dt.oInstance.oApi._fnSaveState( this.s.dt );
+		}
+	},
+	
+	
+	/**
+	 * Copy the TH element that is being drags so the user has the idea that they are actually 
+	 * moving it around the page.
+	 *  @method  _fnCreateDragNode
+	 *  @returns void
+	 *  @private 
+	 */
+	"_fnCreateDragNode": function ()
+	{
+		var that = this;
+		
+		this.dom.drag = $(this.s.dt.nTHead.parentNode).clone(true)[0];
+		this.dom.drag.className += " DTCR_clonedTable";
+		while ( this.dom.drag.getElementsByTagName('caption').length > 0 )
+		{
+			this.dom.drag.removeChild( this.dom.drag.getElementsByTagName('caption')[0] );
+		}
+		while ( this.dom.drag.getElementsByTagName('tbody').length > 0 )
+		{
+			this.dom.drag.removeChild( this.dom.drag.getElementsByTagName('tbody')[0] );
+		}
+		while ( this.dom.drag.getElementsByTagName('tfoot').length > 0 )
+		{
+			this.dom.drag.removeChild( this.dom.drag.getElementsByTagName('tfoot')[0] );
+		}
+		
+		$('thead tr:eq(0)', this.dom.drag).each( function () {
+			$('th:not(:eq('+that.s.mouse.targetIndex+'))', this).remove();
+		} );
+		$('tr', this.dom.drag).height( $('tr:eq(0)', that.s.dt.nTHead).height() );
+		
+		$('thead tr:gt(0)', this.dom.drag).remove();
+		
+		$('thead th:eq(0)', this.dom.drag).each( function (i) {
+			this.style.width = $('th:eq('+that.s.mouse.targetIndex+')', that.s.dt.nTHead).width()+"px";
+		} );
+		
+		this.dom.drag.style.position = "absolute";
+		this.dom.drag.style.top = "0px";
+		this.dom.drag.style.left = "0px";
+		this.dom.drag.style.width = $('th:eq('+that.s.mouse.targetIndex+')', that.s.dt.nTHead).outerWidth()+"px";
+		
+		
+		this.dom.pointer = document.createElement( 'div' );
+		this.dom.pointer.className = "DTCR_pointer";
+		this.dom.pointer.style.position = "absolute";
+		
+		if ( this.s.dt.oScroll.sX === "" && this.s.dt.oScroll.sY === "" )
+		{
+			this.dom.pointer.style.top = $(this.s.dt.nTable).offset().top+"px";
+			this.dom.pointer.style.height = $(this.s.dt.nTable).height()+"px";
+		}
+		else
+		{
+			this.dom.pointer.style.top = $('div.dataTables_scroll', this.s.dt.nTableWrapper).offset().top+"px";
+			this.dom.pointer.style.height = $('div.dataTables_scroll', this.s.dt.nTableWrapper).height()+"px";
+		}
+	
+		document.body.appendChild( this.dom.pointer );
+		document.body.appendChild( this.dom.drag );
+	}
+};
+
+
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * Static parameters
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+/**
+ * Array of all ColReorder instances for later reference
+ *  @property ColReorder.aoInstances
+ *  @type     array
+ *  @default  []
+ *  @static
+ */
+ColReorder.aoInstances = [];
+
+
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * Static functions
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+/**
+ * Reset the column ordering for a DataTables instance
+ *  @method  ColReorder.fnReset
+ *  @param   object oTable DataTables instance to consider
+ *  @returns void
+ *  @static
+ */
+ColReorder.fnReset = function ( oTable )
+{
+	for ( var i=0, iLen=ColReorder.aoInstances.length ; i<iLen ; i++ )
+	{
+		if ( ColReorder.aoInstances[i].s.dt.oInstance == oTable )
+		{
+			ColReorder.aoInstances[i].fnReset();
+		}
+	}
+};
+
+
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * Constants
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+/**
+ * Name of this class
+ *  @constant CLASS
+ *  @type     String
+ *  @default  ColReorder
+ */
+ColReorder.prototype.CLASS = "ColReorder";
+
+
+/**
+ * ColReorder version
+ *  @constant  VERSION
+ *  @type      String
+ *  @default   As code
+ */
+ColReorder.VERSION = "1.0.4";
+ColReorder.prototype.VERSION = ColReorder.VERSION;
+
+
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * Initialisation
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+/*
+ * Register a new feature with DataTables
+ */
+if ( typeof $.fn.dataTable == "function" &&
+     typeof $.fn.dataTableExt.fnVersionCheck == "function" &&
+     $.fn.dataTableExt.fnVersionCheck('1.8.0') )
+{
+	$.fn.dataTableExt.aoFeatures.push( {
+		"fnInit": function( oDTSettings ) {
+			var oTable = oDTSettings.oInstance;
+			if ( typeof oTable._oPluginColReorder == 'undefined' ) {
+				var opts = typeof oDTSettings.oInit.oColReorder != 'undefined' ? 
+					oDTSettings.oInit.oColReorder : {};
+				oTable._oPluginColReorder = new ColReorder( oDTSettings.oInstance, opts );
+			} else {
+				oTable.oApi._fnLog( oDTSettings, 1, "ColReorder attempted to initialise twice. Ignoring second" );
+			}
+			
+			return null; /* No node to insert */
+		},
+		"cFeature": "R",
+		"sFeature": "ColReorder"
+	} );
+}
+else
+{
+	alert( "Warning: ColReorder requires DataTables 1.8.0 or greater - www.datatables.net/download");
+}
+
+})(jQuery, window, document);
\ No newline at end of file
diff --git a/airtime_mvc/public/js/datatables/plugin/dataTables.ColVis.js b/airtime_mvc/public/js/datatables/plugin/dataTables.ColVis.js
new file mode 100644
index 000000000..32d1b0314
--- /dev/null
+++ b/airtime_mvc/public/js/datatables/plugin/dataTables.ColVis.js
@@ -0,0 +1,995 @@
+/*
+ * File:        ColVis.js
+ * Version:     1.0.7.dev
+ * CVS:         $Id$
+ * Description: Controls for column visiblity in DataTables
+ * Author:      Allan Jardine (www.sprymedia.co.uk)
+ * Created:     Wed Sep 15 18:23:29 BST 2010
+ * Modified:    $Date$ by $Author$
+ * Language:    Javascript
+ * License:     GPL v2 or BSD 3 point style
+ * Project:     Just a little bit of fun :-)
+ * Contact:     www.sprymedia.co.uk/contact
+ * 
+ * Copyright 2010-2011 Allan Jardine, all rights reserved.
+ *
+ * This source file is free software, under either the GPL v2 license or a
+ * BSD style license, available at:
+ *   http://datatables.net/license_gpl2
+ *   http://datatables.net/license_bsd
+ */
+
+(function($) {
+
+/** 
+ * ColVis provides column visiblity control for DataTables
+ * @class ColVis
+ * @constructor
+ * @param {object} DataTables settings object
+ */
+ColVis = function( oDTSettings, oInit )
+{
+	/* Santiy check that we are a new instance */
+	if ( !this.CLASS || this.CLASS != "ColVis" )
+	{
+		alert( "Warning: ColVis must be initialised with the keyword 'new'" );
+	}
+	
+	if ( typeof oInit == 'undefined' )
+	{
+		oInit = {};
+	}
+	
+	
+	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+	 * Public class variables
+	 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+	
+	/**
+	 * @namespace Settings object which contains customisable information for ColVis instance
+	 */
+	this.s = {
+		/**
+		 * DataTables settings object
+		 *  @property dt
+		 *  @type     Object
+		 *  @default  null
+		 */
+		"dt": null,
+		
+		/**
+		 * Customisation object
+		 *  @property oInit
+		 *  @type     Object
+		 *  @default  passed in
+		 */
+		"oInit": oInit,
+		
+		/**
+		 * Callback function to tell the user when the state has changed
+		 *  @property fnStateChange
+		 *  @type     function
+		 *  @default  null
+		 */
+		"fnStateChange": null,
+		
+		/**
+		 * Mode of activation. Can be 'click' or 'mouseover'
+		 *  @property activate
+		 *  @type     String
+		 *  @default  click
+		 */
+		"activate": "click",
+		
+		/**
+		 * Position of the collection menu when shown - align "left" or "right"
+		 *  @property sAlign
+		 *  @type     String
+		 *  @default  right
+		 */
+		"sAlign": "left",
+		
+		/**
+		 * Text used for the button
+		 *  @property buttonText
+		 *  @type     String
+		 *  @default  Show / hide columns
+		 */
+		"buttonText": "Show / hide columns",
+		
+		/**
+		 * Flag to say if the collection is hidden
+		 *  @property hidden
+		 *  @type     boolean
+		 *  @default  true
+		 */
+		"hidden": true,
+		
+		/**
+		 * List of columns (integers) which should be excluded from the list
+		 *  @property aiExclude
+		 *  @type     Array
+		 *  @default  []
+		 */
+		"aiExclude": [],
+		
+		/**
+		 * Store the original viisbility settings so they could be restored
+		 *  @property abOriginal
+		 *  @type     Array
+		 *  @default  []
+		 */
+		"abOriginal": [],
+		
+		/**
+		 * Show Show-All button
+		 *  @property bShowAll
+		 *  @type     Array
+		 *  @default  []
+		 */
+		"bShowAll": false,
+		
+		/**
+		 * Show All button text
+		 *  @property sShowAll
+		 *  @type     String
+		 *  @default  Restore original
+		 */
+		"sShowAll": "Show All",
+		
+		/**
+		 * Show restore button
+		 *  @property bRestore
+		 *  @type     Array
+		 *  @default  []
+		 */
+		"bRestore": false,
+		
+		/**
+		 * Restore button text
+		 *  @property sRestore
+		 *  @type     String
+		 *  @default  Restore original
+		 */
+		"sRestore": "Restore original",
+		
+		/**
+		 * Overlay animation duration in mS
+		 *  @property iOverlayFade
+		 *  @type     Integer
+		 *  @default  500
+		 */
+		"iOverlayFade": 500,
+		
+		/**
+		 * Label callback for column names. Takes three parameters: 1. the column index, 2. the column
+		 * title detected by DataTables and 3. the TH node for the column
+		 *  @property fnLabel
+		 *  @type     Function
+		 *  @default  null
+		 */
+		"fnLabel": null,
+		
+		/**
+		 * Indicate if ColVis should automatically calculate the size of buttons or not. The default
+		 * is for it to do so. Set to "css" to disable the automatic sizing
+		 *  @property sSize
+		 *  @type     String
+		 *  @default  auto
+		 */
+		"sSize": "auto",
+		
+		/**
+		 * Indicate if the column list should be positioned by Javascript, visually below the button
+		 * or allow CSS to do the positioning
+		 *  @property bCssPosition
+		 *  @type     boolean
+		 *  @default  false
+		 */
+		"bCssPosition": false
+	};
+	
+	
+	/**
+	 * @namespace Common and useful DOM elements for the class instance
+	 */
+	this.dom = {
+		/**
+		 * Wrapper for the button - given back to DataTables as the node to insert
+		 *  @property wrapper
+		 *  @type     Node
+		 *  @default  null
+		 */
+		"wrapper": null,
+		
+		/**
+		 * Activation button
+		 *  @property button
+		 *  @type     Node
+		 *  @default  null
+		 */
+		"button": null,
+		
+		/**
+		 * Collection list node
+		 *  @property collection
+		 *  @type     Node
+		 *  @default  null
+		 */
+		"collection": null,
+		
+		/**
+		 * Background node used for shading the display and event capturing
+		 *  @property background
+		 *  @type     Node
+		 *  @default  null
+		 */
+		"background": null,
+		
+		/**
+		 * Element to position over the activation button to catch mouse events when using mouseover
+		 *  @property catcher
+		 *  @type     Node
+		 *  @default  null
+		 */
+		"catcher": null,
+		
+		/**
+		 * List of button elements
+		 *  @property buttons
+		 *  @type     Array
+		 *  @default  []
+		 */
+		"buttons": [],
+		
+		/**
+		 * Restore button
+		 *  @property restore
+		 *  @type     Node
+		 *  @default  null
+		 */
+		"restore": null
+	};
+	
+	/* Store global reference */
+	ColVis.aInstances.push( this );
+	
+	/* Constructor logic */
+	this.s.dt = oDTSettings;
+	this._fnConstruct();
+	return this;
+};
+
+
+
+ColVis.prototype = {
+	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+	 * Public methods
+	 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+	
+	/**
+	 * Rebuild the list of buttons for this instance (i.e. if there is a column header update)
+	 *  @method  fnRebuild
+	 *  @returns void
+	 */
+	"fnRebuild": function ()
+	{
+		/* Remove the old buttons */
+		for ( var i=this.dom.buttons.length-1 ; i>=0 ; i-- )
+		{
+			if ( this.dom.buttons[i] !== null )
+			{
+				this.dom.collection.removeChild( this.dom.buttons[i] );
+			}
+		}
+		this.dom.buttons.splice( 0, this.dom.buttons.length );
+		
+		if ( this.dom.restore )
+		{
+			this.dom.restore.parentNode( this.dom.restore );
+		}
+		
+		/* Re-add them (this is not the optimal way of doing this, it is fast and effective) */
+		this._fnAddButtons();
+		
+		/* Update the checkboxes */
+		this._fnDrawCallback();
+	},
+	
+	
+	
+	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+	 * Private methods (they are of course public in JS, but recommended as private)
+	 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+	
+	/**
+	 * Constructor logic
+	 *  @method  _fnConstruct
+	 *  @returns void
+	 *  @private 
+	 */
+	"_fnConstruct": function ()
+	{
+		this._fnApplyCustomisation();
+		
+		var that = this;
+		this.dom.wrapper = document.createElement('div');
+		this.dom.wrapper.className = "ColVis TableTools";
+		
+		this.dom.button = this._fnDomBaseButton( this.s.buttonText );
+		this.dom.button.className += " ColVis_MasterButton";
+		this.dom.wrapper.appendChild( this.dom.button );
+		
+		this.dom.catcher = this._fnDomCatcher();
+		this.dom.collection = this._fnDomCollection();
+		this.dom.background = this._fnDomBackground();
+		
+		this._fnAddButtons();
+		
+		/* Store the original visbility information */
+		for ( var i=0, iLen=this.s.dt.aoColumns.length ; i<iLen ; i++ )
+		{
+			this.s.abOriginal.push( this.s.dt.aoColumns[i].bVisible );
+		}
+		
+		/* Update on each draw */
+		this.s.dt.aoDrawCallback.push( {
+			"fn": function () {
+				that._fnDrawCallback.call( that );
+			},
+			"sName": "ColVis"
+		} );
+	},
+	
+	
+	/**
+	 * Apply any customisation to the settings from the DataTables initialisation
+	 *  @method  _fnApplyCustomisation
+	 *  @returns void
+	 *  @private 
+	 */
+	"_fnApplyCustomisation": function ()
+	{
+		var oConfig = this.s.oInit;
+		
+		if ( typeof oConfig.activate != 'undefined' )
+		{
+			this.s.activate = oConfig.activate;
+		}
+		
+		if ( typeof oConfig.buttonText != 'undefined' )
+		{
+			this.s.buttonText = oConfig.buttonText;
+		}
+		
+		if ( typeof oConfig.aiExclude != 'undefined' )
+		{
+			this.s.aiExclude = oConfig.aiExclude;
+		}
+		
+		if ( typeof oConfig.bRestore != 'undefined' )
+		{
+			this.s.bRestore = oConfig.bRestore;
+		}
+		
+		if ( typeof oConfig.sRestore != 'undefined' )
+		{
+			this.s.sRestore = oConfig.sRestore;
+		}
+		
+		if ( typeof oConfig.bShowAll != 'undefined' )
+		{
+			this.s.bShowAll = oConfig.bShowAll;
+		}
+		
+		if ( typeof oConfig.sShowAll != 'undefined' )
+		{
+			this.s.sShowAll = oConfig.sShowAll;
+		}
+		
+		if ( typeof oConfig.sAlign != 'undefined' )
+		{
+			this.s.sAlign = oConfig.sAlign;
+		}
+		
+		if ( typeof oConfig.fnStateChange != 'undefined' )
+		{
+			this.s.fnStateChange = oConfig.fnStateChange;
+		}
+		
+		if ( typeof oConfig.iOverlayFade != 'undefined' )
+		{
+			this.s.iOverlayFade = oConfig.iOverlayFade;
+		}
+		
+		if ( typeof oConfig.fnLabel != 'undefined' )
+		{
+			this.s.fnLabel = oConfig.fnLabel;
+		}
+		
+		if ( typeof oConfig.sSize != 'undefined' )
+		{
+			this.s.sSize = oConfig.sSize;
+		}
+
+		if ( typeof oConfig.bCssPosition != 'undefined' )
+		{
+			this.s.bCssPosition = oConfig.bCssPosition;
+		}
+	},
+	
+	
+	/**
+	 * On each table draw, check the visiblity checkboxes as needed. This allows any process to
+	 * update the table's column visiblity and ColVis will still be accurate.
+	 *  @method  _fnDrawCallback
+	 *  @returns void
+	 *  @private 
+	 */
+	"_fnDrawCallback": function ()
+	{
+		var aoColumns = this.s.dt.aoColumns;
+		
+		for ( var i=0, iLen=aoColumns.length ; i<iLen ; i++ )
+		{
+			if ( this.dom.buttons[i] !== null )
+			{
+				if ( aoColumns[i].bVisible )
+				{
+					$('input', this.dom.buttons[i]).attr('checked','checked');
+				}
+				else
+				{
+					$('input', this.dom.buttons[i]).removeAttr('checked');
+				}
+			}
+		}
+	},
+	
+	
+	/**
+	 * Loop through the columns in the table and as a new button for each one.
+	 *  @method  _fnAddButtons
+	 *  @returns void
+	 *  @private 
+	 */
+	"_fnAddButtons": function ()
+	{
+		var
+			nButton,
+			sExclude = ","+this.s.aiExclude.join(',')+",";
+		
+		for ( var i=0, iLen=this.s.dt.aoColumns.length ; i<iLen ; i++ )
+		{
+			if ( sExclude.indexOf( ","+i+"," ) == -1 )
+			{
+				nButton = this._fnDomColumnButton( i );
+				this.dom.buttons.push( nButton );
+				this.dom.collection.appendChild( nButton );
+			}
+			else
+			{
+				this.dom.buttons.push( null );
+			}
+		}
+		
+		if ( this.s.bRestore )
+		{
+			nButton = this._fnDomRestoreButton();
+			nButton.className += " ColVis_Restore";
+			this.dom.buttons.push( nButton );
+			this.dom.collection.appendChild( nButton );
+		}
+		
+		if ( this.s.bShowAll )
+		{
+			nButton = this._fnDomShowAllButton();
+			nButton.className += " ColVis_ShowAll";
+			this.dom.buttons.push( nButton );
+			this.dom.collection.appendChild( nButton );
+		}
+	},
+	
+	
+	/**
+	 * Create a button which allows a "restore" action
+	 *  @method  _fnDomRestoreButton
+	 *  @returns {Node} Created button
+	 *  @private 
+	 */
+	"_fnDomRestoreButton": function ()
+	{
+		var
+			that = this,
+			nButton = document.createElement('button'),
+			nSpan = document.createElement('span');
+		
+		nButton.className = !this.s.dt.bJUI ? "ColVis_Button TableTools_Button" :
+			"ColVis_Button TableTools_Button ui-button ui-state-default";
+		nButton.appendChild( nSpan );
+		$(nSpan).html( '<span class="ColVis_title">'+this.s.sRestore+'</span>' );
+		
+		$(nButton).click( function (e) {
+			for ( var i=0, iLen=that.s.abOriginal.length ; i<iLen ; i++ )
+			{
+				that.s.dt.oInstance.fnSetColumnVis( i, that.s.abOriginal[i], false );
+			}
+			that._fnAdjustOpenRows();
+			that.s.dt.oInstance.fnDraw( false );
+		} );
+		
+		return nButton;
+	},
+	
+	
+	/**
+	 * Create a button which allows a "show all" action
+	 *  @method  _fnDomShowAllButton
+	 *  @returns {Node} Created button
+	 *  @private 
+	 */
+	"_fnDomShowAllButton": function ()
+	{
+		var
+			that = this,
+			nButton = document.createElement('button'),
+			nSpan = document.createElement('span');
+		
+		nButton.className = !this.s.dt.bJUI ? "ColVis_Button TableTools_Button" :
+			"ColVis_Button TableTools_Button ui-button ui-state-default";
+		nButton.appendChild( nSpan );
+		$(nSpan).html( '<span class="ColVis_title">'+this.s.sShowAll+'</span>' );
+		
+		$(nButton).click( function (e) {
+			for ( var i=0, iLen=that.s.abOriginal.length ; i<iLen ; i++ )
+			{
+				if (that.s.aiExclude.indexOf(i) === -1)
+				{
+					that.s.dt.oInstance.fnSetColumnVis( i, true, false );
+				}
+			}
+			that._fnAdjustOpenRows();
+			that.s.dt.oInstance.fnDraw( false );
+		} );
+		
+		return nButton;
+	},
+	
+	
+	/**
+	 * Create the DOM for a show / hide button
+	 *  @method  _fnDomColumnButton
+	 *  @param {int} i Column in question
+	 *  @returns {Node} Created button
+	 *  @private 
+	 */
+	"_fnDomColumnButton": function ( i )
+	{
+		var
+			that = this,
+			oColumn = this.s.dt.aoColumns[i],
+			nButton = document.createElement('button'),
+			nSpan = document.createElement('span'),
+			dt = this.s.dt;
+		
+		nButton.className = !dt.bJUI ? "ColVis_Button TableTools_Button" :
+			"ColVis_Button TableTools_Button ui-button ui-state-default";
+		nButton.appendChild( nSpan );
+		var sTitle = this.s.fnLabel===null ? oColumn.sTitle : this.s.fnLabel( i, oColumn.sTitle, oColumn.nTh );
+		$(nSpan).html(
+			'<span class="ColVis_radio"><input type="checkbox"/></span>'+
+			'<span class="ColVis_title">'+sTitle+'</span>' );
+		
+		$(nButton).click( function (e) {
+			var showHide = !$('input', this).is(":checked");
+			if ( e.target.nodeName.toLowerCase() == "input" )
+			{
+				showHide = $('input', this).is(":checked");
+			}
+			
+			/* Need to consider the case where the initialiser created more than one table - change the
+			 * API index that DataTables is using
+			 */
+			var oldIndex = $.fn.dataTableExt.iApiIndex;
+			$.fn.dataTableExt.iApiIndex = that._fnDataTablesApiIndex.call(that);
+
+			// Optimisation for server-side processing when scrolling - don't do a full redraw
+			if ( dt.oFeatures.bServerSide && (dt.oScroll.sX !== "" || dt.oScroll.sY !== "" ) )
+			{
+				that.s.dt.oInstance.fnSetColumnVis( i, showHide, false );
+				that.s.dt.oInstance.oApi._fnScrollDraw( that.s.dt );
+				that._fnDrawCallback();
+			}
+			else
+			{
+				that.s.dt.oInstance.fnSetColumnVis( i, showHide );
+			}
+
+			$.fn.dataTableExt.iApiIndex = oldIndex; /* Restore */
+			
+			if ( that.s.fnStateChange !== null )
+			{
+				that.s.fnStateChange.call( that, i, showHide );
+			}
+		} );
+		
+		return nButton;
+	},
+	
+	
+	/**
+	 * Get the position in the DataTables instance array of the table for this instance of ColVis
+	 *  @method  _fnDataTablesApiIndex
+	 *  @returns {int} Index
+	 *  @private 
+	 */
+	"_fnDataTablesApiIndex": function ()
+	{
+		for ( var i=0, iLen=this.s.dt.oInstance.length ; i<iLen ; i++ )
+		{
+			if ( this.s.dt.oInstance[i] == this.s.dt.nTable )
+			{
+				return i;
+			}
+		}
+		return 0;
+	},
+	
+	
+	/**
+	 * Create the DOM needed for the button and apply some base properties. All buttons start here
+	 *  @method  _fnDomBaseButton
+	 *  @param   {String} text Button text
+	 *  @returns {Node} DIV element for the button
+	 *  @private 
+	 */
+	"_fnDomBaseButton": function ( text )
+	{
+		var
+			that = this,
+			nButton = document.createElement('button'),
+			nSpan = document.createElement('span'),
+			sEvent = this.s.activate=="mouseover" ? "mouseover" : "click";
+		
+		nButton.className = !this.s.dt.bJUI ? "ColVis_Button TableTools_Button" :
+			"ColVis_Button TableTools_Button ui-button ui-state-default";
+		nButton.appendChild( nSpan );
+		nSpan.innerHTML = text;
+		
+		$(nButton).bind( sEvent, function (e) {
+			that._fnCollectionShow();
+			e.preventDefault();
+		} );
+		
+		return nButton;
+	},
+	
+	
+	/**
+	 * Create the element used to contain list the columns (it is shown and hidden as needed)
+	 *  @method  _fnDomCollection
+	 *  @returns {Node} div container for the collection
+	 *  @private 
+	 */
+	"_fnDomCollection": function ()
+	{
+		var that = this;
+		var nHidden = document.createElement('div');
+		nHidden.style.display = "none";
+		nHidden.className = !this.s.dt.bJUI ? "ColVis_collection TableTools_collection" :
+			"ColVis_collection TableTools_collection ui-buttonset ui-buttonset-multi";
+		
+		if ( !this.s.bCssPosition )
+		{
+			nHidden.style.position = "absolute";
+		}
+		$(nHidden).css('opacity', 0);
+		
+		return nHidden;
+	},
+	
+	
+	/**
+	 * An element to be placed on top of the activate button to catch events
+	 *  @method  _fnDomCatcher
+	 *  @returns {Node} div container for the collection
+	 *  @private 
+	 */
+	"_fnDomCatcher": function ()
+	{
+		var 
+			that = this,
+			nCatcher = document.createElement('div');
+		nCatcher.className = "ColVis_catcher TableTools_catcher";
+		
+		$(nCatcher).click( function () {
+			that._fnCollectionHide.call( that, null, null );
+		} );
+		
+		return nCatcher;
+	},
+	
+	
+	/**
+	 * Create the element used to shade the background, and capture hide events (it is shown and 
+	 * hidden as needed)
+	 *  @method  _fnDomBackground
+	 *  @returns {Node} div container for the background
+	 *  @private 
+	 */
+	"_fnDomBackground": function ()
+	{
+		var that = this;
+		
+		var nBackground = document.createElement('div');
+		nBackground.style.position = "absolute";
+		nBackground.style.left = "0px";
+		nBackground.style.top = "0px";
+		nBackground.className = "ColVis_collectionBackground TableTools_collectionBackground";
+		$(nBackground).css('opacity', 0);
+		
+		$(nBackground).click( function () {
+			that._fnCollectionHide.call( that, null, null );
+		} );
+		
+		/* When considering a mouse over action for the activation, we also consider a mouse out
+		 * which is the same as a mouse over the background - without all the messing around of
+		 * bubbling events. Use the catcher element to avoid messing around with bubbling
+		 */
+		if ( this.s.activate == "mouseover" )
+		{
+			$(nBackground).mouseover( function () {
+				that.s.overcollection = false;
+				that._fnCollectionHide.call( that, null, null );
+			} );
+		}
+		
+		return nBackground;
+	},
+	
+	
+	/**
+	 * Show the show / hide list and the background
+	 *  @method  _fnCollectionShow
+	 *  @returns void
+	 *  @private 
+	 */
+	"_fnCollectionShow": function ()
+	{
+		var that = this, i, iLen;
+		var oPos = $(this.dom.button).offset();
+		var nHidden = this.dom.collection;
+		var nBackground = this.dom.background;
+		var iDivX = parseInt(oPos.left, 10);
+		var iDivY = parseInt(oPos.top + $(this.dom.button).outerHeight(), 10);
+		
+		if ( !this.s.bCssPosition )
+		{
+			nHidden.style.top = iDivY+"px";
+			nHidden.style.left = iDivX+"px";
+		}
+		nHidden.style.display = "block";
+		$(nHidden).css('opacity',0);
+		
+		var iWinHeight = $(window).height(), iDocHeight = $(document).height(),
+		 	iWinWidth = $(window).width(), iDocWidth = $(document).width();
+		
+		nBackground.style.height = ((iWinHeight>iDocHeight)? iWinHeight : iDocHeight) +"px";
+		nBackground.style.width = ((iWinWidth<iDocWidth)? iWinWidth : iDocWidth) +"px";
+		
+		var oStyle = this.dom.catcher.style;
+		oStyle.height = $(this.dom.button).outerHeight()+"px";
+		oStyle.width = $(this.dom.button).outerWidth()+"px";
+		oStyle.top = oPos.top+"px";
+		oStyle.left = iDivX+"px";
+		
+		document.body.appendChild( nBackground );
+		document.body.appendChild( nHidden );
+		document.body.appendChild( this.dom.catcher );
+		
+		/* Resize the buttons */
+		if ( this.s.sSize == "auto" )
+		{
+			var aiSizes = [];
+			this.dom.collection.style.width = "auto";
+			for ( i=0, iLen=this.dom.buttons.length ; i<iLen ; i++ )
+			{
+				if ( this.dom.buttons[i] !== null )
+				{
+					this.dom.buttons[i].style.width = "auto";
+					aiSizes.push( $(this.dom.buttons[i]).outerWidth() );
+				}
+			}
+			iMax = Math.max.apply(window, aiSizes);
+			for ( i=0, iLen=this.dom.buttons.length ; i<iLen ; i++ )
+			{
+				if ( this.dom.buttons[i] !== null )
+				{
+					this.dom.buttons[i].style.width = iMax+"px";
+				}
+			}
+			this.dom.collection.style.width = iMax+"px";
+		}
+		
+		/* Visual corrections to try and keep the collection visible */
+		if ( !this.s.bCssPosition )
+		{
+			nHidden.style.left = this.s.sAlign=="left" ?
+				iDivX+"px" : (iDivX-$(nHidden).outerWidth()+$(this.dom.button).outerWidth())+"px";
+
+			var iDivWidth = $(nHidden).outerWidth();
+			var iDivHeight = $(nHidden).outerHeight();
+			
+			if ( iDivX + iDivWidth > iDocWidth )
+			{
+				nHidden.style.left = (iDocWidth-iDivWidth)+"px";
+			}
+		}
+		
+		/* This results in a very small delay for the end user but it allows the animation to be
+		 * much smoother. If you don't want the animation, then the setTimeout can be removed
+		 */
+		setTimeout( function () {
+			$(nHidden).animate({"opacity": 1}, that.s.iOverlayFade);
+			$(nBackground).animate({"opacity": 0.1}, that.s.iOverlayFade, 'linear', function () {
+				/* In IE6 if you set the checked attribute of a hidden checkbox, then this is not visually
+				 * reflected. As such, we need to do it here, once it is visible. Unbelievable.
+				 */
+				if ( jQuery.browser.msie && jQuery.browser.version == "6.0" )
+				{
+					that._fnDrawCallback();
+				}
+			});
+		}, 10 );
+		
+		this.s.hidden = false;
+	},
+	
+	
+	/**
+	 * Hide the show / hide list and the background
+	 *  @method  _fnCollectionHide
+	 *  @returns void
+	 *  @private 
+	 */
+	"_fnCollectionHide": function (  )
+	{
+		var that = this;
+		
+		if ( !this.s.hidden && this.dom.collection !== null )
+		{
+			this.s.hidden = true;
+			
+			$(this.dom.collection).animate({"opacity": 0}, that.s.iOverlayFade, function (e) {
+				this.style.display = "none";
+			} );
+			
+			$(this.dom.background).animate({"opacity": 0}, that.s.iOverlayFade, function (e) {
+				document.body.removeChild( that.dom.background );
+				document.body.removeChild( that.dom.catcher );
+			} );
+		}
+	},
+	
+	
+	/**
+	 * 
+	 */
+	"_fnAdjustOpenRows": function ()
+	{
+		var aoOpen = this.s.dt.aoOpenRows;
+		var iVisible = this.s.dt.oApi._fnVisbleColumns( this.s.dt );
+		
+		for ( var i=0, iLen=aoOpen.length ; i<iLen ; i++ ) {
+			aoOpen[i].nTr.getElementsByTagName('td')[0].colSpan = iVisible;
+		}
+	}
+};
+
+
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * Static object methods
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+/**
+ * Rebuild the collection for a given table, or all tables if no parameter given
+ *  @method  ColVis.fnRebuild
+ *  @static
+ *  @param   object oTable DataTable instance to consider - optional
+ *  @returns void
+ */
+ColVis.fnRebuild = function ( oTable )
+{
+	var nTable = null;
+	if ( typeof oTable != 'undefined' )
+	{
+		nTable = oTable.fnSettings().nTable;
+	}
+	
+	for ( var i=0, iLen=ColVis.aInstances.length ; i<iLen ; i++ )
+	{
+		if ( typeof oTable == 'undefined' || nTable == ColVis.aInstances[i].s.dt.nTable )
+		{
+			ColVis.aInstances[i].fnRebuild();
+		}
+	}
+};
+
+
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * Static object propterties
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+/**
+ * Collection of all ColVis instances
+ *  @property ColVis.aInstances
+ *  @static
+ *  @type     Array
+ *  @default  []
+ */
+ColVis.aInstances = [];
+
+
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * Constants
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+/**
+ * Name of this class
+ *  @constant CLASS
+ *  @type     String
+ *  @default  ColVis
+ */
+ColVis.prototype.CLASS = "ColVis";
+
+
+/**
+ * ColVis version
+ *  @constant  VERSION
+ *  @type      String
+ *  @default   See code
+ */
+ColVis.VERSION = "1.0.7.dev";
+ColVis.prototype.VERSION = ColVis.VERSION;
+
+
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * Initialisation
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+/*
+ * Register a new feature with DataTables
+ */
+if ( typeof $.fn.dataTable == "function" &&
+     typeof $.fn.dataTableExt.fnVersionCheck == "function" &&
+     $.fn.dataTableExt.fnVersionCheck('1.7.0') )
+{
+	$.fn.dataTableExt.aoFeatures.push( {
+		"fnInit": function( oDTSettings ) {
+			var init = (typeof oDTSettings.oInit.oColVis == 'undefined') ?
+				{} : oDTSettings.oInit.oColVis;
+			var oColvis = new ColVis( oDTSettings, init );
+			return oColvis.dom.wrapper;
+		},
+		"cFeature": "C",
+		"sFeature": "ColVis"
+	} );
+}
+else
+{
+	alert( "Warning: ColVis requires DataTables 1.7 or greater - www.datatables.net/download");
+}
+
+})(jQuery);
diff --git a/airtime_mvc/public/js/datatables/plugin/dataTables.FixedColumns.js b/airtime_mvc/public/js/datatables/plugin/dataTables.FixedColumns.js
new file mode 100644
index 000000000..7b9298f73
--- /dev/null
+++ b/airtime_mvc/public/js/datatables/plugin/dataTables.FixedColumns.js
@@ -0,0 +1,1185 @@
+/**
+ * @summary     FixedColumns
+ * @description Freeze columns in place on a scrolling DataTable
+ * @file        FixedColumns.js
+ * @version     2.0.1
+ * @author      Allan Jardine (www.sprymedia.co.uk)
+ * @license     GPL v2 or BSD 3 point style
+ * @contact     www.sprymedia.co.uk/contact
+ *
+ * @copyright Copyright 2010-2011 Allan Jardine, all rights reserved.
+ *
+ * This source file is free software, under either the GPL v2 license or a
+ * BSD style license, available at:
+ *   http://datatables.net/license_gpl2
+ *   http://datatables.net/license_bsd
+ */
+
+
+/* Global scope for FixedColumns */
+var FixedColumns;
+
+(function($, window, document) {
+
+
+/** 
+ * When making use of DataTables' x-axis scrolling feature, you may wish to 
+ * fix the left most column in place. This plug-in for DataTables provides 
+ * exactly this option (note for non-scrolling tables, please use the  
+ * FixedHeader plug-in, which can fix headers, footers and columns). Key 
+ * features include:
+ *   <ul class="limit_length">
+ *     <li>Freezes the left or right most columns to the side of the table</li>
+ *     <li>Option to freeze two or more columns</li>
+ *     <li>Full integration with DataTables' scrolling options</li>
+ *     <li>Speed - FixedColumns is fast in its operation</li>
+ *   </ul>
+ *
+ *  @class
+ *  @constructor
+ *  @param {object} oDT DataTables instance
+ *  @param {object} [oInit={}] Configuration object for FixedColumns. Options are defined by {@link FixedColumns.defaults}
+ * 
+ *  @requires jQuery 1.3+
+ *  @requires DataTables 1.8.0.dev+
+ * 
+ *  @example
+ *  	var oTable = $('#example').dataTable( {
+ *  		"sScrollX": "100%"
+ *  	} );
+ *  	new FixedColumns( oTable );
+ */
+FixedColumns = function ( oDT, oInit ) {
+	/* Sanity check - you just know it will happen */
+	if ( ! this instanceof FixedColumns )
+	{
+		alert( "FixedColumns warning: FixedColumns must be initialised with the 'new' keyword." );
+		return;
+	}
+	
+	if ( typeof oInit == 'undefined' )
+	{
+		oInit = {};
+	}
+	
+	/**
+	 * Settings object which contains customisable information for FixedColumns instance
+	 * @namespace
+	 * @extends FixedColumns.defaults
+	 */
+	this.s = {
+		/** 
+		 * DataTables settings objects
+		 *  @type     object
+		 *  @default  Obtained from DataTables instance
+		 */
+		"dt": oDT.fnSettings(),
+		
+		/** 
+		 * Number of columns in the DataTable - stored for quick access
+		 *  @type     int
+		 *  @default  Obtained from DataTables instance
+		 */
+		"iTableColumns": oDT.fnSettings().aoColumns.length,
+		
+		/** 
+		 * Original widths of the columns as rendered by DataTables
+		 *  @type     array.<int>
+		 *  @default  []
+		 */
+		"aiWidths": [],
+		
+		/** 
+		 * Flag to indicate if we are dealing with IE6/7 as these browsers need a little hack
+		 * in the odd place
+		 *  @type     boolean
+		 *  @default  Automatically calculated
+		 *  @readonly
+		 */
+		"bOldIE": ($.browser.msie && ($.browser.version == "6.0" || $.browser.version == "7.0"))
+	};
+	
+	
+	/**
+	 * DOM elements used by the class instance
+	 * @namespace
+	 * 
+	 */
+	this.dom = {
+		/**
+		 * DataTables scrolling element
+		 *  @type     node
+		 *  @default  null
+		 */
+		"scroller": null,
+		
+		/**
+		 * DataTables header table
+		 *  @type     node
+		 *  @default  null
+		 */
+		"header": null,
+		
+		/**
+		 * DataTables body table
+		 *  @type     node
+		 *  @default  null
+		 */
+		"body": null,
+		
+		/**
+		 * DataTables footer table
+		 *  @type     node
+		 *  @default  null
+		 */
+		"footer": null,
+
+		/**
+		 * Display grid elements
+		 * @namespace
+		 */
+		"grid": {
+			/**
+			 * Grid wrapper. This is the container element for the 3x3 grid
+			 *  @type     node
+			 *  @default  null
+			 */
+			"wrapper": null,
+
+			/**
+			 * DataTables scrolling element. This element is the DataTables
+			 * component in the display grid (making up the main table - i.e.
+			 * not the fixed columns).
+			 *  @type     node
+			 *  @default  null
+			 */
+			"dt": null,
+
+			/**
+			 * Left fixed column grid components
+			 * @namespace
+			 */
+			"left": {
+				"wrapper": null,
+				"head": null,
+				"body": null,
+				"foot": null
+			},
+
+			/**
+			 * Right fixed column grid components
+			 * @namespace
+			 */
+			"right": {
+				"wrapper": null,
+				"head": null,
+				"body": null,
+				"foot": null
+			}
+		},
+		
+		/**
+		 * Cloned table nodes
+		 * @namespace
+		 */
+		"clone": {
+			/**
+			 * Left column cloned table nodes
+			 * @namespace
+			 */
+			"left": {
+				/**
+				 * Cloned header table
+				 *  @type     node
+				 *  @default  null
+				 */
+				"header": null,
+		  	
+				/**
+				 * Cloned body table
+				 *  @type     node
+				 *  @default  null
+				 */
+				"body": null,
+		  	
+				/**
+				 * Cloned footer table
+				 *  @type     node
+				 *  @default  null
+				 */
+				"footer": null
+			},
+			
+			/**
+			 * Right column cloned table nodes
+			 * @namespace
+			 */
+			"right": {
+				/**
+				 * Cloned header table
+				 *  @type     node
+				 *  @default  null
+				 */
+				"header": null,
+		  	
+				/**
+				 * Cloned body table
+				 *  @type     node
+				 *  @default  null
+				 */
+				"body": null,
+		  	
+				/**
+				 * Cloned footer table
+				 *  @type     node
+				 *  @default  null
+				 */
+				"footer": null
+			}
+		}
+	};
+
+	/* Attach the instance to the DataTables instance so it can be accessed easily */
+	this.s.dt.oFixedColumns = this;
+	
+	/* Let's do it */
+	this._fnConstruct( oInit );
+};
+
+
+
+FixedColumns.prototype = {
+	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+	 * Public methods
+	 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+	
+	/**
+	 * Update the fixed columns - including headers and footers. Note that FixedColumns will
+	 * automatically update the display whenever the host DataTable redraws.
+	 *  @returns {void}
+	 *  @example
+	 *  	var oTable = $('#example').dataTable( {
+	 *  		"sScrollX": "100%"
+	 *  	} );
+	 *  	var oFC = new FixedColumns( oTable );
+	 *  	
+	 *  	// at some later point when the table has been manipulated....
+	 *  	oFC.fnUpdate();
+	 */
+	"fnUpdate": function ()
+	{
+		this._fnDraw( true );
+	},
+	
+	
+	/**
+	 * Recalculate the resizes of the 3x3 grid that FixedColumns uses for display of the table.
+	 * This is useful if you update the width of the table container. Note that FixedColumns will
+	 * perform this function automatically when the window.resize event is fired.
+	 *  @returns {void}
+	 *  @example
+	 *  	var oTable = $('#example').dataTable( {
+	 *  		"sScrollX": "100%"
+	 *  	} );
+	 *  	var oFC = new FixedColumns( oTable );
+	 *  	
+	 *  	// Resize the table container and then have FixedColumns adjust its layout....
+	 *      $('#content').width( 1200 );
+	 *  	oFC.fnRedrawLayout();
+	 */
+	"fnRedrawLayout": function ()
+	{
+		this.__fnGridLayout();
+	},
+	
+	
+	/**
+	 * Mark a row such that it's height should be recalculated when using 'semiauto' row
+	 * height matching. This function will have no effect when 'none' or 'auto' row height
+	 * matching is used.
+	 *  @param   {Node} nTr TR element that should have it's height recalculated
+	 *  @returns {void}
+	 *  @example
+	 *  	var oTable = $('#example').dataTable( {
+	 *  		"sScrollX": "100%"
+	 *  	} );
+	 *  	var oFC = new FixedColumns( oTable );
+	 *  	
+	 *  	// manipulate the table - mark the row as needing an update then update the table
+	 *  	// this allows the redraw performed by DataTables fnUpdate to recalculate the row
+	 *  	// height
+	 *  	oFC.fnRecalculateHeight();
+	 *  	oTable.fnUpdate( $('#example tbody tr:eq(0)')[0], ["insert date", 1, 2, 3 ... ]);
+	 */
+	"fnRecalculateHeight": function ( nTr )
+	{
+		nTr._DTTC_iHeight = null;
+		nTr.style.height = 'auto';
+	},
+	
+	
+	/**
+	 * Set the height of a given row - provides cross browser compatibility
+	 *  @param   {Node} nTarget TR element that should have it's height recalculated
+	 *  @param   {int} iHeight Height in pixels to set
+	 *  @returns {void}
+	 *  @example
+	 *  	var oTable = $('#example').dataTable( {
+	 *  		"sScrollX": "100%"
+	 *  	} );
+	 *  	var oFC = new FixedColumns( oTable );
+	 *  	
+	 *  	// You may want to do this after manipulating a row in the fixed column
+	 *  	oFC.fnSetRowHeight( $('#example tbody tr:eq(0)')[0], 50 );
+	 */
+	"fnSetRowHeight": function ( nTarget, iHeight )
+	{
+		var jqBoxHack = $(nTarget).children(':first');
+		var iBoxHack = jqBoxHack.outerHeight() - jqBoxHack.height();
+
+		/* Can we use some kind of object detection here?! This is very nasty - damn browsers */
+		if ( $.browser.mozilla || $.browser.opera )
+		{
+			nTarget.style.height = iHeight+"px";
+		}
+		else
+		{
+			$(nTarget).children().height( iHeight-iBoxHack );
+		}
+	},
+	
+	
+	
+	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+	 * Private methods (they are of course public in JS, but recommended as private)
+	 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+	
+	/**
+	 * Initialisation for FixedColumns
+	 *  @param   {Object} oInit User settings for initialisation
+	 *  @returns {void}
+	 *  @private
+	 */
+	"_fnConstruct": function ( oInit )
+	{
+		var i, iLen, iWidth,
+			that = this;
+		
+		/* Sanity checking */
+		if ( typeof this.s.dt.oInstance.fnVersionCheck != 'function' ||
+		     this.s.dt.oInstance.fnVersionCheck( '1.8.0' ) !== true )
+		{
+			alert( "FixedColumns "+FixedColumns.VERSION+" required DataTables 1.8.0 or later. "+
+				"Please upgrade your DataTables installation" );
+			return;
+		}
+		
+		if ( this.s.dt.oScroll.sX === "" )
+		{
+			this.s.dt.oInstance.oApi._fnLog( this.s.dt, 1, "FixedColumns is not needed (no "+
+				"x-scrolling in DataTables enabled), so no action will be taken. Use 'FixedHeader' for "+
+				"column fixing when scrolling is not enabled" );
+			return;
+		}
+		
+		/* Apply the settings from the user / defaults */
+		this.s = $.extend( true, this.s, FixedColumns.defaults, oInit );
+
+		/* Set up the DOM as we need it and cache nodes */
+		this.dom.grid.dt = $(this.s.dt.nTable).parents('div.dataTables_scroll')[0];
+		this.dom.scroller = $('div.dataTables_scrollBody', this.dom.grid.dt )[0];
+
+		var iScrollWidth = $(this.dom.grid.dt).width();
+		var iLeftWidth = 0;
+		var iRightWidth = 0;
+
+		$('tbody>tr:eq(0)>td', this.s.dt.nTable).each( function (i) {
+			iWidth = $(this).outerWidth();
+			that.s.aiWidths.push( iWidth );
+			if ( i < that.s.iLeftColumns )
+			{
+				iLeftWidth += iWidth;
+			}
+			if ( that.s.iTableColumns-that.s.iRightColumns <= i )
+			{
+				iRightWidth += iWidth;
+			}
+		} );
+
+		if ( this.s.iLeftWidth === null )
+		{
+			this.s.iLeftWidth = this.s.sLeftWidth == 'fixed' ?
+				iLeftWidth : (iLeftWidth/iScrollWidth) * 100; 
+		}
+		
+		if ( this.s.iRightWidth === null )
+		{
+			this.s.iRightWidth = this.s.sRightWidth == 'fixed' ?
+				iRightWidth : (iRightWidth/iScrollWidth) * 100;
+		}
+		
+		/* Set up the DOM that we want for the fixed column layout grid */
+		this._fnGridSetup();
+
+		/* Use the DataTables API method fnSetColumnVis to hide the columns we are going to fix */
+		for ( i=0 ; i<this.s.iLeftColumns ; i++ )
+		{
+			this.s.dt.oInstance.fnSetColumnVis( i, false );
+		}
+		for ( i=this.s.iTableColumns - this.s.iRightColumns ; i<this.s.iTableColumns ; i++ )
+		{
+			this.s.dt.oInstance.fnSetColumnVis( i, false );
+		}
+
+		/* Event handlers */
+		$(this.dom.scroller).scroll( function () {
+			that.dom.grid.left.body.scrollTop = that.dom.scroller.scrollTop;
+			if ( that.s.iRightColumns > 0 )
+			{
+				that.dom.grid.right.body.scrollTop = that.dom.scroller.scrollTop;
+			}
+		} );
+
+		$(window).resize( function () {
+			that._fnGridLayout.call( that );
+		} );
+		
+		var bFirstDraw = true;
+		this.s.dt.aoDrawCallback = [ {
+			"fn": function () {
+				that._fnDraw.call( that, bFirstDraw );
+				that._fnGridHeight( that );
+				bFirstDraw = false;
+			},
+			"sName": "FixedColumns"
+		} ].concat( this.s.dt.aoDrawCallback );
+		
+		/* Get things right to start with - note that due to adjusting the columns, there must be
+		 * another redraw of the main table. It doesn't need to be a full redraw however.
+		 */
+		this._fnGridLayout();
+		this._fnGridHeight();
+		this.s.dt.oInstance.fnDraw(false);
+	},
+	
+	
+	/**
+	 * Set up the DOM for the fixed column. The way the layout works is to create a 1x3 grid
+	 * for the left column, the DataTable (for which we just reuse the scrolling element DataTable
+	 * puts into the DOM) and the right column. In each of he two fixed column elements there is a
+	 * grouping wrapper element and then a head, body and footer wrapper. In each of these we then
+	 * place the cloned header, body or footer tables. This effectively gives as 3x3 grid structure.
+	 *  @returns {void}
+	 *  @private
+	 */
+	"_fnGridSetup": function ()
+	{
+		var that = this;
+
+		this.dom.body = this.s.dt.nTable;
+		this.dom.header = this.s.dt.nTHead.parentNode;
+		this.dom.header.parentNode.parentNode.style.position = "relative";
+		
+		var nSWrapper = 
+			$('<div class="DTFC_ScrollWrapper" style="position:relative; clear:both;">'+
+				'<div class="DTFC_LeftWrapper" style="position:absolute; top:0; left:0;">'+
+					'<div class="DTFC_LeftHeadWrapper" style="position:relative; top:0; left:0; overflow:hidden;"></div>'+
+					'<div class="DTFC_LeftBodyWrapper" style="position:relative; top:0; left:0; overflow:hidden;"></div>'+
+					'<div class="DTFC_LeftFootWrapper" style="position:relative; top:0; left:0; overflow:hidden;"></div>'+
+			  	'</div>'+
+				'<div class="DTFC_RightWrapper" style="position:absolute; top:0; left:0;">'+
+					'<div class="DTFC_RightHeadWrapper" style="position:relative; top:0; left:0; overflow:hidden;"></div>'+
+					'<div class="DTFC_RightBodyWrapper" style="position:relative; top:0; left:0; overflow:hidden;"></div>'+
+					'<div class="DTFC_RightFootWrapper" style="position:relative; top:0; left:0; overflow:hidden;"></div>'+
+			  	'</div>'+
+			  '</div>')[0];
+		nLeft = nSWrapper.childNodes[0];
+		nRight = nSWrapper.childNodes[1];
+
+		this.dom.grid.wrapper = nSWrapper;
+		this.dom.grid.left.wrapper = nLeft;
+		this.dom.grid.left.head = nLeft.childNodes[0];
+		this.dom.grid.left.body = nLeft.childNodes[1];
+
+		if ( this.s.iRightColumns > 0 )
+		{
+			this.dom.grid.right.wrapper = nRight;
+			this.dom.grid.right.head = nRight.childNodes[0];
+			this.dom.grid.right.body = nRight.childNodes[1];
+		}
+		
+		if ( this.s.dt.nTFoot )
+		{
+			this.dom.footer = this.s.dt.nTFoot.parentNode;
+			this.dom.grid.left.foot = nLeft.childNodes[2];
+			if ( this.s.iRightColumns > 0 )
+			{
+				this.dom.grid.right.foot = nRight.childNodes[2];
+			}
+		}
+
+		nSWrapper.appendChild( nLeft );
+		this.dom.grid.dt.parentNode.insertBefore( nSWrapper, this.dom.grid.dt );
+		nSWrapper.appendChild( this.dom.grid.dt );
+
+		this.dom.grid.dt.style.position = "absolute";
+		this.dom.grid.dt.style.top = "0px";
+		this.dom.grid.dt.style.left = this.s.iLeftWidth+"px";
+		this.dom.grid.dt.style.width = ($(this.dom.grid.dt).width()-this.s.iLeftWidth-this.s.iRightWidth)+"px";
+	},
+	
+	
+	/**
+	 * Style and position the grid used for the FixedColumns layout based on the instance settings.
+	 * Specifically sLeftWidth ('fixed' or 'absolute'), iLeftWidth (px if fixed, % if absolute) and
+	 * there 'right' counterparts.
+	 *  @returns {void}
+	 *  @private
+	 */
+	"_fnGridLayout": function ()
+	{
+		var oGrid = this.dom.grid;
+		var iTotal = $(oGrid.wrapper).width();
+		var iLeft = 0, iRight = 0, iRemainder = 0;
+
+		if ( this.s.sLeftWidth == 'fixed' )
+		{
+			iLeft = this.s.iLeftWidth;
+		}
+		else
+		{
+			iLeft = ( this.s.iLeftWidth / 100 ) * iTotal;
+		}
+
+		if ( this.s.sRightWidth == 'fixed' )
+		{
+			iRight = this.s.iRightWidth;
+		}
+		else
+		{
+			iRight = ( this.s.iRightWidth / 100 ) * iTotal;
+		}
+
+		iRemainder = iTotal - iLeft - iRight;
+
+		oGrid.left.wrapper.style.width = iLeft+"px";
+		oGrid.dt.style.width = iRemainder+"px";
+		oGrid.dt.style.left = iLeft+"px";
+
+		if ( this.s.iRightColumns > 0 )
+		{
+			oGrid.right.wrapper.style.width = iRight+"px";
+			oGrid.right.wrapper.style.left = (iTotal-iRight)+"px";
+		}
+	},
+	
+	
+	/**
+	 * Recalculate and set the height of the grid components used for positioning of the 
+	 * FixedColumn display grid.
+	 *  @returns {void}
+	 *  @private
+	 */
+	"_fnGridHeight": function ()
+	{
+		var oGrid = this.dom.grid;
+		var iHeight = $(this.dom.grid.dt).height();
+
+		oGrid.wrapper.style.height = iHeight+"px";
+		oGrid.left.body.style.height = $(this.dom.scroller).height()+"px";
+		oGrid.left.wrapper.style.height = iHeight+"px";
+		
+		if ( this.s.iRightColumns > 0 )
+		{
+			oGrid.right.wrapper.style.height = iHeight+"px";
+			oGrid.right.body.style.height = $(this.dom.scroller).height()+"px";
+		}
+	},
+	
+	
+	/**
+	 * Clone and position the fixed columns
+	 *  @returns {void}
+	 *  @param   {Boolean} bAll Indicate if the header and footer should be updated as well (true)
+	 *  @private
+	 */
+	"_fnDraw": function ( bAll )
+	{
+		this._fnCloneLeft( bAll );
+		this._fnCloneRight( bAll );
+
+		/* Draw callback function */
+		if ( this.s.fnDrawCallback !== null )
+		{
+			this.s.fnDrawCallback.call( this, this.dom.clone.left, this.dom.clone.right );
+		}
+
+		/* Event triggering */
+		$(this).trigger( 'draw', { 
+			"leftClone": this.dom.clone.left,
+			"rightClone": this.dom.clone.right
+		} );
+	},
+	
+	
+	/**
+	 * Clone the right columns
+	 *  @returns {void}
+	 *  @param   {Boolean} bAll Indicate if the header and footer should be updated as well (true)
+	 *  @private
+	 */
+	"_fnCloneRight": function ( bAll )
+	{
+		if ( this.s.iRightColumns <= 0 )
+		{
+			return;
+		}
+		
+		var that = this,
+			i, jq,
+			aiColumns = [];
+
+		for ( i=this.s.iTableColumns-this.s.iRightColumns ; i<this.s.iTableColumns ; i++ )
+		{
+			aiColumns.push( i );
+		}
+
+		this._fnClone( this.dom.clone.right, this.dom.grid.right, aiColumns, bAll );
+	},
+	
+	
+	/**
+	 * Clone the left columns
+	 *  @returns {void}
+	 *  @param   {Boolean} bAll Indicate if the header and footer should be updated as well (true)
+	 *  @private
+	 */
+	"_fnCloneLeft": function ( bAll )
+	{
+		if ( this.s.iLeftColumns <= 0 )
+		{
+			return;
+		}
+		
+		var that = this,
+			i, jq,
+			aiColumns = [];
+		
+		for ( i=0 ; i<this.s.iLeftColumns ; i++ )
+		{
+			aiColumns.push( i );
+		}
+
+		this._fnClone( this.dom.clone.left, this.dom.grid.left, aiColumns, bAll );
+	},
+	
+	
+	/**
+	 * Make a copy of the layout object for a header or footer element from DataTables. Note that
+	 * this method will clone the nodes in the layout object.
+	 *  @returns {Array} Copy of the layout array
+	 *  @param   {Object} aoOriginal Layout array from DataTables (aoHeader or aoFooter)
+	 *  @param   {Object} aiColumns Columns to copy
+	 *  @private
+	 */
+	"_fnCopyLayout": function ( aoOriginal, aiColumns )
+	{
+		var aReturn = [];
+		var aClones = [];
+		var aCloned = [];
+
+		for ( var i=0, iLen=aoOriginal.length ; i<iLen ; i++ )
+		{
+			var aRow = [];
+			aRow.nTr = $(aoOriginal[i].nTr).clone(true)[0];
+
+			for ( var j=0, jLen=this.s.iTableColumns ; j<jLen ; j++ )
+			{
+				if ( $.inArray( j, aiColumns ) === -1 )
+				{
+					continue;
+				}
+
+				var iCloned = $.inArray( aoOriginal[i][j].cell, aCloned );
+				if ( iCloned === -1 )
+				{
+					var nClone = $(aoOriginal[i][j].cell).clone(true)[0];
+					aClones.push( nClone );
+					aCloned.push( aoOriginal[i][j].cell );
+
+					aRow.push( {
+						"cell": nClone,
+						"unique": aoOriginal[i][j].unique
+					} );
+				}
+				else
+				{
+					aRow.push( {
+						"cell": aClones[ iCloned ],
+						"unique": aoOriginal[i][j].unique
+					} );
+				}
+			}
+			
+			aReturn.push( aRow );
+		}
+
+		return aReturn;
+	},
+	
+	
+	/**
+	 * Clone the DataTable nodes and place them in the DOM (sized correctly)
+	 *  @returns {void}
+	 *  @param   {Object} oClone Object containing the header, footer and body cloned DOM elements
+	 *  @param   {Object} oGrid Grid object containing the display grid elements for the cloned 
+	 *                    column (left or right)
+	 *  @param   {Array} aiColumns Column indexes which should be operated on from the DataTable
+	 *  @param   {Boolean} bAll Indicate if the header and footer should be updated as well (true)
+	 *  @private
+	 */
+	"_fnClone": function ( oClone, oGrid, aiColumns, bAll )
+	{
+		var that = this,
+			i, iLen, jq, nTarget, iColumn, nClone, iIndex;
+
+		/* 
+		 * Header
+		 */
+		if ( bAll )
+		{
+			if ( oClone.header !== null )
+			{
+				oClone.header.parentNode.removeChild( oClone.header );
+			}
+			oClone.header = $(this.dom.header).clone(true)[0];
+			oClone.header.className += " DTFC_Cloned";
+			oClone.header.style.width = "100%";
+			oGrid.head.appendChild( oClone.header );
+			
+			/* Copy the DataTables layout cache for the header for our floating column */
+			var aoCloneLayout = this._fnCopyLayout( this.s.dt.aoHeader, aiColumns );
+			var jqCloneThead = $('>thead', oClone.header);
+			jqCloneThead.empty();
+
+			/* Add the created cloned TR elements to the table */
+			for ( i=0, iLen=aoCloneLayout.length ; i<iLen ; i++ )
+			{
+				jqCloneThead[0].appendChild( aoCloneLayout[i].nTr );
+			}
+
+			/* Use the handy _fnDrawHead function in DataTables to do the rowspan/colspan
+			 * calculations for us
+			 */
+			this.s.dt.oApi._fnDrawHead( this.s.dt, aoCloneLayout, true );
+		}
+		else
+		{
+			for ( iIndex=0 ; iIndex<aiColumns.length ; iIndex++ )
+			{
+				$('>thead th:eq('+iIndex+')', oClone.header)[0].className =
+					this.s.dt.aoColumns[ aiColumns[iIndex] ].nTh.className;
+				
+				$('>thead th:eq('+iIndex+') span.DataTables_sort_icon', oClone.header).each( function (i) {
+					this.className = $('span.DataTables_sort_icon', that.s.dt.aoColumns[ aiColumns[iIndex] ].nTh)[i].className;
+				} );
+			}
+		}
+		this._fnEqualiseHeights( 'thead', this.dom.header, oClone.header );
+		
+		/* 
+		 * Body
+		 */
+		if ( this.s.sHeightMatch == 'auto' )
+		{
+			/* Remove any heights which have been applied already and let the browser figure it out */
+			$('>tbody>tr', that.dom.body).css('height', 'auto');
+		}
+		
+		if ( oClone.body !== null )
+		{
+			oClone.body.parentNode.removeChild( oClone.body );
+			oClone.body = null;
+		}
+		
+		oClone.body = $(this.dom.body).clone(true)[0];
+		oClone.body.className += " DTFC_Cloned";
+		oClone.body.style.paddingBottom = this.s.dt.oScroll.iBarWidth+"px";
+		oClone.body.style.marginBottom = (this.s.dt.oScroll.iBarWidth*2)+"px"; /* For IE */
+		if ( oClone.body.getAttribute('id') !== null )
+		{
+			oClone.body.removeAttribute('id');
+		}
+		
+		$('>thead>tr', oClone.body).empty();
+		$('>tfoot', oClone.body).empty();
+		
+		var nBody = $('tbody', oClone.body)[0];
+		$(nBody).empty();
+		if ( this.s.dt.aiDisplay.length > 0 )
+		{
+			$('>tbody>tr', that.dom.body).each( function (z) {
+				var n = this.cloneNode(false);
+				var i = that.s.dt.oFeatures.bServerSide===false ?
+					that.s.dt.aiDisplay[ that.s.dt._iDisplayStart+z ] : z;
+				for ( iIndex=0 ; iIndex<aiColumns.length ; iIndex++ )
+				{
+					iColumn = aiColumns[iIndex];
+					if ( typeof that.s.dt.aoData[i]._anHidden[iColumn] != 'undefined' )
+					{
+						nClone = $(that.s.dt.aoData[i]._anHidden[iColumn]).clone(true)[0];
+						nClone.style.width = that.s.aiWidths[iColumn]+"px";
+						n.appendChild( nClone );
+					}
+				}
+				nBody.appendChild( n );
+			} );
+		}
+		else
+		{
+			$('>tbody>tr', that.dom.body).each( function (z) {
+				nClone = this.cloneNode(true);
+				nClone.className += ' DTFC_NoData';
+				$('td', nClone).html('');
+				nBody.appendChild( nClone );
+			} );
+		}
+		
+		oClone.body.style.width = "100%";
+		oGrid.body.appendChild( oClone.body );
+
+		this._fnEqualiseHeights( 'tbody', that.dom.body, oClone.body );
+		
+		/*
+		 * Footer
+		 */
+		if ( this.s.dt.nTFoot !== null )
+		{
+			if ( bAll )
+			{
+				if ( oClone.footer !== null )
+				{
+					oClone.footer.parentNode.removeChild( oClone.footer );
+				}
+				oClone.footer = $(this.dom.footer).clone(true)[0];
+				oClone.footer.className += " DTFC_Cloned";
+				oClone.footer.style.width = "100%";
+				oGrid.foot.appendChild( oClone.footer );
+
+				/* Copy the footer just like we do for the header */
+				var aoCloneLayout = this._fnCopyLayout( this.s.dt.aoFooter, aiColumns );
+				var jqCloneTfoot = $('>tfoot', oClone.footer);
+				jqCloneTfoot.empty();
+	
+				for ( i=0, iLen=aoCloneLayout.length ; i<iLen ; i++ )
+				{
+					jqCloneTfoot[0].appendChild( aoCloneLayout[i].nTr );
+				}
+				this.s.dt.oApi._fnDrawHead( this.s.dt, aoCloneLayout, true );
+			}
+			else
+			{
+				for ( iIndex=0 ; iIndex<aiColumns.length ; iIndex++ )
+				{
+					$('>tfoot th:eq('+iIndex+')', oClone.footer)[0].className =
+						this.s.dt.aoColumns[ aiColumns[iIndex] ].nTf.className;
+				}
+			}
+			this._fnEqualiseHeights( 'tfoot', this.dom.footer, oClone.footer );
+		}
+
+		/* Equalise the column widths between the header footer and body - body get's priority */
+		var jqBody = $('>tbody>tr:eq(0)', oClone.body);
+		var jqHead = $('>thead>tr:eq(0)', oClone.header);
+		if ( this.s.dt.nTFoot !== null )
+		{
+			var jqFoot = $('>tfoot>tr:eq(0)', oClone.footer);
+		}
+
+		jqBody.children().each( function (i) {
+			var iWidth = $(this).width();
+
+			jqHead.children(':eq('+i+')').width( iWidth );
+			if ( that.s.dt.nTFoot !== null )
+			{
+				jqFoot.children(':eq('+i+')').width( iWidth );
+			}
+		} );
+	},
+	
+	
+	/**
+	 * From a given table node (THEAD etc), get a list of TR direct child elements
+	 *  @param   {Node} nIn Table element to search for TR elements (THEAD, TBODY or TFOOT element)
+	 *  @returns {Array} List of TR elements found
+	 *  @private
+	 */
+	"_fnGetTrNodes": function ( nIn )
+	{
+		var aOut = [];
+		for ( var i=0, iLen=nIn.childNodes.length ; i<iLen ; i++ )
+		{
+			if ( nIn.childNodes[i].nodeName.toUpperCase() == "TR" )
+			{
+				aOut.push( nIn.childNodes[i] );
+			}
+		}
+		return aOut;
+	},
+
+	
+	/**
+	 * Equalise the heights of the rows in a given table node in a cross browser way
+	 *  @returns {void}
+	 *  @param   {String} nodeName Node type - thead, tbody or tfoot
+	 *  @param   {Node} original Original node to take the heights from
+	 *  @param   {Node} clone Copy the heights to
+	 *  @private
+	 */
+	"_fnEqualiseHeights": function ( nodeName, original, clone )
+	{
+		if ( this.s.sHeightMatch == 'none' )
+		{
+			return;
+		}
+		
+		var that = this,
+			i, iLen, iHeight, iHeight2, iHeightOriginal, iHeightClone,
+			rootOriginal = original.getElementsByTagName(nodeName)[0],
+			rootClone    = clone.getElementsByTagName(nodeName)[0],
+			jqBoxHack    = $('>'+nodeName+'>tr:eq(0)', original).children(':first'),
+			iBoxHack     = jqBoxHack.outerHeight() - jqBoxHack.height(),
+			anOriginal   = this._fnGetTrNodes( rootOriginal ),
+		 	anClone      = this._fnGetTrNodes( rootClone );
+		
+		for ( i=0, iLen=anClone.length ; i<iLen ; i++ )
+		{
+			if ( this.s.sHeightMatch == 'semiauto' && typeof anOriginal[i]._DTTC_iHeight != 'undefined' && 
+				anOriginal[i]._DTTC_iHeight !== null )
+			{
+				/* Oddly enough, IE / Chrome seem not to copy the style height - Mozilla and Opera keep it */
+				if ( $.browser.msie )
+				{
+					$(anClone[i]).children().height( anOriginal[i]._DTTC_iHeight-iBoxHack );
+				}
+				continue;
+			}
+			
+			iHeightOriginal = anOriginal[i].offsetHeight;
+			iHeightClone = anClone[i].offsetHeight;
+			iHeight = iHeightClone > iHeightOriginal ? iHeightClone : iHeightOriginal;
+			
+			if ( this.s.sHeightMatch == 'semiauto' )
+			{
+				anOriginal[i]._DTTC_iHeight = iHeight;
+			}
+			
+			/* Can we use some kind of object detection here?! This is very nasty - damn browsers */
+			if ( $.browser.msie )
+			{
+				$(anClone[i]).children().height( iHeight-iBoxHack );
+				$(anOriginal[i]).children().height( iHeight-iBoxHack );	
+			}
+			else
+			{
+				anClone[i].style.height = iHeight+"px";
+				anOriginal[i].style.height = iHeight+"px";
+			}
+		}
+	}
+};
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * Statics
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+
+/**
+ * FixedColumns default settings for initialisation
+ *  @namespace
+ *  @static
+ */
+FixedColumns.defaults = {
+	/** 
+	 * Number of left hand columns to fix in position
+	 *  @type     int
+	 *  @default  1
+	 *  @static
+	 *  @example
+	 *  	var oTable = $('#example').dataTable( {
+	 *  		"sScrollX": "100%"
+	 *  	} );
+	 *  	new FixedColumns( oTable, {
+	 *  		"iLeftColumns": 2
+	 *  	} );
+	 */
+	"iLeftColumns": 1,
+	
+	/** 
+	 * Number of right hand columns to fix in position
+	 *  @type     int
+	 *  @default  0
+	 *  @static
+	 *  @example
+	 *  	var oTable = $('#example').dataTable( {
+	 *  		"sScrollX": "100%"
+	 *  	} );
+	 *  	new FixedColumns( oTable, {
+	 *  		"iRightColumns": 1
+	 *  	} );
+	 */
+	"iRightColumns": 0,
+	
+	/** 
+	 * Draw callback function which is called when FixedColumns has redrawn the fixed assets
+	 *  @type     function(object, object):void
+	 *  @default  null
+	 *  @static
+	 *  @example
+	 *  	var oTable = $('#example').dataTable( {
+	 *  		"sScrollX": "100%"
+	 *  	} );
+	 *  	new FixedColumns( oTable, {
+	 *  		"fnDrawCallback": function () {
+	 *				alert( "FixedColumns redraw" );
+	 *			}
+	 *  	} );
+	 */
+	"fnDrawCallback": null,
+	
+	/** 
+	 * Type of left column size calculation. Can take the values of "fixed", whereby the iLeftWidth
+	 * value will be treated as a pixel value, or "relative" for which case iLeftWidth will be
+	 * treated as a percentage value.
+	 *  @type     string
+	 *  @default  fixed
+	 *  @static
+	 *  @example
+	 *  	var oTable = $('#example').dataTable( {
+	 *  		"sScrollX": "100%"
+	 *  	} );
+	 *  	new FixedColumns( oTable, {
+	 *  		"sLeftWidth": "relative",
+	 *  		"iLeftWidth": 10 // percentage
+	 *  	} );
+	 */
+	"sLeftWidth": "fixed",
+	
+	/** 
+	 * Width to set for the width of the left fixed column(s) - note that the behaviour of this
+	 * property is directly effected by the sLeftWidth property. If not defined then this property
+	 * is calculated automatically from what has been assigned by DataTables.
+	 *  @type     int
+	 *  @default  null
+	 *  @static
+	 *  @example
+	 *  	var oTable = $('#example').dataTable( {
+	 *  		"sScrollX": "100%"
+	 *  	} );
+	 *  	new FixedColumns( oTable, {
+	 *  		"iLeftWidth": 100 // pixels
+	 *  	} );
+	 */
+	"iLeftWidth": null,
+	
+	/** 
+	 * Type of right column size calculation. Can take the values of "fixed", whereby the 
+	 * iRightWidth value will be treated as a pixel value, or "relative" for which case 
+	 * iRightWidth will be treated as a percentage value.
+	 *  @type     string
+	 *  @default  fixed
+	 *  @static
+	 *  @example
+	 *  	var oTable = $('#example').dataTable( {
+	 *  		"sScrollX": "100%"
+	 *  	} );
+	 *  	new FixedColumns( oTable, {
+	 *  		"sRightWidth": "relative",
+	 *  		"iRightWidth": 10 // percentage
+	 *  	} );
+	 */
+	"sRightWidth": "fixed",
+	
+	/**
+	 * Width to set for the width of the right fixed column(s) - note that the behaviour of this
+	 * property is directly effected by the sRightWidth property. If not defined then this property
+	 * is calculated automatically from what has been assigned by DataTables.
+	 *  @type     int
+	 *  @default  null
+	 *  @static
+	 *  @example
+	 *  	var oTable = $('#example').dataTable( {
+	 *  		"sScrollX": "100%"
+	 *  	} );
+	 *  	new FixedColumns( oTable, {
+	 *  		"iRightWidth": 200 // pixels
+	 *  	} );
+	 */
+	"iRightWidth": null,
+	
+	/** 
+	 * Height matching algorthim to use. This can be "none" which will result in no height
+	 * matching being applied by FixedColumns (height matching could be forced by CSS in this
+	 * case), "semiauto" whereby the height calculation will be performed once, and the result
+	 * cached to be used again (fnRecalculateHeight can be used to force recalculation), or
+	 * "auto" when height matching is performed on every draw (slowest but must accurate)
+	 *  @type     string
+	 *  @default  semiauto
+	 *  @static
+	 *  @example
+	 *  	var oTable = $('#example').dataTable( {
+	 *  		"sScrollX": "100%"
+	 *  	} );
+	 *  	new FixedColumns( oTable, {
+	 *  		"sHeightMatch": "auto"
+	 *  	} );
+	 */
+	"sHeightMatch": "semiauto"
+};
+
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * Constants
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+
+/**
+ * Name of this class
+ *  @constant CLASS
+ *  @type     String
+ *  @default  FixedColumns
+ */
+FixedColumns.prototype.CLASS = "FixedColumns";
+
+
+/**
+ * FixedColumns version
+ *  @constant  FixedColumns.VERSION
+ *  @type      String
+ *  @default   See code
+ *  @static
+ */
+FixedColumns.VERSION = "2.0.1";
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * Fired events (for documentation)
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+
+/**
+ * Event fired whenever FixedColumns redraws the fixed columns (i.e. clones the table elements from the main DataTable). This will occur whenever the DataTable that the FixedColumns instance is attached does its own draw.
+ * @name FixedColumns#draw
+ * @event
+ * @param {event} e jQuery event object
+ * @param {object} o Event parameters from FixedColumns
+ * @param {object} o.leftClone Instance's object dom.clone.left for easy reference. This object contains references to the left fixed clumn column's nodes
+ * @param {object} o.rightClone Instance's object dom.clone.right for easy reference. This object contains references to the right fixed clumn column's nodes
+ */
+
+})(jQuery, window, document);