Server/Code

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>