location = json_data['location'];

            } else {

                $comment_div.append(json_data['rendered_text']);

                comment_div_state($comment_div, f_path, line_no);

                linkInlineComments($('.firstlink'), $('.comment:first-child'));

                if ((review_status || pr_close) && !f_path && !line_no) {

                    // Page changed a lot - reload it after closing the submitted form

                    comment_div_state($comment_div, f_path, line_no, false);

                    location.reload(true);

                }

            }

        };

        var failure = function(x, s, e) {

            $preview.removeClass('submitting').addClass('failed');

            var $status = $preview.find('.comment-submission-status');

            $('<span>', {

                'title': e,

                text: _TM['Unable to post']

            }).replaceAll($status.contents());

            $('<div>', {

                'class': 'btn-group'

            }).append(

                $('<button>', {

                    'class': 'btn btn-default btn-xs',

                    text: _TM['Retry']

                }).click(function() {

                    $status.text(_TM['Submitting ...']);

                    $preview.addClass('submitting').removeClass('failed');

                    ajaxPOST(AJAX_COMMENT_URL, postData, success, failure);

                }),

                $('<button>', {

                    'class': 'btn btn-default btn-xs',

                    text: _TM['Cancel']

                }).click(function() {

                    comment_div_state($comment_div, f_path, line_no);

                })

            ).appendTo($status);

        };

        ajaxPOST(AJAX_COMMENT_URL, postData, success, failure);

    });

    // add event handler for hide/cancel buttons

    $form.find('.hide-inline-form').click(function(e) {

        comment_div_state($comment_div, f_path, line_no);

    });

    tooltip_activate();

    if ($textarea.length > 0) {

        MentionsAutoComplete($textarea, _USERS_AC_DATA);

    }

    if (f_path) {

        $textarea.focus();

    }

}

function deleteComment(comment_id) {

    var url = AJAX_COMMENT_DELETE_URL.replace('__COMMENT_ID__', comment_id);

    var postData = {};

    var success = function(o) {

        $('#comment-'+comment_id).remove();

        // Ignore that this might leave a stray Add button (or have a pending form with another comment) ...

    }

    ajaxPOST(url, postData, success);

}

/**

 * Double link comments

 */

var linkInlineComments = function($firstlinks, $comments){

    if ($comments.length > 0) {

        $firstlinks.html('<a href="#{0}">First comment</a>'.format($comments.prop('id')));

    }

    if ($comments.length <= 1) {

        return;

    }

    $comments.each(function(i, e){

            var prev = '';

            if (i > 0){

                var prev_anchor = $($comments.get(i-1)).prop('id');

                prev = '<a href="#{0}">Previous comment</a>'.format(prev_anchor);

            }

            var next = '';

            if (i+1 < $comments.length){

                var next_anchor = $($comments.get(i+1)).prop('id');

                next = '<a href="#{0}">Next comment</a>'.format(next_anchor);

            }

            $(this).find('.comment-prev-next-links').html(

                '<div class="prev-comment">{0}</div>'.format(prev) +

                '<div class="next-comment">{0}</div>'.format(next));

        });

}

/* activate files.html stuff */

    var $node_filter = $('#node_filter');

    var filterTimeout = null;

    var nodes = null;

    var initFilter = function(){

        $('#node_filter_box_loading').show();

        $('#search_activate_id').hide();

        $('#add_node_id').hide();

        $.ajax({url: node_list_url, headers: {'X-PARTIAL-XHR': '1'}, cache: false})

            .done(function(json) {

                    nodes = json.nodes;

                    $('#node_filter_box_loading').hide();

                    $('#node_filter_box').show();

                    $node_filter.focus();

                    if($node_filter.hasClass('init')){

                        $node_filter.val('');

                        $node_filter.removeClass('init');

                    }

                })

            .fail(function() {

                    console.log('fileBrowserListeners initFilter failed to load');

                })

        ;

    }

    var updateFilter = function(e) {

        return function(){

            // Reset timeout

            filterTimeout = null;

            var query = e.currentTarget.value.toLowerCase();

            var match = [];

            var matches = 0;

            var matches_max = 20;

            if (query != ""){

                for(var i=0;i<nodes.length;i++){

                    var pos = nodes[i].name.toLowerCase().indexOf(query);

                    if(query && pos != -1){

                        matches++

                        //show only certain amount to not kill browser

                        if (matches > matches_max){

                            break;

                        }

                        var n = nodes[i].name;

                        var t = nodes[i].type;

                        var n_hl = n.substring(0,pos)

                            + "<b>{0}</b>".format(n.substring(pos,pos+query.length))

                            + n.substring(pos+query.length);

                        var new_url = url_base.replace('__FPATH__',n);

                        match.push('<tr><td><a class="browser-{0}" href="{1}">{2}</a></td><td colspan="5"></td></tr>'.format(t,new_url,n_hl));

                    }

                    if(match.length >= matches_max){

                        match.push('<tr><td>{0}</td><td colspan="5"></td></tr>'.format(_TM['Search truncated']));

                        break;

                    }

                }

            }

            if(query != ""){

                $('#tbody').hide();

                $('#tbody_filtered').show();

                if (match.length==0){

                  match.push('<tr><td>{0}</td><td colspan="5"></td></tr>'.format(_TM['No matching files']));

                }

                $('#tbody_filtered').html(match.join(""));

            }

            else{

                $('#tbody').show();

                $('#tbody_filtered').hide();

            }

        }

    };

    $('#filter_activate').click(function(){

            initFilter();

        });

    $node_filter.click(function(){

            if($node_filter.hasClass('init')){

                $node_filter.val('');

                $node_filter.removeClass('init');

            }

        });

    $node_filter.keyup(function(e){

            clearTimeout(filterTimeout);

            filterTimeout = setTimeout(updateFilter(e),600);

        });

};

