case 's': arg = ((arg = String(arg)) && match[7] ? arg.substring(0, match[7]) : arg); break;

                        case 'u': arg = Math.abs(arg); break;

                        case 'x': arg = arg.toString(16); break;

                        case 'X': arg = arg.toString(16).toUpperCase(); break;

                    }

                    arg = (/[def]/.test(match[8]) && match[3] && arg >= 0 ? '+'+ arg : arg);

                    pad_character = match[4] ? match[4] == '0' ? '0' : match[4].charAt(1) : ' ';

                    pad_length = match[6] - String(arg).length;

                    pad = match[6] ? str_repeat(pad_character, pad_length) : '';

                    output.push(match[5] ? arg + pad : pad + arg);

                }

            }

            return output.join('');

        };

        str_format.cache = {};

        str_format.parse = function(fmt) {

            var _fmt = fmt, match = [], parse_tree = [], arg_names = 0;

            while (_fmt) {

                if ((match = /^[^\x25]+/.exec(_fmt)) !== null) {

                    parse_tree.push(match[0]);

                }

                else if ((match = /^\x25{2}/.exec(_fmt)) !== null) {

                    parse_tree.push('%');

                }

                else if ((match = /^\x25(?:([1-9]\d*)\$|\(([^\)]+)\))?(\+)?(0|'[^$])?(-)?(\d+)?(?:\.(\d+))?([b-fosuxX])/.exec(_fmt)) !== null) {

                    if (match[2]) {

                        arg_names |= 1;

                        var field_list = [], replacement_field = match[2], field_match = [];

                        if ((field_match = /^([a-z_][a-z_\d]*)/i.exec(replacement_field)) !== null) {

                            field_list.push(field_match[1]);

                            while ((replacement_field = replacement_field.substring(field_match[0].length)) !== '') {

                                if ((field_match = /^\.([a-z_][a-z_\d]*)/i.exec(replacement_field)) !== null) {

                                    field_list.push(field_match[1]);

                                }

                                else if ((field_match = /^\[(\d+)\]/.exec(replacement_field)) !== null) {

                                    field_list.push(field_match[1]);

                                }

                                else {

                                    throw('[sprintf] huh?');

                                }

                            }

                        }

                        else {

                            throw('[sprintf] huh?');

                        }

                        match[2] = field_list;

                    }

                    else {

                        arg_names |= 2;

                    }

                    if (arg_names === 3) {

                        throw('[sprintf] mixing positional and named placeholders is not (yet) supported');

                    }

                    parse_tree.push(match);

                }

                else {

                    throw('[sprintf] huh?');

                }

                _fmt = _fmt.substring(match[0].length);

            }

            return parse_tree;

        };

        return str_format;

    })();

    var vsprintf = function(fmt, argv) {

        argv.unshift(fmt);

        return sprintf.apply(null, argv);

    };

    return {

        'url': function(route_name, params) {

            var result = route_name;

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

                params = {};

            }

            if (matchlist.hasOwnProperty(route_name)) {

                var route = matchlist[route_name];

                // param substitution

                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(var 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 = [];

            }

            var keys = [];

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

                keys.push(req_params[i])

            }

            matchlist[route_name] = [

                unescape(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('&');

};

/**

 * Load HTML into DOM using Ajax

 *

 * @param $target: load html async and place it (or an error message) here

 * @param success: success callback function

 * @param args: query parameters to pass to url

 */

function asynchtml(url, $target, success, args){

    if(args===undefined){

        args=null;

    }

    $target.html(_TM['Loading ...']).css('opacity','0.3');

    return $.ajax({url: url, data: args, headers: {'X-PARTIAL-XHR': '1'}, cache: false, dataType: 'html'})

        .done(function(html) {

                $target.html(html);

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

                //execute the given original callback

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

                    success();

                }

            })

        .fail(function(jqXHR, textStatus, errorThrown) {

                if (textStatus == "abort")

                    return;

                console.log('Ajax failure: ' + textStatus);

                $target.html('<span class="error_red">ERROR: {0}</span>'.format(textStatus));

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

            })

        ;

};

var ajaxGET = function(url,success) {

};

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

    var postData = _toQueryString(postData);

    return $.ajax({url: url, data: postData, type: 'POST', headers: {'X-PARTIAL-XHR': '1'}, cache: false})

        .done(success)

        .fail(function(jqXHR, textStatus, errorThrown) {

                if (textStatus == "abort")

                    return;

                alert("Ajax POST error: " + textStatus);

            })

        ;

};

