<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MegaList - Table List Example</title>
    <link href="../src/vendor/perfect-scrollbar/css/perfect-scrollbar.css" media="all" rel="stylesheet" />

    <script type="text/javascript" src="../src/vendor/perfect-scrollbar/js/perfect-scrollbar.js"></script>
    <script type="text/javascript" src="../src/vendor/jquery-2.2.4.js"></script>
    <script type="text/javascript" src="../src/megalist.js"></script>
    <script type="text/javascript" src="./fixture.js"></script>

    <style>
        #exampleContainer {
            position: relative;
            width: 320px;
            height: 320px;
            border: 1px solid red;
        }
        .item {
            width: 320px;
            height: 24px;
            text-align: center;
        }
        table {
            width: 320px;
        }
        table td {
            width: 30%;
        }
        .container .highlight-0 {background: #CCC}
        .container .highlight-1 {background: #FFF}
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            // initialise
            var megaList = new MegaList($('#exampleContainer'), {
                itemWidth: 320,
                itemHeight: 24,
                appendTo: 'table',
                renderAdapter: new MegaList.RENDER_ADAPTERS.Table(),
                itemRenderFunction: function(id) {
                    // lets add some random (not really visible...) DOM elements so that the document's DOM Tree
                    // would get epicly big!
                    var domFloodStr = '';
                    for (var i = 0; i<20; i++) {
                        domFloodStr += '<strong>&nbsp;</strong>';
                    }
                    var imageNum = id % 20;
                    return $(
                            '<tr class="item highlight-' + (id % 2) + '" data-id="' + id + '">' +
                                '<td>Item #' + (id + 1) + '</td>' +
                                '<td><button class="removeItem">remove</button></td>' +
                                '<td>' + domFloodStr + '</td>' +
                            '</tr>'
                    )[0];
                },
                perfectScrollbarOptions: {
                    minScrollbarLength: 10
                }
            });


            // example only: expose the megaList object in the console, so that users can play with it in their
            // console
            window.megaList = megaList;

            // example only: add some fake data
            var fixture = new FakeDataGenerator();
            for(var i = 0; i<1000; i++) {
                var itemId = fixture.next();
                megaList.add(itemId);
            }

            // render
            megaList.initialRender();

            // add item functionality
            $('#addItemButton').bind('click', function(e) {
                var itemId = fixture.next();
                megaList.add(itemId);
            });

            // remove item, using delegate (so that we can save on creating tons of anonymous functions/callbacks)
            $('#exampleContainer').delegate('button.removeItem', 'click', function() {
                var $renderedItemDomNode = $(this).parent().parent();
                megaList.remove($renderedItemDomNode.data('id'));
            });



        });
    </script>
</head>
<body>
    <button id="addItemButton">Add</button>
    <div class="container" id="exampleContainer">
        <table cellpadding="0" cellspacing="0"></table>
    </div>
</body>
</html>
