$(document).ready(JTAC_init);

function JTAC_init() {
  var count = 0;
  $("textarea[maxlength]").each(function(count){
    var max = this.getAttribute('maxlength');
    var html_counter = "<div class=\"charcount\">0/" + max +"</div>";
    $(this).after(html_counter);
    this.counterElement = $('.charcount')[count];
    count = count + 1;
  });
  // update counters and set keyup observer
  $("textarea[maxlength]").each(function(){JTAC_update(this)}).keyup(function(){JTAC_update(this)});

  // update counters and set keyup observer
  $('textarea.jTacHint').each(function(){
    var title = $(this).attr('title');
    $(this).focus(function(){
      if ($(this).val() == title) {
        $(this).removeClass('jTacHint').val('');
      }
    }).blur(function(){
      $(this).attr('typedValue', $(this).val());
      if ($(this).val() == '') {
        $(this).addClass('jTacHint').val(title);
      }
    }).blur();
  });
}

function JTAC_update(ta){
  var maxLength = ta.getAttribute('maxlength');
  var currentLength = 0;
  var title = $(ta).attr('title');
  if(!($(ta).hasClass('jTacHint') && ta.value == title)) {
    currentLength = ta.value.length;
  }
  if(currentLength >= maxLength) {
    $(ta.counterElement).addClass('limit');
    ta.value = ta.value.substring(0, maxLength);
    $(ta.counterElement).html(maxLength + "/" + maxLength);
  } else {
    $(ta.counterElement).removeClass('limit');
    $(ta.counterElement).html(currentLength + "/" + maxLength);
  }
}