var initCodeMirror = function(textarea_id, baseUrl, resetUrl){

    var myCodeMirror = CodeMirror.fromTextArea($('#' + textarea_id)[0], {

            mode: "null",

            lineNumbers: true,

            indentUnit: 4,

    %endif

</%block>

<%def name="breadcrumbs_links()">

    ${_('Files')}

    %if c.file:

        @ ${h.show_id(c.changeset)}

    %endif

</%def>

<%block name="header_menu">

    ${self.menu('repositories')}

</%block>

<%def name="main()">

${self.repo_context_bar('files', c.revision)}

<div class="panel panel-primary">

    <div class="panel-heading clearfix">

        <div class="pull-left">

            ${self.breadcrumbs()}

        </div>

        <div class="pull-right">

              ${_("Branch filter:")} ${h.select('branch_selector',c.changeset.raw_id,c.revision_options)}

        </div>

    </div>

    <div class="panel-body">

        <div id="files_data">

            <%include file='files_ypjax.html'/>

        </div>

    </div>

</div>

<script type="text/javascript">

var CACHE = {};

var CACHE_EXPIRE = 5*60*1000; //cache for 5*60s

//used to construct links from the search list

var url_base = ${h.js(h.url("files_home",repo_name=c.repo_name,revision='__REV__',f_path='__FPATH__'))};

//send the nodelist request to this url

var node_list_url = ${h.js(h.url("files_nodelist_home",repo_name=c.repo_name,revision='__REV__',f_path='__FPATH__'))};

## new pyroutes URLs

pyroutes.register('files_nodelist_home', ${h.js(h.url('files_nodelist_home', repo_name=c.repo_name,revision='%(revision)s',f_path='%(f_path)s'))}, ['revision', 'f_path']);

pyroutes.register('files_history_home', ${h.js(h.url('files_history_home', repo_name=c.repo_name,revision='%(revision)s',f_path='%(f_path)s'))}, ['revision', 'f_path']);

pyroutes.register('files_authors_home', ${h.js(h.url('files_authors_home', repo_name=c.repo_name,revision='%(revision)s',f_path='%(f_path)s'))}, ['revision', 'f_path']);

var ypjax_links = function(){

    $('.ypjax-link').click(function(e){

        //don't do ypjax on middle click

        if(e.which == 2 || !History.enabled){

            return true;

        }

        var el = e.currentTarget;

        var url = el.href;

        var _base_url = ${h.jshtml(h.url("files_home",repo_name=c.repo_name,revision='',f_path=''))};

        _base_url = _base_url.replace('//','/');

        //extract rev and the f_path from url.

        parts = url.split(_base_url);

        if(parts.length != 2){

            return false;

        }

        var parts2 = parts[1].split('/');

        var rev = parts2.shift(); // pop the first element which is the revision

        var f_path = parts2.join('/');

        //page title - make this consistent with title mako block above

        var title = ${h.jshtml(_('%s Files') % c.repo_name)} + " \u00B7 " + (f_path || '/') + " \u00B7 " + ${h.jshtml(c.site_name)};

        var _node_list_url = node_list_url.replace('__REV__',rev).replace('__FPATH__', f_path);

        var _url_base = url_base.replace('__REV__',rev);

        // Change our States and save some data for handling events

        var data = {url:url,title:title, url_base:_url_base,

                    node_list_url:_node_list_url, rev:rev, f_path:f_path};

        History.pushState(data, title, url);

        //now we're sure that we can do ypjax things

        e.preventDefault();

        return false;

    });

}

// callbacks needed to process the ypjax filebrowser

var callbacks = function(State){

    ypjax_links();

    tooltip_activate();

    if(State !== undefined){

        //initially loaded stuff

        var _f_path = State.data.f_path;

        var _rev = State.data.rev;

        // Inform Google Analytics of the change

        if ( typeof window.pageTracker !== 'undefined' ) {

            window.pageTracker._trackPageview(State.url);

        }

    }

    function highlight_lines(lines){

        for(pos in lines){

          $('#L'+lines[pos]).css('background-color','#FFFFBE');

        }

    }

    page_highlights = location.href.substring(location.href.indexOf('#')+1).split('L');

    if (page_highlights.length == 2){

       highlight_ranges  = page_highlights[1].split(",");

       var h_lines = [];

       for (pos in highlight_ranges){

            var _range = highlight_ranges[pos].split('-');

            if(_range.length == 2){

                var start = parseInt(_range[0]);

                var end = parseInt(_range[1]);

                if (start < end){

                    for(var i=start;i<=end;i++){

                        h_lines.push(i);

                    }

                }

            }

            else{

                h_lines.push(parseInt(highlight_ranges[pos]));

            }

      }

      highlight_lines(h_lines);

      $('#L'+h_lines[0]).each(function(){

          this.scrollIntoView();

      });

    }

    // select code link event

    $('#hlcode').mouseup(getSelectionLink);

    // history select field

    var cache = {};

    $("#diff1").select2({

        placeholder: _TM['Select changeset'],

        dropdownAutoWidth: true,

        maxResults: 50,

        query: function(query){

          var key = 'cache';

          var cached = cache[key] ;

          if(cached) {

            var data = {results: []};

            var queryLower = query.term.toLowerCase();

            //filter results

            $.each(cached.results, function(){

                var section = this.text;

                var children = [];

                $.each(this.children, function(){

                    if(children.length < 50 ?

                       ((queryLower.length == 0) || (this.text.toLowerCase().indexOf(queryLower) >= 0)) :

                       ((queryLower.length != 0) && (this.text.toLowerCase().indexOf(queryLower) == 0))) {

                        children.push(this);

                    }

                });

                children = branchSort(children, undefined, query)

                data.results.push({'text': section, 'children': children});

            });

            //push the typed in changeset

            data.results.push({'text':_TM['Specify changeset'],

                               'children': [{'id': query.term, 'text': query.term, 'type': 'rev'}]});

            query.callback(data);

          }else{

              $.ajax({

                url: pyroutes.url('files_history_home', {'revision': _rev, 'f_path': _f_path}),

                data: {},

                dataType: 'json',

                type: 'GET',

                success: function(data) {

                  cache[key] = data;

                  query.callback(data);

                }

              });

          }

        }

    });

    $('#show_authors').on('click', function(){

        $.ajax({

            url: pyroutes.url('files_authors_home', {'revision': _rev, 'f_path': _f_path}),

            success: function(data) {

                $('#file_authors').html(data);

                $('#file_authors').show();

                tooltip_activate();

            }

        });

    });

}

$(document).ready(function(){

    ypjax_links();

    var $files_data = $('#files_data');

    //Bind to StateChange Event

    History.Adapter.bind(window,'statechange',function(){

        var State = History.getState();

        cache_key = State.url;

        //check if we have this request in cache maybe ?

        var _cache_obj = CACHE[cache_key];

        var _cur_time = new Date().getTime();

        // get from cache if it's there and not yet expired !

        if(_cache_obj !== undefined && _cache_obj[0] > _cur_time){

            $files_data.html(_cache_obj[1]);

            $files_data.css('opacity','1.0');

            //callbacks after ypjax call

            callbacks(State);

        }

        else{

            asynchtml(State.url, $files_data, function(){

                    callbacks(State);

                    var expire_on = new Date().getTime() + CACHE_EXPIRE;

                    CACHE[cache_key] = [expire_on, $files_data.html()];

                });

        }

    });

    // init the search filter

    var _State = {

       url: ${h.js(h.url.current())},

       data: {

         node_list_url: node_list_url.replace('__REV__',${h.js(c.changeset.raw_id)}).replace('__FPATH__', ${h.js(h.safe_unicode(c.file.path))}),

         url_base: url_base.replace('__REV__',${h.js(c.changeset.raw_id)}),

         rev:${h.js(c.changeset.raw_id)},

         f_path: ${h.js(h.safe_unicode(c.file.path))}

       }

    }

    // change branch filter

    $("#branch_selector").select2({

        dropdownAutoWidth: true,

        maxResults: 50,

        sortResults: branchSort

        });

    $("#branch_selector").change(function(e){

        var selected = e.currentTarget.options[e.currentTarget.selectedIndex].value;

        if(selected && selected != ${h.js(c.changeset.raw_id)}){

            window.location = pyroutes.url('files_home', {'repo_name': ${h.js(h.safe_unicode(c.repo_name))}, 'revision': selected, 'f_path': ${h.js(h.safe_unicode(c.file.path))}});

            $("#body").hide();

        } else {

            $("#branch_selector").val(${h.js(c.changeset.raw_id)});

        }

    });

});

</script>

</%def>

<%def name="file_class(node)">

    %if node.is_file():

        <%return "browser-file" %>

    %elif node.is_submodule():

        <%return "submodule-dir"%>

    %else:

        <%return "browser-dir"%>

    %endif

</%def>

<%def name="file_url(node, c)">

    %if node.is_submodule():

        <%return node.url or '#'%>

    %else:

        <%return h.url('files_home', repo_name=c.repo_name, revision=c.changeset.raw_id, f_path=h.safe_unicode(node.path))%>

    %endif

</%def>

<%def name="file_name(node)">

    <%

        c = "icon-folder-open"

        if node.is_file():

            c = "icon-doc"

        elif node.is_submodule():

            c = "icon-file-submodule"

    %>

    <%return h.literal('<i class="%s"></i><span>%s</span>' % (c, h.escape(node.name)))%>

</%def>

<div id="body" class="panel panel-default">

    <div class="panel-heading clearfix">

        <span class="browser-nav form-inline">

            <span class="info_box">

              <span class="info_box_elem rev">${_('Revision')}</span>

              <span class="info_box_elem"><a class="btn btn-default btn-xs ypjax-link" href="${c.url_prev}" title="${_('Previous revision')}"><i class="icon-left-open"></i></a></span>

              <span class="info_box_elem">${h.text('at_rev',value=c.changeset.revision,size=5,class_='form-control input-sm')}</span>

              <span class="info_box_elem"><a class="btn btn-default btn-xs ypjax-link" href="${c.url_next}" title="${_('Next revision')}"><i class="icon-right-open"></i></a></span>

            </span>

        </span>

            <a class="btn btn-default btn-xs" id="filter_activate" href="#">${_('Search File List')}</a>

        ${h.end_form()}

        <div class="browser-search form-inline">

            <div>

                <div id="node_filter_box_loading" style="display:none">${_('Loading file list...')}</div>

                <div id="node_filter_box" style="display:none">

                ${h.files_breadcrumbs(c.repo_name,c.changeset.raw_id,c.file.path)}/<input class="init" type="text" value="type to search..." name="filter" size="25" id="node_filter">

                </div>

            </div>

        </div>

        <table class="table code-browser">

            <thead>

                <tr>

                    <th>${_('Name')}</th>

                    <th>${_('Size')}</th>

                    <th>${_('Last Revision')}</th>

                    <th>${_('Last Modified')}</th>

                    <th>${_('Last Committer')}</th>

                </tr>

            </thead>

            <tbody id="tbody">

                %if c.file.parent:

                <tr class="parity0">

                    <td>

                        ${h.link_to(h.literal('<i class="icon-folder-open"></i><span>..</span>'),h.url('files_home',repo_name=c.repo_name,revision=c.changeset.raw_id,f_path=c.file.parent.path),class_="browser-dir ypjax-link")}

                    </td>

                    <td></td>

                    <td></td>

                    <td></td>

                    <td></td>

                </tr>

                %endif

            %for cnt,node in enumerate(c.file):

                <tr class="parity${cnt%2}">

                     <td>

                         ${h.link_to(file_name(node),file_url(node,c),class_=file_class(node)+" ypjax-link")}

                     </td>

                     <td>

                     %if node.is_file():

                         ${h.format_byte_size(node.size,binary=True)}

                     %endif

                     </td>

                     <td>

                         %if node.is_file():

                             <a data-toggle="tooltip" title="${node.last_changeset.message}" href="${h.url('changeset_home',repo_name=c.repo_name,revision=node.last_changeset.raw_id)}" class="changeset_hash">${h.show_id(node.last_changeset)}</a>

                         %endif

                     </td>

                     <td>

                         %if node.is_file():

                             <span data-toggle="tooltip" title="${h.fmt_date(node.last_changeset.date)}">

                            ${h.age(node.last_changeset.date)}</span>

                         %endif

                     </td>

                     <td>

                         %if node.is_file():

                             <span title="${node.last_changeset.author}">

                            ${h.person(node.last_changeset.author)}

                            </span>

                         %endif

                     </td>

                </tr>

            %endfor

            </tbody>

            <tbody id="tbody_filtered" style="display:none">

            </tbody>

        </table>

    </div>

</div>

<script>

    $(document).ready(function(){

        // init node filter if we pass GET param ?search=1

        var search_GET = ${h.js(request.GET.get('search',''))};

        if(search_GET == "1"){

            $("#filter_activate").click();

        }

    });

</script>