// ObjektCounter zum Ausstatten von HTML-Elementen mit einer einmaligen ID
var myTextboxCounterObjectId = 0;

// Klasse TextboxCounter
function TextboxCounter(textareaId, maxZeichen)
{
    //// Konstruktor: Eigenschaften initialisieren
    this.maxZeichen = maxZeichen;
    this.textareaId = textareaId;
    this.textareaElement;
    this.parentElement;
    this.myCounterElement;
    this.textboxCounterRef = this;
    this.objectId = myTextboxCounterObjectId++;
    //// Konstruktor: Methonaufrufe (Konstruktoraufruf ganz unten)
    this.Konstruktor = function()
    {
        this.CreateDiv();
        this.ModifyTextareaElement();
        this.CountText();
    }
    
    //// Methoden
    
    // Fuegt das DIV-Element direkt hinter der Textarea an und versieht es mit Attributen
    this.CreateDiv = function()
    {
        this.myCounterElement = document.createElement("div");
        this.myCounterElement.setAttribute("id", "textboxCounter" + myTextboxCounterObjectId);
        this.myCounterElement.style.fontFamily = "Arial, Helvetica, sans-serif";
        this.myCounterElement.style.fontSize = "11px";

        this.textareaElement = document.getElementById(this.textareaId);
        this.parentElement = this.textareaElement.parentNode;
        
        if (this.textareaElement.nextSibling != null)
        {
            this.parentElement.insertBefore(this.myCounterElement, this.textareaElement.nextSibling);
        }
        else
        {
            this.parentElement.appendChild(this.myCounterElement);
        }
    }
    
    // Versieht die Textarea mit den notwendigen Attributen und Events
    this.ModifyTextareaElement = function()
    {
        this.textareaElement.textboxCounterRef = this;
        this.textareaElement.onkeyup = this.CountText;
    }
    
    // Aendert den Textinhalt des DIV auf die aktuelle Anzahl berfuegbarer Zeichen in der Textarea
    this.CountText = function()
    {
        var myLength = this.textboxCounterRef.textareaElement.value.length;
        this.textboxCounterRef.myCounterElement.innerHTML = "Verfügbare Zeichen: " + (this.textboxCounterRef.maxZeichen - myLength);
        if (myLength > this.textboxCounterRef.maxZeichen)
        {
            this.textboxCounterRef.textareaElement.style.borderColor = "darkred";
            this.textboxCounterRef.myCounterElement.style.color = "darkred";
        }
        if (this.textboxCounterRef.maxZeichen + 1 > myLength)
        {
            this.textboxCounterRef.textareaElement.style.borderColor = "";
            this.textboxCounterRef.myCounterElement.style.color = "";
        }
    }
    
    // Konstruktoraufruf
    this.Konstruktor();
}