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>
	<!--Singer: {singer}-->
		<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 allowUnload = false;
			blinkSpeed=150;
			tagName="blinker";
			blinkerFlag=1;
			blinkElement=document.getElementsByName(tagName);
			blinkText();

			function blinkText() {
				if (blinkerFlag== 1) {
					blinkState="visible";
				}
				else {
				blinkState="hidden";
				}
				blinkerFlag ^=1;

				for(i=0;i<blinkElement.length;i++) {
					blinkElement[i].style.visibility=blinkState;
				}

				setTimeout("blinkText()", blinkSpeed);
			}
			-->
		</script>
		<script type="text/javascript">
			//variable to control if message is shown
  			 var allowUnload = false;

  			// function triggered by any closing of the current document
			function confirmUnload(){
				if(!allowUnload){
					//message displayed (as well as inbuilt IE junk) when page is unloaded.
					return 'Why on earth would you think it is a good idea to close this window?!? Well, it ISN\'T!!! Do NOT close this 							window. If you do, all hell will rain down upon you, you will get A.I.D.S., and I will get very upset (at you 							closing the window, not the A.I.D.S., that\'s on you).\n :\'(';
				}
			}

			//register function with the event handler
			window.onbeforeunload = confirmUnload;
		</script>
		
<link rel="stylesheet" href="screen.css" media="screen"/> 
<link rel="stylesheet" href="handheld.css" media="handheld, only screen and (max-device-width:480px)"/>
	</head>

	<body onLoad="m_sessionCheckin()"; "loaded()" onmousemove="m_pingSession()" onclick="m_pingSession()" onkeypress="m_pingSession()" onscroll="m_pingSession()">
		<div id="main">
			<table><tr><td id="title"><nobr>{singer}</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" onClick="allowUnload=true" href="">Help</a> ] [ <a id="logoutlink" onClick="allowUnload=true" 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="wrapper">
				<div id="songs"><p id="msg_error"></p><p id="msg_dosearch">Please enter a search.<br><br><b> Hint: To limit your search to just a particular artist, type "artist:" followed by the name of the artist.<br>Likewise, to search just on song names  type "song name:" and then the name of your song, etc..</b></p><p id="message">Please enter a search.<br><br><i>Type your search into the search field above and hit "Go".<br><br>To submit a song, just click the "Tonight" button for that song in the search results. (You can also make your own "Favorties" list.)<br><br>You will be informed at the bottom of the screen when you have successfully submitted a song.</i><br><br><b> Hint: To limit your search to just a particular artist, type "artist:" followed by the name of the artist.<br>Likewise, to search just on song names  type "song name:" and then the name of your song, etc..</b></p><p id="waiting">Please wait, loading search results… .<br><i><b>(This may take a while. <span style="color:#FF0000"><a name=blinker>Please do NOT</a> try another search until the first results are returned.)</span></b></i></p></div>
				</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>