Code/new kJams server pages with autologout

Since the official autologout was removed, I have re-edited my mainscreen.html page to re-implement it. In addition, this versin traps the delete key, so instead of doing the rather annoying web standard "back a page" when the user hits the delete key, it does the MUCH more intuitive "remove the currently selected song from the active playlist." There may be some other tweaks, but those are the highlights. Simply replace the server files with these:

(As always, I hope someone finds this helpful, and consider sending me a P.M. letting me know what you think)

main.js:

/*   kJams Project - main.js
   Description: Main screen functionality.
   (c) 2007 kJams and David M. Cotter   */

var timer = null;
var allowBackspace = false;
var inSearch = {
   on: function() {allowBackspace = true;},
   off: function() {allowBackspace = false;}
}

function m_populatePlaylists() {
   //Remove anything that was already there
   divObj = document.getElementById("playlists");
   
   for (var i = 0; i < divObj.childNodes.length; i++) {
	  divObj.removeChild(divObj.childNodes[i]);
   }
   
   list = new KJDropList();
   list.create(divObj);
   playlistsList = list;
   
   getPlaylists(url_playlists, m_playlistsLoaded);
}

function m_playlistsLoaded(list) {
   listCtrl = document.getElementById("playlists").childNodes[0].parent;
   
   for (var i = 0; i < list.length; i++) {
	  if ((list[i]['name'] == "Library") || (list[i]['name'] == "History"))
		 dropTarget = false;
	  else
		 dropTarget = true;
	  
	  listCtrl.addItem("p" + list[i]['id'], list[i]['name'], dropTarget, null, false);
	  
	  //Library and History items are not rearrangeable
	  if ((list[i]['name'] == "Library") || (list[i]['name'] == "History"))
		 document.getElementById("p" + list[i]['id']).rearrange = false;
	  else
		 document.getElementById("p" + list[i]['id']).rearrange = true;
	  
	  //Keep track of ids for 'Tonight' and 'Favorites'
	  if (list[i]['name'] == "Tonight") {
		 pTonightID = list[i]['id'];
	  }
	  
	  if (list[i]['name'] == "Favorites") {
		 pFavoritesID = list[i]['id'];
	  }
	  
	  //Store the playlist name in the DOM object
	  document.getElementById("p" + list[i]['id']).name = list[i]['name'];
   }
   
   listCtrl.color();
   listCtrl.evtClick = m_populateSongs;
   listCtrl.evtDropInto = m_playlistDrop;
}

function m_populateSongs(playlist) {
   playlist = playlist.substring(1);
   
   //Hide
   if (songsList) {
	  songsList.hide();
	  
	  if (songsList.playlist != "1") {
		 songsList.destroy();
	  }
   }
   
   //Hide "No Playlist" message, show waiting message
   document.getElementById("message").style.display = 'none';
   document.getElementById("msg_dosearch").style.display = 'none';
   document.getElementById("msg_error").style.display = 'none';
   document.getElementById("waiting").style.display = '';
   
   //If the list is already loaded, simply display it
   if ((playlist == "1") && (songsLists[playlist] != undefined)) {
	  songsList = songsLists[playlist];
	  songsList.show();
	  document.getElementById("waiting").style.display = 'none';
   }
   
   //If it's the library, request that user do a search first
   else if (playlist == "1") {
	  document.getElementById("waiting").style.display = 'none';
	  document.getElementById("msg_dosearch").style.display = '';
   }
   
   else {
	  //Playlist DOM object
	  playlistObj = document.getElementById("p" + playlist);
	  
	  //Which columns are needed?
	  var columns = Array("#", "Song Name", "Artist", "Album");
	  
	  if (playlistObj.name == "Tonight") {
		 columns.push("Pitch");
		 columns.push("Add to");
	  }
	  
	  else if (playlistObj.name == "Favorites") {
		 columns.push("Add to");
	  }
	  
	  else {
		 columns.push("Add to");
		 columns.push("Add to");
	  }
	  
	  songsList = new KJList();
	  songsList.rearrange = playlistObj.rearrange;
	  songsList.playlist = playlist;
	  songsList.playlistName = playlistObj.name;
	  songsList.create(document.getElementById("songs"));
	  songsList.setColumns(columns, 0);
	  songsList.evtDrop = m_songRearrange;
	  songsLists[playlist] = songsList;
	  getSongs(url_songs, m_songsLoaded, "playlist=" + playlist);
	  
	  if (false) {
		 songsList.evtColClick = null;
	  }
	  else {
		 songsList.evtColClick = m_sortSongs;
	  }
   }
   
   m_sessionCheckin();
}

