{config_load file=$language_path section="general"}
{literal}
<style>
	#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
	#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.1em; height: 15px; }
	#sortable li span { position: absolute; margin-left: -1.1em; }
</style>
<script>
	{/literal}
	var save_sort_url = '{$LINK_SAVE_SORT}';
	{literal}
(function($) {
	
	$(document).ready(function() {
		$( "#sortable" ).sortable();
		console.log('sortable zugewiesen');
		$( "#sortable" ).disableSelection();
		var mw = $('#modal_window').dialog();
		console.log('sortable selection disabled');
		$('#save_sort').click(function(){
			console.log("save sort clicked");
			$.ajax({
				url: save_sort_url,
				contentType: "application/json; charset=utf-8",
				data: $('#sortable').sortable('serialize'),
				dataType: 'json',
				success: function(json){
					alert(json.MSG);
					$(mw).dialog('close');
				},
				error: function(XMLHttpRequest, textStatus, errorThrown){
					alert(XMLHttpRequest.status+"\r\n"+XMLHttpRequest.responseText+': '+errorThrown);
				}
			});
		});
	});
})(jQuery);
</script>
{/literal}

<div class="main">
	<p>{$TEXT_PRIORITY_INTRO}</p>
	<form id="sort_form">
	<ul id="sortable">
		{foreach from=$storages item=st}
		<li id="spID_{$st.id}" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>{$st.storage} / {$st.storage_place}</li>
		{/foreach}
	</ul>
	</form>
	<input type="button" value="{#save#}" id="save_sort" />
</div>