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 lastPing = 0;
var allowBackspace = false;
//checks to see if the search field it in focus. If it is, allow the user to use the Delete/Backspace key. Otherwise, set flag to trap it.
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() {
	//Select "Library" in the side bar
	playlistsList.select(playlistsList.getByID(playlistsList.getByIndex(0)));
	
	//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 = "<span style='color:#FF0000'>" + status + "</span>";
	var newInnerHTML='statusObj.innerHTML = "<span style="color:#FF0000">" + status + "</span>"';
	blink();
	setTimeout("statusObj.innerHTML = newInnerHTML",1250);
}

function blink(){ 
blinkFlag = 1 
blinkCount = 1 
blinkTimer();
}

function blinkTimer(){ 
if(blinkFlag==1){
blinkSpeed=250
blinkNumber=10 // If this value is even, the text flashes then remains visible. If it is odd, it flashes, then disappears
blinkCount++; 
document.getElementById("status").style.visibility='visible'; 
}else {
blinkCount++; 
document.getElementById("status").style.visibility='hidden'; 
}
blinkFlag^=1;
if (blinkCount < blinkNumber) {setTimeout('blinkTimer()', blinkSpeed);} 
} 

function trapDelete() {
	//Checks to see if the key pressed is the Delete/Backspace key, and if so, stop it from getting to the browser.
   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_pingSession() {
	var elapsedTime = new Date().getTime()/1000.0 - lastPing;
	
	if (elapsedTime >= 5) {
		sendData(url_ping, "");
		m_sessionCheckin();
		lastPing = new Date().getTime()/1000.0;
	}
}

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() {
	// Sets the flag to tell confirmUnload subroutine that it is OK to let the user leave this page (close the Window, etc.)
	allowUnload = true;
	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>