/** @jsx React.DOM */

var PaginationBoxView = React.createClass({
    getInitialState: function() {
        return {selected: 0};
    },
    handlePageSelected: function(index) {
        this.setState({selected: index});
        return false;
    },
    handlePreviousPage: function() {
        if (this.state.selected > 0) {
            this.handlePageSelected(this.state.selected - 1);
        }
        return false;
    },
    handleNextPage: function() {
        if (this.state.selected < this.props.pageNum - 1) {
            this.handlePageSelected(this.state.selected + 1);
        }
        return false;
    },
    render: function() {
        return (
            <div className="pagination">
                <li onClick={this.handlePreviousPage}>
                    <a href="">{this.props.previousLabel}</a>
                </li>

                <PaginationListView
                    onPageSelected={this.handlePageSelected}
                    selected={this.state.selected}
                    pageNum={this.props.pageNum}
                    pageRangeDisplayed={this.props.pageRangeDisplayed}
                    marginPagesDisplayed={this.props.marginPagesDisplayed}
                    breakLabel = {this.props.breakLabel} />

                <li onClick={this.handleNextPage}>
                    <a href="">{this.props.nextLabel}</a>
                </li>
            </div>
        );
    }
});

var PaginationListView = React.createClass({
    render: function() {
        if (this.props.pageNum <= this.props.pageRangeDisplayed) {
            items = _.range(1, this.props.pageNum + 1).map(function(page, index) {
                return (
                    <PageView
                        onClick={this.props.onPageSelected.bind(null, index)}
                        selected={this.props.selected === index}
                        key={index}>
                        {page}
                    </PageView>
                )
            }.bind(this));
        } else {
            var leftSide = (this.props.pageRangeDisplayed/2),
                rightSide = (this.props.pageRangeDisplayed - leftSide);

            if (this.props.selected > this.props.pageNum - this.props.pageRangeDisplayed/2) {
                rightSide = this.props.pageNum - this.props.selected;
                leftSide = this.props.pageRangeDisplayed - rightSide;
            }
            else if (this.props.selected < this.props.pageRangeDisplayed/2) {
                leftSide = this.props.selected;
                rightSide = this.props.pageRangeDisplayed - leftSide;
            }

            var items = [],
                breaks = [];

            _.range(1, this.props.pageNum + 1).map(function(page, index) {
                var pageView = (
                    <PageView
                        onClick={this.props.onPageSelected.bind(null, index)}
                        selected={this.props.selected === index}
                        key={index}>
                        {page}
                        </PageView>
                );

                if (page <= this.props.pageRangeDisplayed) {
                    items.push(pageView);
                }
                else if (page > this.props.pageNum - this.props.marginPagesDisplayed) {
                    items.push(pageView);
                }
                else if ((page >= this.props.selected - leftSide) && (page <= this.props.selected + rightSide)) {
                    items.push(pageView);
                }
                else if (items[-1]) {
                    items.push(null);
                }
                else {
                    items.push(null);
                    breaks.push(page);
                }
            }.bind(this));
        }

        if (typeof(breaks) !== "undefined") {
            items.splice(breaks[0], 0, this.props.breakLabel);
            items.splice(breaks[breaks.length - 1], 0, this.props.breakLabel);
        }

        return (
            <ul className="pages">
                {items}
            </ul>
        );
    }
});

var PageView = React.createClass({
    render: function() {
        if (this.props.selected) {
            var cssClass = 'selected';
        }
        return this.transferPropsTo(
            <li className={cssClass}>
                <a href="">{this.props.children}</a>
            </li>
        );
    }
});

var PAGE_NUM = 10,
    MARGIN_PAGES_DISPLAYED = 2,
    PAGE_RANGE_DISPLAYED = 3,
    PREVIOUS_LABEL = "Previous",
    NEXT_LABEL = "Next",
    BREAK_LABEL = "...";

React.renderComponent(
    <PaginationBoxView
        pageNum={PAGE_NUM}
        pageRangeDisplayed={PAGE_RANGE_DISPLAYED}
        marginPagesDisplayed={MARGIN_PAGES_DISPLAYED}
        previousLabel={PREVIOUS_LABEL}
        nextLabel={NEXT_LABEL}
        breakLabel={BREAK_LABEL} />,
    document.getElementById('react-pagination')
);

@@ -56,24 +56,290 @@
 eateClass(%7B%0A
+    getDefaultProps: function() %7B%0A        return %7B%0A            pageNum: 10,%0A            pageRangeDisplayed: 2,%0A            marginPagesDisplayed: 3,%0A            previousLabel: %22Previous%22,%0A            nextLabel: %22Next%22,%0A            breakLabel: %22...%22%0A        %7D;%0A    %7D,%0A
     getIniti
@@ -4641,452 +4641,53 @@
 );%0A%0A
-var PAGE_NUM = 10,%0A    MARGIN_PAGES_DISPLAYED = 2,%0A    PAGE_RANGE_DISPLAYED = 3,%0A    PREVIOUS_LABEL = %22Previous%22,%0A    NEXT_LABEL = %22Next%22,%0A    BREAK_LABEL = %22...%22;%0A%0AReact.renderComponent(%0A    %3CPaginationBoxView%0A        pageNum=%7BPAGE_NUM%7D%0A        pageRangeDisplayed=%7BPAGE_RANGE_DISPLAYED%7D%0A        marginPagesDisplayed=%7BMARGIN_PAGES_DISPLAYED%7D%0A        previousLabel=%7BPREVIOUS_LABEL%7D%0A        nextLabel=%7BNEXT_LABEL%7D%0A        breakLabel=%7BBREAK_LABEL%7D
+React.renderComponent(%0A    %3CPaginationBoxView
  /%3E,

Use 'getDefaultProps' on PaginationBoxView