var TYPE_LOCATION = 0;
var TYPE_TITLE = 1;
var TYPE_CREATOR = 2;
var TYPE_ALBUM = 3;
var TYPE_ANNOTATION = 4;
var TYPE_INFO = 5;
var TYPE_IMAGE = 6;
var TYPE_TRACKNUM = 7;
var TYPE_DURATION = 8;

var COUNT_COLUMNS = 10;



function htmlentities(str) {
	str = str.replace(/&/g, "&");
	str = str.replace(/"/g, """);
	str = str.replace(/</g, "&lt;");
	str = str.replace(/>/g, "&gt;");
	return str;
}

function nl2br(str) {
	str = str.replace(/\n/g, "<br/>");
	return str;
}

function update() {
	var playlist = document.getElementById("playlist");
	var rows = playlist.getElementsByTagName("tr");
	
	var code = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";
	code += "<playlist version=\"1\" xmlns=\"http://xspf.org/ns/0/\">\n";
	code += "  <trackList>\n";
	
	for (var index = 0; index < rows.length; index++) {
		var inputFields = rows[index].getElementsByTagName("input");
		
		code += "    <track>\n";
		
		for (var j = 0; j < inputFields.length; j++) {
			
			var type = "";
			var value = inputFields[j].value;
			
			switch (j) {
			case TYPE_LOCATION:
				type = "location";
				break;
			case TYPE_TITLE:
				type = "title";
				break;
			case TYPE_CREATOR:
				type = "creator";
				break;
			case TYPE_ALBUM:
				type = "album";
				break;
			case TYPE_ANNOTATION:
				type = "annotation";
				break;
			case TYPE_INFO:
				type = "info";
				break;
			case TYPE_IMAGE:
				type = "image";
				break;
			case TYPE_TRACKNUM:
				type = "trackNum";
				break;
			case TYPE_DURATION:
				type = "duration";
				break;
			}
			
			if (type == "location" || value != "") {
				code += "      <" + type + ">" + htmlentities(value) + "</" + type + ">\n";
			}
			
		}
		
		code += "    </track>\n";
	}
	
	code += "  </trackList>\n";
	code += "</playlist>";
	
	document.getElementById("playlistcode").innerHTML = nl2br(htmlentities(code));
}

/**
 * Updates the event listeners for the "add" and "remove" functions.
 */
function updateTable() {
	var playlist = document.getElementById("playlist");
	var rows = playlist.getElementsByTagName("tr");
	
	for (var index = 0; index < rows.length; index++) {
		var row = rows[index];
		var cols = row.getElementsByTagName("td");
		
		var content = "<a href=\"#\" title=\"add new track after this one\" onclick=\"addTrack(" + (index + 1) + "); return false;\">+</a> <a href=\"#\" title=\"remove this track\" onclick=\"removeTrack(" + index + "); return false;\">-</a>";
		cols[cols.length - 1].innerHTML = content;
	}
}

function addTrack(index) {
	var playlist = document.getElementById("playlist");
	var rows = playlist.getElementsByTagName("tr");
	
	// create new track
	var newRow = document.createElement("tr");
	for (var i = 0; i < COUNT_COLUMNS; i++) {
		var newColumn = document.createElement("td");
		
		if (i < COUNT_COLUMNS - 1) {
			// normal column with input field
			var inputField = document.createElement("input");
			inputField.setAttribute("type", "text");
			inputField.onchange = update;
			inputField.onkeyup = update;
			newColumn.appendChild(inputField);
		} else {
			// bonus column
			newColumn.setAttribute("class", "options");
		}
		
		newRow.appendChild(newColumn);
	}
	
	// append track
	if (index == rows.length) {
		playlist.appendChild(newRow);
	} else {
		playlist.insertBefore(newRow, rows[index]);
	}
	
	updateTable();
	update();
}

function removeTrack(index) {
	var playlist = document.getElementById("playlist");
	var rows = playlist.getElementsByTagName("tr");
	
	if (rows.length > 1 && window.confirm("Are you sure to delete this track?")) {
		playlist.removeChild(rows[index]);
		
		updateTable();
		update();
	}
}

function init() {
	addTrack(0);
	document.getElementById("playlist").getElementsByTagName("tr")[0].getElementsByTagName("input")[0].value = "example.mp3";
	update();
}