$(window).load(function () { initMusicList(); });

function initMusicList()
{
	addPageComponents();
	initSongTable();
	setupEventHandlers();
}

function addPageComponents()
{
	$("#main").empty();
	
	$("#main").append('\r\n<h2>Music Form</h2>\r\n');
	$("#main").append(getProcess());
	$("#main").append(getSelectionForm());
	$("#main").append(getMusicPlayerContainer());
	$("#main").append(getListColumns());
	changeEra();
}

function initSongTable()
{
	songListChanged("?era=Current&style=House");
}

function setupEventHandlers()
{
    $(".songtitleletterlink").click(function(event) { var query = '?letter='+this.id.substring(6)+'&by=SongTitle'; songListChanged(query); event.preventDefault(); } );
	$(".artistletterlink").click(function(event) { var query = '?letter='+this.id.substring(7)+'&by=Artist'; songListChanged(query); event.preventDefault(); } );
	$("#eraselect").change(changeEra);
	$("#changefilter").click(changeFilter);
	$("#songlistform").submit(searchForSong);
}

function getProcess()
{
	return '<div id="process">\r\n' + getProgressList() + getProcessDescription() + '</div>\r\n';
}

function getProgressList()
{
	return 		'<ol id="progress">\r\n'
			+		'\t<li>1. Choose your songs - </li>\r\n'
			+		'\t<li><a href="printable">2. Confirm and Print</a></li>\r\n'
			+	'</ol>\r\n';
}

function getProcessDescription()
{
	return 		'<p id="processdesc">\r\n'
			+		'\tTo get started, either type the name of the artist or song you wish to find and click the \r\n'
			+		'\t<strong>\'Search\'</strong> button or select an era and style and click the <strong>\'Go\'</strong> button.\r\n'
			+		'\tFrom there, add or remove songs to your list using the <strong>\'Add\'</strong> and <strong>\'Remove\'</strong>\r\n' 
			+		'\tbuttons next to the songs.<br><br>Songs of type <strong>\'V/A\'</strong> are songs that contain an accompanying\r\n' 
			+		'\tvideo, while songs with type <strong>\'A\'</strong> do not have a video.<br><br>When you feel your list is complete,\r\n' 
			+		'\tproceed to the next step <a class="progresslink" href="printable/">2. Confirm and Print</a><br><br>\r\n'
			+		'\t<strong>Reminder:</strong> DJ\'s play roughly 16 songs per hour.\r\n'
			+ 	'</p>\r\n';
}

function getSelectionForm()
{
	return 	'<div id="formcontrol">\r\n'
    	+       '<div id="letterlinks">\r\n'
    	+           getLetterLinks()
    	+       '</div>\r\n'
		+		'\t<form id="songlistform" method="post" action="?op=musiclist&mode=onlineform&section=music">\r\n'
		+			'\t\t<div id="search">\r\n'
		+				'\t\t\t<h3>Search (by Artist or Song Title)</h3>\r\n'
		+				'\t\t\t<label id="searchlabel">Search:</label>\r\n'
		+				'\t\t\t<input class="textinput" id="searchquery" type="text">\r\n'
		+				'\t\t\t<label id="searchbylabel">by: </label>\r\n'
		+				'\t\t\t<select name="searchby" class="textinput" id="searchby">\r\n'
		+					'\t\t\t\t<option value="SongTitle">Title</option>\r\n'
		+					'\t\t\t\t<option value="Artist">Artist</option>\r\n'
		+				'\t\t\t</select>\r\n'
		+				'\t\t\t<input value="Search" name="search" class="button" id="searchbutton" type="submit">\r\n'
		+			'\t\t</div>\r\n'
		+ 			'\t\t<div id="selectstyle">\r\n'
		+				'\t\t\t<h3>Select (by Era and Style)</h3>\r\n'
		+				'\t\t\t<div id="eralist">\r\n'
		+					'\t\t\t\t<label id="eralabel">Era:</label>\r\n'
		+					'\t\t\t\t<select name="eraselect" class="textinput" id="eraselect">\r\n'	
		+								getEraOptionsHTML()
		+					'\t\t\t\t</select>\r\n'
		+				'\t\t\t</div>\r\n'
		+				'\t\t\t<div id="stylelist">\r\n'
		+					'\t\t\t\t<label id="stylelabel">Style:</label>\r\n'
		+					'\t\t\t\t<select name="styleselect" class="textinput" id="styleselect">\r\n'
		+						'\t\t\t\t\t<option value="House">House</option>\r\n'
		+					'\t\t\t\t</select>\r\n'
		+				'\t\t\t</div>\r\n'
		+				'\t\t\t<span id="changefilterbutton">\r\n'
		+					'\t\t\t\t<input value="Go" name="changefilter" id="changefilter" type="button">\r\n'
		+				'\t\t\t</span>\r\n'
		+			'\t\t</div>\r\n'
		+		'\t</form>\r\n'
		+	'</div>\r\n';
}