function m_songsLoaded(list) {
   //Hide waiting message
   document.getElementById("waiting").style.display = 'none';
   
   //Rearrangeable?
   if (songsList.rearrange)
	  var rearrange = true;
   else
	  var rearrange = false;
   
   for (var i = 0; i < list.length; i++) {
	  //Add to favorites
	  var favsButton = document.createElement("INPUT");
	  favsButton.type = "button"
	  favsButton.name = songsList.playlist + "-" + list[i]['itemId'];
	  favsButton.songId = list[i]['id'];
	  favsButton.value = "Favorites";
	  favsButton.onmousedown = m_addToFavorites;
	  
	  //Add to Tonight
	  var tonightButton = document.createElement("INPUT");
	  tonightButton.type = "button";
	  tonightButton.name = songsList.playlist + "-" + list[i]['itemId'];
	  tonightButton.songId = list[i]['id'];
	  tonightButton.value = "Tonight";
	  tonightButton.onmousedown = m_addToTonight;
   
	  //Columns
	  var columns = Array(i, list[i]['name'], list[i]['artist']);
	  
	  if (typeof(list[i]['album']) == "object") {
		 var dropDown = document.createElement("SELECT");
		 dropDown.name = list[i]['id'];
		 
		 for (var j = 0; j < list[i]['album']['items'].length; j++) {
			var optionObj = document.createElement("OPTION");
			optionObj.value = list[i]['album']['items'][j];
			optionObj.innerHTML = optionObj.value;
			
			if (list[i]['album']['default'] == j) {
			   optionObj.selected = true;
			}
			
			dropDown.appendChild(optionObj);
		 }
		 
		 columns.push(dropDown);
	  }
	  
	  else {
		 columns.push(list[i]['album']);
	  }
	  
	  if (songsList.playlistName == "Tonight") {
		 //Drop-down
		 var options = {"+6" : 6, "+5" : 5, "+4" : 4, "+3" : 3, "+2" : 2, "+1" : 1, "0" : 0, "-1" : -1, "-2" : -2, "-3" : -3, "-4" : -4, "-5" : -5, "-6" : -6}
		 var dropDown = document.createElement("SELECT");
		 dropDown.name = list[i]['itemId'];
		 dropDown.songId = list[i]['id'];
		 dropDown.onchange = m_changePitch;
		 for (option in options) {
			var optionObj = document.createElement("OPTION");
			optionObj.value = options[option];
			optionObj.innerHTML = option;
			
			if(list[i]['pitch'] == options[option]) {
			   optionObj.selected = true;
			}
			
			dropDown.appendChild(optionObj);
		 }
		 
		 columns.push(dropDown);
		 columns.push(favsButton);
	  }
	  
	  else if (songsList.playlistName == "Favorites") {
		 columns.push(tonightButton);
	  }
	  
	  else {
		 columns.push(tonightButton);
		 columns.push(favsButton);
	  }
   
	  index = songsList.addItem(songsList.playlist + "-" + list[i]['itemId'], columns, rearrange, null, false);
	  
	  document.getElementById(songsList.getByIndex(index)).songName   = list[i]['name'];
	  document.getElementById(songsList.getByIndex(index)).songId      = list[i]['id'];
	  document.getElementById(songsList.getByIndex(index)).piIx      = list[i]['itemId'];
   }
   
   songsList.color();
   
   if (songsList.playlistName != "Tonight" && songsList.playlistName != "History") {
	  songsList.evtColClick = m_sortSongs;
   }
   else {
	  songsList.evtColClick = null;
   }
}

function m_songRearrange(list, song, index, oldIndex) {
   sendData(url_rearrange, "playlist=" + list.playlist + "&index=" + index + "&oldIndex=" + oldIndex);
   m_sessionCheckin();
}

function m_playlistDrop(song, index, nodeId) {
   playlists   = document.getElementById("playlists").childNodes[0].parent;
   item      = songsList.getByID(song);
   
   if (songsLists[playlists.getByIndex(index).substring(1)]) { songsLists[playlists.getByIndex(index).substring(1)].destroy(); }
   songsLists[playlists.getByIndex(index).substring(1)] = null;
   sendData(url_drop, "playlist=" + playlists.getByIndex(index).substring(1) + "&song=" + songsList.getByID(song).songId);
   
   m_setStatus("Added \"" + item.songName + "\" to \"" + m_getPlaylistName(playlists.getByIndex(index)) + "\" ...");
   m_sessionCheckin();
}

