position: relative;

    overflow: hidden;

}

#graph_nodes {

    position: absolute;

}

#graph_content,

#graph .info_box,

#graph .container_header {

    margin-left: 100px;

	this.canvas = document.getElementById(canvas_id);

	var content = document.getElementById(content_id);

	if (!document.createElement("canvas").getContext)

		this.canvas = window.G_vmlCanvasManager.initElement(this.canvas);

	if (!this.canvas) { // canvas creation did for some reason fail - fail silently

		return;

	}

	this.ctx = this.canvas.getContext('2d');

	this.ctx.strokeStyle = 'rgb(0, 0, 0)';

	this.ctx.fillStyle = 'rgb(0, 0, 0)';

	this.cur = [0, 0];

	this.setColor = function(color, bg, fg) {

		var s = this.calcColor(color, bg, fg);

		this.ctx.strokeStyle = s;

		this.ctx.fillStyle = s;

	}

		var idx = 1;

		this.canvas.setAttribute('width',canvasWidth);

		this.canvas.setAttribute('height',content.clientHeight);

		// HiDPI version needs to be scaled by 2x then halved via css

		// Note: Firefox on OS X fails scaling if the canvas height is more than 32k

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

                    }

                };

                checkbox_checker();

                $checkboxes.click(function() {

                    checkbox_checker();

                });

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

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

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

                    checkbox_checker();

                });

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

                // get first element height

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

                var row_h = el.clientHeight;

                $('.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

                });

                // change branch filter

                $("#branch_filter").select2({

                    dropdownAutoWidth: true,

                    maxResults: 50,

                    }

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

                });

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

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

            });

        </script>

        %else:

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

        %endif

<script type="text/javascript">

    $(document).ready(function(){

%if not c.as_form:

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

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

%endif

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

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

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

        });

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

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

            $('#row-'+cid).toggleClass('hl', !$('#row-'+cid).hasClass('hl'));

        });

          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_');

      });

  }

  $(document).ready(function(){

      $("#org_repo").select2({

          dropdownAutoWidth: true

        <div class="field">

          <label>${_('Next iteration')}:</label>

            <div class="input">

              <div class="msg-div">${c.update_msg}</div>

              %if c.avail_revs:

              <div id="updaterevs" style="max-height:200px; overflow-y:auto; overflow-x:hidden; margin-bottom: 10px; padding: 1px 0">

                  <canvas id="avail_graph_canvas" style="width:0"></canvas>

                </div>

                <table id="updaterevs-table" class="noborder" style="padding-left:50px">

                  %for cnt, cs in enumerate(c.avail_cs):

                    <tr id="chg_available_${cnt+1}" class="${'mergerow' if len(cs.parents) > 1 and not (editable and cs.revision in c.avail_revs) else ''}">

                      %if c.cs_ranges and cs.revision == c.cs_ranges[-1].revision:

          $('.code-difftable').on('click', '.add-bubble', function(e){

              show_comment_form($(this));

          });

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

          var avail_r = new BranchRenderer('avail_graph_canvas', 'updaterevs-table', 'chg_available_');

          move_comments($(".comments .comments-list-chunk"));

          $('#updaterevs input').change(function(e){

              var update = !!e.target.value;

              $('#pr-form-save').prop('disabled',update);