function setupCounter() {
    // This function will take the textarea element within
    // the page's form and count the number of words that
    // the user typed in
    if (!document.getElementById) return false;
    if (!document.getElementById("job_description")) return false;
    if (!document.getElementById("job_how_to_apply")) return false;
	if (!document.getElementById("job_perks")) return false;

    // grab the textarea field for later use
    var job_description = document.getElementById("job_description");
    var job_how_to_apply    = document.getElementById("job_how_to_apply");
	var job_perks       = document.getElementById("job_perks");

    // create an element that will store the word count of the textarea
    // and place it below the textarea element
    createCounterMarkup("dtotal", "job_description");
    createCounterMarkup("atotal", "job_how_to_apply");
	createCounterMarkup("ptotal", "job_perks");

    // assign listener to this element to count every time
    // someone finishes entering a character into the textarea
    job_description.onkeyup = function() {
        var dtotal = countWords(this.getAttribute("id"));
        updateCount("dtotal", "job_description");
    }

    job_how_to_apply.onkeyup = function() {
        var atotal = countWords(this.getAttribute("id"));
        updateCount("atotal", "job_how_to_apply");
    }

	job_perks.onkeyup = function() {
		var ptotal = countWords(this.getAttribute("id"));
		updateCount("ptotal", "job_perks");
	}
}


function countWords(field) {
    var desc = document.getElementById(field);
    var descContent = desc.value;

    // start the counting!
    var count = 0;
    var a = descContent.replace(/\s/g, ' ');
    a = a.split(' ');
    for (var z=0; z<a.length; z++) {
        if (a[z].length > 0) {
            count++;
        }
    }

    return count;
}

function updateCount(totaler, fieldid) {
    // find the paragraph with the counter and update it with the
    // new count
    var numWords = countWords(fieldid);
    var emmer = document.getElementById(totaler);
    var emmerText = document.createTextNode(numWords);
    emmer.replaceChild(emmerText, emmer.firstChild);
}

function createCounterMarkup(fieldid, field) {
    // grab the field object
    var fieldObj = document.getElementById(field);

    // first create it's outer div
    // var diver = document.createElement("div");
    // diver.className = "wordcount";

    // now the paragraph
    var para = document.createElement("p");
    para.className = "wordcount";

    // and then the strong tag around the remaining words
    var stronger = document.createElement("strong");

    // the em tags for the number of words
    var emmer = document.createElement("em");
    emmer.setAttribute("id", fieldid);

    // count the words initially and assign to value of input field
    var initialWords = countWords(field);
    var emmerText = document.createTextNode(initialWords);

    // and text elements for the strong tag
    if (fieldid == "dtotal") {
        var strongerText = document.createTextNode("of 500 words allowed");
    } else if (fieldid == "atotal") {
        var strongerText = document.createTextNode("of 50 words allowed");
    } else {
		var strongerText = document.createTextNode("of 100 words allowed");
	}

    // and the text outside of the strong tags
    var paraText = document.createTextNode(" (line breaks okay; no HTML)");

    // and that space in between tags
    var spacer = document.createTextNode(" ");

    // append everything
    emmer.appendChild(emmerText);
    stronger.appendChild(emmer);
    stronger.appendChild(spacer);
    stronger.appendChild(strongerText);

    para.appendChild(stronger);
    para.appendChild(paraText);

    // diver.appendChild(para);

    // and now insert it into the document
    insertAfter(para, fieldObj);
}

addEvent(window, 'load', setupCounter, false);