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: <style>
  * {
  	color: #7F7F7F;
  	font-family: Arial, sans-serif;
  	font-size: 12px;
  	font-weight: normal;
  }
  #config {
  	overflow: auto;
  	margin-bottom: 10px;
  }
  .config {
  	float: left;
  	width: 200px;
  	height: 250px;
  	border: 1px solid #000;
  	margin-left: 10px;
  }
  .config .title {
  	font-weight: bold;
  	text-align: center;
  }
  .barcode2D,  #miscCanvas {
  	display: none;
  }
  #generator {
  	clear: both;
  }
  #barcodeTarget,  #canvasTarget {
  	margin-top: 20px;
  }
  </style>
  
  <script src="<%= APP_PATH %>/app/vendor/jquery-barcode/jquery-barcode.min.js?v=<%=APP_VERSION%>"></script>
  <div clas="row">
  	<div class="col-md-12 col-md-offset-2">
  		<div class="row">
  		  <div class="col-md-4">
  		    <form method="get">
  
  		      <div class="input-group input-group-ld">
  		        <span class="input-group-addon" id="codefrom">
  		        	From : 
  		        </span>
  		        <input type="text" class="form-control" id="barcodeValue" name="barcodeValue" placeholder="<%=@placeholder %>" aria-describedby="barcodeValue" value="">
  
  		        <span class="input-group-addon" id="codeto">
  		        	To : 
  		        </span>
  		        <input type="text" class="form-control" name="codeto" placeholder="<%=@placeholder %>" aria-describedby="codeto" value="">
  		        <span class="input-group-btn">
  		          <button class="btn btn-default" type="button" onclick="generateBarcode();">Generate !</button>
  		        </span>
  		      </div>
  
  		      </form>
  		  </div>
  		</div>
  	</div>
  </div>
  
  
  	<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: "#ffffff", //$("#bgColor").val(),
  	          color: "#000000", // $("#color").val(),
  	          barWidth: 1, //$("#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};
  	        }
  	        if (renderer == 'canvas'){
  	          clearCanvas();
  	          $("#barcodeTarget").hide();
  	          $("#canvasTarget").show().barcode(value, btype, settings);
  	        } else {
  	          $("#canvasTarget").hide();
  	          $("#barcodeTarget").html("").show().barcode(value, btype, settings);
  	        }
  	      }
  	          
  	      function showConfig1D(){
  	        $('.config .barcode1D').show();
  	        $('.config .barcode2D').hide();
  	      }
  	      
  	      function showConfig2D(){
  	        $('.config .barcode1D').hide();
  	        $('.config .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();
  	        });
  	        $('input[name=renderer]').click(function(){
  	          if ($(this).attr('id') == 'canvas') $('#miscCanvas').show(); else $('#miscCanvas').hide();
  	        });
  	        generateBarcode();
  	      });
  	  
  	    </script>
  
  <div clas="row">
  	<div class="col-md-12 col-md-offset-2">
  	  <!-- Please fill in the code : -->
  	  <!-- <input type="text" id="barcodeValue" value="12345670"> -->
  	  <!-- <div id="config"> -->
  	    <div class="col-md-4">
  	      <div class="title">Type</div>
  		      <ul class="list-group">
  	<!-- 		      <li class="list-group-item">
  			      	<input type="radio" name="btype" id="ean8" value="ean8">
  			      	<label for="ean8">EAN 8</label>
  			      </li>
  			      <li class="list-group-item">
  			      	<input type="radio" name="btype" id="ean13" value="ean13">
  			      	<label for="ean13">EAN 13</label>
  			      </li>
  			      <li class="list-group-item">
  			      	<input type="radio" name="btype" id="upc" value="upc">
  			      	<label for="upc">UPC</label>
  			      </li>
  			      <li class="list-group-item">
  			      	<input type="radio" name="btype" id="std25" value="std25">
  			      	<label for="std25">standard 2 of 5 (industrial)</label>
  			      </li>
  			      <li class="list-group-item">
  			      	<input type="radio" name="btype" id="int25" value="int25">
  			      	<label for="int25">interleaved 2 of 5</label>
  			      </li>
  	 -->
  	 		      <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>
  
negative.code: 		        </li>
  		      </div>
  
  		      <div class="barcode2D">
  		      <h2><span class="label label-success">Module size</span></h2>
  		      <li class="list-group-item">
  			      	<label for="moduleSize">Size</label>
  			        <input type="text" id="moduleSize" value="5" size="3">
  		        </li>
  		        <li class="list-group-item">
  			        <label for="quietZoneSize">Quiet Zone Modules</label>
  			        <input type="text" id="quietZoneSize" value="1" size="3">
  		        </li>
  		        <li class="list-group-item">
  			        <input type="checkbox" name="rectangular" id="rectangular">
  			        <label for="rectangular">Rectangular</label>
  		        </li>
  		      </div>
  	      </ul>
  	    </div>
  	</div>
  </div>
  
  <div clas="row">
  	<div class="col-md-12 col-md-offset-2">
  		<div class="row">
  		  <div class="col-md-4">
  		    <form method="get">
  
  		      <div class="input-group input-group-ld">
  		        <span class="input-group-addon" id="codefrom">
  		        	From : 
  		        </span>
  		        <input type="text" class="form-control" id="barcodeValue" name="barcodeValue" placeholder="<%=@placeholder %>" aria-describedby="barcodeValue" value="">
  
  		        <span class="input-group-addon" id="codeto">
  		        	To : 
  		        </span>
  		        <input type="text" class="form-control" name="codeto" placeholder="<%=@placeholder %>" aria-describedby="codeto" value="">
  		        <span class="input-group-btn">
  		          <button class="btn btn-primary" type="button" onclick="generateBarcode();">Generate !</button>
  		        </span>
  		      </div>
  
  		      </form>
  		  </div>
  		</div>
  	</div>
  </div>
  
  