window.Wine = Backbone.Model.extend();

//Models

window.WineCollection = Backbone.Collection.extend({
    model: Wine,
    url: "../api/wines"
    });
// Views
window.WineListView = Backbone.View.extend({

    tagName: 'ul',

    intitialize:function() {
        this.model.bind("reset". this.render, this);
    },

    render:function (eventName) {
        _.each(this.model.models, function (wine) {
            $(this.el).append(new WineListItemView({model:wine}).render().el);
        }, this);
        return this;
    }

});

window.WineListItemView = Backbone.View.extend({

    tagName: 'li',

    template:_.template($('#tpl-wine-details').html()),

    render:function (eventName) {
        $(this.el).html(thos.template(this.model.toJSON()));
        return this;
    }
});

window.WineView = Backbone.View.extend({

    template:_.template($('#tpl-wine-details').html()),

    render:function(eventName) {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;

    }

});

//Router
var AppRouter = Backbone.Router.extend({

    routes:{
        "":"list",
        "wines/:id":"WineDetails"
    },

    list:function () {
        this.wineList = new WineCollection();
        this.WineListView = new WineListView({model:this.wineList});
        this.wineList.fetch();
        $('#sidebar').html(this.wineListView.render().el);

    },



    wineDetails: function (id) {
        this.wine = this.wineList.get(id);
        this.wineView = new WineView({model:this.wine});
        $('#content').html(this.wineView.render().el);
    }
});

var app = new AppRouter();
Backbone.history.start();