function getLetterLinks()
{
	return getSongTitleLinks() + getArtistLinks();
}

function getSongTitleLinks()
{
	var letters = new Array("#", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q",  "R", "S", "T", "U", "V", "W", "X", "Y", "Z");
	
	var songTitleLetterLinks = [];
	
	songTitleLetterLinks.push('\t<div id=\"titlelinks\">'); 
	songTitleLetterLinks.push('\t\t<h4>By Title:</h4>'); 
	songTitleLetterLinks.push('\t\t<ul>');
	
	jQuery.each
	(
		letters, 
		function() 
		{ 
			songTitleLetterLinks.push('\t\t\t<li><a href="changebytitle.php" id="'+(this != '#' ? ('Title-'+this) : 'Title-number')+'" class="songtitleletterlink">'+ this +'</a></li>'); 
		}
	);
	
	songTitleLetterLinks.push('\t\t</ul>');
	songTitleLetterLinks.push('\t</div>\r\n');
	
	return songTitleLetterLinks.join('\r\n');
}

function getArtistLinks()
{
	var letters = new Array("#", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q",  "R", "S", "T", "U", "V", "W", "X", "Y", "Z");
	
	var artistLetterLinks = [];
	
	artistLetterLinks.push('\t<div id=\"artistlinks\">'); 
	artistLetterLinks.push('\t\t<h4>By Artist:</h4>'); 
	artistLetterLinks.push('\t\t<ul>');
	
	jQuery.each
	(
		letters, 
		function() 
		{ 
			artistLetterLinks.push('\t\t\t<li><a href="changebyartist.php" id="'+(this != '#' ? ('Artist-'+this) : 'Artist-number')+'" class="artistletterlink">'+ this +'</a></li>'); 
		}
	);
	
	artistLetterLinks.push('\t\t</ul>');
	artistLetterLinks.push('\t</div>');
	
	return artistLetterLinks.join('\r\n');
}

function getEraOptionsHTML(eras)
{
	var eraHTML = "";
	jQuery.each
	(
		new Array("Current", "2000", "90s", "80s",  "70s", "50/60", "Love", "Xmas"), 
		function() 
		{ 
			if(this == 'Current')
				eraHTML += ('\t\t\t\t\t<option value="' + this + '" selected="selected">' + this + '</option>\r\n'); 
			else	
				eraHTML += ('\t\t\t\t\t<option value="' + this + '">' + this + '</option>\r\n'); 
		}
	);
	return eraHTML;	
}

function getMusicPlayerContainer()
{
	return 	'\t<div id="musicplayerwrapper">\r\n'
			+	'\t\t<h3>Music Player</h3>\r\n'
			+	'\t\t<div id="musicplayercontainer">\r\n'
			+			'\t\t\t<div id="songcontent">\r\n'
			+				'\t\t\t\t<div id="songinfo">\r\n'
			+					'\t\t\t\t\t<p id=\"currentsongartist\">-</span></p>\r\n'
			+					'\t\t\t\t\t<p id=\"currentsongtitle\">-</span></p>\r\n'
			+				'\t\t\t\t</div>\r\n'
			+				'\t\t\t\t<div id="musicplayer">\r\n'
			+				'\t\t\t\t</div>\r\n'
			+			'\t\t\t</div>\r\n'
			+		'\t\t</div>\r\n';
			+ 	'\t</div>\r\n';
}

function getListColumns()
{
	return 	'\t<div id="leftcol">\r\n'
		+		'\t\t<h3>Song List</h3>\r\n'
		+		'\t\t<div id="leftlist">\r\n'
		+		'\t\t</div>\r\n'
		+	'\t</div>\r\n'
		+	'\t<div id="rightcol">\r\n'
		+		'\t\t<h3>Selected Songs</h3>\r\n'
		+		'\t\t<div id="rightlist">\r\n'
		+		'\t\t</div>\r\n'
		+	'\t</div>\r\n';
}

function changeEra()
{
	var era = $('#eraselect :selected').text() == null ? 'Current' : $('#eraselect :selected').text();
	$("#styleselect").empty();
	$.getJSON('control/changeera.php?era='+era, function(data) { $.each (data.styles, 
		function() 
		{ 
			$("#styleselect").append('\t\t\t\t\t<option value="' + this + '">' + this + '</option>\r\n'); });
		});
}

function changeFilter()
{
	songListChanged("?era="+$('#eraselect :selected').val()+"&style="+$('#styleselect :selected').val());
}

function songListChanged(query)
{
	$.getJSON("control/getsonglist.php"+query, updateSongList);
}

function updateSongList(music)
{
	if(music.songs.length > 0)
		buildSongTable(music);
	else
		showNoSongsMessage();
}

function buildSongTable(music)
{
	$("#leftlist").html(getSongListHTML(music.songs));
	attachSongListEventHandlers();
}

function attachSongListEventHandlers()
{
	$(".addsong", "#leftlist").click(function(event) { addSong(this.id.substring(4)); event.preventDefault(); }); 
	$(".playsong", "#leftlist").click(function(event) 
	{ 
		var song = this.id;

		var artist = song.substring(0, song.indexOf("-"));
		var songTitle = song.substring(song.indexOf("-") + 1); 
		playSong(artist, songTitle); 
		event.preventDefault(); 
	});
}

function showNoSongsFoundMessage()
{
	$("#leftlist").html(getNoSongsFoundHTML());
}

function getSongListHTML(songs)
{
	var songRows = [];
	
	for(i = 0; i < songs.length; i++)
		songRows[i] = getSongHTML(songs[i], (i % 2 == 0) ? "normal" : "striped");
	
	return	'\t<table id="songtable">\r\n'
		+		'\t\t<thead>\r\n'
		+			'\t\t\t<tr>\r\n'
		+			'\t\t\t\t<th>Year</th>\r\n'	
		+			'\t\t\t\t<th>Type</th>\r\n'	
		+			'\t\t\t\t<th>Song Title</th>\r\n'	
		+			'\t\t\t\t<th>Artist</th>\r\n'
		+			'\t\t\t\t<th>Style</th>\r\n'				
		+			'\t\t\t</tr>\r\n'
		+		'\t\t</thead>\r\n'
		+		'\t\t<tbody>\r\n'
		+ 			songRows.join('')
		+		'\t\t</tbody>\r\n'
		+	'\t</table>\r\n';
}

function getSongHTML(song, className)
{
	return '\t\t\t<tr class="' + className + '">\r\n'
		+	'\t\t\t\t<td class="year">'+song.year+'</td>\r\n'	
		+	'\t\t\t\t<td class="type">'+song.type+'</td>\r\n'	
		+	'\t\t\t\t<td class="songtitle">'+song.title+'</td>\r\n'	
		+	'\t\t\t\t<td class="artist">'+song.artist+'</td>\r\n'				
		+	'\t\t\t\t<td class="style">'+song.style+'</td>\r\n'
		+	'\t\t\t\t<td><a href="playsong.php" class="playsong" id="'+song.artist+'-'+song.title+'">Play</a></td>\r\n'
		+	'\t\t\t\t<td class="change"><a href="addsong.php" class="addsong" id="song'+song.id+'">Add</a></td>\r\n'				
		+	'\t\t\t</tr>\r\n';
}

function getNoSongsFoundHTML()
{
	return "\t<p>Please select an era and style or search for a song or artist</p>";
}

function addSong(songId)
{
	$.get('control/updateselection.php?mode=select&songid='+songId, selectedSongListChanged);
}

function searchForSong(event)
{
	if($("#searchquery").val() != "")
		songListChanged('?search='+$("#searchquery").val()+'&searchby='+$("#searchby").val());
		
	event.preventDefault();
}