var Test = {};

$(document).ready(function() {

    Test.U = Backbone.Model.extend({
        url: '/ts_api/users'
    });

    Test.UView = Backbone.View.extend({

        el: $("#user"),
        model: Test.U,

        initialize: function() {
            _.bindAll(this, 'render');
            this.model.bind('change', this.render);
            this.model.view = this;
        },

        render: function() {
            var user = this.model.get('user');
            this.$('.fullname').text(user.name);
            this.$('.username').text(user.username);
        }
    });

    Test.currentUser = new Test.U;
    Test.userView = new Test.UView({model: Test.currentUser});

    // wire the login dialog using jQuery UI
    $("#login-dialog").dialog({
        autoOpen: false,
        height: 400,
        width: 400,
        modal: true,
        buttons: { Login: function(){login()} }
    });

    $('#login-dialog').dialog('open');

});

function login() {
    // lookup the login dialog elements
    var name = $("#login-name");
    var pwd = $("#login-password");

    // call the API via AJAX
    $.ajax({
        url: "/ts_api/login",
        processData: false,
        data: JSON.stringify({username: name.val(), password: pwd.val()}),
        type: "POST",

        error: function(jqXHR, textStatus, error) {
            // assuming bad credentials (possible server error or bad request,
            // we should check that, FIXME
            var tips = $(".validate-tips");
            tips.text("Incorrect username/password combination.");
            tips.addClass("ui-state-error");
            tips.slideDown();
        },

        success: function(data, textStatus, jqXHR) {
            $("#login-dialog").dialog('close');
            Test.currentUser.set({id: name.val()}, {silent: true});
            Test.currentUser.fetch();
        }});
}