// A jQuery plugin to enable text ellipsis. It puts a tooltip automatically if the text is shortened. 
// (Modified from http://yue.st/notes/code/js/ellipsis.en.html)
// 
// Usage:
//  $('#element').ellipsis();
//  The elements should be block level ('display: block' or 'display: inline-block')
//  The element has to have width set. If it's not set, it must be set as such $('#element').css("width", "70px").ellipsis();
//  This function works with both ID and class. ex) $('#element') or $('.element')
//  
// Note:
//  - It's recommended to use ID of the element since it's much faster to loop up an ID than a class.
//  - Call $('.element').ellipsis() again after element resized.

(function($) {
    $.fn.ellipsis = function () {
        var s = document.documentElement.style;
        $(this).css({ 'white-space': 'nowrap', 'overflow': 'hidden' });
        // if browser support 'text-overflow' property, just use it
        if ('textOverflow' in document.documentElement.style ||
            'OTextOverflow' in document.documentElement.style) {
            return this.each(function () {
                var e = $(this);
                e.attr('title', e.text()).css({
                    'text-overflow': 'ellipsis',
                    '-o-text-overflow': 'ellipsis',
                    'cursor': 'pointer'
                });
            });
        } else {
            return this.each(function () {
                var e = $(this);
                var origHtml = e.html();
                var origTxt = e.text();

                try {
                    // Get the css width(which is considered as max width) of this element
                    var w = e.css('width');
                    w = parseInt(w.slice(0, -2));

                    var t = $(this.cloneNode(true)).hide().css({
                        'position': 'absolute',
                        'width': 'auto',
                        'overflow': 'visible',
                        'max-width': 'inherit'
                    });
                    e.after(t);

                    var text = origHtml;
                    if (t.width() > w) {
                        while (text.length > 0 && t.width() > w) {
                            text = text.substr(0, text.length - 3);
                            t.html(text + "...");
                        }
                        e.html(t.html()).attr('title', origTxt).css('cursor', 'pointer');
                    }
                    t.remove();
                } catch (err) {
                    alert(err);
                }
            });
        }
    };

    $.fn.gridEllipsis = function() {
        var s = document.documentElement.style;
        $(this).css({ 'white-space': 'nowrap', 'overflow': 'hidden' });
        return this.each(function() {
            var e = $(this);
            var origHtml = e.html();
            
            var title = e.attr('title') === undefined ? "" : e.attr('title');
            var origTxt = $.trim(title) != '' ? $.trim(title) : e.text();

            try {
                // Get the css width(which is considered as max width) of this element
                var w = e.css('width');
                w = parseInt(w.slice(0, -2));
                var t = $(this).text(origTxt).clone().hide().css({
                    'position': 'absolute',
                    'width': 'auto',
                    'overflow': 'visible',
                    'max-width': 'inherit'
                });
                e.after(t);

                var text = origTxt;
                if (t.width() > w) {
                    while (text.length > 0 && t.width() > w) {
                        text = text.substr(0, text.length - 5);
                        t.text(text + "...");
                    }
                    e.text(t.text()).attr('title', origTxt).css('cursor', 'pointer');
                }
                t.remove();
            } catch (err) {
                alert(err);
            }
        });
    };
})(jQuery);