/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
* Licensed under the MIT License (LICENSE.txt).
*
* Version 1.0
*
* Contributions by:
*   - Neil Monroe (neil.monroe[at]gmail.com)
*/

(function ($) {

    $.fn.extend({
        countable: function (givenOptions) {
            return this.each(function () {
                var $this = $(this), interval, prev_char_diff, $el,
                options = $.extend({
                    threshold: .5,
                    appendMethod: 'insertAfter', // insertBefore || insertAfter || prependTo || appendTo
                    target: $this, // relative element with which to place the counter
                    startOpacity: .25,
                    maxLength: parseInt($this.attr('maxlength'), 10) || 0,
                    maxClassName: 'maxed',
                    className: 'counter',
                    tagName: 'span',
                    interval: 750,
                    positiveCopy: 'You have {n} characters left.',
                    negativeCopy: 'You are {n} characters over.',
                    fadeDuration: 'normal',
                    defaultText: '' // text to disregard in the character count
                }, givenOptions);

                // create counter element
                $el = $('<' + options.tagName + '/>')
                .html(options.positiveCopy.replace('{n}', '<span class="num"></span>'))
                .addClass(options.className);

                // set initial opacity to 0 if opacity is supported
                if ($.support.opacity) $el.css({ opacity: 0 }); // don't set opacity for IE to avoid clear text issues.

                // sppend counter element to the DOM
                $el[options.appendMethod](options.target);

                // hook up events for the input/textarea being monitored
                $this
                .bind('keyup', check)
                .bind('focus blur', function (event) {
                    if (event.type == 'blur') clearInterval(interval);
                    if (event.type == 'focus' && !interval) setInterval(check, options.interval);
                });

                // actual function to do the character counting and notification
                function check() {
                    var val = $this.val(),
                    length = (val == options.defaultText ? 0 : val.length),
                    percentage_complete = length / options.maxLength,
                    char_diff = options.maxLength - length,
                    opacity;

                    // return if we haven't made any progress
                    if (prev_char_diff != undefined && char_diff == prev_char_diff) return;

                    // if counter element is hidden and we are past the given threshold, show it
                    if ($el.is(':hidden') && percentage_complete >= options.threshold)
                        $el.show();
                    // if the counter element is visible and we are now under the given threshold, hide it
                    if ($el.is(':visible') && percentage_complete < options.threshold)
                        $el.hide();

                    if ($.support.opacity) { // don't set opacity for IE to avoid clear type issues.
                        // calculate the correct opacity
                        opacity = options.startOpacity + ((options.threshold - percentage_complete) * ((options.startOpacity * 2) - 2));
                        // animate to the correct opacity
                        $el.stop().fadeTo(options.fadeDuration, percentage_complete >= options.threshold ? opacity : 0);
                    }

                    // set the correct copy if under or over the max number of characters
                    if (char_diff >= 0) {
                        if ($el.is('.' + options.maxClassName))
                            $el.html(options.positiveCopy.replace('{n}', '<span class="num"></span>'));
                    } else {
                        if (!$el.is('.' + options.maxClassName))
                            $el.html(options.negativeCopy.replace('{n}', '<span class="num"></span>'));
                    }

                    // add or remove the max class name
                    $el[(char_diff < 0 ? 'add' : 'remove') + 'Class'](options.maxClassName);

                    // set the number of characters left or number of characters over the limit
                    $el.find('.num').text(Math.abs(char_diff));

                    // make sure the plural is necessary or not
                    if (char_diff == -1 || char_diff == 1)
                        $el.html($el.html().replace(/characters\b/, 'character'));
                    else
                        $el.html($el.html().replace(/character\b/, 'characters'));

                    prev_char_diff = char_diff;
                };
                // run an initial check
                check();
            });
        }
    });

})(jQuery);