{*

/*
*
*	Pixaria Gallery
*	Copyright Jamie Longstaff
*
*/

*}{include_template file="admin.snippets/admin.html.header.tpl"}




<div id="admin-outerdiv">

<div id="admin-innerdiv">



<form action="{$base_url}{$fil_admin_gallery}" name="gallery_edit" method="post" onsubmit="return saveGallery();">

<input type="hidden" name="gallery_order" value="" />

<input type="hidden" name="gallery_id" value="{$gallery_id}" />

<input type="hidden" name="cmd" value="saveChangedImageOrder" />
	
<table class="table-form">

<thead>

<tr>
<th colspan="3">Manually change the image order:</th>
</tr>

</thead>

<tbody>

<tr class="{cycle values='list-one,list-two' advance='0'}">
<th>&nbsp;</th>
<td style="width:33%;">

<p class="title">Drag and drop thumbnails to rearrange images</p>

<p>Listed below are the images in this gallery shown in the order they will be shown to people browsing this gallery.</p>

<p>To change the order in which the images are displayed, click and drag a thumbnail to change its position within the gallery.  When the images are all in the order you want, click the save changes button.</p>

<p><strong>N.B. To view a larger version of an image, double click the thumbnail image.<strong></p>

</td>
<td>&nbsp;</td>
</tr>

<tr class="{cycle values='list-one,list-two'}">
<th>&nbsp;</th>
<td><input type="submit" value="Save changes to image order" style="width:100%;" class="formbutton" /></td>
<td>&nbsp;</td>
</tr>

</tbody>

</table>

</form>

<table class="table-thumbnail">

<thead>
				
	<tr>
	<th>Click and drag to rearrange the thumbnails:</th>
	</tr>
	
</thead>

<tbody>

<tr>
<td>
	
	<div id="image-small">
	
		{section name="images" loop=$image_id}
			
		<div class="thumb-sml" id="image_{$image_id[images]}" style="width:190px; height:190px; cursor:move;">
		
		<table>
		
		<thead>
		<tr>
		<th colspan="2"><img src="{$base_url}{$fil_admin_image_output}?file={$small_path[images]}&amp;" {$small_dims[images].3} border="0" title="Double click to view this image at full size." class="thumbnail" alt="{$image_filename[images]}" ondblclick="javascript:imagePreviewWindow('{$base_url}{$fil_admin_image_output}?html={$comp_path[images]}&amp;', '{$comp_width[images]}', '{$comp_height[images]}');" /></th>
		</tr>
		</thead>
		
		<tbody>
									
			<tr>
			<th>Date:</th>
			<td>{$image_date[images]|date_format}</td>
			</tr>
			
			<tr>
			<th>Title:</th>
			<td>{$image_title[images]|truncate:20:"...":true}</td>
			</tr>
			
			<tr>
			<th>Filename:</th>
			<td>{$image_filename[images]|truncate:20:"...":true}</td>
			</tr>
							
		</tbody>
		
		</table>
		
		</div>
			
		{/section}
	
<br clear="all"/>

</div>

</td>
</tr>

</tbody>

</table>



<script type="text/javascript" language="javascript">
// <![CDATA[
{literal}

Sortable.create('image-small',{dropOnEmpty:false,tag:'div',overlap:'vertical',constraint:false,

	onUpdate:function() {
	
	var list = document.getElementById('image-small');
	var items = list.getElementsByTagName('div');
	var ids = '';
		
	for (var i = 0; i < items.length; i++)  {
		if (i > 0) ids += '|';
		var id = items[i].getAttribute('id');
		ids += id;
	}
	
	document.gallery_edit.gallery_order.value = ids;
	return true;

	}

})

function saveGallery() {

	var list = document.getElementById('image-small');
	var items = list.getElementsByTagName('div');
	var ids = '';
		
	for (var i = 0; i < items.length; i++)  {
		if (i > 0) ids += '|';
		var id = items[i].getAttribute('id');
		ids += id;
	}
	
	document.gallery_edit.gallery_order.value = ids;
	return true;

}



{/literal}
// ]]>
</script>

</div>

</div>


<!-- INCLUDE THE BOTTOM HTML TEMPLATE -->
{include_template file="admin.snippets/admin.html.footer.tpl"}