var mySortables;

// Initialisation function
window.addEvent('domready', function()
{
	// When "save changes" clicked, save!
	$('save').addEvent('click', saveChanges);
	
	// Create a new Sortables instance. Pass this the ID of your list
	mySortables = new Sortables('sortable',
	{
		// Make a clone when dragging (element "floats" from the list_
		clone: true,
		// Do fancy animation when dragging has finished
		revert: true,
		// Called when we start dragging the element
		onStart: function(element, clone)
		{
			element.setStyle('visibility', 'hidden');
			clone.addClass('clone');
		}
	});
});

function saveChanges()
{
	$('loading').setStyle('display', 'inline');
	$('save').set('html', 'Saving...');
	$('save').disabled = true;
	
	// Get list of item order
	var items = mySortables.serialize(false, function(element, index)
	{
		return 'items[]=' + element.get('id');
	}).join('&');
	
	// Send the AJAX request
	var myRequest = new Request(
	{
		method: 'post',
		url: '/post.php',
		data: items,
		onSuccess: function(data)
		{
			alert('Server returned: ' + data);
			$('loading').setStyle('display', 'none');
			$('save').set('html', 'Save changes');
			$('save').disabled = false;
		}
	}).send();
}