(function(){

window.SliverView = Backbone.View.extend({
    tagName: 'li',
    className: 'sliver',

    events: {
        'click .permalink': 'navigate'
    },

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

    navigate: function(e){
        this.trigger('navigate', this.model);
        e.preventDefault();
    },

    render: function(){
        $(this.el).html(ich.sliverTemplate(this.model.toJSON()));
        return this;
    }
});


window.DetailApp = Backbone.View.extend({
    events: {
        'click .home': 'home'
    },

    home: function(e){
        this.trigger('home');
        e.preventDefault();
    },

    render: function(){
        $(this.el).html(ich.detailApp(this.model.toJSON()));
        return this;
    }
});

window.ListView = Backbone.View.extend({
    initialize: function(){
        _.bindAll(this, 'addOne', 'addAll');

        this.collection.bind('add', this.addOne);
        this.collection.bind('reset', this.addAll, this);
        this.views = [];
    },

    addAll: function(){
        this.views = [];
        this.collection.each(this.addOne);
    },

    addOne: function(sliver){
        var view = new SliverView({
            model: sliver
        });
        $(this.el).prepend(view.render().el);
        this.views.push(view);
        view.bind('all', this.rethrow, this);
    },

    rethrow: function(){
        this.trigger.apply(this, arguments);
    }

});

window.ListApp = Backbone.View.extend({
    el: "#app",

    rethrow: function(){
        this.trigger.apply(this, arguments);
    },

    render: function(){
        console.log("listApp.render");
        console.log(this.collection);
        $(this.el).html(ich.listApp({}));
        var list = new ListView({
            collection: this.collection,
            el: this.$('#slivers')
        });
        list.addAll();
        list.bind('all', this.rethrow, this);
    }
});


window.Router = Backbone.Router.extend({
    routes: {
        '': 'list',
        ':id/': 'detail'
    },

    navigate_to: function(model){
        var path = (model && model.get('id') + '/') || '';
        console.log("Router.navigate_to");
        this.navigate(path, true);
    },

    detail: function(){ console.log("Router.detail"); },

    list: function(){ console.log("Router.list"); }
});

$(function(){
    window.app = window.app || {};
    app.router = new Router();
    app.slivers = xos.slivers; //new XOSLib.slivers();
    app.list = new ListApp({
        el: $("#app"),
        collection: app.slivers
    });
    app.detail = new DetailApp({
        el: $("#app")
    });
    app.router.bind('route:list', function(){
        app.slivers.maybeFetch({
            success: _.bind(app.list.render, app.list)
        });
    });
    app.router.bind('route:detail', function(id){
        app.slivers.getOrFetch(app.slivers.urlRoot + id + '/', {
            success: function(model){
                app.detail.model = model;
                app.detail.render();
            }
        });
    });

    app.slivers.maybeFetch({
        success: _.bind(app.list.render, app.list)
    });

    app.list.bind('navigate', app.router.navigate_to, app.router);
    app.detail.bind('home', app.router.navigate_to, app.router);
    Backbone.history.start({
        pushState: true,
        silent: app.loaded
    });
});
})();