for(var i=0; i < route[1].length; i++) {

                   if (!params.hasOwnProperty(route[1][i]))

                        throw new Error(route[1][i] + ' missing in "' + route_name + '" route generation');

                }

                result = sprintf(route[0], params);

                var ret = [];

                //extra params => GET

                for(param in params){

                    if (route[1].indexOf(param) == -1){

                        ret.push(encodeURIComponent(param) + "=" + encodeURIComponent(params[param]));

                    }

                }

                var _parts = ret.join("&");

                if(_parts){

                    result = result +'?'+ _parts

                }

            }

            return result;

        },

        'register': function(route_name, route_tmpl, req_params) {

            if (typeof(req_params) != 'object') {

                req_params = [];

            }

            //fix escape

            route_tmpl = unescape(route_tmpl);

            keys = [];

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

                keys.push(req_params[i])

            }

            matchlist[route_name] = [

                route_tmpl,

                keys

            ]

        },

        '_routes': function(){

            return matchlist;

        }

    }

})();

/**

 * GLOBAL YUI Shortcuts

 */

var YUC = YAHOO.util.Connect;

var YUD = YAHOO.util.Dom;

var YUE = YAHOO.util.Event;

var YUQ = YAHOO.util.Selector.query;

/* Invoke all functions in callbacks */

var _run_callbacks = function(callbacks){

    if (callbacks !== undefined){

        var _l = callbacks.length;

        for (var i=0;i<_l;i++){

            var func = callbacks[i];

            if(typeof(func)=='function'){

                try{

                    func();

                }catch (err){};

            }

        }

    }

}

/**

 * turns objects into GET query string

 */

var _toQueryString = function(o) {

    if(typeof o !== 'object') {

        return false;

    }

    var _p, _qs = [];

    for(_p in o) {

        _qs.push(encodeURIComponent(_p) + '=' + encodeURIComponent(o[_p]));

    }

    return _qs.join('&');

};

/**

 * Partial Ajax Implementation

 *

 * @param url: defines url to make partial request

 * @param container: defines id of container to input partial result

 * @param s_call: success callback function that takes o as arg

 *  o.tId

 *  o.status

 *  o.statusText

 *  o.getResponseHeader[ ]

 *  o.getAllResponseHeaders

 *  o.responseText

 *  o.responseXML

 *  o.argument

 * @param args arguments

 */

    var method='GET';

    if(args===undefined){

        args=null;

    }

    // Set special header for partial ajax == HTTP_X_PARTIAL_XHR

    YUC.initHeader('X-PARTIAL-XHR',true);

    // wrapper of passed callback

    var s_wrapper = (function(o){

        return function(o){

            //execute the given original callback

            if (s_call !== undefined && s_call){

                s_call();

            }

        }

    })()

            console.log('ypjax failure: '+o);

        },

        cache:false

    },args);

};

var ajaxGET = function(url,success) {

    // Set special header for ajax == HTTP_X_PARTIAL_XHR

    YUC.initHeader('X-PARTIAL-XHR',true);

    var sUrl = url;

    var callback = {

        success: success,

        failure: function (o) {

            if (o.status != 0) {

                alert("Ajax GET error: " + o.statusText);

            };

        },

    };

    var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);

    return request;

};

var ajaxPOST = function(url,postData,success) {

    // Set special header for ajax == HTTP_X_PARTIAL_XHR

    YUC.initHeader('X-PARTIAL-XHR',true);

    var sUrl = url;

    var callback = {

        success: success,

        failure: function (o) {

            alert("Ajax POST error: " + o.statusText);

        },

    };

    var postData = _toQueryString(postData);

    var request = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback, postData);

    return request;

};

/**

 * activate .show_more links

 * the .show_more must have an id that is the the id of an element to hide prefixed with _

 * the parentnode will be displayed

 */

var show_more_event = function(){

    $('.show_more').click(function(e){

        var el = e.currentTarget;

        $('#' + el.id.substring(1)).hide();

        $(el.parentNode).show();

    });

};

/**

 * activate .lazy-cs mouseover for showing changeset tooltip

 */

var show_changeset_tooltip = function(){

    $('.lazy-cs').mouseover(function(e){

        var $target = $(e.currentTarget);

        var rid = $target.attr('raw_id');

        var repo_name = $target.attr('repo_name');

        if(rid && !$target.hasClass('tooltip')){

            _show_tooltip(e, _TM['loading ...']);

            var url = pyroutes.url('changeset_info', {"repo_name": repo_name, "revision": rid});

            ajaxGET(url, function(o){

                    var json = JSON.parse(o.responseText);

                    $target.addClass('tooltip')

                    _show_tooltip(e, json['message']);

                    _activate_tooltip($target);

                });

        }

    });

};

