{% load staticfiles %}
<!DOCTYPE html>
<html>
    <head>
        <title>Summernote for django</title>
        <!-- include libries(jQuery, bootstrap, fontawesome) -->
        <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> 
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

        <!-- include jQuery File Upload js -->
        <script src="{% static 'django_summernote/jquery.ui.widget.js' %}"></script>
        <script src="{% static 'django_summernote/jquery.iframe-transport.js' %}"></script>
        <script src="{% static 'django_summernote/jquery.fileupload.js' %}"></script>

        <!-- include summernote css/js -->
        <script src="{% static 'django_summernote/summernote.min.js' %}"></script>
        <link href="{% static 'django_summernote/summernote.css' %}" rel="stylesheet">

        <!-- include django-summernote -->
        <link href="{% static 'django_summernote/django_summernote.css' %}" rel="stylesheet">
    </head>
    <body>
        <div id="summernote"></div>
    </body>
    <script>
    $(function() {
        var src = window.parent.document.getElementById('{{ id_src }}');
        var imageInput = null;
        $(src).hide(); // for IE

        // get settings from parent window
        eval("settings = window.parent.settings_{{ id }};");

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

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

        $('#summernote').summernote({
            height: settings.height,
            airMode: settings.airMode == 'true',
            styleWithSpan: settings.styleWithSpan == 'true',
            direction: settings.direction,
            toolbar: settings.toolbar,
            lang: settings.lang,
            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.height(setHeight);
            },
            onblur: function() {
                src.value = $("#summernote").code();
            },
            onImageUpload: function(files, editor, position) {
                imageInput = $('.note-image-input');
                imageInput.fileupload();
                var jqXHR = imageInput.fileupload('send', 
                    {
                        files: files,
                        formData: {csrfmiddlewaretoken: '{{ csrf_token }}'},
                        url: settings.url.upload_attachment,
                    })
                    .success(function (result, textStatus, jqXHR) {
                        data = $.parseJSON(result);
                        $.each(data.files, function (index, file) {
                            editor.insertImage(position, file.url);
                        });
                    })
                    .error(function (jqXHR, textStatus, errorThrown) {
                        // TODO: Display a detailed error message. It will come from JSON.
                        alert( 'Got an error while uploading images.' );
                    });
            }
        });

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