{% load mezzanine_tags i18n %}

{% if request.user.is_staff %}

<style type="text/css">

    #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;
        -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999}

    #editable-toolbar a, .editable-link {text-decoration:none;
        color:#000; font-size:15px; 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;}

    .editable-form {padding:10px; background:#fffcc3; border:2px solid #000;}
    .editable-form input {width:300px;}
    .editable-form .button {width:auto; cursor:pointer; float:right;
        margin:5px 0 0 5px;}

</style>

<script language="javascript" src="{% setting "ADMIN_MEDIA_PREFIX" %}tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" src="{% setting "CONTENT_MEDIA_URL" %}js/tinymce_setup.js"></script>
<script language="javascript" src="{% setting "CONTENT_MEDIA_URL" %}js/jquery-1.4.2.min.js"></script>
<script language="javascript" src="{% setting "CONTENT_MEDIA_URL" %}js/jquery.tools.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');
        loading.css({
            top: ($(window).height() - loading.height()) / 2 + $(window).scrollTop() + "px",
            left: ($(window).width() - loading.width()) / 2 + $(window).scrollLeft() + "px"
        });
        form.hide();
        loading.show();
        tinyMCE.triggerSave();
        $.post(form.attr('action'), form.serialize(), function(data) {
            if (data) {
                alert('{% trans "Error" %}: ' + data);
                loading.hide();
                form.show();
            } else {
                location.reload();
            } 
        });
        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();
    }
  
});

$.noConflict();

// document.write the style to immediately hide each edit form. This way if 
// Javascript is disabled the user still gets editing functionality.
document.write('<style>.editable-form {display:none;}</style>');

</script>

{% endif %}
