// Formatters/language options

            if (opts.language != null) {

                var lang = opts.language;

                // formatNoMatches -> language.noMatches

                if ($.isFunction(lang.noMatches)) {

                    opts.formatNoMatches = lang.noMatches;

                }

                // formatSearching -> language.searching

                if ($.isFunction(lang.searching)) {

                    opts.formatSearching = lang.searching;

                }

                // formatInputTooShort -> language.inputTooShort

                if ($.isFunction(lang.inputTooShort)) {

                    opts.formatInputTooShort = lang.inputTooShort;

                }

                // formatInputTooLong -> language.inputTooLong

                if ($.isFunction(lang.inputTooLong)) {

                    opts.formatInputTooLong = lang.inputTooLong;

                }

                // formatLoading -> language.loadingMore

                if ($.isFunction(lang.loadingMore)) {

                    opts.formatLoading = lang.loadingMore;

                }

                // formatSelectionTooBig -> language.maximumSelected

                if ($.isFunction(lang.maximumSelected)) {

                    opts.formatSelectionTooBig = lang.maximumSelected;

                }

            }

            opts = $.extend({}, {

                populateResults: function(container, results, query) {

                    var populate, id=this.opts.id, liveRegion=this.liveRegion;

                    populate=function(results, container, depth) {

                        var i, l, result, selectable, disabled, compound, node, label, innerContainer, formatted;

                        results = opts.sortResults(results, container, query);

                        // collect the created nodes for bulk append

                        var nodes = [];

                            result=results[i];

                            disabled = (result.disabled === true);

                            selectable = (!disabled) && (id(result) !== undefined);

                            compound=result.children && result.children.length > 0;

                            node=$("<li></li>");

                            node.addClass("select2-results-dept-"+depth);

                            node.addClass("select2-result");

                            node.addClass(selectable ? "select2-result-selectable" : "select2-result-unselectable");

                            if (disabled) { node.addClass("select2-disabled"); }

                            if (compound) { node.addClass("select2-result-with-children"); }

                            node.addClass(self.opts.formatResultCssClass(result));

                            node.attr("role", "presentation");

                            label=$(document.createElement("div"));

                            label.addClass("select2-result-label");

                            label.attr("id", "select2-result-label-" + nextUid());

                            label.attr("role", "option");

                            formatted=opts.formatResult(result, label, query, self.opts.escapeMarkup);

                            if (formatted!==undefined) {

                                label.html(formatted);

                                node.append(label);

                            }

                            if (compound) {

                                innerContainer=$("<ul></ul>");

                                innerContainer.addClass("select2-result-sub");

                                populate(result.children, innerContainer, depth+1);

                                node.append(innerContainer);

                            }

                            node.data("select2-data", result);

                            nodes.push(node[0]);

                        }

                        // bulk append the created nodes

                        container.append(nodes);

                        liveRegion.text(opts.formatMatches(results.length));

                    };

                    populate(results, container, 0);

                }

            }, $.fn.select2.defaults, opts);

            if (typeof(opts.id) !== "function") {

                idKey = opts.id;

                opts.id = function (e) { return e[idKey]; };

            }

            if ($.isArray(opts.element.data("select2Tags"))) {

                if ("tags" in opts) {

                    throw "tags specified as both an attribute 'data-select2-tags' and in options of Select2 " + opts.element.attr("id");

                }

                opts.tags=opts.element.data("select2Tags");

            }

            if (select) {

                opts.query = this.bind(function (query) {

                    var data = { results: [], more: false },

                        term = query.term,

                    process=function(element, collection) {

                        var group;

                        if (element.is("option")) {

                            if (query.matcher(term, element.text(), element)) {

                                collection.push(self.optionToData(element));

                            }

                        } else if (element.is("optgroup")) {

                            group=self.optionToData(element);

                            element.children().each2(function(i, elm) { process(elm, group.children); });

                            if (group.children.length>0) {

                                collection.push(group);

                            }

                        }

                    };

                    children=element.children();

                    // ignore the placeholder option if there is one

                    if (this.getPlaceholder() !== undefined && children.length > 0) {

                        placeholderOption = this.getPlaceholderOption();

                        if (placeholderOption) {

                            children=children.not(placeholderOption);

                        }

                    }

                    children.each2(function(i, elm) { process(elm, data.results); });

                    query.callback(data);

                });

                // this is needed because inside val() we construct choices from options and their id is hardcoded

                opts.id=function(e) { return e.id; };

            } else {

                if (!("query" in opts)) {

                    if ("ajax" in opts) {

                        ajaxUrl = opts.element.data("ajax-url");

                        if (ajaxUrl && ajaxUrl.length > 0) {

                            opts.ajax.url = ajaxUrl;

                        }

                        opts.query = ajax.call(opts.element, opts.ajax);

                    } else if ("data" in opts) {

                        opts.query = local(opts.data);

                    } else if ("tags" in opts) {

                        opts.query = tags(opts.tags);

                        if (opts.createSearchChoice === undefined) {

                            opts.createSearchChoice = function (term) { return {id: $.trim(term), text: $.trim(term)}; };

                        }

                        if (opts.initSelection === undefined) {

                            opts.initSelection = function (element, callback) {

                                var data = [];

                                $(splitVal(element.val(), opts.separator, opts.transformVal)).each(function () {

                                    var obj = { id: this, text: this },

                                        tags = opts.tags;

                                    if ($.isFunction(tags)) tags=tags();

                                    $(tags).each(function() { if (equal(this.id, obj.id)) { obj = this; return false; } });

                            $('#open_new_pr').prop('href', pyroutes.url('pullrequest_home',

                                                                        {'repo_name': '${c.repo_name}',

                                                                        'branch':'${c.first_revision.branch}'}));

                            $('#open_new_pr').html(_TM['Open New Pull Request from {0}'].format('${c.first_revision.branch}'));

                        %endif

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

                        $checkboxes.closest('tr').removeClass('out-of-range');

                    }

                };

                checkbox_checker();

                $checkboxes.click(function() {

                    checkbox_checker();

                    r.render(jsdata,100);

                });

                $('#singlerange').click(checkbox_checker);

                $('#rev_range_clear').click(function(e){

                    $checkboxes.prop('checked', false);

                    checkbox_checker();

                    r.render(jsdata,100);

                });

                var $msgs = $('.message');

                // get first element height

                var el = $('#graph_content .container')[0];

                var row_h = el.clientHeight;

                $msgs.each(function() {

                    var m = this;

                    var h = m.clientHeight;

                    if(h > row_h){

                        var offset = row_h - (h+12);

                        $(m.nextElementSibling).css('display', 'block');

                        $(m.nextElementSibling).css('margin-top', offset+'px');

                    }

                });

                $('.expand_commit').on('click',function(e){

                    var cid = $(this).attr('commit_id');

                    $('#C-'+cid).toggleClass('expanded');

                    //redraw the graph, r and jsdata are bound outside function

                    r.render(jsdata,100);

                });

                // change branch filter

                $("#branch_filter").select2({

                    dropdownAutoWidth: true,

                    sortResults: branchSort

                    });

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

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

                    if(selected_branch != ''){

                        window.location = pyroutes.url('changelog_home', {'repo_name': '${c.repo_name}',

                                                                          'branch': selected_branch});

                    }else{

                        window.location = pyroutes.url('changelog_home', {'repo_name': '${c.repo_name}'});

                    }

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

                });

                var jsdata = ${c.jsdata|n};

                var r = new BranchRenderer('graph_canvas', 'graph_content', 'chg_');

                r.render(jsdata,100);

            });

        </script>

        %else:

            ${_('There are no changes yet')}

        %endif

    </div>

</div>

</%def>

                $('#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.url.current()}",

       data: {

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

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

         rev:"${c.changeset.raw_id}",

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

       }

    }

    fileBrowserListeners(_State.url, _State.data.node_list_url, _State.data.url_base);

    // change branch filter

    $("#branch_selector").select2({

        dropdownAutoWidth: true,

        sortResults: branchSort

        });

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

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

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

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

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

        } else {

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

        }

    });

});

