{% load i18n %}
    <div id='multimedia_list'>
    {% for formset in formsets %}
        {{ formset.management_form }}
        {% if formset.errors %}<div class='errors'>
        {% for dict in formset.errors %}
            {% for error in dict.values %}
                {{ error }}
            {% endfor %}
        {% endfor %}
        </div>{% endif %}
    {% endfor %}
        <ul id='multimedia_list_content'>
    {% for formset in formsets %}
        {% for frm in formset%}
            {% if not forloop.last %}
            <li>
            {%if forloop.first %}{% for hidden in frm.hidden_fields %}
              {{ hidden }}
            {% endfor %}{% endif %}
            {% for field in frm.visible_fields %}
            {% if field.name == "name" %}
                <span class='value'>{{ field.field.value }}</span>
            {% endif %}
                <span class='hidden'>{{field}}</span>
            {% endfor %}
            </li>
            {% endif %}
        {% endfor %}
    {% endfor %}
        </ul>
        <button id='add_multimedia_list'>{% trans "Add" %}</button>
    </div>
    <div id='multimedia_form' title="{% trans "Add multimedia from your computer or a site"%}">
        <div class='notice'>{% trans "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu luctus ipsum. Donec vel urna a turpis consectetur consectetur. Vestibulum ut enim vel odio porta vulputate." %}
        </div>
        <div class="fieldWrapper">
            <label for="multimedia_name">{% trans "Name" %}</label>
            <input type='text' id='multimedia_name' name='multimedia_name'>
        </div>
        <div class="fieldWrapper">
        <input type='radio' value='image' id='media_type_image' name="multimedia_type"> {% trans "Image" %}
        <input type='radio' value='other' id='media_type_other' name="multimedia_type"> {% trans "Audio, video, other..." %}
        </div>
        <div class="fieldWrapper">
        <label id="multimedia_file_label">{% trans "Download"%}</label> <input type='file' name='picture-0-picture' id='picture-0-picture' class='multimedia_file'>
        <p class='notice'>{% trans "Or" %}</p>
        <label for='multimedia_url'>{% trans "Web address"%}</label> <input type='text' name='multimedia_url' id='multimedia_url'>
        </div>
        <button id='add_media'>{% trans "Add" %}</button>
    </div>
    <script text='text/javascript'>
        $(function(){
            var current_image_number = 0;
            var current_multi_number = 0;
            $("#multimedia_form").dialog({autoOpen:false,
                                          modal:true,
                                          resizable:false,
                                          width:400,
                                          height:250});
            $('#add_multimedia_list').click(function(){
                $("#multimedia_form").dialog("open");
                return false;
            });
            $('#media_type_image').click(function(){
                $("#multimedia_file_label").removeClass('disabled');
                $("#multimedia_file").removeAttr('disabled');
            });
            $('#media_type_other').click(function(){
                $("#multimedia_file_label").addClass('disabled');
                $("#multimedia_file").attr('disabled', 'disabled');
            });
            $('#add_media').click(function(){
                // test the validity
                if (!$('#multimedia_name').val()){
                    alert("{% trans "You must provide a name." %}")
                    return false;
                }
                if (!$('#media_type_image:checked').val() && 
                        !$('#media_type_other:checked').val()){
                    alert("{% trans "You must choose a media type." %}")
                    return false;
                }
                if ($('#media_type_image:checked').val()
                        && !$("#picture-"+current_image_number+"-picture").val()
                        && !$("#multimedia_url").val()){
                    alert("{% trans "You must provide a file or a web address." %}")
                    return false;
                }
                if ($('#media_type_other:checked').val()
                        && !$("#multimedia_url").val()){
                    alert("{% trans "You must provide a web address." %}")
                    return false;
                }
                // recopy field in the main form
                var prefix = '';
                var contener = $("#multimedia_list_content")
                content = '<li';
                if ($('#media_type_image:checked').val()){
                    content += ' class="picture">';
                    prefix = 'picture-' + current_image_number;
                } else {
                    content += ' class="multimedia">';
                    prefix = 'multimedia-' + current_multi_number;
                    content += '<input type="hidden" name="'+prefix+'-multimedia_type" value="{{auto_type_id}}" />\n';
                    content += '<input type="hidden" name="'+prefix+'-url" value="'+$("#multimedia_url").val()+'" />\n';
                }
                content += '<input type="hidden" name="'+prefix+'-id"/>\n';
                content += '<input type="hidden" name="'+prefix+'-miniature" value="1"/>\n';
                content += '<input type="hidden" name="'+prefix+'-DELETE" value=""/>\n';
                content += '<input type="hidden" name="'+prefix+'-name" value="'+ $("#multimedia_name").val() +'"/>\n';
                content += $("#multimedia_name").val();
                content += " <img class='remove-media' src='{{STATIC_URL}}chimere/img/close.png'/>";
                content += '</li>';
                contener.append(content);
                if ($('#media_type_image:checked').val()
                        && $("#picture-"+current_image_number+"-picture").val()){
                    // the file item cannot be recopied - security issue
                    // so it is hiden then a new one is added
                    //$('#picture-'+current_image_number+'-picture').hide();
                    var file_item = $('#picture-'+current_image_number+'-picture');
                    //var cloned = file_item.clone(true);
                    //file_item.hide();
                    //cloned.insertAfter(file_item);
                    file_item.appendTo($("#multimedia_list_content li").last());
                }
                $("#multimedia_form").dialog("close");
                $(".remove-media").click(function(){
                    $(this).parents('li').remove();
                });
                return false;
            });
        });
    </script>

