anchor.diff:      <!-- Placed at the end of the document so the pages load faster -->
       <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
       <script src="<c:url value="/resources/js/bootstrap.min.js"/>"></script>
  +	<script src="<c:url value="/resources/js/jquery.gridster.min.js"/>"></script>
  +
  +<script type="text/javascript">
  +  var gridster;
  +
  +  $(function(){
  +
  +    gridster = $(".gridster > ul").gridster({
  +        widget_margins: [10, 10],
  +        widget_base_dimensions: [140, 40],
  +        min_cols: 3,
  +        resize: {
  +            enabled: true
  +        }
  +    }).data('gridster');
  +
  +
  +    // var collection = [
  +    //     ['<li><div class="title">drag</div>Widget content</li>', 1, 2],
  +    //     ['<li><div class="title">drag</div>Widget content</li>', 5, 2],
  +    //     ['<li><div class="title">drag</div>Widget content</li>', 3, 2],
  +    //     ['<li><div class="title">drag</div>Widget content</li>', 2, 1],
  +    //     ['<li><div class="title">drag</div>Widget content</li>', 4, 1],
  +    //     ['<li><div class="title">drag</div>Widget content</li>', 1, 2],
  +    //     ['<li><div class="title">drag</div>Widget content</li>', 2, 1],
  +    //     ['<li><div class="title">drag</div>Widget content</li>', 3, 2],
  +    //     ['<li><div class="title">drag</div>Widget content</li>', 1, 1],
  +    //     ['<li><div class="title">drag</div>Widget content</li>', 2, 2],
  +    //     ['<li><div class="title">drag</div>Widget content</li>', 1, 3],
  +    // ];
  +
  +    // $.each(collection, function(i, widget){
  +    //     gridster.add_widget.apply(gridster, widget)
  +    // });
  +
  +  });
  +</script>
  +
  +    
     </body>
   </html>
  
positive.code:     <!-- Bootstrap core CSS -->
      <link href="<c:url value="/resources/css/bootstrap.min.css"/>" rel="stylesheet">
      <link href="<c:url value="/resources/css/pinask.css"/>" rel="stylesheet">
  
      <!-- Just for debugging purposes.-->
      <!--[if lt IE 9]><script src="<c:url value="/resources/js/ie8-responsive-file-warning.js"/>"></script><![endif]-->
  
negative.code:         <p>
            <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
          </p>
  
  
  
  			<div role="main">
  
  				<section class="demo">
  					<div class="gridster">
  						<ul>
  							<li data-row="1" data-col="1" data-sizex="2" data-sizey="1"
  								onclick="alert('hi')"
  								style="background-color: #18064A; color: #fff; font-weight: bold;">Scala</li>
  							<li data-row="3" data-col="1" data-sizex="1" data-sizey="1"
  								style="color: #fff; font-weight: bold;">Spring</li>
  
  							<li data-row="3" data-col="2" data-sizex="2" data-sizey="1"></li>
  							<li data-row="1" data-col="2" data-sizex="2" data-sizey="2"></li>
  
  							<li class="try" data-row="1" data-col="4" data-sizex="1"
  								data-sizey="1" data-max-sizex="1" data-max-sizey="1"></li>
  							<li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
  							<li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>
  
  							<li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
  							<li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>
  
  							<li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
  							<li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
  						</ul>
  					</div>
  
  				</section>
  
  			</div>
  
  
  		</div>
  
      </div> <!-- /container -->
  
  