/**

 * 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});

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

        }

    }

}

var toggleFollowingRepo = function(target, follows_repo_id, token, user_id){

    var args = 'follows_repo_id=' + follows_repo_id;

    args += '&auth_token=' + token;

    if(user_id != undefined){

        args +="&user_id=" + user_id;

    }

    $.post(TOGGLE_FOLLOW_URL, args, function(data){

            _onSuccessFollow(target);

        });

    return false;

};

var showRepoSize = function(target, repo_name, token){

    var args = 'auth_token=' + token;

    if(!$("#" + target).hasClass('loaded')){

        $("#" + target).html(_TM['Loading ...']);

        var url = pyroutes.url('repo_size', {"repo_name":repo_name});

        $.post(url, args, function(data) {

            $("#" + target).html(data);

            $("#" + target).addClass('loaded');

        });

    }

    return false;

};

/**

 * tooltips

 */

var tooltip_activate = function(){

    $(document).ready(_init_tooltip);

};

var _activate_tooltip = function($tt){

    $tt.mouseover(_show_tooltip);

    $tt.mousemove(_move_tooltip);

    $tt.mouseout(_close_tooltip);

};

var _init_tooltip = function(){

    var $tipBox = $('#tip-box');

    if(!$tipBox.length){

        $tipBox = $('<div id="tip-box"></div>')

        $(document.body).append($tipBox);

    }

    $tipBox.hide();

    $tipBox.css('position', 'absolute');

    $tipBox.css('max-width', '600px');

    _activate_tooltip($('.tooltip'));

};

var _show_tooltip = function(e, tipText){

    e.stopImmediatePropagation();

    var el = e.currentTarget;

    if(tipText){

        // just use it

    } else if(el.tagName.toLowerCase() === 'img'){

        tipText = el.alt ? el.alt : '';

    } else {

        tipText = el.title ? el.title : '';

    }

    if(tipText !== ''){

        // save org title

        $(el).attr('tt_title', tipText);

        // reset title to not show org tooltips

        $(el).attr('title', '');

        var $tipBox = $('#tip-box');

        $tipBox.html(tipText);

        $tipBox.css('display', 'block');

    }

};

var _move_tooltip = function(e){

    e.stopImmediatePropagation();

    var $tipBox = $('#tip-box');

    $tipBox.css('top', (e.pageY + 15) + 'px');

    $tipBox.css('left', (e.pageX + 15) + 'px');

};

var _close_tooltip = function(e){

    e.stopImmediatePropagation();

    var $tipBox = $('#tip-box');

    $tipBox.hide();

    var el = e.currentTarget;

    $(el).attr('title', $(el).attr('tt_title'));

};

/**

 * Quick filter widget

 *

 * @param target: filter input target

 * @param nodes: list of nodes in html we want to filter.

 * @param display_element function that takes current node from nodes and

 *    does hide or show based on the node

 */

var q_filter = function(target, nodes, display_element){

    var nodes = nodes;

    var $q_filter_field = $('#' + target);

    var F = YAHOO.namespace(target);

    $q_filter_field.keyup(function(e){

        clearTimeout(F.filterTimeout);

        F.filterTimeout = setTimeout(F.updateFilter, 600);

    });

    F.filterTimeout = null;

    F.updateFilter  = function() {

        // Reset timeout

        F.filterTimeout = null;

        var obsolete = [];

        var req = $q_filter_field.val().toLowerCase();

        var l = nodes.length;

        var i;

        var showing = 0;

        for (i=0; i<l; i++ ){

            var n = nodes[i];

            var target_element = display_element(n)

            if(req && n.innerHTML.toLowerCase().indexOf(req) == -1){

                $(target_element).hide();

            }

            else{

                $(target_element).show();

                showing += 1;

            }

        }

        $('#repo_count').html(showing); /* FIXME: don't hardcode */

    }

};

/* return jQuery expression with a tr with body in 3rd column and class cls and id named after the body */

var _table_tr = function(cls, body){

    // like: <div class="comment" id="comment-8" line="o92"><div class="comment-wrapp">...

    // except new inlines which are different ...

    var comment_id = ($(body).attr('id') || 'comment-new').split('comment-')[1];

    var tr_id = 'comment-tr-{0}'.format(comment_id);

    return $(('<tr id="{0}" class="{1}">'+

                  '<td class="lineno-inline new-inline"></td>'+

                  '<td class="lineno-inline old-inline"></td>'+

                  '<td>{2}</td>'+

                 '</tr>').format(tr_id, cls, body));

};

/** return jQuery expression with new inline form based on template **/

