{% extends 'base.html' %}
{% block js %}


<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
        type="text/javascript" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">
var saveOrder = function() {
    var url = "{% url 'reorder-fridge-items' category.id %}?";
    var worktodo = 0;
    jQuery("#items li").each(function(index,element) {
       worktodo = 1;
       var id = jQuery(element).attr('id').split("-")[1];
       url += "item_" + index + "=" + id + ";";
    });
    if (worktodo == 1) {
        var req = new XMLHttpRequest();
        req.open("POST",url,true);
        req.send(null);
    }
};

</script>

<style type="text/css">
	.draghandle {float: left;}
	#items {list-style-type: none; margin: 0; padding: 0;}
	#items li { margin: 0 3px 3px 3px; padding: 0.4em;
	padding-left: 1.5em; 
          background-color: #ddd;
	}
	#items li span { position: absolute; margin-left: -1.3em; }
	.dragging {border: #f60 solid 1px;}
	</style>

{% endblock %}
{% block content %}

<h2><a href="{% url 'fridge-edit-categories' category.fridgeblock.id %}">Fridge</a> Category {{category.display_number}}: {{ category.label }}</h2>

<form action="." method="post">
<table width="100%">
{{ category.edit_form.as_table }}
</table>
<input type="submit" value="save" />
</form>

{% if category.item_set.count %}
<h2>Items</h2>
<ul class="dragparent" id="items">
{% for item in category.item_set.all %}
<li class="draggable" id="item-{{item.id}}">
<span title="drag to reorder items" class="draghandle ui-icon ui-icon-arrowthick-2-n-s"></span>[<a href="{% url 'delete-fridge-item' item.id %}">delete</a>] 
Item {{ item.display_number }}: 
<a href="{% url 'edit-fridge-item' item.id %}">{{item.label}}</a></li>
{% endfor %}
</ul>
{% endif %}

<h2>Add Item</h2>
<form action="add_item/" method="post">
<table width="100%">
{{ category.add_item_form.as_table}}
</table>
<input type="submit" value="add item" />
</form>


<script type="text/javascript">
jQuery(function() {
  jQuery("#items").sortable({
    containment : 'parent'
    ,axis : 'y'
    ,tolerance: 'pointer'
    ,activeClass: 'dragging'
    ,handle: '.draghandle'
    ,stop: function (event,ui) { saveOrder();}
  });
  jQuery("#items").disableSelection();
});
</script>


{% endblock %}
