/js/recipe_namespaced.js

var HHShop = {
    view: {},
    model: {},
    collection: {},
    start: function() {
        new HHShop.RecipesRouter();
    }
};

/* ALBUM MODEL */
HHShop.model.Recipe = Backbone.Model.extend({});


/*
  If you are binding to a Collection this.collection.bind("click", this.callback) then
  the context of the 'this' in the callback function is "collection context". 
  Using this.collection.bind("click", this.callback, this) will give it the context of
  the view.
*/

/* ALBUMS COLLECTION */
HHShop.collection.Recipes = Backbone.Collection.extend({
/* Set the url that we can later fetch the json data. 
       It is currently done on the onload event in the html.   */
    model: HHShop.model.Recipe,
    url: "recipes.json"
});

//rec = new HHShop.collection.Recipes();
//window.stuff = rec.fetch();
HHShop.library = new HHShop.collection.Recipes();



/* RecipeLibrary view is the main view for creating the list
       of recipe names.
     */
console.log("here");
HHShop.view.RecipeLibraryView = Backbone.View.extend({
    el: '#container',
    template: _.template($("#recipelist-template").html()),
    tag: 'li',
    className: 'recipelibrary',

    initialize: function() {
	console.log("inner");
        _.bindAll(this, 'render');
        this.collection.bind('reset', this.render);
	/* When the reset event occurs the callback function this.render method 
           fetches the data and allows it to be displayed.

           When you bind an event it will automatically pass the model and collection 
           to the callback function.
         */
    },

    render: function() {
        var $recipes, collection = this.collection;

        $(this.el).html(this.template({})); // This renders the View's template
/* Scopes to current element so that we can then add a new li 
           for each recipe. 
        */
        $recipes = this.$(".recipes");
        this.collection.each(function(recipe) {
/* Applies the View inside of this function and then appends
               the result. 
             */
            var view = new HHShop.view.RecipeListItemView({
                model: recipe,
                collection: collection
            });
            $recipes.append(view.render().el);
        });
        return this;

    }
});
console.log("after");

HHShop.view.RecipeListItemView = HHShop.view.RecipeLibraryView.extend({
    template: _.template($("#recipeitem-template").html()),
    tag: 'li',
    className: 'recipes',

    events: {
        'click .recipe-title': 'showRecipe'
    },

    initialize: function() {
        _.bindAll(this, 'render', 'showRecipe');
    },

    showRecipe: function() {
/* This can probably be done by creating a function that calls 
           another view as it is done above with the render method.
         */

        var view = new HHShop.view.RecipeDetailView({
            model: this.model,
            collection: this.collection
        });
        //$("#container").append("<div id='recipedetail'></div>");
        $(this.el).append(view.render().el);

        // window.library.get(id=7)
        return this;
    },


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

HHShip.view.RecipePaneView = Backbone.View.extend({
    template: _.template($("#recipepane-template").html()),
    className: 'recipepane',
    tag: 'div',

    initialize: function() {
        _.bindAll(this, 'render');
        this.collection.bind('reset', this.render);
        //this.collection.bind('click', this.render);
    },

    render: function() {
        var $details, collection = this.collection;

        var view = new HHShop.view.RecipePaneView({
            model: this.model,
            collection: collection
        });
        $(this.el).html(view.render().el);
        return this;
    }

});


HHShop.view.RecipeDetailView = Backbone.View.extend({
    template: _.template($("#recipedetail-template").html()),
    className: "detail-panel",
    tag: 'div',

    initialize: function() {
        _.bindAll(this, 'render');
        this.collection.bind('reset', this.render);
/* The 'click' event must be in the init so that when the 
           related event fires it executes the render method.
         */
        this.collection.bind('click', this.render);

        collection = this.collection;
        var view = new HHShop.view.RecipePaneView({
            model: this.model,
            collection: collection
        });

    },

    render: function() {
        $("#details-pane").empty();
        $("#details-pane").html(this.template(this.model.toJSON()));
        return this;
    }
});


/***** ROUTER ******/

HHShop.RecipesRouter = Backbone.Router.extend({
    routes: {
        '': 'home',
        'blank': 'blank',
        'recipe/:id': 'blank'
    },

    initialize: function() {
	/* Should instaiate the root level view.  */
	console.log("init Router");
        this.recipeLibraryView = new HHShop.view.RecipeLibraryView({
            collection: HHShop.library
        });
    },

    home: function() {
        $('#container').empty();
        $("#container").append(this.recipeLibraryView.render().el);
    },

    blank: function() {
        $('#container').empty();
        $('#container').append("Hello World.");
    }
});

$(document).ready(function() {
    // Kick off the application
    //window.App = new BackboneRecipes();
    Backbone.history.start({
        pushState: true
    });
});