{% load i18n %}

{% if request.user.is_staff %}

<style type="text/css">

    /*
    You'll notice this littered with !important declarations - this is due
    to the inline-editing controls being injected into abitrary layouts and
    this is my hackish attempt at trying to keep them consistant across
    implementations by not being overridden by the stylesheets for each
    particular site's layout. If there's a better way of doing this then go
    right ahead and fix it.
    */

    /* TOOLBAR */

    #editable-toolbar, .editable-highlight, .editable-link {top:0; left:0;
        z-index:1000; display:none; position:absolute;}
    #editable-loading {z-index:10000; display:none; position:absolute;}
    #editable-toolbar {position:fixed;}
    .editable-highlight {border:1px solid #ccc;}

    #editable-toolbar, .editable-link {
        background:#fffcc3; float:left; cursor:pointer; padding:4px;
        white-space:nowrap; border:1px solid #ccc; line-height:1em;
        -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999}

    #editable-toolbar a, .editable-link {text-decoration:none;
        color:#000 !important; font-size:15px !important; font-style:italic;
        font-weight:normal;}

    #editable-toolbar a {border-left:1px solid #666; padding:0 5px;
        display:none;}
    #editable-toolbar-toggle {border-left:0px !important;
        text-decoration:none; display:inline !important;}

    /* FORM */

    .editable-form {padding:20px; background:#fffcc3; border:1px solid #000;
        -moz-box-shadow: 0 0 20px #222; -webkit-box-shadow: 0 0 20px #222;
        line-height:1em; border-radius:5px;}
    .editable-form table, .editable-form textarea, .editable-form input {
        width: 100%; margin: .5em 0;}
    .mceToolbar table {width: auto !important; margin: 0 !important;}
    .editable-form .booleanfield {width: auto;}
    {% if not settings.FORMS_USE_HTML5 %}
    .editable-form input.datetimefield {width: 80px; margin-left: 8px;}
    {% endif %}
    .editable-form input[type="file"] {width: 300px;}
    .editable-form p {margin: .5em 0 !important; padding: 0 !important;
        line-height: 0 !important; border: 0 !important;}
    .editable-form p:first-child {margin-top: 0px;}
    .editable-form .helptext {font-size: 70%; color: #444; font-style: italic;}
    .editable-form label {text-transform: capitalize !important;
        font-weight: bold !important; line-height: 1.1em !important;
        font-size: 15px !important; color: #000 !important;}
    .editable-form .button {width:auto; cursor:pointer; float:right;
        margin:15px 0 0 15px; padding:5px 15px;
        -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999}

</style>
{% for js in html_editor_js %}
<script language="javascript" src="{{ js }}"></script>
{% endfor %}
<script language="javascript">
if (typeof $ == 'undefined') {
    document.write('<scr' +
        'ipt src="{{ settings.CONTENT_MEDIA_URL }}js/jquery-1.4.4.min.js"></scr' +
        'ipt>');
}
</script>
<script language="javascript" src="{{ settings.CONTENT_MEDIA_URL }}js/jquery.tools.js"></script>
<script language="javascript" src="{{ settings.CONTENT_MEDIA_URL }}js/jquery.form.js"></script>
<script language="javascript">

$(function($) {

    // Add AJAX submit handler for each editable form.
    $('.editable-form').submit(function() {
        var form = $(this);
        var loading = $('#editable-loading');
        var showError = function(msg) {
            if (msg) {
                msg = ': ' + msg;
            } else {
                msg = '';
            }
            alert('{% trans "An error occurred" %}' + msg);
            loading.hide();
            form.show();
        };
        loading.css({
            top: ($(window).height() - loading.height()) / 2 + $(window).scrollTop() + "px",
            left: ($(window).width() - loading.width()) / 2 + $(window).scrollLeft() + "px"
        });
        form.hide();
        loading.show();
        if (typeof tinyMCE != "undefined" ) {
            tinyMCE.triggerSave();
        }
        form.ajaxSubmit({success: function(data) {
            if (data && data != '<head></head><body></body>') {
                showError(data);
            } else {
                location.reload();
            }
        }, error: function() {
            showError();
        }});
        return false;
    })

    // Iterate through each of the editable areas and set them up.
    $.each($('.editable-original'), function(i, editable) {
        editable = $(editable);
        // Position the editable area's edit link.
        var link = editable.next('.editable-link');
        link.css({top: editable.offset().top,
            left: editable.offset().left - link.width() - 12});
        // Apply the editable area's overlay handler.
        var expose = {color: '#333', loadSpeed: 200, opacity: 0.9};
        var overlay = {expose: expose, closeOnClick: true, close: ':button'};
        link.overlay(overlay);
        // Position the editable area's highlight.
        link.next('.editable-highlight').css({
            width: editable.width(), height: editable.height(),
            top: editable.offset().top, left: editable.offset().left
        });
    });

    // Show/hide the editable area's highlight when mousing over/out the of
    // the edit link.
    $('.editable-link').mouseover(function() {
        $(this).next('.editable-highlight').show();
    });
    $('.editable-link').mouseout(function() {
        $(this).next('.editable-highlight').hide();
    });

    // Add the toolbar HTML and handlers.
    var cookie = 'mezzanine-admin-toolbar';
    var at = ('; ' + document.cookie).indexOf('; ' + cookie + '=');
    var closed = false;
    if (at > -1) {
        closed = document.cookie.substr(at +
            cookie.length + 1).split(';')[0];
    }
    $('{{ toolbar|escapejs }}').appendTo('body');
    $('#editable-toolbar-toggle').click(function() {
        var toggle = $(this);
        var controls = $('.editable-link, ' +
            '#editable-toolbar *[id!=editable-toolbar-toggle]');
        if (toggle.text() == '<<') {
            toggle.text('>>');
            controls.hide();
            document.cookie = cookie + '=1; path=/';
        } else {
            toggle.text('<<');
            controls.show();
            document.cookie = cookie + '=; path=/';
        }
        return false;
    });
    $('#editable-toolbar-logout').click(function() {
        $('#editable-toolbar').submit();
        return false;
    });

    $('#editable-toolbar').fadeIn('slow');
    if (!closed) {
        $('#editable-toolbar-toggle').click();
    }

});

</script>

{% endif %}
