{% extends "admin/change_form.html" %}
{% load i18n admin_modify adminmedia %}

{% block extrahead %}{{ block.super }}
<script type="text/javascript" src="../../../jsi18n/"></script>
<script type="text/javascript" src="/static/js/jquery-1.2.6.min.js"></script>
{{ media }}

<script type="text/javascript">
jQuery.fn.counter = function() {
  // setup initial counter display
  $(this).each(function() {
    var max = $(this).attr('maxlength');
    var val = $(this).attr('value');
    var cur = 0;
    if(val) // value="", or no value at all will cause an error
      cur = val.length;
    var left = max-cur;
    $(this).after("<span class='counter'>"
      + left.toString()+"</span> characters remaining");
    // Style as desired
    var c = $(this).next(".counter");
    c.css("margin-left","10px");
    c.css("padding", "0 3px 0 3px")
    c.css("border", "1px solid #ccc")
    if(left <= 10)
        c.css("background","#F4F379");
    else
        c.css("background","none");
 
    // setup counter to change with keystrokes 
    $(this).keyup(function(i) {
      var max = $(this).attr('maxlength');
      var val = $(this).attr('value');
      var cur = 0;
      if(val)
        cur = val.length;
      var left = max-cur;
      var c = $(this).next(".counter");
      c.text(left.toString());
      if(left <= 10)
          c.css("background","#F4F379");
      else
          c.css("background","none");
      return this;
    });
  });
  return this;
}

$(document).ready(function() {
  $("#id_pull_quote").counter();
});

//-->
</script>
{% endblock %}