{% load i18n adminmedia %}

<!-- group -->
<div class="group tabular{% if inline_admin_formset.opts.classes %} {{ inline_admin_formset.opts.classes|join:" " }}{% endif %}"
    id="{{ inline_admin_formset.formset.prefix }}-group" >
    <h2>{{ inline_admin_formset.opts.verbose_name_plural|capfirst }}</h2>
    <ul class="tools">
        <li class="add-handler-container"><a href="javascript://" class="icon add-handler" title="{% trans 'Add Another' %}"> </a></li>
    </ul>
    {{ inline_admin_formset.formset.management_form }}
    {{ inline_admin_formset.formset.non_form_errors }}
    <!-- container -->
    <div class="module table">
        <div class="module thead">
            <div class="tr">
                {% for field in inline_admin_formset.fields %}
                    {% if not field.widget.is_hidden %}
                        <div class="th {{ field.label|lower }}{% if field.required %} required{% endif %}">{{ field.label|capfirst }}</div>
                    {% endif %}
                {% endfor %}
                {% if inline_admin_formset.formset.can_delete %}<div class="th">&nbsp;</div>{% endif %}
            </div>
        </div>
        {% for inline_admin_form in inline_admin_formset %}
            <!-- element -->
            <div class="module tbody{% if inline_admin_form.original or inline_admin_form.show_url %} has_original{% endif %}{% if forloop.last %} empty-form{% endif %}"
                id="{{ inline_admin_formset.formset.prefix }}{% if not forloop.last %}{{ forloop.counter0 }}{% else %}-empty{% endif %}">
                {% if inline_admin_form.form.non_field_errors %}
                    <ul class="errorlist"><li>{{ inline_admin_form.form.non_field_errors }}</li></ul>
                {% endif %}
                <h3 style="display: none;"><b>{{ inline_admin_formset.opts.verbose_name|title }} #{{ forloop.counter }}</b>&nbsp;&nbsp;{% if inline_admin_form.original %} {{ inline_admin_form.original }}{% endif %}</h3>
                {% spaceless %}
                {% for fieldset in inline_admin_form %}
                    {% for line in fieldset %}
                        {% for field in line %}
                            {% if field.is_hidden %} {{ field.field }} {% endif %}
                        {% endfor %}
                    {% endfor %}
                {% endfor %}
                {% endspaceless %}
                <div class="tr">
                    {% for fieldset in inline_admin_form %}
                        {% for line in fieldset %}
                            {% for field in line %}
                                <div class="td {{ field.field.name }} {% if field.field.errors %} error{% endif %}">
                                    {% if field.is_readonly %}
                                        <p>{{ field.contents }}</p>
                                    {% else %}
                                        {{ field.field }}
                                        {{ field.field.errors.as_ul }}
                                    {% endif %}
                                </div>
                            {% endfor %}
                        {% endfor %}
                    {% endfor %}
                    <div class="td tools">
                        {% spaceless %}
                        <ul class="tools">
                            {% if inline_admin_form.show_url %}<li class="viewsite-link-container"><a href="../../../r/{{ inline_admin_form.original_content_type_id }}/{{ inline_admin_form.original.id }}/" class="icon viewsite-link" title="{% trans 'View on Site' %}"> </a></li>{% endif %}
                            {% if inline_admin_formset.opts.sortable_field_name %}
                                <li class="drag-handler-container"><a href="javascript://" class="icon drag-handler" title="{% trans 'Move Item' %}"></a></li>
                            {% endif %}
                            {% if inline_admin_formset.formset.can_delete %}<li class="delete-handler-container">{{ inline_admin_form.deletion_field.field }}<a href="javascript://" class="icon {% if inline_admin_form.original %}delete-handler{% else %}remove-handler{% endif %}" title="{% trans 'Remove' %}"> </a>{% endif %}
                        </ul>
                        {% endspaceless %}
                    </div>
                    {{ inline_admin_form.fk_field.field }}
                    {% if inline_admin_form.has_auto_field %}{{ inline_admin_form.pk_field.field }}{% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
    <div class="module add-item">
        <a href="javascript://" class="add-handler">{% blocktrans with inline_admin_formset.opts.verbose_name|title as verbose_name %}Add another {{ verbose_name }}{% endblocktrans %}</a>
        <ul class="tools">
            <li class="add-handler-container"><a href="javascript://" class="icon add-handler" title="{% trans 'Add Item' %}"> </a></li>
        </ul><br clear="all" />
    </div>
</div>

<script type="text/javascript">
(function($) {
    $(document).ready(function($) {
        
        $("#{{ inline_admin_formset.formset.prefix }}-group").inline({
            prefix: "{{ inline_admin_formset.formset.prefix }}",
            deleteCssClass: "delete-handler",
            emptyCssClass: "empty-form",
            onAdded: tabular_onAdded
        });
        
{% if inline_admin_formset.opts.sortable_field_name %}
        /**
         * sortable inlines
         * uses onAdded() and onRemoved() of inline() call above
         * uses sortable_updateFormIndex() and is_form_filled() from change_from.html
         */
        
        // hide sortable_field(_name) from form
        // hide div.td.{{ field.name }}
        var position_nodes = $("#{{ inline_admin_formset.formset.prefix }}-group").find("div.td.{{ inline_admin_formset.opts.sortable_field_name }}");
        position_nodes.hide();
        
        // hide its header (div.th) too (hard)
        // "div.th.{{ inline_admin_formset.opts.sortable_field_name }}" is not correct because
        // its div.th.<field.label> (and not name, see line#18).
        
        // so let's get the "position/idx" the first position div
        var tabular_row = position_nodes.first().parent().children("div.td");
        // get the "position" (== i) in the "table"
        for (var i = 0; i < tabular_row.length; i++) {
            if ($(tabular_row[i]).hasClass("{{ inline_admin_formset.opts.sortable_field_name }}")) break;
        }
        // we have the same order in the header of the "table"
        // so delete the div at the "position" (== i)
        var position_header = $("#{{ inline_admin_formset.formset.prefix }}-group").find("div.th")[i];
        // and hide
        $(position_header).hide()
        
    {% if errors %}
        // sort inline
        var container = $("#{{ inline_admin_formset.formset.prefix }}-group > div.table"),
            dynamic_forms = container.find("div.dynamic-form"),
            updated = false,
            curr_form,
            real_pos;
        
        // loop thru all inline forms
        for (var i = 0; i < dynamic_forms.length; i++) {
            curr_form = $(dynamic_forms[i]);
            // the real position according to the sort_field(_name)
            real_pos = curr_form.find("div.{{ inline_admin_formset.opts.sortable_field_name }}").find("input").val();
            // if there is none it's an empty inline (=> we are at the end)
            // TODO: klemens: maybe buggy. try continue?
            if (!real_pos) continue;
            
            real_pos = parseInt(real_pos, 10);
            
            // check if real position is not equal to the CURRENT position in the dom
            if (real_pos != container.find("div.dynamic-form").index(curr_form)) {
                // move to correct postition
                curr_form.insertBefore(container.find("div.dynamic-form")[real_pos]);
                // to update the inline lables
                updated = true;
            }
        }
        
    {% endif %}
        
        $("#{{ inline_admin_formset.formset.prefix }}-group > div.table").sortable({
            // drag&drop the inlines with the drag-handler only
            handle: "a.drag-handler",
            // very scary magic after drap&drop operations
            // pretty similar to inline() widget's removeHandler()
            // but removeHandler() can remove the current form and just reorder the rest
            // if we would do the same after drag&drop we would loose some form values
            // because while looping inputs would have the same names and maybe overwrite each other.
            placeholder: 'ui-sortable-placeholder',
            forcePlaceholderSize: true,
            items: "div.dynamic-form",
            axis: "y",
            start: function(evt, ui) {
                ui.item.hide()
                ui.placeholder.height(ui.placeholder.height()-4);
                //sadly we have to do this every time we start dragging
                var template = "<div class='tr'>",
                    // minus 1 because we don't need the "sortable_field_name row"
                    len = ui.item.find("div.tr").children("div.td").length - 1;
                
                for (var i = 0; i < len; i++) {
                    template += "<div class='td'></div>"
                }
                
                template += "</div>"
                ui.placeholder.addClass("tbody module").append(template);
            },
            update: function(evt, ui) {
                ui.item.show();
            },
            appendTo: 'body',
            forceHelperSize: true,
            containment: '#{{ inline_admin_formset.formset.prefix }}-group > div.table',
            tolerance: 'pointer',
            helper: function(evt, elem) {
                var helper = $("<div class='module table' />");
                helper.html(elem.clone());
                return helper;
            },
        });
        
        // sets the new positions onSubmit (0 - n)
        $("#{{ opts.module_name }}_form").bind("submit", function(){
            var forms = $("#{{ inline_admin_formset.formset.prefix }}-group").find("div.dynamic-form"),
                form,
                idx = 0;
            for (var i = 0; i < forms.length; i++) {
                form = $(forms[i]);
                
                if (is_form_filled(form)) {
                    form.find("div.{{ inline_admin_formset.opts.sortable_field_name }}").find("input").val(idx);
                    idx++;
                }
            }
        });
        
{% endif %}
    
    });    
})(django.jQuery);
</script>