AJS.$(document).ready(function () {
    AJS.TableExample = {};
    AJS.TableExample.table = new AJS.RestfulTable({
        autoFocus: false,
        allowDelete: false,
        allowReorder: false,
        el: jQuery("#rest-table"),
        model: AJS.RestfulTable.EntryModel.extend({
            date: function () {
                this.date();
            }
        }),
        resources: {
            all: AJS.params.baseURL + "/rest/myrestresource/1.0/message/all",
            self: AJS.params.baseURL + "/rest/myrestresource/1.0/message/self"
        },
        columns: [
            {
                id: "id",
                header: "Event id",
                allowEdit: false,
                createView: AJS.RestfulTable.CustomCreateView.extend({
                    render: function () {
                        return AJS.$('');
                    }
                }),
            },
            {
                id: "name",
                header: "Event name"
            },
            {
                id: "date",
                header: "Event date",
                createView: AJS.RestfulTable.CustomCreateView.extend({
                    render: function (self) {
                        var $field = AJS.$('<input type="date" class="text aui-date-picker" name="date" />');
                        $field.datePicker({'overrideBrowserDefault': true});

                        return $field;
                    }
                }),

                editView: AJS.RestfulTable.CustomEditView.extend({
                    render: function (self) {
                        var $field = AJS.$('<input type="date" class="text aui-date-picker" name="date">');
                        $field.datePicker({'overrideBrowserDefault': true});
                        if (!_.isUndefined(self.value)) {
                            $field.val(new Date(self.value).print("%Y-%m-%d"));
                        }

                        return $field;
                    }
                }),

                readView: AJS.RestfulTable.CustomReadView.extend({
                    render: function (self) {
                        var val = (!_.isUndefined(self.value)) ? new Date(self.value).print("%Y-%m-%d") : undefined;

                        return '<span data-field-name="date">' + (val ? val : '') + '</span>';
                    }
                })
            }
        ]
    });

    AJS.$(document).bind(AJS.RestfulTable.Events.INITIALIZED, function () {
        AJS.$("th").each(function() {
            AJS.$(this).replaceWith("<th><span>" + AJS.$(this).text() + "</th>")
        });
    });
});