function m_addToTonight(event) {
   playlists = document.getElementById("playlists").childNodes[0].parent;
   m_playlistDrop(event.target.name, playlists.getIndex("p" + pTonightID), event.target.name);
}

function m_addToFavorites(event) {
   playlists = document.getElementById("playlists").childNodes[0].parent
   m_playlistDrop(event.target.name, playlists.getIndex("p" + pFavoritesID), event.target.name);
}

function m_sortSongs(list, column) {
   list.removeAll();
   list.setPrimaryCol(column);
   document.getElementById("waiting").style.display = '';
   
   if (document.getElementById("searchfield").value) {
	  search = "&search=" + document.getElementById("searchfield").value;
   }
   
   getSongs(url_sort, m_songsLoaded, "playlist=" + list.playlist + "&orderby=" + column + search);
   m_sessionCheckin();
}

function m_changePitch(event) {
   sendData(url_pitch, "song=" + event.target.songId + "&pitch=" + event.target.value);
   m_sessionCheckin();
}

function m_doSearch() {
   //Remove old search list if it's there
   if (songsLists["1"]) {
	  songsLists["1"].parentObj.removeChild(songsLists["1"].container);
	  songsLists["1"].parentObj.removeChild(songsLists["1"].columnsObj);
   }
   
   //Hide currently loaded list
   if (songsList) {
	  songsList.hide();
   }
   
   document.getElementById("msg_dosearch").style.display = 'none';
   document.getElementById("message").style.display = 'none';
   document.getElementById("msg_error").style.display = 'none';
   document.getElementById("waiting").style.display = '';

   var columns = Array("#", "Song Name", "Artist", "Album", "Add to", "Add to");
   
   songsList = new KJList();
   songsList.rearrange = false;
   songsList.playlist = "1";
   songsList.playlistName = "Library";
   songsList.create(document.getElementById("songs"));
   songsList.setColumns(columns, 1);
   songsLists["1"] = songsList;
   
   getSongs(url_search, m_songsLoaded, "search=" + document.getElementById("searchfield").value);
   m_sessionCheckin();
}

function searchKeyPressed(event) {
   if (event.keyCode == 13) {
	  m_doSearch();
   }
}

function m_getSongName(id) {
   songObj = document.getElementById(id);
   return songObj.songName;
}

function m_getPlaylistName(id) {
   playlistObj = document.getElementById(id);
   return playlistObj.name;
}

function kj_data_error(id, desc) {
   songsLists[songsList.id] = null;
   songsList.hide();
   document.getElementById("waiting").style.display = 'none';
   
   document.getElementById("msg_error").innerHTML = "Error: " + desc
   document.getElementById("msg_error").style.display = '';
}

function m_setStatus(status, revert) {
   statusObj = document.getElementById("status");
   statusObj.innerHTML = status;
}
function trapDelete() {
   var keyID = (window.event) ? event.keyCode : e.keyCode;
   if (keyID==8 && !allowBackspace){
	  return false;
   }
   return true;
}
function m_keyPressed(event) {
   //This is not IE-compliant code.
   if (event.keyCode == 46 || event.keyCode ==8) {
	  if (!songsList.selection) {
		 return;
	  }
   
	  playlistName   = songsList.playlistName;

	  if (playlistName != "Library" && playlistName != "History") {
		 selection   = songsList.selection;
		 item      = songsList.getByID(selection);
		 
		 songsList.select(null);
		 sendData(url_remove, "playlist=" + songsList.playlist + "&piIx=" + item.piIx);
		 m_setStatus("Removed \"" + item.songName + "\" ...");
		 songsList.removeItem(selection);
	  }
   }
}

function m_sessionCheckin() {
   /* A true or false value is set by the server before delivering this script
	  depending on preference.
   if (!{auto_logout}) {
	  return;
   }
   
   if (timer == null) {
	  timer = setInterval("m_sessionLogout()", {timeout} * 1000);
   }
   else {
	  clearInterval(timer);
	  timer = null;
	  return m_sessionCheckin();
   }
	*/
}

function m_sessionLogout() {
//   window.location=url_login;
}

=======================================================================================================================================================

mainscreen.html

