{% extends "admin/base_site.html" %}
{% load adminmedia i18n %}

{% block extrastyle %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% admin_media_prefix %}css/changelists.css" />
    <style type="text/css" media="screen">
        #changelist .list-arrow {
            display: block;
            float: left;
            margin-right: 4px;
            background: transparent url(http://cdn.cloudfiles.mosso.com/c164791/arrow-closed.gif) no-repeat 50% 50%;
            width: 10px;
            height: 15px;
            text-indent: -9999px;
        }
        
        #changelist .list-arrow.open {
            background-image: url(http://cdn.cloudfiles.mosso.com/c164791/arrow-open.gif);
        }
        
        #changelist .inserted .name {
            padding-left: 20px;
        }
        
        #cloudfiles-edit .loading {
            padding-left: 18px;
            background: transparent url(http://cdn.cloudfiles.mosso.com/c164791/django-loader.gif) no-repeat;
        }
    </style>
{% endblock %}

{% block extrahead %}
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
            var accountID = "{{ account.id }}";
            var listURL = "{% url admin:cumulus-edit-cloudfiles account.id %}";
            var containerList = $('#changelist');
            var editDiv = $('#cloudfiles-edit');
            var reloadLink = $('#reload-link');
            var createLink = $('#create-link');
            
            var handleContainerInfo = function(responseText, textStatus, XMLHttpRequest){
                editDiv.html(responseText);
                var form = $('#container-form');
                var radioBtns = $('#container-form :checkbox');
                radioBtns.change(function(e){
                    // show the loader graphic
                    editDiv.html('<p class="loading">Setting container access&hellip;</p>');
                    var data = form.serialize();
                    $.post(form.attr('action'), data, handleContainerInfo);
                });
            };
            
            var handleCreateForm = function(){
                var createForm = $('#create-form');
                createForm.submit(function(e){
                    e.preventDefault();
                    // show the loader graphic
                    editDiv.html('<p class="loading">Creating container&hellip;</p>');
                    // get the form data and post it
                    var data = createForm.serialize();
                    $.post(createForm.attr('action'), data, function(data, textStatus){
                        if(data == "success") {
                            // reload the container list
                            containerList.load(listURL, function(){
                                setListActions();
                                editDiv.empty();
                            });
                        } else {
                            // creation failed, show the form
                            editDiv.html(data);
                            handleCreateForm();
                        }
                    });
                });
            };
            
            var setListActions = function(){
                var aTags = $('.container-link', '#changelist');
                aTags.click(function(e){
                    e.preventDefault();
                    // show the loader graphic
                    editDiv.html('<p class="loading">Getting container info&hellip;</p>');
                    var aTag = $(this);
                    $.get(aTag.attr('href'), handleContainerInfo);
                }); // a tags
                
                var arrows = $('.list-arrow', '#changelist');
                arrows.click(function(e){
                    e.preventDefault();
                    var aTag = $(this);
                    var trTag = aTag.parent().parent();
                    var rowClass = trTag.attr('class');
                    var rel = aTag.attr('rel');
                    var childRows = $('.'+rel);
                    
                    if(aTag.hasClass('open')){
                        aTag.removeClass('open');
                        // hide the container's objects
                        childRows.hide();
                    } else {
                        if(childRows.length > 0) {
                            aTag.addClass('open');
                            childRows.show()
                        } else {
                            // show the loader graphic
                            editDiv.html('<p class="loading">Getting container objects&hellip;</p>');
                            $.get(aTag.attr('href'), function(data, textStatus){
                                aTag.addClass('open');
                                data = $(data).each(function(){
                                    // add the parent tr tag's class to these rows
                                    // also add the container's rel attr as a class
                                    $(this).addClass(rowClass + " " + rel);
                                });
                                trTag.after(data);
                                editDiv.empty();
                            });
                        }
                    }
                }); // arrows
                
                var uploadLinks = $('.upload-link', '#changelist');
                uploadLinks.click(function(e){
                    e.preventDefault();
                    editDiv.load($(this).attr('href'), function(){
                        var uploadForm = $('#upload-form');
                        uploadForm.submit(function(e){
                            // show the loader graphic
                            $('#_id_upload').after('<span class="loading">Attempting to upload&hellip;</span>');
                        });
                    });
                }); // upload links
                
            };
            setListActions();
            
            reloadLink.click(function(e){
                e.preventDefault();
                // show the loader graphic
                editDiv.html('<p class="loading">Getting list of containers&hellip;</p>');
                // reload the container list
                containerList.load(listURL, function(){
                    setListActions();
                    editDiv.empty();
                });
            });
            
            createLink.click(function(e){
                e.preventDefault();
                editDiv.load($(this).attr('href'), handleCreateForm);
            });
        });
    </script>
{% endblock %}

{% block bodyclass %}edit-cloudfiles{% endblock %}

{% block breadcrumbs %}
    <div class="breadcrumbs">
        <a href="../../../../">{% trans "Home" %}</a>
        &rsaquo; <a href="../../../">Cumulus</a>
        &rsaquo; <a href="../../">Accounts</a>
        {% if title %} &rsaquo; {{ title }}{% endif %}
    </div>
{% endblock %}

{% block content %}
    <div id="content-main">
        {% block object-tools %}
        <ul class="object-tools">
            <li><a href="{% url admin:cumulus-edit-cloudfiles account.id %}" id="reload-link">Reload</a></li>
            <li><a href="{% url admin:cumulus-create-container account.id %}" class="addlink" id="create-link">Create Container</a></li>
        </ul>
        {% endblock %}
        
        <p>Account with username {{ account.username }}</p>
        
        <div class="module" id="changelist">
            {% include "cumulus/includes/container_list.html" %}
        </div>
        
        <div id="cloudfiles-edit"></div>
    </div>
{% endblock %}