onload = function () {

    // Vue application
    var app = new Vue({
        el: '#app',
        data: {
            data: new wijmo.collections.CollectionView(getData(100)),
            columnsAvailable: new wijmo.collections.CollectionView(getFields()),
            columns: new wijmo.collections.CollectionView()
        },
        computed: {
            columnsArray: function () {
                var cloumns = [];
                for (var i = 0; i < this.columns.items.length; i++) {
                    cloumns.push(this.columns.items[i]);
                }
   
                return cloumns;
            }
        },
        methods: {
            // move item from columnsAvailable to columns
            addColumn: function () {
                var item = this.columnsAvailable.currentItem,
                    index = this.columns.currentPosition;
                if (item) {
                    this.columnsAvailable.remove(item);
                    this.columns.sourceCollection.splice(Math.max(0, index), 0, item);
                    this.columns.moveCurrentTo(item);
                }          
            },
            // move item from columns to columnsAvailable
            removeColumn: function () {
                var item = this.columns.currentItem,
                    index = this.columnsAvailable.currentPosition;
                if (item) {
                    this.columns.remove(item);
                    this.columnsAvailable.sourceCollection.splice(Math.max(0, index), 0, item);
                    this.columnsAvailable.moveCurrentTo(item);
                }
            },

            // move a column within the columns collection
            moveColumn: function (offset) {
                var item = this.columns.currentItem;
                if (item) {
                    var arr = this.columns.sourceCollection,
                        index = arr.indexOf(item),
                        newIndex = index + offset;
                    if (index > -1 && newIndex > -1) {
                        arr.splice(index, 1);
                        arr.splice(newIndex, 0, item);
                        this.columns.moveCurrentTo(item);
                    }
                }
                
            },   
            // (the ng-repeat directive cannot do this)
            draggedColumn:function(s) {
                var columns = new wijmo.collections.ObservableArray();
                for (var i = 0; i < s.columns.length; i++) {
                    columns.push(s.columns[i].binding);
                }
                this.columns.sourceCollection = columns;
                
            }
        },

        // watch filter and update CollectionView when it changes
        created: function () {
            for (var i = 0; i < 3; i++) {
                this.columnsAvailable.moveCurrentToFirst();
                this.addColumn();
            }
        }
    });
}

// generate some random data
function getData(count) {
    var data = [],
        countries = 'US,Germany,UK,Japan,Italy,Greece,Spain,Canada,Australia,China,Austria'.split(','),
        products = 'Widget,Gadget,Doohickey'.split(','),
        colors = 'Black,White,Red,Green,Blue'.split(','),
        dt = new Date();
    for (var i = 0; i < count; i++) {
        data.push({
            id: i,
            date: new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
            country: countries[Math.floor(Math.random() * countries.length)],
            product: products[Math.floor(Math.random() * products.length)],
            color: colors[Math.floor(Math.random() * colors.length)],
            amount: Math.random() * 10000 - 5000,
            discount: Math.random() / 4,
            active: i % 4 == 0,
        });
    }
    return data;
}

function getFields() {
    var fields = new wijmo.collections.ObservableArray();
    for (var key in getData(1)[0]) {
        fields.push(key);
    }

    return fields;
}

