anchor.diff:  			      	<input type="radio" name="btype" id="code128" value="code128">
   			      	<label for="code128">code 128</label><span class="label label-info pull-right">Alphanum</span>
   			      </li>
  -	<!-- 		      <li class="list-group-item">
  -			      	<input type="radio" name="btype" id="codabar" value="codabar">
  -			      	<label for="codabar">codabar</label>
  -			      </li>
  -			      <li class="list-group-item">
  -			      	<input type="radio" name="btype" id="msi" value="msi">
  -			      	<label for="msi">MSI</label>
  -			      </li>
  -	 -->
   	 		      <li class="list-group-item">
   			      	<input type="radio" name="btype" id="datamatrix" value="datamatrix">
  -			      	<label for="datamatrix">Data Matrix</label>
  +			      	<label for="datamatrix">Data Matrix</label><span class="label label-info pull-right">Alphanum</span>
   			      </li>
   		      </ul>
   	    </div>
   	    <div class="col-md-4 col-md-offset-1">
  -	      <div class="title">Misc</div>
  +	      <h2><span class="label label-success">Misc</span></h2>
   	      <ul class="list-group">
   		      <li class="list-group-item">
   		      	<label for="bgColor">Background</label>
  
positive.code: 		        </li>
  		      </div>
  
  		      <div class="barcode2D"> Module Size:
  		        <input type="text" id="moduleSize" value="5" size="3">
  		        Quiet Zone Modules:
  		        <input type="text" id="quietZoneSize" value="1" size="3">
  		        Form:
  		        <input type="checkbox" name="rectangular" id="rectangular">
  		        <label for="rectangular">Rectangular</label>
  		      </div>
  		      <div id="miscCanvas"> x :
  		        <input type="text" id="posX" value="10" size="3">
  		        y :
  		        <input type="text" id="posY" value="20" size="3">
  		      </div>
  	      </ul>
  	    </div>
  	    <!-- <div class="config">
  	      <div class="title">Format</div>
  	      <input type="radio" id="css" name="renderer" value="css" checked="checked">
  	      	<label for="css">CSS</label>
  	      <input type="radio" id="bmp" name="renderer" value="bmp">
  	      	<label for="bmp">BMP (not usable in IE)</label>
  	      <input type="radio" id="svg" name="renderer" value="svg">
  	      	<label for="svg">SVG (not usable in IE)</label>
  	      <input type="radio" id="canvas" name="renderer" value="canvas">
  	      	<label for="canvas">Canvas (not usable in IE)</label>
  	    </div> -->
  	  <!-- </div> -->
  	 <!--  <div id="submit">
  	    <input type="button" onclick="generateBarcode();" value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Generate the barcode&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
  	  </div> -->
  	</div>
  </div>
  
  
negative.code: <style>
  .barcode2D,  #miscCanvas {
  	display: none;
  }
  
  #barcodeTarget,  #canvasTarget {
  	margin-top: 20px;
  }
  </style>
  
  <script src="<%= APP_PATH %>/app/vendor/jquery-barcode/jquery-barcode.min.js?v=<%=APP_VERSION%>"></script>
  <script type="text/javascript">
  
    function generateBarcode(){
      var value = $("#barcodeValue").val();
      var btype = $("input[name=btype]:checked").val();
      var renderer = 'css'; // $("input[name=renderer]:checked").val();
      
  	var quietZone = false;
      if ($("#quietzone").is(':checked') || $("#quietzone").attr('checked')){
        quietZone = true;
      }
  	
      var settings = {
        output: renderer,
        bgColor: $("#bgColor").val(),
        color: $("#color").val(),
        barWidth: $("#barWidth").val(),
        barHeight: $("#barHeight").val(),
        moduleSize: $("#moduleSize").val(),
        posX: $("#posX").val(),
        posY: $("#posY").val(),
        addQuietZone: $("#quietZoneSize").val()
      };
      if ($("#rectangular").is(':checked') || $("#rectangular").attr('checked')){
        value = {code:value, rect: true};
      }
  	$("#canvasTarget").hide();
  	$("#barcodeTarget").html("").show().barcode(value, btype, settings);
    }
        
    function showConfig1D(){
      $('.barcode1D').show();
      $('.barcode2D').hide();
    }
    
    function showConfig2D(){
      $('.barcode1D').hide();
      $('.barcode2D').show();
    }
    
    function clearCanvas(){
      var canvas = $('#canvasTarget').get(0);
      var ctx = canvas.getContext('2d');
      ctx.lineWidth = 1;
      ctx.lineCap = 'butt';
      ctx.fillStyle = '#FFFFFF';
      ctx.strokeStyle  = '#000000';
      ctx.clearRect (0, 0, canvas.width, canvas.height);
      ctx.strokeRect (0, 0, canvas.width, canvas.height);
    }
    
    $(function(){
      $('input[name=btype]').click(function(){
        if ($(this).attr('id') == 'datamatrix') showConfig2D(); else showConfig1D();
      });
    });
  
  </script>
  
  <div clas="row">
  	<div class="col-md-12 col-md-offset-2">
  	    <div class="col-md-4">
  	      <h2><span class="label label-success">Type</span></h2>
  		      <ul class="list-group">
  	 		      <li class="list-group-item">
  			      	<input type="radio" name="btype" id="code11" value="code11" checked="checked">
  			      	<label for="code11">code 11</label><span class="label label-default pull-right">Numeric</span>
  