Pager = function(parent, total, itemsPerPage, onclick) {
    this.parent = $(parent);
    this.total = total;
    this.itemsPerPage = itemsPerPage;
    this.click = onclick;
}

Pager.prototype = {
    _templates: {
        Prompt: "<span>{PagerPromptText}</span>",
        PaginationContainer: "<ul class=\"pagination\">{Items}</ul>",
        PreviousItem: "<li class=\"previous\"><a href=\"#\" page=\"{Page}\">&laquo; {PagerPrevious}</a>",
        PreviousItemDisabled: "<li class=\"previous-off\">&laquo; {PagerPrevious}</li>",
        ActiveItem: "<li class=\"active\">{Page}</li>",
        Item: "<li><a href=\"#\" page=\"{Page}\">{Page}</a></li>",
        NextItem: "<li class=\"next\"><a href=\"#\" page=\"{Page}\">{PagerNext} &raquo;</a></li>",
        NextItemDisabled: "<li class=\"next-off\">{PagerNext} &raquo;</li>"
    },

    _click: function(element, context) {
        var page = ~~$(element).attr("page");
        if (typeof (context.click) == "function") {
            context.click({ PageNumber: --page, sender: context });
        }

        return false;
    },

    Render: function(activePage) {
        // render pager here
        var pagesCount = this.total / this.itemsPerPage;
        var result = [];

        // previous
        result[result.length] = activePage > 0 ?
            this._templates.PreviousItem.template({ Page: activePage, PagerPrevious: Localization.PagerPrevious }) :
            this._templates.PreviousItemDisabled.template({ PagerPrevious: Localization.PagerPrevious });

        // pages
        for (var i = 0; i < pagesCount; i++) {
            result[result.length] =
                (activePage == i ? this._templates.ActiveItem : this._templates.Item).template({ Page: i + 1 });
        }

        // next
        result[result.length] = activePage < pagesCount - 1 ?
            this._templates.NextItem.template({ Page: activePage + 2, PagerNext: Localization.PagerNext }) :
            this._templates.NextItemDisabled.template({ PagerNext: Localization.PagerNext });

        // put everything into parent container
        var html = this.parent.html(
                        [this._templates.Prompt.template({ PagerPromptText: Localization.PagerPromptText }),
                         this._templates.PaginationContainer.template({ Items: result.join("") })].join(""));

        // reference to context object (needed to have access to external "click" handler)
        var that = this;

        // add click event to "a" elements                         
        html.find("a").bind("click", function(event) { event.preventDefault(); return that._click(this, that) });

        //TODO: check it - does not work
        html.find("span.bug-item-title a").hover(
            function() { $(this).animate({ backgroundColor: "#00709D", color: "#ffff9f" }, 500); },
            function() { $(this).animate({ backgroundColor: "#fff", color: "#00709D" }, 500); }
        );
    }
}