function setMenu(menuItem) {
    $('li').removeClass('active');
    $(menuItem).addClass('active');
}
$(function () {
    var UserModel = Backbone.Model.extend({
        defaults: {
            userId: null,
            login: "",
            password: "",
            master: null,
            client: null,
            phoneNumbers: [],
            roles: [{"roleId": 2, "roleName": "manager"}]
        },
        url: function () {
            return "rest/users/" + (this.id ? this.id : '');
        }
    });
    var UsersCollection = Backbone.Collection.extend({
        model: UserModel,
        url: "rest/users/findByRole/manager",
        getUser: function (userId) { // check user
            var findResult = this.find(function (user) {
                if (user.get("userId") == userId) {
                    return user;
                }
                return null;
            });
            return findResult;
        }

    });
    var users = new UsersCollection();
    var UsersView = Backbone.View.extend({
        el: $('.content'),
        template: _.template($('#users').html()),
        initialize: function () {
            this.render();
        },
        render: function () {
            setMenu('.users');
            users.fetch({async: false});
            var models = {"users": users.toJSON()};
            this.$el.html(this.template(models));
            users.each(function (user) {
                $('#table-body').append(
                        '<tr>' +
                        '<td>' + user.get('userId') + '</td>' +
                        '<td>' + user.get('login') + '</td>' +
                        '<td>' + user.get('password') + '</td>' +
                        '<td><a href="#editUser/' + user.get('userId') +
                        '">Edit</a> / <a href="#deleteUser/' + user.get('userId') +
                        '">Delete</a></td>' +
                        '</tr>'
                        )
            });
        }
    });

    var AddUserView = Backbone.View.extend({
        el: $('.content'),
        events: {
            'click #addSbmt': 'submitForm'
        },
        template: _.template($('#addUser').html()),
        initialize: function () {
            this.render();
        },
        render: function () {
            setMenu('.addUser');
            this.$el.html(this.template({}));
        },
        submitForm: function () {
            var user = new UserModel();
            user.set('login', $('#login').val());
            user.set('password', $('#password').val());
            user.save();
            window.location.hash = 'users';
            return;
        }
    });


    var EditUserView = Backbone.View.extend({
        el: $('.content'),
        events: {
            'click #updateSbmt': 'submitForm'
        },
        template: _.template($('#editUser').html()),
        initialize: function (options) {
            this.user = new UserModel();
            this.user.set('id', options.id);
            this.user.fetch({async: false});
            this.render();
        },
        render: function () {
            var model = {'user': this.user.toJSON()};
            this.$el.html(this.template({}));
            $('#userId').val(model.user.userId);
            $('#login').val(model.user.login);
            $('#password').val(model.user.password);
        },
        submitForm: function () {
            var user = new UserModel();
            user.set('id', "");
            user.set('userId', parseInt($('#userId').val()));
            user.set('login', $('#login').val());
            user.set('password', $('#password').val());
            user.save();
            window.location.hash = 'users';
        }
    });


    var MainRouter = Backbone.Router.extend({
        routes: {
            "": "users",
            "users": "users",
            "addUser": "addUser",
            "editUser/:id": "editUser",
            "deleteUser/:id": "deleteUser"
        },
        initialize: function () {
            Backbone.history.start();
        },
        users: function () {
            new UsersView();
        },
        addUser: function () {
            new AddUserView();
        },
        editUser: function (id) {
            new EditUserView({id: id});
        },
        deleteUser: function (id) {
            $.ajax({
                url: 'http://localhost:8080/backbonetask/rest/users?userId=' + id,
                type: 'DELETE',
                success: function (result) {
                    window.location.hash = 'users';
                }
            });
        }
    });
    var mainRouter = new MainRouter();
});