anchor.diff:  <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">
  +<script type="text/javascript">
   
  -		      <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="">
  +  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();
  +    });
  +  });
   
  -		        <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>
  +</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>
  +	      <h2><span class="label label-success">Type</span></h2>
   		      <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>
  
positive.code: 			      	<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>
  			      </li>
  		      </ul>
  	    </div>
  	    <div class="col-md-4 col-md-offset-1">
  	      <div class="title">Misc</div>
  	      <ul class="list-group">
  		      <li class="list-group-item">
  		      	<label for="bgColor">Background</label>
  
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>
  
  