<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		(function($) {
			$.extend({
				action: function() {
					// Reihenfolge und Status in Variable "result" speichern
					var result = new Array();
					
					jQuery.each($("li", "#columns"), function() {
						var input = $(this).find(':input');
						if (input.is(':checked')) {
							result.push({
								"name": input.val(),
								"value": "1"
							});
						} else {
							result.push({
								"name": input.val(),
								"value": "0"
							});
						}
					});
					
					
					// AJAX starten
					$.ajax({
						type:     "POST",
						url:      "action.php",
						dataType: "json",
						data: {
							action: "custom",
							sid:    "$sid",
							input: result
						},
						beforeSend: function() {
							$('aside').stop(true, true).hide().text('%saving% ...').fadeIn();
						},
						error: function(data) {
							if (data && data.responseText)
								$('aside').text("").html(data.responseText).fadeIn();
						},
						success:    function(data) {
							if (data && data.message) 
								 $('aside').text(data.message);
							else $('aside').fadeOut();
							
							// Weiterleiten, falls Parameter uebergeben wurde
							if (data && data.href) document.location.href = data.href;
						}
					});
				}
			});
		})(jQuery);
		
		$('#columns').sortable({
			placeholder: "placeholder"
		});
		
		$('#columns').bind("change sortupdate", function() {
			$.action();
		});
	});
</script>

<article>
	<h1>%custom%</h1>
	<p>%customize_columns_desc%</p>
</article>
<article>
	<ul id="columns" class="sortable"></ul>
</article>
<div class="clear"></div>