<html> 
	<head> 
		<title>kJams Server</title> 
	
		<script src="spry/xpath.js"></script> 
		<script src="spry/SpryData.js"></script> 
		<script src="ui.js"></script> 
		<script src="data.js"></script> 
		<script src="main.js"></script> 
		<script src="common.js"></script> 
		<script type="text/javascript"> 
			var timer = 0;
			function set_interval() {
				//the interval 'timer' is set as soon as the page loads
				timer=setInterval("auto_logout()",120000);
				// the figure '120000' above indicates how many milliseconds the timer be set to.
				//Eg: to set it to 2 mins, calculate 2min= 2x60=120 sec = 120,000 millisec. So set it to 120000
			}
			function reset_interval() {
				//resets the timer. The timer is reset on each of the below events:
				// 1. mousemove   2. mouseclick   3. key press 4. scroliing
				//first step: clear the existing timer
				if (timer != 0) {
					clearInterval(timer);
					timer = 0;
				}
				//second step: implement the timer again
				timer=setInterval("auto_logout()",120000);
				//completed the reset of the timer
			}
 
			function auto_logout() {
				//this function will redirect the user to the logout script
				window.location=logoutlink;
			}
		</script> 
		<style type="text/css"> 
			#main {
				padding: 10px;
				margin-right: 20px;
				margin-left: 20px;
				border-style: solid;
				border-color: #000000;
				border-width: 1px;
				background: url('metal.jpg');
				cursor: default;
			}
			
			#title {
				padding-right: 30px;
				text-align: left;
				font-family: Arial Black;
				font-size: 24pt;
				font-weight: bold;
				margin-bottom: 5px;
			}
			
			#search {
				width: 100%;
				text-align: center;
			}
			
			#searchfield {
				height: 21px;
				width: 144px;
				background: url('search.png');
				border-width: 0px;
				padding-left: 7px;
				padding-right: 7px;
				padding-top: 2px;
			}
			
			#left {
				float: left;
				width: 200px;
				margin: 0px;
				margin-left: 0px;
			}
			
			#status {
				text-align: center;
				color: #333333;
				padding: 0px;
				margin: 0px;
			}
			
			#playlists .KJList {
				overflow: auto;
				height: 240px;
				padding: 0px;
				background-color: #FFFFFF;
				border-style: solid;
				border-color: #999999;
				border-width: 1px;
				padding: 0px;
			}
			
			#playlists .KJList td {
				padding: 0px;
				margin: 0px;
			}
			
			#playlists .KJList table {
				margin: 0px;
				padding: 0px;
			}
			
			#photo {
				padding: 3px;
				width: 190px;
				height: 143px;
				max-height: 150px;
				overflow: hidden;
				margin-top: 5px;
				background-color: #FFFFFF;
				border-style: solid;
				border-color: #999999;
				border-width: 1px;
			}
			
			#songs {
				border-style: solid
				border-color: #999999;
				border-width: 1px;
				margin-left: 220px;
				background-color: #FFFFFF;
				min-height: 400px;
			}
			
			
			#message, #waiting, #msg_dosearch, #msg_error {
				text-align: center;
				font-size: 14pt;
			}
			
			#songs .KJList {
				padding: 0px;
				height: 400px;
				overflow: auto;
				!background-color: #FFFFFF;
			}
			
			.KJListColumn {
				padding: 0px;
				margin: 0px;
				background: url('column-bg.jpg');
				cursor: default;
			}
			
			.KJListColumn td {
				border-style: solid;
				border-color: #999999;
				border-width: 0px;
				border-right-width: 1px;
			}
			
			.KJListColumn .primary {
				background: url('column-selected-bg.jpg');
			}
			
			.KJListItem, .KJListItem_alt, .KJListItem_selected, .KJListItem_drag, .KJListItem_target, .KJListItem_alt_target {
				padding: 0px;
				padding-top: 0px;
				padding-bottom: 0px;
				margin: 0px;
				cursor: default;
				border-style: solid;
				border-color: #FFFFFF;
				border-width: 0px;
				border-bottom-width: 1px;
			}
			
			.KJListItem_alt {
				background-color: #EEEEFF;
			}
			
			.KJListItem_selected {
				background-color: #4444FF;
				color: #FFFFFF;
			}
						
			.KJListItem_target, .KJListItem_alt_target {
				border-style: solid;
				border-color: #000000;
				border-width: 0px;
				border-top-width: 1px;
			}
			
			.KJListItem_alt_target {
				background-color: #EEEEFF;
			}
			
			.KJListItem_drag {
				position: absolute;
				border-style: solid;
				border-color: #000000;
				border-width: 1px;
				background-color: #DDDDDD;
				filter:alpha(opacity=40); /* for IE */
				-moz-opacity:0.4;
				opacity: 0.4;	
			}
			
			.KJList input {
				padding: 0px;
				margin: 0px;
				border-style: solid;
				border-color: #000000;
				border-width: 1px;
			}
			
			.KJList input:active {
				background-color: #000000;
				color: #FFFFFF;
			}
			
			#playlists .KJListItem, #playlists .KJListItem_alt, #playlists .KJListItem_selected, #playlists .KJListItem_target, #playlists .KJListItem_alt_target {
				background: url('playlist-icon.gif');
				background-repeat: no-repeat;
				padding: 0px;
				padding-left: 20px;
				border-style: solid;
				border-color: #FFFFFF;
				border-width: 3px;
			}
			
			
			#playlists .KJListItem_alt {
				background-color: #EEEEFF;
			}
			
			#playlists .KJListItem_selected {
				background-color: #4444FF;
				color: #FFFFFF;
			}
			
			#playlists .KJListItem_target, #playlists .KJListItem_alt_target {
				border-color: #000000;
				background-color: #9999FF;
			}
 
			.clear {
				clear: both;
			}
		</style> 
 
	</head> 
	
	<body onLoad="set_interval()" onmousemove="reset_interval()" onclick="reset_interval()" onkeypress="reset_interval()" onscroll="reset_interval()"> 
		<div id="main"> 
			<table><tr><td id="title"><nobr>*DeusExMachina</nobr></td><td id="search"><nobr>Search Library: <input type="search" id="searchfield" name="search" onkeypress=searchKeyPressed(event) onblur="inSearch.off()" onfocus="inSearch.on()" /><input type="submit" style="" name="dosearch" value="Go" onclick=m_doSearch() /></nobr></td><td id="help"><nobr>[ <a id="helplink" href="">Help</a> ] [ <a id="logoutlink" href="">Logout</a> ]</nobr></td></tr></table> 
			
			<div> 
				<div id="left"> 
					<div id="playlists"></div> 
					<div id="photo"><img src="kjams-main.jpg" /></div> 
				</div> 
				
				<div id="songs"><p id="msg_error"></p><p id="msg_dosearch">Please enter a search.</p><p id="message">No Playlist Selected.</p><p id="waiting">Please wait, loading playlist...</p></div> 
				
				<div class="clear"> </div> 
				<div id="status">Welcome to kJams!</div> 
			</div> 
		</div> 
		
		<script language="javascript"> 
			//Bind key press function
			document.onkeyup = m_keyPressed;
			//Prevent browser from seeing the Delete key press
			document.onkeydown=trapDelete;
 
			//Hide message fields
			document.getElementById("waiting").style.display = 'none';
			document.getElementById("msg_dosearch").style.display = 'none';
			document.getElementById("msg_error").style.display = 'none';
			
			//Plug in help and logout URLs
			document.getElementById("helplink").href = url_help;
			document.getElementById("logoutlink").href = url_login;
			
			//Playlists
			m_populatePlaylists();
		
			if (0) {
				//Song list
				var songs = new KJList();
				songs.create(document.getElementById("songs"));
				songs.setColumns(Array("#", "Song Name", "Artist", "Pitch", "Add to", "Add to"), 1);
				
				//Set clipping
				songs.setClipping({'right' : songs.getColumnWidth(5) + songs.getColumnWidth(4) + songs.getColumnWidth(3)});
				
				getSongs(url_songs, populateList, 'playlist=1');
				
				function populateList(songList) {
					for(var i = 0; i < songList.length; i++) {
						songs.addItem(songList[i]['number'], Array(songList[i]['number'], songList[i]['name'], songList[i]['artist'], "<select><option>+6</option><option>+5</option><option>+4</option><option>+3</option><option>+2</option><option>+1</option><option selected>0</option><option>-1</option><option>-2</option><option>-3</option><option>-4</option><option>-5</option></select>", "<input type=\"submit\" value=\"Tonight\" />", "<input type=\"submit\" value=\"Favorites\" />"), null, null, false);
					}
					
					songs.color();
				}
			}
		</script> 
	</body> 
</html>