</script>

</%def>

                         org_ref_type='rev',

                         org_ref_name='__other_ref_name__',

                         other_repo='__org_repo__',

                         other_ref_type='rev',

                         other_ref_name='__org_ref_name__',

                         as_form=True,

                         merge=True,

                         )}";

      var org_repo = $('#pull_request_form #org_repo').val();

      var org_ref = $('#pull_request_form #org_ref').val().split(':');

      ## TODO: make nice link like link_to_ref() do

      $('#org_rev_span').html(org_ref[2].substr(0,12));

      var other_repo = $('#pull_request_form #other_repo').val();

      var other_ref = $('#pull_request_form #other_ref').val().split(':');

      $('#other_rev_span').html(other_ref[2].substr(0,12));

      var rev_data = {

          '__org_repo__': org_repo,

          '__org_ref_name__': org_ref[2],

          '__other_repo__': other_repo,

          '__other_ref_name__': other_ref[2]

      }; // gather the org/other ref and repo here

      for (k in rev_data){

          url = url.replace(k,rev_data[k]);

      }

      if (pendingajax) {

          pendingajax.abort();

          pendingajax = undefined;

      }

      pendingajax = asynchtml(url, $('#pull_request_overview'), function(o){

          pendingajax = undefined;

          var jsdata = eval('('+$('#jsdata').html()+')'); // TODO: just get json

          var r = new BranchRenderer('graph_canvas', 'graph_content_pr', 'chg_');

          r.render(jsdata,100);

      });

  }

  $(document).ready(function(){

      $("#org_repo").select2({

          dropdownAutoWidth: true

      });

      ## (org_repo can't change)

      $("#org_ref").select2({

          dropdownAutoWidth: true,

          sortResults: branchSort

      });

      $("#org_ref").on("change", function(e){

          loadPreview();

      });

      $("#other_repo").select2({

          dropdownAutoWidth: true

      });

      $("#other_repo").on("change", function(e){

          otherrepoChanged();

      });

      $("#other_ref").select2({

          dropdownAutoWidth: true,

          sortResults: branchSort

      });

      $("#other_ref").on("change", function(e){

          loadPreview();

      });

      //lazy load overview after 0.5s

      setTimeout(loadPreview, 500);

  });

</script>

</%def>