{% extends "site_base.html" %}

{% load i18n %}
{% load sitetree %}

{% block extra_style %}
    <style type="text/css">
        div.dataTables_length label {
            float: left;
            text-align: left;
        }

        div.dataTables_length select {
            width: 75px;
        }

        div.dataTables_filter label {
            float: right;
        }

        div.dataTables_info {
            padding-top: 8px;
        }

        div.dataTables_paginate {
            float: right;
            margin: 0;
        }

        table.table {
            clear: both;
            margin-bottom: 6px !important;
            background-color: white;
        }

        table.table thead .sorting,
        table.table thead .sorting_asc,
        table.table thead .sorting_desc,
        table.table thead .sorting_asc_disabled,
        table.table thead .sorting_desc_disabled {
            cursor: pointer;
            *cursor: hand;
        }

        {% comment %}
        table.table thead .sorting { background: url('{{ STATIC_URL }}datatables/images/sort_both.png') no-repeat center right; }
        table.table thead .sorting_asc { background: url('{{ STATIC_URL }}datatables/images/sort_asc.png') no-repeat center right; }
        table.table thead .sorting_desc { background: url('{{ STATIC_URL }}datatables/images/sort_desc.png') no-repeat center right; }

        table.table thead .sorting_asc_disabled { background: url('{{ STATIC_URL }}datatables/images/sort_asc_disabled.png') no-repeat center right; }
        table.table thead .sorting_desc_disabled { background: url('{{ STATIC_URL }}datatables/images/sort_desc_disabled.png') no-repeat center right; }
        {% endcomment %}

        table.dataTable th:active {
            outline: none;
        }
    </style>
{% endblock %}

{% block body_class %}reviews{% endblock %}

{% block body_base %}
    <div class="container">
        
        {% include "_messages.html" %}
        
        {% block breadcrumbs %}
            {% sitetree_breadcrumbs from "main" %}
        {% endblock %}
        
        <div class="row">
            <div class="span2">
                {% block sidebar %}
                    <ul class="nav nav-list well">
                        {% for section in review_sections %}
                            <li class="nav-header">
                                {{ section }}
                            </li>
                            <li>
                                <a href="{% url review_section section.section.slug %}">
                                    {% trans "All Reviews" %}
                                </a>
                            </li>
                            {% comment %}
                            <li>
                                <a href="{% url review_section_assignments section.section.slug %}">
                                    {% trans "Your Assignments" %}
                                </a>
                            </li>
                            {% endcomment %}
                            <li>
                                <a href="{% url review_status section.section.slug %}">
                                    {% trans "Voting Status" %}
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                {% endblock %}
            </div>
            <div class="span10">
                {% block body %}
                {% endblock %}
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_script %}
    <script src="{{ STATIC_URL }}datatables/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            /* Default class modification */
            $.extend( $.fn.dataTableExt.oStdClasses, {
                "sWrapper": "dataTables_wrapper form-inline"
            } );

            /* API method to get paging information */
            $.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
            {
                return {
                    "iStart":         oSettings._iDisplayStart,
                    "iEnd":           oSettings.fnDisplayEnd(),
                    "iLength":        oSettings._iDisplayLength,
                    "iTotal":         oSettings.fnRecordsTotal(),
                    "iFilteredTotal": oSettings.fnRecordsDisplay(),
                    "iPage":          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
                    "iTotalPages":    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
                };
            }

            /* Bootstrap style pagination control */
            $.extend( $.fn.dataTableExt.oPagination, {
                "bootstrap": {
                    "fnInit": function( oSettings, nPaging, fnDraw ) {
                        var oLang = oSettings.oLanguage.oPaginate;
                        var fnClickHandler = function ( e ) {
                            e.preventDefault();
                            if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
                                fnDraw( oSettings );
                            }
                        };

                        $(nPaging).addClass('pagination').append(
                            '<ul>'+
                                '<li class="prev disabled"><a href="#">&larr; '+oLang.sPrevious+'</a></li>'+
                                '<li class="next disabled"><a href="#">'+oLang.sNext+' &rarr; </a></li>'+
                            '</ul>'
                        );
                        var els = $('a', nPaging);
                        $(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
                        $(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
                    },

                    "fnUpdate": function ( oSettings, fnDraw ) {
                        var iListLength = 5;
                        var oPaging = oSettings.oInstance.fnPagingInfo();
                        var an = oSettings.aanFeatures.p;
                        var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);

                        if ( oPaging.iTotalPages < iListLength) {
                            iStart = 1;
                            iEnd = oPaging.iTotalPages;
                        }
                        else if ( oPaging.iPage <= iHalf ) {
                            iStart = 1;
                            iEnd = iListLength;
                        } else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
                            iStart = oPaging.iTotalPages - iListLength + 1;
                            iEnd = oPaging.iTotalPages;
                        } else {
                            iStart = oPaging.iPage - iHalf + 1;
                            iEnd = iStart + iListLength - 1;
                        }

                        for ( i=0, iLen=an.length ; i<iLen ; i++ ) {
                            // Remove the middle elements
                            $('li:gt(0)', an[i]).filter(':not(:last)').remove();

                            // Add the new list items and their event handlers
                            for ( j=iStart ; j<=iEnd ; j++ ) {
                                sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
                                $('<li '+sClass+'><a href="#">'+j+'</a></li>')
                                    .insertBefore( $('li:last', an[i])[0] )
                                    .bind('click', function (e) {
                                        e.preventDefault();
                                        oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
                                        fnDraw( oSettings );
                                    } );
                            }

                            // Add / remove disabled classes from the static elements
                            if ( oPaging.iPage === 0 ) {
                                $('li:first', an[i]).addClass('disabled');
                            } else {
                                $('li:first', an[i]).removeClass('disabled');
                            }

                            if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
                                $('li:last', an[i]).addClass('disabled');
                            } else {
                                $('li:last', an[i]).removeClass('disabled');
                            }
                        }
                    }
                }
            } );
            
            $("table.table-reviews").dataTable({
                "sDom": "<'row'<'span5'l><'span5'f>r>t<'row'<'span5'i><'span5'p>>",
                "sPaginationType": "bootstrap",
                "bStateSave": true
            });
            $.extend($.fn.dataTableExt.oStdClasses, {
                "sWrapper": "dataTables_wrapper form-inline"
            });
        });
    </script>
{% endblock %}