<style type="text/css">  
  .progress{  
  width: 1px;  
  height: 14px;  
  overflow: hidden;  
  background-color: navy;  
  padding: 0px;  
  opacity:0.5;  
  }  
  </style>  

  <script type="text/JavaScript">  
  function textCounter(field,counter,maxlimit,linecounter) {  
// text width//  
var fieldWidth = parseInt(field.offsetWidth);  
var charcnt = field.value.length;

// trim the extra text  
if (charcnt > maxlimit) {
field.value = field.value.substring(0, maxlimit);  
}  

else {
// progress bar percentage  
var percentage = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ;  
document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+"px";  
document.getElementById(counter).innerHTML= +percentage+"%"  
// color correction on style from CCFFF -> CC0000  
setcolor(document.getElementById(counter),percentage,"background-color");  
}  
  }  

  function setcolor(obj,percentage,prop){  
obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";  
  }  

  </script>

$_MESSAGE$

<?if($PAGE_ID$='threadpage')?>  
  <textarea cols="80" rows="10" id="message" name="message" class="postTextFl" onKeyDown="textCounter(this,'progressbar1',5000)" onKeyUp="textCounter(this,'progressbar1',5000)" onFocus="textCounter(this,'progressbar1',5000)" ></textarea>  
  <?else?>  
  $_MESSAGE$  
  <?endif?>