var signifier = 'charcount__';
var signifierLength = signifier.length;


function addCharacterCount() {
  
	var textarea = $(this);
  
  if (!textarea.prop('className')) {
    return;
  }
   
	var classes = textarea.prop('className').split(' ');

	for (var i = 0; i < classes.length; i++) {
          	if (classes[i].substr(0, signifierLength) == signifier) {
			var maxLength = classes[i].substr(signifierLength);
			var charsRemaining = textarea.nextAll('.charcount_wrapper');

			var charsSoFar = null;
			if (charsRemaining.length < 1) {
				charsRemaining = $('<span class="charcount_wrapper">/' + maxLength + '</span>');
				charsSoFar = $('<span class="charcount">' + textarea.val().length + '</span>');
				textarea.after(charsRemaining.prepend(charsSoFar));
			} else {
				charsSoFar = $('span.charcount', charsRemaining);
				charsSoFar.text(textarea.val().length);
			}

			textarea.keyup(function () {
				var currentLength = textarea.val().length;
				charsSoFar.text(currentLength);

				if (currentLength > maxLength) {
					charsRemaining.addClass('toolong');
				} else if (charsRemaining.hasClass('toolong')) {
					charsRemaining.removeClass('toolong');
				}
			});

			break;
		}
	}
}


$(function() {
  	//$('textarea').each(addCharacterCount);
        $("[class^=charcount__]").each(addCharacterCount);
});