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

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

  var otherrepoChanged = function(){

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

      var repo_name = sel_box.options[sel_box.selectedIndex].value;

      var _tmpl = "<b>${_('Destination repository')}</b>: {0}".format(other_repos_info[repo_name]['description']);

      YUD.get('other_repo_desc').innerHTML = _tmpl

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

      var other_ref_selector = YUD.get('other_ref');

      var new_select = YUD.createElementFromMarkup(other_repos_info[repo_name]['revs']);

      var new_selectedIndex = new_select.selectedIndex;

      other_ref_selector.innerHTML = ""; // clear old options

      while (new_select.length > 0){ // children will be popped when appened to other_ref_selector

          other_ref_selector.appendChild(new_select.children[0]);

      }

      // browsers lost track of selected when appendChild was used

      other_ref_selector.selectedIndex = new_selectedIndex;

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

      var _data = other_repos_info[repo_name];

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

      addReviewMember(_data.user.user_id, _data.user.firstname,

                      _data.user.lastname, _data.user.username,

                      _data.user.gravatar_link);

  }

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

      }

      YUD.get('pull_request_overview').innerHTML = "${_('Loading ...')}";

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

          loadPreview();

      });

      otherrepoChanged();

      //lazy load overview after 0.5s

      setTimeout(loadPreview, 500);

  });

</script>

</%def>