$(document).foundation();

// How many chars at most for the description.
var maxcharsdescriptionfield = 100;

// Grid if images.
var vidholder = new Vue({
    el: '#vidholder-0',
    data: {
        Videos: {
            Rows: [
                /*{
                    Columns: [
                        {
                            "title": "0",
                            "description": "",
                            "yTVideoID": "",
                            "thumbnailURL": "",
                            "uploaded": "",
                            "yTChannelID": ""
                        }
                    ]
                }*/
            ]
        }
    },
    methods: {
        // Get new videos from the web api.
        retrieve: function (event) {
            // Wipe out all old entries.
            this.Videos.Rows = [];
            
            axios.get('/api/Videos')
                .then(function (response) {
                    // Dimension counters and limits.
                    var maxcols = 4;
                    var colcounter = 0;
                    var rowcounter = 0;

                    // And fill it with all the retrieved entries.
                    response.data.forEach(function (x) {
                        // Trim description if needed.
                        if (x.description.length > maxcharsdescriptionfield) {
                            x.description = x.description.substring(0, maxcharsdescriptionfield) + " ...";
                        }

                        // Handle creation of a new row.
                        if (colcounter == 0) {
                            Vue.set(this.Videos.Rows, rowcounter, []);
                            Vue.set(this.Videos.Rows[rowcounter], 'Columns', []);
                        }

                        // Add it to our array
                        this.Videos.Rows[rowcounter].Columns.push(x);

                        // So we get it all in groups of maxcols.
                        colcounter = colcounter + 1;
                        if (colcounter == maxcols) {
                            colcounter = 0;
                            rowcounter = rowcounter + 1;
                        }
                    }.bind(this));
                }.bind(this))
                .catch(function (error) {
                    console.log(error);
                });
        }
    }
});

window.addEventListener('load', function () {
    vidholder.retrieve();
});