Pager = function(pagerHolder, currentPage, sizeOfBlock, recordInPage, datasource, methodName, totalRecord) {
    this.pagerHolder = pagerHolder;
    this.currentPage = currentPage;
    this.sizeOfBlock = sizeOfBlock;
    this.recordInPage = recordInPage;
    this.datasource = datasource;
    this.totalRecord = totalRecord;
    this.CallBackMethod = eval(methodName);
}

Pager.prototype =
{
    Paging: function(pageIndex) {
        this.currentPage = pageIndex;
        var pagegingHolder = document.getElementById(this.pagerHolder);
        pagegingHolder.innerHTML = "";
        pagegingHolder.style.cssText = "clear:both;width:350px;margin:0 auto";
        var length = 0;
        if (this.datasource != null) {
            length = this.datasource.length;
        }

        if (this.totalRecord != null) {
            length = this.totalRecord;
        }

        if (length >= this.recordInPage) {
            //paging
            //tinh current block page

            var blockIndex = Math.floor(this.currentPage / this.sizeOfBlock);
            if (this.currentPage % this.sizeOfBlock == 0) {
                blockIndex -= 1;
            }
            var totalPages = Math.ceil(length / this.recordInPage);
            var startIndexOfBlock = blockIndex * this.sizeOfBlock + 1;

            //tong so block co the co,cong thuc la lay tong so record chi cho tich cua kich thuoc block va so record tren trang
            var totalBlock = Math.ceil(length / (sizeOfBlock * this.recordInPage));

            //////////////////////////////////////////////
            //tao control de di den trang dau tien
            var first = document.createElement("a");
            var instance = this;

            first.setAttribute("href", "javascript:function a2DA19a_123543659478642_r64873568433476tdsgfhdsfe6s46378264732678_a2DA19a_123543659478642_r64873568433476tdsgfhdsfe6s46378264732678a2DA19a_123543659478642_r64873568433476tdsgfhdsfe6s46378264732678(){}");
            //   prev.setAttribute("href", "javascript:instance.PreviousBlock(" + blockIndex + ")");
            var instance = this;
            Pager.prototype.RegisterPreviousBlockOnclick(first, instance, 1);

            first.appendChild(document.createTextNode("«"));
            first.style.cssText = "color: #fff;display: block;font-weight: bold;padding: 2px 10px;margin:0px 1px 0px 1px;text-decoration: none;background-color:#028cc0;float:left;";
            pagegingHolder.appendChild(first);
            pagegingHolder.appendChild(document.createTextNode(" "));
            /////////////////////////////////////////////

            //////////////////////////////////////////////
            var prev = document.createElement("a");
            var instance = this;
            if (blockIndex > 0) {
                prev.setAttribute("href", "javascript:function a2DA19a_123543659478642_r64873568433476tdsgfhdsfe6s46378264732678_a2DA19a_123543659478642_r64873568433476tdsgfhdsfe6s46378264732678a2DA19a_123543659478642_r64873568433476tdsgfhdsfe6s46378264732678(){}");
                //   prev.setAttribute("href", "javascript:instance.PreviousBlock(" + blockIndex + ")");
                var instance = this;
                Pager.prototype.RegisterPreviousBlockOnclick(prev, instance, blockIndex);
            }
            prev.appendChild(document.createTextNode("‹"));
            prev.style.cssText = "color: #fff;display: block;font-weight: bold;padding: 2px 10px;margin:0px 1px 0px 1px;text-decoration: none;background-color:#028cc0;float:left;";

            pagegingHolder.appendChild(prev);
            pagegingHolder.appendChild(document.createTextNode(" "));
            /////////////////////////////////////////////


            for (var j = startIndexOfBlock; j > 0 && j < startIndexOfBlock + this.sizeOfBlock && j <= totalPages; j++) {
                var aPaging = document.createElement("a");
                // aPaging.setAttribute("href", "javascript:instance.Paging(" + j + ")");
                aPaging.setAttribute("href", "javascript:function a2DA19a_123543659478642_r64873568433476tdsgfhdsfe6s46378264732678_a2DA19a_123543659478642_r64873568433476tdsgfhdsfe6s46378264732678a2DA19a_123543659478642_r64873568433476tdsgfhdsfe6s46378264732678(){}");
                var instance = this;
                Pager.prototype.RegisterPagingOnclick(aPaging, instance, j);


                if (j != this.currentPage) {
                    aPaging.style.cssText = "color: #fff;display: block;font-weight: bold;padding: 2px 10px;margin:0px 1px 0px 1px;text-decoration: none;background-color:#028cc0;float:left;";
                    Pager.prototype.RegisterOnMouseHover(aPaging);
                    Pager.prototype.RegisterOnMouseOut(aPaging);
                }
                else
                    aPaging.style.cssText = "color:#FFDB00;background:#008FD5;display: block;font-weight: bold;padding: 2px 10px;margin:0px 1px 0px 1px;text-decoration: none;float:left";
                aPaging.appendChild(document.createTextNode(j));
                pagegingHolder.appendChild(aPaging);
                pagegingHolder.appendChild(document.createTextNode(" "));
            }

            ////////////////////////////////////////////////
            var next = document.createElement("a");
            if (blockIndex < totalBlock - 1) {
                next.setAttribute("href", "javascript:function a2DA19a_123543659478642_r64873568433476tdsgfhdsfe6s46378264732678_a2DA19a_123543659478642_r64873568433476tdsgfhdsfe6s46378264732678a2DA19a_123543659478642_r64873568433476tdsgfhdsfe6s46378264732678(){}");
                var instance = this;
                Pager.prototype.RegisterNextBlockOnclick(next, instance, blockIndex);
                //  next.setAttribute("href", "javascript:instance.NextBlock(" + blockIndex + ")");
            }
            next.appendChild(document.createTextNode("›"));
            next.style.cssText = "color: #fff;display: block;font-weight: bold;padding: 2px 10px;margin:0px 1px 0px 1px;text-decoration: none;background-color:#028cc0;float:left;";

            pagegingHolder.appendChild(next);
            pagegingHolder.appendChild(document.createTextNode(" "));
            ////////////////////////////////////////////////

            //////////////////////////////////////////////
            //tao control de di den trang cuoi
            var last = document.createElement("a");
            var instance = this;
            last.style.cssText = "color: #fff;display: block;font-weight: bold;padding: 2px 10px;margin:0px 1px 0px 1px;text-decoration: none;background-color:#028cc0;float:left;";

            last.setAttribute("href", "javascript:function a2DA19a_123543659478642_r64873568433476tdsgfhdsfe6s46378264732678_a2DA19a_123543659478642_r64873568433476tdsgfhdsfe6s46378264732678a2DA19a_123543659478642_r64873568433476tdsgfhdsfe6s46378264732678(){}");
            //   prev.setAttribute("href", "javascript:instance.PreviousBlock(" + blockIndex + ")");
            var instance = this;
            Pager.prototype.RegisterPreviousBlockOnclick(last, instance, totalBlock);

            last.appendChild(document.createTextNode("»"));
            pagegingHolder.appendChild(last);
            pagegingHolder.appendChild(document.createTextNode(" "));
            /////////////////////////////////////////////
        }
        this.CallBackDisplayPagerContent();
    },

    CallBackDisplayPagerContent: function() {
        var instance = this;
        instance.CallBackMethod(instance);
        //  var jonStr = Sys.Serialization.JavaScriptSerializer.serialize(instance);
        // eval(instance.CallBackMethod + "(" + jonStr+")");
    },

    NextBlock: function(currentBlockIndex) {

        //  alert(currentBlockIndex);
        //   var instance = this;
        //  document.write('<a href=javascript:instance.NextBlock(' + currentBlockIndex + ') >abc </a>'); 
        var nextBlockIndex = currentBlockIndex + 1;
        this.currentPage = nextBlockIndex * this.sizeOfBlock + 1;

        if (this.totalRecord == 'undefined')
            this.Paging(this.currentPage);
        else {
            OnSearchPaging(this.currentPage, this.recordInPage);
        }
    },

    PreviousBlock: function(currentBlockIndex) {
        var nextBlockIndex = currentBlockIndex - 1;
        this.currentPage = nextBlockIndex * this.sizeOfBlock + 1;
        if (this.totalRecord == 'undefined')
            this.Paging(this.currentPage);
        else {
            OnSearchPaging(this.currentPage, this.recordInPage);
        }
    },

    GetStartOfRecord: function() {
        return this.currentPage * this.recordInPage - this.recordInPage;
    },

    GetEndOfRecord: function() {
        var endOfPosition = this.currentPage * this.recordInPage;
        if (this.datasource != null) {
            if (endOfPosition > this.datasource.length)
                endOfPosition = this.datasource.length;
        }
        else {
            if (endOfPosition > this.totalRecord)
                endOfPosition = this.totalRecord;
        }
        return endOfPosition
    },

    //Register Events
    RegisterPagingOnclick: function(element, objPaging, index) {
        element.onclick = function() {
            if (this.totalRecord == 'undefined')
                objPaging.Paging(index);
            else {
                OnSearchPaging(index, objPaging.recordInPage);
            }
        }
    },

    RegisterNextBlockOnclick: function(element, objPaging, currentBlockIndex) {
        element.onclick = function() { objPaging.NextBlock(currentBlockIndex); }
    },

    RegisterPreviousBlockOnclick: function(element, objPaging, currentBlockIndex) {
        element.onclick = function() { objPaging.PreviousBlock(currentBlockIndex); }
    },

    RegisterOnMouseHover: function(element) {
    element.onmouseover = function() { element.style.cssText = "color:#FB8F40;background:#008FD5;display: block;font-weight: bold;padding: 2px 10px;margin:0px 1px 0px 1px;text-decoration: none;float:left"; }
    },
    RegisterOnMouseOut: function(element) {
    element.onmouseout = function() { element.style.cssText = "color: #fff;display: block;font-weight: bold;padding: 2px 10px;margin:0px 1px 0px 1px;text-decoration: none;background-color:#028cc0;float:left;"; }
    }
}