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>
<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 {
/*position: relative;
z-index: 1;*/
border-style: solid/
border-color: #999999;
border-width: 1px;
margin-left: 220px;
background-color: #FFFFFF;
min-height: 400px;
background-image:url(/media/Images/kjams.jpg);
background-repeat: no-repeat;
background-position: center;
/*filter: alpha (opacity=50);
-moz-opacity:0.5;
opacity: 0.5;*/
}
#songsbackground{
positon: absolute;
z-index: 10;
min-height: 400px;
background-image:url(kjams.jpg);
background-repeat: no-repeat;
background-position: center;
filter: alpha (opacity=50);/*for those yet to get with the program*/
-moz-opacity:0.5;
opacity: 0.5;
}
#message, #waiting, #msg_dosearch, #msg_error {
/*position: relative;
z-index: 11
top: 0;
left: 0;*/
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;
opacity: 0.7;
}
.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>
<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" 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>