{% load staticfiles %}
<!DOCTYPE html>
<html>
    <head>
        <title>django-summernote frame</title>
        {% for url in css %}
        <link href="{{ url }}" rel="stylesheet">{% endfor %}
        {% for url in js %}
        <script src="{{ url }}"></script>{% endfor %}
    </head>
    <body>
        <div id="summernote"></div>
    </body>
    <script>
    $(function() {
        var iframe = window.parent.document.getElementById('{{ id }}_iframe');
        var src = window.parent.document.getElementById('{{ id_src }}');
        var imageInput = null;
        $(src).hide(); // for IE

        // get settings from parent window
        var settings = window.parent.settings_{{ id }};

        // include summernote language pack, synchronously
        if( settings.lang != 'en-US' ) {
            $.ajaxSetup({async:false});
            $.getScript('{{ STATIC_URL }}django_summernote/lang/summernote-' + settings.lang + '.min.js');
            $.ajaxSetup({async:true});
        }

        $('#summernote').html(src.value);

        $('#summernote').summernote($.extend(settings, {
            callbacks: {
                onInit: function() {
                    var nEditor = $('.note-editor');
                    var nToolbar = $('.note-toolbar');
                    var nEditable = $('.note-editable');
                    var setHeight = parseInt(
                        settings.height  // default
                        - nToolbar.outerHeight()  // toolbar height including margin,border,padding
                        - (nEditable.innerHeight() - nEditable.height())  // editable's padding
                        - (nEditor.outerHeight() - nEditor.innerHeight())  // editor's border
                    );
                    
                    nEditable.outerHeight(setHeight);
                    $(iframe).height(settings.height);
                },
                onBlur: function() {
                    src.value = $("#summernote").summernote('code');
                },
                {% if not disable_upload %}
                onImageUpload: function(files) {
                    var sn = $(this);
                    // custom attachment data
                    var attachmentData = src.dataset;
                    imageInput = $('.note-image-input');
                    imageInput.fileupload();
                    var jqXHR = imageInput.fileupload('send', 
                        {
                            files: files,
                            formData: $.extend({csrfmiddlewaretoken: '{{ csrf_token }}'}, attachmentData),
                            url: settings.url.upload_attachment,
                        })
                        .success(function (result, textStatus, jqXHR) {
                            data = $.parseJSON(result);
                            $.each(data.files, function (index, file) {
                                sn.summernote("insertImage", file.url);
                            });
                        })
                        .error(function (jqXHR, textStatus, errorThrown) {
                            // if the error message from the server has any text in it, show it
                            var msg = jqXHR.responseText;
                            if (msg.length > 0) {
                                alert('Got an error uploading an image: ' + msg);
                            }
                            // otherwise, show something generic
                            else {
                                alert('Got an error while uploading images.');
                            }
                        });
                 }
                 {% endif %}
            }
        }));

        // Hide resize bar - resizing iframe is not prepared, yet.
        $('.note-resizebar').hide();
    });
    </script>
</html>
