var TableAudioPlayer =
{
	songs : [],
	table : null,
	tableRows : null,
	currentSongIndex : -1,
	player : null,
	scrollTimer : null,

	init : function(table_id)
	{
		// If the browser doesn't support audio, just return. There's nothing we can do...
		if(!!!document.createElement('audio').canPlayType)
		{
			return;
		}

		this.table = document.getElementById(table_id);
		if(!this.table)
		{
			alert(table_id + ' could not be found');
		}

		var rows = this.table.getElementsByTagName('tr');
		this.tableRows = rows;

		for(var i = 0; i < rows.length; i++)
		{
			var row = rows[i];

			// Ignore rows with th's
			var hasTH = row.querySelector('th');
			if(hasTH) { continue; }

			var audioLink = row.querySelector('a[href$=mp3]');
			if(audioLink == null) { continue; }

			var songPageLink = row.querySelector('a');
			var linkMP3 = audioLink.href;
			var linkOGG = linkMP3.replace('.mp3', '.ogg');

			var playCell = document.createElement('td');
			var playerCell = document.createElement('td');
			var playLink = document.createElement('a');
			playLink.href = '#' + this.songs.length;
			//playLink.name = this.songs.length;
			playLink.innerHTML = 'play';
			playLink.id = 'song' + this.songs.length;

			playCell.appendChild(playLink);
			playLink.onclick = function() {
				//var playerCell = this.parentNode.parentNode.lastChild;
				var id = this.id.replace('song', '');
				TableAudioPlayer.playSongAt(id);
				window.location.hash = '#' + id;
				return false;
			}

			row.appendChild(playCell);
			row.appendChild(playerCell);

			var song = {'info_page': songPageLink.href, 'title': songPageLink.innerHTML, 'sources': [linkMP3, linkOGG], 'row_index': i};
			this.songs.push(song);
		}

		if(this.songs.length > 0)
		{
			var first_row = this.table.querySelector('tr');
			var th1 = document.createElement('th');
			first_row.appendChild(th1);
			var th2 = document.createElement('th');
			first_row.appendChild(th2);

			var ths = first_row.querySelectorAll('th');
			ths[0].style.width = '60%';
			ths[1].style.width = '10%';
			ths[2].style.width = '10%';
			ths[3].style.width = '20%';
		}
	},

	playSongAt : function(index)
	{
		var song = this.songs[index];

		if(this.player)
		{

			this.player.parentNode.removeChild(this.player);
		}

		this.player = document.createElement('audio');
		this.player.style.height = '28px';
		this.player.controls = true;

		this.player.addEventListener('ended', function() {
			TableAudioPlayer.playNextSong();
		}, false);

		var sources = song['sources'];
		for(var i = 0; i < sources.length; i++)
		{
			var source = document.createElement('source');
			source.src = sources[i];
			this.player.appendChild(source);
		}

		var row = this.tableRows[song['row_index']];
		var tds = row.querySelectorAll('td');

		var playerCell = tds[tds.length-1];
		playerCell.appendChild(this.player);

		this.currentSongIndex = index;
		this.player.play();
	},

	playNextSong : function()
	{
		var next = (this.currentSongIndex*1 + 1) % this.songs.length;
		this.playSongAt(next);
		var playLink = document.getElementById('song' + next);
		this.scrollTo(playLink);
		window.location.hash = '#' + next;
	},

	scrollTo : function(element)
	{
		if(this.scrollTimer)
		{
			clearInterval(this.scrollTimer);
			this.scrollTimer = null;
		}

		// element position?
		var ypos = element.offsetTop;
		var offsetParent = element.offsetParent
		do
		{
			ypos += offsetParent.offsetTop;
		} while(offsetParent = offsetParent.offsetParent);


		var dst_pos = ypos - 70;
		var dummy = {value: document.documentElement.scrollTop | document.body.scrollTop };
		JSTweener.addTween(dummy, {value: dst_pos, time: 1, transition: JSTweener.easingFunctions.easeInOutExpo,
			onUpdate: function() {
				var t = this.target;
				document.documentElement.scrollTop = t.value;
				document.body.scrollTop = t.value;
			}
		});
	}
}


var SuperAudioPlayer =
{
	createPlayer : function(container_element_id, songs_list)
	{
		if(!!!document.createElement('audio').canPlayType) { return; }

		var container = document.getElementById(container_element_id);
		var audio_objects = [];
		var i, j;

		for(i = 0; i < songs_list.length; i++)
		{
			var song = songs_list[i];
			var audio = document.createElement('audio');
			for(j = 0; j < song.sources.length; j++)
			{
				var source = document.createElement('source');
				source.src = song.sources[j];
				audio.appendChild(source);

				
			}
			var span = document.createElement('span');
			span.innerHTML = '<a href="' + song.info + '">' + song.title + '</a>';
			audio.appendChild(span);

			if(i == 0)
			{
				audio.controls = true;
				var titleSpan = document.createElement('span');
				titleSpan.className = 'title';
				titleSpan.innerHTML = span.innerHTML + '<br />';
				container.appendChild(titleSpan);
			}
			else { audio.controls = false; }

			container.appendChild(audio);

			audio.addEventListener('ended', function() {
				var par = this.parentNode;
				var audioObjs = par.querySelectorAll('audio');
				var myIndex = -1;
				for(var i = 0; i < audioObjs.length; i++)
				{
					if(audioObjs[i] == this)
					{
						myIndex = i;
					}
				}
				var nextIndex = (myIndex + 1) % audioObjs.length;
				this.controls = false;
				audioObjs[nextIndex].play();
			}, false);

			audio.addEventListener('play', function() {
				var par = this.parentNode;
				var span = par.querySelector('.title');
				if(span) { par.removeChild(span); }

				var newSpan = document.createElement('span');
				var mySpan = this.querySelector('span');
				newSpan.innerHTML = mySpan.innerHTML + '<br/>';
				newSpan.className = 'title';
				par.insertBefore(newSpan, par.querySelector('audio'));
				this.controls = true;
			}, false);
		}
	}
}