FabricJs Tutorial : Add Custom Box When Select Object

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Starter Template for Bootstrap</title>
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://getbootstrap.com/examples/starter-template/starter-template.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">FabricJs</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container" style="padding: 0px;width: 100%;">

      <div class="starter-template">
	      <div class="row" style="padding:0px">
	      	<div class="col-md-4 col-sm-4">
	      		<div class="row">
		      		<div class="col-xs-9">
		      			Background Color
		      		</div>
		      		<div class="col-xs-3">
		      			<input type="color" id="bg_color">
		      		</div>
		      	</div>
		      	<br>
		      	<div class="row">
		      		<div class="col-xs-9">
	      				<input type="text" id="new_text" class="form-control" placeholder="Add new text here">
		      		</div>
		      		<div class="col-xs-3">
	      				<input type="button" id="btn_add_new" class="btn btn-primary" value="Add">
		      		</div>
		      	</div>
	      	</div>
	      	<div class="col-md-7 col-sm-7">
	      		<canvas width="500" height="500" id="canvas"></canvas>
	      	</div>
	      </div>
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
  	<script type="text/javascript" src="http://fabricjs.com/lib/fabric.js"></script>
  	<script src="script.js"></script>
  </body>
</html>

var canvas = new fabric.Canvas("canvas");
canvas.backgroundColor = '#666';
canvas.renderAll();
$('#bg_color').on('input', function() { 
	canvas.backgroundColor = $('#bg_color').val();
	canvas.renderAll();
});
$('#btn_add_new').click(function(e) {
  e.preventDefault();
  if($('#new_text').val() !== '')
  {
    var newText = new fabric.IText($('#new_text').val(), { 
        fontFamily: "Arial", 
        left: 10,
        top: 10,
        fontSize: 20,
        textAlign: "left",
        fill: '#fff',
    });
    canvas.add(newText);
    canvas.renderAll();
    $('#new_text').val('');
  }
});

canvas.on('object:selected', function(e) {
  onObjectSelected(e, canvas);
});

canvas.on('selection:cleared', function(e) {
  onSelectionCleared(canvas);
});

function onObjectSelected(e, canvas){
  showImageTools(e.target, canvas);
}
function onSelectionCleared(side){
  $('#customBox').remove();
}

function removeLayers(index){
  canvas.getObjects()[index].remove();
}


function showImageTools (e, side) {
    var url = 'customBox.html';
    $.get(url, function(data) { 
        if (!$('#customBox').length) {
            $('body').append("<div id='customBox' style='position: absolute; top: 10; left: -50'><h3>"+data+"</h3></div>");

        }
        moveImageTools(e, side);
    });
}

function moveImageTools (e, side) {
    var w = $('#customBox').width();
    var h = $('#customBox').height();
    var coords = getObjPosition(e, side);
    var top = coords.bottom+10;
    var left = coords.left;
    $('#customBox').show();
    $('#customBox').css({top: top, left: left});
}

function getObjPosition (e, side) {
    var rect = e.getBoundingRect();
    var offset = side.calcOffset();
    var bottom = offset._offset.top + rect.top + rect.height;
    var right = offset._offset.left + rect.left + rect.width;
    var left = offset._offset.left + rect.left;
    var top = offset._offset.top + rect.top;
    return {left: left, top: top, right: right, bottom: bottom};
}

/* Styles go here */
canvas{
  border: 1px solid #000;
}
div.overlay {
  display:        table;
  position:       fixed;
  top:            0;
  left:           0;
  width:          100%;
  height:         100%;
  z-index:        999;
}
div.overlay > div {
  display:        table-cell;
  width:          100%;
  height:         100%;
  background:     #fff;
  text-align:     center;
  vertical-align: middle;
}
.arrow_box {
  position: relative;
  background: #f0f0f0;
  border: 1px solid #444;
  padding: 10px 5px 0px 5px;
}
.arrow_box:after, .arrow_box:before {
  bottom: 100%;
  left: 10%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow_box:after {
  border-color: rgba(184, 184, 184, 0);
  border-bottom-color: #f0f0f0;
  border-width: 5px;
  margin-left: -5px;
}
.arrow_box:before {
  border-color: rgba(0, 0, 0, 0);
  border-bottom-color: #000000;
  border-width: 6px;
  margin-left: -6px;
}

<div id="customBox">
	<div class="arrow_box">
		<a class="button alert tiny" id="remove_layers">X</a>
		<a class="button secondary tiny" id="move_up_layers">Move Up</a>
		<a class="button secondary tiny" id="move_down_layers">Move Down</a>
	</div>
</div>