<a href="javascript:;" id="new_album_button" onclick="$(this).hide();$('#new_album_container').show();">Skapa nytt album</a>

<div id="new_album_container" style="display:none">
	<div><label for="name">Namn:</label></div><input type="text" id="name" />
	<div><label for="description">Beskrivning:</label></div><textarea id="description"></textarea>
	<div><label for="tags">Taggar:</label></div><input type="text" id="tags" />
	
	<div><input type="button" value="Skapa" onclick="newAlbum()" />
	eller <a href="javascript:;" onclick="$('#new_album_container').hide();$('#new_album_button').show();">Avbryt</a></div>
</div>

<p>För att redigera ett fält, tryck på det. Du sparar sedan genom att antingen trycka på Save-knappen eller Enter på tangentbordet.</p>

<table cellspacing="0" class="dataTable">
	<tr>
		<th>Namn</th><th>Beskrivning</th><th>Taggar</th><th>Åtgärd</th>
	</tr>
	
	<? foreach ($albums as $i => $album): ?>
		<tr id="rowid<?= $album['id'] ?>" class="<?= $i % 2 == 0 ? 'odd' : 'even' ?>">
			<td class="editableSingle name id<?= $album['id'] ?>"><?=$album['name']?></td>
			<td class="editableMulti description id<?= $album['id'] ?>"><?=$album['description']?></td>
			<td class="editableSingle tags id<?= $album['id'] ?>"><?=implode(', ', $album['tags'])?></td>
			<td>
				<a href="javascript:;" onclick="remove(<?=$album['id']?>)">Ta bort</a>
			</td>
		</tr>
	<? endforeach; ?>
	
</table>

<script type="text/javascript">

$(document).ready(function(){
	$.inlineEdit({
		'name': '?p=g&a=e&t=an&id=',
		'description': '?p=g&a=e&t=ad&id=',
		'tags': '?p=g&a=e&t=at&id='
	}, { animate: false });
});

function newAlbum()
{
	var name = $('#name').val();
	var description = $('#description').val();
	var tags = $('#tags').val();
	
	$.ajax({
		type:'post',
		url:'?p=g&a=n',
		data: 'a=new_album&name='+name+'&description='+description+'&tags='+tags,
		success:function(msg){
			if (msg==1)
			{
				/*$('#new_album_container').hide();
				$('#new_album_button').show();
				$('name').val('');
				$('description').val('');
				$('tags').val('');*/
				window.location.reload();
			}
			else
			{
				alert('Ett fel inträffade');
			}
		},
		error:function(){
			alert('Ett fel inträffade');
		}
	});
}

function remove(id)
{
	if (!confirm('Är du säker?'))
		return false;
	$.ajax({
		url:'?p=g&a=r&t=a&id=' + id,
		success:function(msg){
			if (msg==1)
			{
				$('#rowid'+id).hide();
			}
			else
			{
				alert('Ett fel inträffade');
			}
		},
		error: function(){
			alert('Ett fel inträffade');
		}
	});
}

</script>