$.fn.pager = function(clas, options) {

    var settings = {
        navId: 'paging_nav',
        navClass: 'nav',
        navAttach: 'append',
        highlightClass: 'highlight',
        prevText: '«',
        nextText: '»',
        linkText: null,
        linkWrap: null,
        height: null,
        articleId: 0,
        siteId: 1,
        userId: null,
        siteName: 'sweetlife'
    }
    if (options) $.extend(settings, options);


    return this.each(function() {

        var me = $(this);
        var size;
        var i = 0;
        var navid = '#' + settings.navId;
        var rangeSize = 3;
        var currentRange = 0;
        var initDone = false;

        function getCommentPage(params, pageNumber) {

            $.ajax({
                type: "POST",
                url: "/CommentViewService.asmx/GetCommentsByArticleId",
                data: "{'pageNumber':'" + pageNumber + "', 'articleId':'" + params.articleId + "', 'siteId':'" + params.siteId + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    displayCommentPage(msg);

                }
            });

        }

        function displayCommentPage(msg) {
            if (msg.d.length > 0) {
                if (!initDone) {
                    $(me).append("<div id='template_content'></div>");
                }

                $('#template_content').setTemplateURL('/js/comment_template.aspx', null, { filter_data: false });
                $('#template_content').setParam('s', settings)
                $('#template_content').processTemplate(msg);

                if (!initDone) {
                    size = msg.d[0].TotalPages;
                    init();
                }
            }
        }

        function init() {
            if (settings.height == null) {
                settings.height = getHighest();
            }
            if (size > 1) {
                makeNav();
                rangeChange();
                highlight();
            }
            sizePanel();
            if (settings.linkWrap != null) {
                linkWrap();
            }


            $(me).find(navid).find("a").click(function() {

                if ($(this).attr('rel') == 'next') {
                    if (i + 1 < size) {
                        i = i + 1;
                    }
                } else if ($(this).attr('rel') == 'prev') {
                    if (i > 0) {
                        i = i - 1;
                    }
                } else {
                    var j = $(this).attr('rel');
                    i = j - 1;
                }
                rangeChange();
                getCommentPage(settings, i + 1);
                highlight();
                return false;
            });

            initDone = true;
        }
        function makeNav() {
            var str = '<div class="results_number"><div id="' + settings.navId + '" class="' + settings.navClass + '">';
            str += '<a id="prevPage" href="#" rel="prev">' + settings.prevText + '</a>';
            str += '<a id="firstPage" href="#" rel="1" style="display:none;">1</a>';
            str += '<a id="prevRange" class="page_range" href="#" rel="0" style="display:none;">...</a>';
            var firstRangeSize = 0;
            if (size < rangeSize) {
                firstRangeSize = size;
            }
            else {
                firstRangeSize = rangeSize;
            }
            for (var i = 0; i < firstRangeSize; i++) {
                var j = i + 1;
                str += '<a id="pg' + j + '" href="#" rel="' + j + '">';
                str += (settings.linkText == null) ? j : settings.linkText[j - 1];
                str += '</a>';
            }
            str += '<a id="nextRange" class="page_range" href="#" rel="' + (j + 1) + '" style="display:none;">...</a>';
            str += '<a id="lastPage" href="#" rel="' + size + '" style="display:none;">' + size + '</a>';
            str += '<a id="nextPage" href="#" rel="next">' + settings.nextText + '</a>';

            str += '</div></div>';
            switch (settings.navAttach) {
                case 'before':
                    $(me).before(str);
                    break;
                case 'after':
                    $(me).after(str);
                    break;
                case 'prepend':
                    $(me).prepend(str);
                    break;
                default:
                    $(me).append(str);
                    break;
            }

            if (size > rangeSize) {
                $('#nextRange').attr('style', 'display:inline;');
            }
        }
       
        function highlight() {
            $(me).find(navid).find('a').removeClass(settings.highlightClass);
            var show = $(me).find(navid).find('a').not('.page_range').not('#firstPage').not('#lastPage').get(i % rangeSize + 1);
            $(show).addClass(settings.highlightClass);
            if (i == 0) {
                $('#prevPage').attr('style', 'display:none;');
            } else {
                $('#prevPage').attr('style', 'display:inline;');
            }

            if (i == (size - 1)) {
                $('#nextPage').attr('style', 'display:none;');
            } else {
                $('#nextPage').attr('style', 'display:inline;');
            }
        }



        function rangeChange() {
            var newRange = Math.ceil((i + 1) / rangeSize) - 1;
            currentRange = newRange;

            //check if there is a next range
            if (((currentRange + 1) * rangeSize) >= size) {
                $('#nextRange').attr('style', 'display:none;');
                $('#lastPage').attr('style', 'display:none;');
            }
            else {
                $('#nextRange').attr('style', 'display:inline;');
                $('#nextRange').attr('rel', (rangeSize * (currentRange + 1) + 1));
                $('#lastPage').attr('style', 'display:inline;');
            }




            //check if there is a prev range
            if (currentRange != 0) {
                $('#prevRange').attr('style', 'display:inline;');
                $('#prevRange').attr('rel', (currentRange - 1) * rangeSize + rangeSize);
                $('#firstPage').attr('style', 'display:inline;');
            }
            else {
                $('#prevRange').attr('style', 'display:none;');
                $('#firstPage').attr('style', 'display:none;');
            }

            //change page numbers
            for (var a = 0; a < rangeSize; a++) {
                var page = $(me).find(navid).find('a').not('.page_range').not('#firstPage').not('#lastPage').get(a + 1);
                var pageNumber = rangeSize * currentRange + a + 1;
                if (pageNumber > size) {
                    $(page).attr("style", 'display:none;');
                }
                else {
                    $(page).attr("style", 'display:inline;');
                    $(page).attr("rel", pageNumber);
                    $(page).text(pageNumber);
                }
            }



        }
        function sizePanel() {
            if ($.browser.msie) {
                $(me).find(clas).not(navid).css({
                    height: settings.height
                });
            } else {
                $(me).find(clas).not(navid).css({
                    minHeight: settings.height
                });
            }
        }
        function getHighest() {
            var highest = 0;
            $(me).find(clas).not(navid).each(function() {

                if (this.offsetHeight > highest) {
                    highest = this.offsetHeight;
                }
            });
            highest = highest + "px";
            return highest;
        }
        function getNavHeight() {
            var nav = $(navid).get(0);
            return nav.offsetHeight;
        }
        function linkWrap() {
            $(me).find(navid).find("a").wrap(settings.linkWrap);
        }

        getCommentPage(settings, 1);



    });
}