<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></th><th>Namn</th><th>Taggar</th><th>Åtgärd</th>
	</tr>
	
	<? foreach ($pictures as $i => $picture): ?>
		<tr id="rowid<?=$picture['id']?>" class="<?= $i % 2 == 0 ? 'odd' : 'even' ?>">
			<td>
				<img src="<?= galleryPictures::getThumbnailFilename($picture['filename'], 'mini') ?>" alt="" />
			</td>
			<td class="editableSingle name id<?= $picture['id'] ?>">
				<?= $picture['name'] ?>
			</td>
			<td class="editableSingle tags id<?= $picture['id'] ?>">
				<?= implode(', ', $picture['tags']) ?>
			</td>
			<td>
				<a href="javascript:;" onclick="remove(<?=$picture['id']?>, this)">Ta bort</a>
				<a href="<?=$picture['filename']?>">Öppna</a>
			</td>
		</tr>
	<? endforeach; ?>
	
</table>


<script type="text/javascript">

var previewFiles = {};
<? foreach ($pictures as $picture): ?>
	previewFiles[<?= $picture['id'] ?>] = '<?= galleryPictures::getThumbnailFilename($picture['filename'], 'medium') ?>';
<? endforeach; ?>

var mousePos = { x: 0, y: 0 };
$().mousemove(function(e){
	mousePos = { x: e.pageX, y: e.pageY };
});


function previewPictureInit()
{
	$('body').prepend('<div id="preview_picture_container"></div>');
	$('tr').mousemove(function(){
		if (typeof($(this).attr('id')) != 'undefined') {
			var filename = previewFiles[$(this).attr('id').match(/rowid([0-9]+)/)[1]];
			previewPicture(filename);
		}
	}).mouseout(hidePreviewPicture);
}

prevSrc="";
function previewPicture(src)
{
	if (src!=prevSrc)
	{
		$('#preview_picture_container').
			html("<img src=\"" + src + '?' + Math.ceil(100000*Math.random()) + "\">").
			css('position', 'absolute').
			css('top', mousePos.y+10 + 'px').
			css('left', mousePos.x+10 + 'px').
			css('z-index', 999).
			show();
		
		prevSrc=src;
	}
	else
	{
		$('#preview_picture_container').
			css('position', 'absolute').
			css('top', mousePos.y+10 + 'px').
			css('left', mousePos.x+10 + 'px').
			css('z-index', 999).
			show();
	}
}

function hidePreviewPicture()
{
	$('#preview_picture_container').hide();
}

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

$(document).ready(function(){
	previewPictureInit();
	$.inlineEdit({
		'name': '?p=g&a=e&t=pn&id=',
		'tags': '?p=g&a=e&t=pt&id='
	}, { animate: false });
});

</script>