var Test = {};

$(document).ready(function() {

    Test.U = Backbone.Model.extend({
        url: '/ts_api/users',

        initialize: function() {
            this.timelines = {};
        }
    });

    Test.E = Backbone.Model.extend({
        url: '/ts_api/entries/jdbernard/work'
    });

    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() {
            this.$('.fullname').text(this.model.get('name'));
            this.$('.username').text(this.model.get('id'));
        }
    });

    Test.EList = Backbone.Collection.extend({
        model: Test.E,

        url: '/ts_api/entries/jdbernard/work',

        initalize: function(models, options) {
            this.user = options.user;
        },

        comparator: function(entry) {
            return entry.get('timestamp');
        }
    });

    Test.EView = Backbone.View.extend({

        model: Test.E,

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

        render: function() {
            $(this.el).html("<span class='entry-id'>" + this.model.get('id') + "<span class='mark'>" + this.model.get('mark') + "</span>");
            return this;
        }
    });

    Test.EListView = Backbone.View.extend({
        el: $("#entry-list"),
        initialize: function() {
            _.bindAll(this, 'render', 'refresh', 'addOne');

            this.collection.bind('add', this.addOne);
            this.collection.bind('refresh', this.refresh);
        },

        addOne: function(entry) {
            var view = new Test.EView({model: entry});
            $(this.el).append(view.render().el);
        },

        refresh: function() {
            $(this.el).empty();
            var thisRef = this;
            this.collection.each(function(entry) {thisRef.addOne(entry)});
        }
    });

    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();

            Test.currentEntryList = Test.currentUser.timelines['work'] = new Test.EList([], {user: Test.currentUser});
            new Test.EListView({collection: Test.currentEntryList});
            Test.currentEntryList.fetch();
        }});
}