var _onSuccessFollow = function(target){

    var $target = $(target);

    var $f_cnt = $('#current_followers_count');

    if($target.hasClass('follow')){

        $target.attr('class', 'following');

        $target.attr('title', _TM['Stop following this repository']);

        if($f_cnt.html()){

            var cnt = Number($f_cnt.html())+1;

            $f_cnt.html(cnt);

        }

    }

    else{

        $target.attr('class', 'follow');

        $target.attr('title', _TM['Start following this repository']);

        if($f_cnt.html()){

            var cnt = Number($f_cnt.html())-1;

            $f_cnt.html(cnt);

        }

    }

}

        </div>

        <div style="clear:both;padding: 0 0 30px 0;"></div>

        <h4>${_('Changesets')}</h4>

        <div style="float:left;padding:0px 30px 30px 30px">

           ## overview pulled by ajax

           <div style="float:left" id="pull_request_overview"></div>

        </div>

        <div style="clear:both;"></div>

    </div>

    ${h.end_form()}

</div>

<script type="text/javascript" src="${h.url('/js/graph.js')}"></script>

<script type="text/javascript">

  var _USERS_AC_DATA = ${c.users_array|n};

  var _GROUPS_AC_DATA = ${c.user_groups_array|n};

  PullRequestAutoComplete('user', 'reviewers_container', _USERS_AC_DATA, _GROUPS_AC_DATA);

  pyroutes.register('pullrequest_repo_info', "${url('pullrequest_repo_info',repo_name='%(repo_name)s')}", ['repo_name']);

  var otherrepoChanged = function(){

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

      ajaxGET(pyroutes.url('pullrequest_repo_info', {"repo_name": repo_name}),

          function(o){

              var data = JSON.parse(o.responseText);

              $('#other_repo_desc').html(data.description);

              // replace options of other_ref with the ones for the current other_repo

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

              $other_ref.empty();

              for(var i = 0; i < data.refs.length; i++)

              {

                var $optgroup = $('<optgroup/>').attr('label', data.refs[i][1]);

                var options = data.refs[i][0];

                var length = options.length;

                for(var j = 0; j < length; j++)

                {

                  $optgroup.append($('<option/>').text(options[j][1]).val(options[j][0]));

                }

                $other_ref.append($optgroup);

              }

              $other_ref.val(data.selected_ref);

              // reset && add the reviewer based on selected repo

              YUD.get('review_members').innerHTML = '';

              addReviewMember(data.user.user_id, data.user.firstname,

                              data.user.lastname, data.user.username,

                              data.user.gravatar_link);

              // re-populate the select2 thingie

              $("#other_ref").select2({

                  dropdownAutoWidth: true,

              });

              loadPreview();

          });

  };

  var loadPreview = function(){

      //url template

      var url = "${h.url('compare_url',

                         repo_name='__other_repo__',

                         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 = YUQ('#pull_request_form #org_repo')[0].value;

      var org_ref = YUQ('#pull_request_form #org_ref')[0].value.split(':');

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

      YUD.get('org_rev_span').innerHTML = org_ref[2].substr(0,12);

      var other_repo = YUQ('#pull_request_form #other_repo')[0].value;

      var other_ref = YUQ('#pull_request_form #other_ref')[0].value.split(':');

      YUD.get('other_rev_span').innerHTML = other_ref[2].substr(0,12);

      var select_refs = YUQ('#pull_request_form select.refs')

      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]);

      }

      ypjax(url,'pull_request_overview', function(o){

          var jsdata = eval('('+YUD.get('jsdata').innerHTML+')');

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

          r.render(jsdata,100);

      });

  }

  $(document).ready(function(){

      $("#org_repo").select2({

          dropdownAutoWidth: true,

      });

      ## (org_repo can't change)

      $("#org_ref").select2({

          dropdownAutoWidth: true,

      });

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

          loadPreview();

      });

      $("#other_repo").select2({

          dropdownAutoWidth: true,

      });

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

          otherrepoChanged();

      });

      $("#other_ref").select2({

          dropdownAutoWidth: true,

      });

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

          loadPreview();

      });

      //lazy load overview after 0.5s

      setTimeout(loadPreview, 500);

  });

</script>

</%def>