{% extends "admin/change_form.html" %}
{% load admin_static %}

{% block extrahead %}
    {{ block.super }}

    <style type="text/css">
        ul#rows {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 992px;
            border: none;
        }
        ul#rows li {
            list-style-type: none;
            margin: 0 0 20px 0;
            padding: 0px;
            width: 100%;
            cursor: move;
            border: solid 1px #b0b9ec;
            background-color: #e8ebf2;
            -webkit-border-radius: 3px;
        	-moz-border-radius: 3px;
        	border-radius: 3px;
        }
        ul#rows li.block-header {
            border-right: solid 8px red;
        }
        ul#rows li.block-content {
            border-right: solid 8px green;
        }
        ul#rows li.block-footer {
            border-right: solid 8px blue;
        }
        ul.columns {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        ul.columns li{
            margin: 4px !important;
            float: left;
            border: solid 1px #ecb430 !important;
            background-color: #f2df78 !important;
        }
        ul.tiles {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        ul.tiles li{
            width: auto !important;
            height: 60px !important;
            float: none !important;
            border: solid 1px #cccccc !important;
            background-color: white !important;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){

            $('ul.sortable').sortable({
                opacity: 0.5,
                update: function(event, ui) {
                    // Persist the sort
                    if (ui.item.attr('tile_id'))
                    {
                        id = ui.item.attr('tile_id');
                        model_name = 'tile';
                    }
                    else if (ui.item.attr('column_id'))
                    {
                        id = ui.item.attr('column_id');
                        model_name = 'column';
                    }
                    else if (ui.item.attr('row_id'))
                    {
                        id = ui.item.attr('row_id');
                        model_name = 'row';
                    }
                    else
                    {
                        alert("What did you drag?");
                    };
                    var data = {
                        'id':id,
                        'model_name':model_name,
                        'index':ui.item.prevAll().length
                    };
                    $.get('{% url "admin-persist-sort-ajax" %}', data);
                }
            }).disableSelection();

            {% if adminform.form.instance.id %}
            // New row. No dialog.
            $(document).on('click', 'a#new-row', function(event){
                event.preventDefault();
                $.ajax({
                    url:'{% url "admin-row-create-ajax" %}',
                    data:{page_id: {{ adminform.form.instance.id }}},
                    async:false,
                    dataType:'json',
                    success: function(obj){
                        var el = $('#new-row-template').clone(true);
                        el.attr('id', 'row-'+obj.id);
                        el.attr('row_id', obj.id);
                        el.addClass('block-' + obj.block_name);
                        el.show();
                        var rows = $('#rows');
                        rows.css('height', obj.page_render_height+'px');
                        rows.append(el);
                    },
                    error: function(){
                        alert('An error occurred. Please try again');
                    }
                });
            });
            {% endif %}

            // New column. Launch dialog.
            $(document).on('click', 'a.new-column', function(event){
                event.preventDefault();
                var row = $(this).parent();
                // Create new column. We need the id.
                var popup = $('#edit-dialog');
                var li = $(this).parent();
                $.ajax({
                    url:'{% url "admin-column-create-ajax" %}',
                    data:{row_id:row.attr('row_id')},
                    async: false,
                    success: function(data){
                        popup.html('');
                        popup.append(data);
                    }
                });
                popup.dialog({title:'New column', modal:true, resizable:false, width:640});
            });

            // New tile. No dialog. Yet.
            $(document).on('click', 'a.new-tile', function(event){
                event.preventDefault();
                var column = $(this).parent();
                $.ajax({
                    url:'{% url "admin-tile-create-ajax" %}',
                    data:{column_id:column.attr('column_id')},
                    async:false,
                    dataType:'json',
                    success: function(obj){
                        var el = $('#new-tile-template').clone(true);
                        el.attr('id', 'tile-'+obj.id);
                        el.attr('tile_id', obj.id);
                        el.show();
                        var rows = $('#rows');
                        rows.css('height', obj.page_render_height+'px');
                        var row = $('#row-' + obj.row_id);
                        row.css('height', obj.row_render_height+'px');
                        var column = $('#column-' + obj.column_id);
                        column.css('height', obj.column_render_height+'px');
                        var ul = $('ul:first', column);
                        ul.append(el);
                    },
                    error: function(){
                        alert('An error occurred. Please try again');
                    }
                });
            });

            {% if adminform.form.instance.id %}
            // Edit row. Launch dialog.
            $(document).on('click', 'a.row-edit-launcher', function(event){
                event.preventDefault();
                var popup = $('#edit-dialog');
                var li = $(this).parent();
                $.ajax({
                    url:'{% url "admin-row-edit-ajax" %}',
                    data:{row_id:li.attr('row_id')},
                    async: false,
                    success: function(data){
                        // Chrome is being weird in this case. It strips away my form tag.
                        // Two-liner gets around it.
                        popup.html('');
                        popup.append(data);
                    }
                });
                popup.dialog({title:'Edit row', modal:true, resizable:false, width:640});
            });

            // Edit column. Launch dialog.
            $(document).on('click', 'a.column-edit-launcher', function(event){
                event.preventDefault();
                var popup = $('#edit-dialog');
                var li = $(this).parent();
                $.ajax({
                    url:'{% url "admin-column-edit-ajax" %}',
                    data:{column_id:li.attr('column_id')},
                    async: false,
                    success: function(data){
                        // Chrome is being weird in this case. It strips away my form tag.
                        // Two-liner gets around it.
                        popup.html('');
                        popup.append(data);
                    }
                });
                popup.dialog({title:'Edit column', modal:true, resizable:false, width:640});
            });

            // Edit tile. Launch dialog.
            $(document).on('click', 'a.tile-edit-launcher', function(event){
                event.preventDefault();
                var popup = $('#edit-dialog');
                var li = $(this).parent();
                $.ajax({
                    url:'{% url "admin-tile-edit-ajax" %}',
                    data:{tile_id:li.attr('tile_id')},
                    async: false,
                    success: function(data){
                        popup.html('');
                        popup.append(data);
                    }
                });
                popup.dialog({title:'Edit tile', modal:true, resizable:false, width:640});
            });
            {% endif %}

            // Delete row
            $(document).on('click', 'a.row-delete', function(event){
                event.preventDefault();
                if (window.confirm('Delete this row?'))
                {
                    var row_id = $(this).parent().attr('row_id');
                    $(this).parent().remove();
                    if (row_id)
                        $.get('{% url "admin-row-delete-ajax" %}', {row_id:row_id});
                }
            });

            // Delete column
            $(document).on('click', 'a.column-delete', function(event){
                event.preventDefault();
                if (window.confirm('Delete this column?'))
                {
                    var column_id = $(this).parent().attr('column_id');
                    $(this).parent().remove();
                    if (column_id)
                        $.get('{% url "admin-column-delete-ajax" %}', {column_id:column_id});
                }
            });

            // Delete tile
            $(document).on('click', 'a.tile-delete', function(event){
                event.preventDefault();
                if (window.confirm('Delete this tile?'))
                {
                    var tile_id = $(this).parent().attr('tile_id');
                    $(this).parent().remove();
                    if (tile_id)
                        $.get('{% url "admin-tile-delete-ajax" %}', {tile_id:tile_id});
                }
            });

            // Intercept row edit form submit
            $(document).on('submit', 'form#row-edit-form', function(event){
                event.preventDefault();
                var form = $(this);
                var url = $(this).attr('action');
                var data = $(this).serialize();
                $.ajax({
                    url: url,
                    data: data,
                    async: false,
                    type: 'POST',
                    cache: false,
                    success: function(data){
                        if (data.indexOf('{') == 0)
                        {
                            var obj = $.parseJSON(data);
                            // Update row dom element and close dialog
                            var row = $('#row-' + obj.id);
                            row.removeClass('block-header');
                            row.removeClass('block-content');
                            row.removeClass('block-footer');
                            row.addClass('block-' + obj.block_name);
                            $('#edit-dialog').dialog('close');
                        }
                        else
                            form.replaceWith(data);
                    }
                });
            });

            // Intercept column create form submit
            $(document).on('submit', 'form#column-create-form', function(event){
                event.preventDefault();
                var form = $(this);
                var url = $(this).attr('action');
                var data = $(this).serialize();
                $.ajax({
                    url: url,
                    data: data,
                    async: false,
                    type: 'POST',
                    cache: false,
                    success: function(data){
                        if (data.indexOf('{') == 0)
                        {
                            var obj = $.parseJSON(data);
                            var el = $('#new-column-template').clone(true);
                            el.attr('id', 'column-'+obj.id);
                            el.attr('column_id', obj.id);
                            el.css('width', (obj.width*60-2) + 'px');
                            el.show();
                            var rows = $('#rows');
                            rows.css('height', obj.page_render_height+'px');
                            var row = $('#row-' + obj.row_id);
                            row.css('height', obj.row_render_height+'px');
                            var ul = $('ul:first', row);
                            ul.append(el);
                            $('#edit-dialog').dialog('close');
                        }
                        else
                            form.replaceWith(data);
                    }
                });
            });

            // Intercept column edit form submit
            $(document).on('submit', 'form#column-edit-form', function(event){
                event.preventDefault();
                var form = $(this);
                var url = $(this).attr('action');
                var data = $(this).serialize();
                $.ajax({
                    url: url,
                    data: data,
                    async: false,
                    type: 'POST',
                    cache: false,
                    success: function(data){
                        if (data.indexOf('{') == 0)
                        {
                            var obj = $.parseJSON(data);
                            // Update column dom element and close dialog
                            var column = $('#column-' + obj.id);
                            column.css('width', (obj.width*60-2) + 'px');
                            $('#edit-dialog').dialog('close');
                        }
                        else
                            form.replaceWith(data);
                    }
                });
            });

            // Intercept tile edit form submit
            $(document).on('submit', 'form#tile-edit-form', function(event){
                event.preventDefault();
                var form = $(this);
                var url = $(this).attr('action');
                var data = $(this).serialize();
                $.ajax({
                    url: url,
                    data: data,
                    async: false,
                    type: 'POST',
                    cache: false,
                    success: function(data){
                        if (data.indexOf('{') == 0)
                        {
                            var obj = $.parseJSON(data);
                            // Update tile dom element and close dialog
                            var tile = $('#tile-' + obj.id);
                            $('label:first', tile).html(obj.label);
                            tile.css('width', (obj.columns*60-2) + 'px');
                            $('#edit-dialog').dialog('close');
                        }
                        else
                            form.replaceWith(data);
                    }
                });
            });

        });
    </script>
{% endblock %}

{% block after_related_objects %}
{% if adminform.form.instance.id %}
    <li id="new-row-template" class="xui-state-default" style="display: none;" row_id="">
        &middot;<a href="#" class="new-column">New column</a><br />
        &middot;<a href="#" class="row-edit-launcher">Edit row</a></br>
        &middot;<a href="#" class="row-delete">Delete row</a></br>
        <ul class="sortable columns">
        </ul>
    </li>

    <li id="new-column-template" class="xui-state-default" style="display: none;" column_id="">
        &middot;<a href="#" class="new-tile">New tile</a><br />
        &middot;<a href="#" class="column-edit-launcher">Edit column</a></br>
        &middot;<a href="#" class="column-delete">Delete column</a></br>
        <ul class="sortable tiles">
        </ul>
    </li>

    <li id="new-tile-template" class="xui-state-default" style="display: none;" tile_id="">
        <label>Untitled tile</label></br>
        &middot;<a href="#" class="tile-edit-launcher">Edit tile</a></br>
        &middot;<a href="#" class="tile-delete">Delete tile</a></br>
    </li>

    <div id="edit-dialog"></div>

    <h2>Layout</h2>
    <p class="help">
        A page contains horizontal rows. A row contains vertical columns. A column
        contains vertical tiles. You can drag-and-drop these elements around.
        Any change you make here is
        immediately saved to the database.
    </p>

    <p class="help">
        A row may logically belong to a certain section on the home page. In Django termonology
        such a section is called a block. You only have to be concerned with setting the blocks
        if this page is the homepage. For example, you probably want login and logout links at the
        top of every page. The row that contains these tiles must have its block name set to <i>Header</i>.
        <div style="width: 12px; height: 12px; background-color: red; display: inline-block;"></div> Header
        <div style="width: 12px; height: 12px; background-color: green; display: inline-block;"></div> Content
        <div style="width: 12px; height: 12px; background-color: blue; display: inline-block;"></div> Footer
    </p>

    <a href="#" id="new-row">New row</a>
    <ul id="rows" class="sortable" style="height: {{ adminform.form.instance.render_height }}px;">
        {% for row in adminform.form.instance.rows_admin %}
            <li class="xui-state-default block-{{row.block_name }}" id="row-{{ row.id }}" row_id="{{ row.id }}" style="height: {{ row.render_height }}px;">
                &middot;<a href="#" class="new-column">New column</a><br />
                &middot;<a href="#" class="row-edit-launcher">Edit row</a></br>
                &middot;<a href="#" class="row-delete">Delete row {{ row.index }}</a></br>

                <ul class="sortable columns">
                {% for column in row.columns_admin %}
                    <li class="xui-state-default" id="column-{{ column.id }}" column_id="{{ column.id }}" style="width: {{ column.render_width }}px; height: {{ column.render_height }}px;">
                        &middot;<a href="#" class="new-tile">New tile</a><br />
                        &middot;<a href="#" class="column-edit-launcher">Edit column</a></br>
                        &middot;<a href="#" class="column-delete">Delete column</a></br>

                        <ul class="sortable tiles">
                        {% for tile in column.tiles %}
                            <li class="xui-state-default" id="tile-{{ tile.id }}" tile_id="{{ tile.id }}" style="height: {{ tile.render_height }}px;">
                                <label>{{ tile.label|default:'Untitled tile' }}</label></br>
                                &middot;<a href="#" class="tile-edit-launcher">Edit tile</a></br>
                                &middot;<a href="#" class="tile-delete">Delete tile</a></br>
                            </li>
                        {% endfor %}
                        </ul>

                    </li>
                {% endfor %}
                </ul>

            </li>
        {% endfor %}
    </ul>

{% endif %}
{% endblock %}
