Template with Twitter Bootstrap and Fabric.js

HTML

<link rel="stylesheet" href="https://raw.github.com/twitter/bootstrap/01572f00bb5671aaab1763b85c9608c10362aef4/docs/assets/css/bootstrap.css">
<script src="https://raw.github.com/twitter/bootstrap/master/docs/assets/js/bootstrap.min.js"></script>
<script src="https://raw.github.com/kangax/fabric.js/master/dist/all.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<div class="container">
    <div class="row">
<div class="span2">
    <div id="btnGroup" class="btn-group">
        <button id="btnCreateCircle" class="btn btn-small" title="Circle" rel="tooltip"><i class="icon-adjust"></i></button>
        <button id="btnCreateText" class="btn btn-small" title="Text" rel="tooltip"><i class="icon-font"></i></button>
        <button id="btnCreateImage" class="btn btn-small" title="Image" rel="tooltip"><i class="icon-picture"></i></button>
    </div>
    
    <ul id="containerLayers">
    </ul>
</div>
<div class="span10">
    <canvas id="c" width="400" height="400"></canvas>
</div>
</div>
</div>

CSS

@import url('http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css');
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
    
canvas{
  border-width: 1px;
  border-style: solid;
  border-color: #000;
  margin: 5px; 
}
#btnGroup{
  margin: 5px 5px 10px 3px;
}
#containerLayers { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
}
#containerLayers li { 
    margin: 0 3px 3px 3px; 
    padding: 0.4em; 
    padding-left: 1.5em;
    height: 15px; 
}
#containerLayers li span { 
    position: absolute; 
    margin-left: -1.3em; 
}

.actived{
    border: 1px solid black;
}

JavaScript

var src = "http://fabricjs.com/lib/pug.jpg";
// canvas
var canvas = new fabric.Canvas('c');
canvas.backgroundColor = "#F5F5F5";

$("#btnCreateCircle").click(function(evt){
    // remove active state of each layer
    $("li").removeClass("actived");
    canvas.forEachObject(function(obj){
        obj.setActive(false);
        canvas.renderAll();
    });   
    
    // object
    var circle = new fabric.Circle({
        left: fabric.util.getRandomInt(25, canvas.width - 25),
        top: fabric.util.getRandomInt(25, canvas.height - 25),
        radius: 25,
        fill: "#dd0000"
    });
    circle.hasRotatingPoint = true;
    circle.setActive(true);
    canvas.add(circle);
    canvas.renderAll();
    
    // layer
    var id = canvas.getObjects().length - 1;
    $("#containerLayers").prepend('<li id="'+ id +'" class="ui-state-default actived"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> item ' + id + '</li>');
    $("#"+id).click(function(evt){
        if($(this).hasClass("actived")){
            /*
            $(this).removeClass("actived");
            canvas.item(id).setActive(false);
            canvas.renderAll();
            */
                
            // remove active state of all layers and objects
            $("li").removeClass("actived");
            canvas.forEachObject(function(obj){
                obj.setActive(false);
                canvas.renderAll();
            });
            
        }else{
            // remove active state of all layers and objects
            $("li").removeClass("actived");
            canvas.forEachObject(function(obj){
                obj.setActive(false);
                //canvas.renderAll();
            });
            
            $(this).addClass("actived");
            canvas.item(id).setActive(true);
            canvas.renderAll();        
        }
        
    });
    
});

$("#btnCreateText").click(function(evt){
    // remove active state of each layer
    $("li").removeClass("actived");
   ...