var Pager = function (ops) {

        this._ops = {

            count: ops.count || 0,

            selectedIndex: ops.selectedIndex || 1,

            size: ops.size || 0

        };

        this._element = ops.element || document.getElementsByTagName('body');

        this._init()

            ._create()

            ._initMember()

            ._createPagerBtn()

            ._initEventBind()

        this._inputValue = 1;

    };

    Pager.prototype = {

        _initId: function () {

            uuid++;

            this._pagerId = "ui-pager-" + uuid;

        },

        _init: function () {

            this._element.id = this._pagerId;

            $(this._element).addClass('ui-pager-container')

            return this;

        },

        _create: function () {

            var fragement = [], h = -1;

            fragement[++h] = "<div class=\"ui-pager-trangleBtn\">";

            fragement[++h] = "<button class=\"ui-pager-triangle-left-as\"></button>";

            fragement[++h] = "</div>";

            fragement[++h] = "<div class=\"pager-content\">";

            fragement[++h] = "</div>";

            fragement[++h] = "<div class=\"ui-pager-trangleBtn\">";

            fragement[++h] = "<button class=\"ui-pager-triangle-right-as\"></button>";

            fragement[++h] = "</div>";

            fragement[++h] = "<div class=\"ui-pager-go\">";

            fragement[++h] = "<input type=\"text\" class=\"ui-pager-go-input\" value=\"1\" />";

            fragement[++h] = "<button class=\"ui-pager-go-btn\">GO</button>";

            fragement[++h] = "</div>";

            $(this._element).append(fragement.join(''));

            return this;

        },

        _createPagerBtn: function () {

            this.$pagerElBtnGroup.empty();

            var

                fragement = [], h = -1;

            if (this._ops.count <= 5) {

                for (var i = 0; i < this._ops.count; i++) {

                    if (i + 1 == this._ops.selectedIndex)

                        fragement[++h] = "<button class=\"pager-content-btn active\" value=" + (i + 1) + ">";

                    else

                        fragement[++h] = "<button class=\"pager-content-btn\" value=" + (i + 1) + ">";

                    fragement[++h] = i + 1;

                    fragement[++h] = "</button>";

                }

                this.$pagerElBtnGroup.append(fragement.join(''));

            } else {

                for (var i = 0; i < this._ops.count; i++) {

                    if (this._ops.selectedIndex <= 4 || this._ops.selectedIndex == this._ops.count) {

                        if (i + 1 <= 4) {

                            if (i + 1 == this._ops.selectedIndex)

                                fragement[++h] = "<button class=\"pager-content-btn active\" value=" + (i + 1) + "> " + (i + 1) + "</button>";

                            else

                                fragement[++h] = "<button class=\"pager-content-btn\" value=" + (i + 1) + ">" + (i + 1) + "</button>";

                        } else if (i + 1 == this._ops.count) {

                            var m = h + 1;

                            if (i + 1 == this._ops.selectedIndex)

                                fragement[++m] = "<button class=\"pager-content-btn active\" value=" + (i + 1) + "> " + (i + 1) + "</button>";

                            else

                                fragement[++m] = "<button class=\"pager-content-btn\" value=" + (i + 1) + ">" + (i + 1) + "</button>";

                        } else {

                            fragement[h + 1] = "<button class=\"button-bald\" disabled>...</button>";

                        }

                    } else if (this._ops.selectedIndex == 1 || this._ops.selectedIndex >= this._ops.count - 3) {

                        if (i + 1 == 1) {

                            if (i + 1 == this._ops.selectedIndex)

                                fragement[++h] = "<button class=\"pager-content-btn active\" value=" + (i + 1) + "> " + (i + 1) + "</button>";

                            else

                                fragement[++h] = "<button class=\"pager-content-btn\" value=" + (i + 1) + ">" + (i + 1) + "</button>";

                        } else if (i + 1 >= this._ops.count - 3) {

                            var m = h + 1;

                            if (i + 1 == this._ops.selectedIndex)

                                fragement[++m] = "<button class=\"pager-content-btn active\" value=" + (i + 1) + "> " + (i + 1) + "</button>";

                            else

                                fragement[++m] = "<button class=\"pager-content-btn\" value=" + (i + 1) + ">" + (i + 1) + "</button>";

                            h = m;

                        } else {

                            fragement[h + 1] = "<button class=\"button-bald\" disabled>...</button>";

                        }

                    } else if (this._ops.selectedIndex > 4 && this._ops.selectedIndex < this._ops.count - 3) {

                        if (i + 1 == 1) {

                            if (i + 1 == this._ops.selectedIndex)

                                fragement[++h] = "<button class=\"pager-content-btn active\" value=" + (i + 1) + "> " + (i + 1) + "</button>";

                            else

                                fragement[++h] = "<button class=\"pager-content-btn\" value=" + (i + 1) + "> " + (i + 1) + "</button>";

                        } else if (i + 1 == this._ops.selectedIndex - 1 || i + 1 == this._ops.selectedIndex || i + 1 == this._ops.selectedIndex + 1) {

                            var m = h + 1;

                            if (i + 1 == this._ops.selectedIndex)

                                fragement[++m] = "<button class=\"pager-content-btn active\" value=" + (i + 1) + "> " + (i + 1) + "</button>";

                            else

                                fragement[++m] = "<button class=\"pager-content-btn\" value=" + (i + 1) + "> " + (i + 1) + "</button>";

                            h = m;

                        } else if (i + 1 == this._ops.count) {

                            var m = h + 1;

                            if (i + 1 == this._ops.selectedIndex)

                                fragement[++m] = "<button class=\"pager-content-btn active\" value=" + (i + 1) + "> " + (i + 1) + "</button>";

                            else

                                fragement[++m] = "<button class=\"pager-content-btn\" value=" + (i + 1) + "> " + (i + 1) + "</button>";

                            h = m;

                        } else {

                            fragement[h + 1] = "<button class=\"button-bald\" disabled>...</button>";

                        }

                    }

                }

                this.$pagerElBtnGroup.append(fragement.join(''));

            }

            return this;

        },

        _initMember: function () {

            this.$leftBtn = $("#" + this._pagerId + " .ui-pager-triangle-left-as");

            this.$rightBtn = $("#" + this._pagerId + " .ui-pager-triangle-right-as");

            this.$goBtn = $("#" + this._pagerId + " .ui-pager-go-btn");

            this.$pagerElBtnGroup = $("#" + this._pagerId + " .pager-content");

            this.$input = $("#" + this._pagerId + " .ui-pager-go-input");

            return this;

        },

        _initEventBind() {

            this.$leftBtn.on('click', this._leftBtnClick.bind(this));

            this.$rightBtn.on('click', this._rightBtnClick.bind(this));

            this.$goBtn.on('click', this._goBtnClick.bind(this));

            this.$pagerElBtnGroup.on('click', this._pageBtnClick.bind(this));

        },

        _leftBtnClick: function () {

            if (this._ops.selectedIndex != 1)

                this._ops.selectedIndex -= 1;

            else

                return;

            this._setSelectIndex(this._ops.selectedIndex);

        },

        _rightBtnClick: function () {

            if (this._ops.selectedIndex != this._ops.count)

                this._ops.selectedIndex += 1;

            else

                return;

            this._setSelectIndex(this._ops.selectedIndex);

        },

        _pageBtnClick: function (e) {

            var

                selectedIndex = parseInt(e.target.value);

            this._setSelectIndex(selectedIndex);

        },

        _goBtnClick: function () {

            var value = this.$input.val();

            if (value == '') throw new Error('Value i error.');

            var targetIndex = parseInt(value);

            this._setSelectIndex(targetIndex);

        },

        _setSelectIndex: function (index) {

            var selectedIndex = index || 1;

            var $element = $(this._element);

            $$.trigger("selectedPageChanged", $element, $$.Event({

                element: $element,

                oldValue: null,

                newValue: selectedIndex

            }));

            this._ops.selectedIndex = selectedIndex;

            this._createPagerBtn();

        },

import ReactWidget from '../react-widget';

class Pager extends ReactWidget {

    constructor(props) {

        super(props);

    }

    componentWillReceiveProps(newProps) {

        //this.element.setOptions({

        //    items: newProps.items,

        //    selectedIndex: newProps.selectedIndex

        //});

    }

    componentDidMount() {

        this.element = new aui.Pager({

            element: ReactDOM.findDOMNode(this),

            size: this.props.pageSize,

            count: this.props.pageCount,

            selectedIndex: this.props.selectedPage

        });

        $(ReactDOM.findDOMNode(this)).on('selectedPageChanged', this.props.selectedPageChanged.bind(this));

    }

    render() {

        return <div>

        </div>

    }

}

window.$$.Pager = Pager;

.ui-pager-container {

    .ui-pager-trangleBtn {

        display: inline-block;

        margin: 0 10px;

        & > button {

            padding: 5px;

            border-radius: 10px;

        }

        .ui-pager-triangle-left-as {

            &::before {

                content: '\25C4'

            }

        }

        .ui-pager-triangle-right-as {

            &::before {

                content: '\25BA'

            }

        }

    }

    .pager-content {

        display: inline-block;

        & > button {

            padding: 5px 8px;

            margin: 0 5px;

        }

        .button-bald {

            border: 0;

            background: 0 0;

        }

        .active {

            background: #9D9D9D;

            color: #fff;

        }

    }

    .ui-pager-go {

        display: inline-block;

        .ui-pager-go-input {

            display: inline-block;

            width: 20px;

            padding: 5px;

        }

        .ui-pager-go-btn {

            margin: 0 10px;

            padding: 5px;

        }

    }

}