var _createInlineForm = function(parent_tr, f_path, line) {

    var $tmpl = $('#comment-inline-form-template').html().format(f_path, line);

    var $form = _table_tr('comment-form-inline', $tmpl)

    // create event for hide button

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

        var newtr = e.currentTarget.parentNode.parentNode.parentNode.parentNode.parentNode;

        if($(newtr).next().hasClass('inline-comments-button')){

            $(newtr).next().show();

<%inherit file="/base/base.html"/>

<%def name="title()">

    ${c.repo_name} ${_('New Pull Request')}

</%def>

<%def name="breadcrumbs_links()">

    ${_('New Pull Request')}

</%def>

<%def name="page_nav()">

    ${self.menu('repositories')}

</%def>

<%def name="main()">

${self.repo_context_bar('showpullrequest')}

<div class="box">

    <!-- box / title -->

    <div class="title">

        ${self.breadcrumbs()}

    </div>

    ${h.form(url('pullrequest', repo_name=c.repo_name), method='post', id='pull_request_form')}

    <div class="form">

        <!-- fields -->

        <div class="fields" style="float:left;width:50%;padding-right:30px;">

             <div class="field">

                <div class="label">

                    <label for="pullrequest_title">${_('Title')}:</label>

                </div>

                <div class="input">

                    ${h.text('pullrequest_title',class_="large",placeholder=_('Summarize the changes - or leave empty'))}

                </div>

             </div>

            <div class="field">

                <div class="label label-textarea">

                    <label for="pullrequest_desc">${_('Description')}:</label>

                </div>

                <div class="textarea text-area editor">

                    ${h.textarea('pullrequest_desc',size=30,placeholder=_('Write a short description on this pull request'))}

                </div>

            </div>

            <div class="field">

                <div class="label label-textarea">

                    <label for="pullrequest_desc">${_('Changeset flow')}:</label>

                </div>

                <div class="input">

                    ##ORG

                    <div>

                        <div>

                            <div style="padding:5px 3px 3px 3px;">

                            <b>${_('Origin repository')}:</b> <span id="org_repo_desc">${c.db_repo.description.split('\n')[0]}</span>

                            </div>

                            <div>

                            ${h.select('org_repo','',c.cs_repos,class_='refs')}:${h.select('org_ref',c.default_cs_ref,c.cs_refs,class_='refs')}

                            </div>

                            <div style="padding:5px 3px 3px 3px;">

                            <b>${_('Revision')}:</b> <span id="org_rev_span">-</span>

                            </div>

                        </div>

                    </div>

                    ##OTHER, most Probably the PARENT OF THIS FORK

                    <div style="border-top: 1px solid #EEE; margin: 5px 0px 0px 0px">

                        <div>

                            ## filled with JS

                            <div style="padding:5px 3px 3px 3px;">

                            <b>${_('Destination repository')}:</b> <span id="other_repo_desc">${c.a_repo.description.split('\n')[0]}</span>

                            </div>

                            <div>

                            ${h.select('other_repo',c.a_repo.repo_name,c.a_repos,class_='refs')}:${h.select('other_ref',c.default_a_ref,c.a_refs,class_='refs')}

                            </div>

                            <div style="padding:5px 3px 3px 3px;">

                            <b>${_('Revision')}:</b> <span id="other_rev_span">-</span>

                            </div>

                        </div>

                    </div>

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

                </div>

            </div>

            <div class="field">

                <div class="buttons">

                    ${h.submit('save',_('Create Pull Request'),class_="btn")}

                    ${h.reset('reset',_('Reset'),class_="btn")}

               </div>

            </div>

        </div>

        ## Reviewers

        <div style="float:left; border-left:1px dashed #eee">

            <div class="pr-details-title">${_('Pull Request Reviewers')}</div>

            <div id="reviewers" style="padding:0px 0px 0px 15px">

              ## members goes here !

              <div>

                <ul id="review_members" class="group_members">

                %for member in [c.a_repo.user]:

                  <li id="reviewer_${member.user_id}">

                    <div class="reviewers_member">

                      <div class="gravatar"><img alt="gravatar" src="${h.gravatar_url(member.email, 14)}"/> </div>

                      <div style="float:left">${member.firstname} ${member.lastname} (${_('owner')})</div>

                      <input type="hidden" value="${member.user_id}" name="review_members" />

                      <span class="action_button" style="padding: 3px" onclick="removeReviewMember(${member.user_id})" title="${_('Remove reviewer')}">

                          <i class="icon-remove-circled" style="color: #FF4444;"></i>

                      </span>

                    </div>

                  </li>

                %endfor

                </ul>

              </div>

              <div class='ac'>

                <div class="reviewer_ac">

                   ${h.text('user', class_='yui-ac-input',placeholder=_('Type name of reviewer to add'))}

                   <div id="reviewers_container"></div>

                </div>

              </div>

            </div>

        </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 pendingajax = undefined;

  var otherrepoChanged = function(){

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

      $other_ref.prop('disabled', true);

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

      if (pendingajax) {

          pendingajax.abort();

          pendingajax = undefined;

      }

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

              pendingajax = undefined;

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

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

              $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

              });

              $other_ref.prop('disabled', false);

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

      }

      if (pendingajax) {

          pendingajax.abort();

          pendingajax = undefined;

      }

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

          pendingajax = undefined;

          var jsdata = eval('('+YUD.get('jsdata').innerHTML+')'); // TODO: just get json

          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>