/js/recipe_app.js

(function($) {

var HHShop = {
    view: {},
    model: {},
    collection: {},
};

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

/* ALBUMS COLLECTION */
    window.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: Recipe,
        url: "recipes.json"
    });
    
    HHShop.collection.ShoppingLists = Backbone.Collection.extend({
	model: HHShop.model.ShoppingList
    });

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

    window.library = new Recipes();
    HHShop.shoppingList = new HHShop.collection.ShoppingLists();


    $(document).ready(function() {

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

	    events: {
		'click a.shoppinglist': 'shoplist'
	    },

            initialize: function() {
                _.bindAll(this, 'render', 'shoplist');
		/* The reset event calls the render method that fetches the 
		   data and allows it to be displayed.
		 */
		this.collection.bind('reset', this.render);
		//this.collectoin.bind('click', 'shoplist');
		this.router = this.options.router;
		console.log(this.router);
            },
	    
	    shoplist: function() {
		console.log('click and funcition fired')
		this.router.routes("shopping_list", true);
	    },

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

                $(this.el).html(this.template({})); // This render 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 RecipeListItemView({
                        model: recipe,
                        collection: collection
                    });
                    $recipes.append(view.render().el);
                });
                return this;

            }
        });

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

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

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

	    showRecipe: function(id) {
		/* 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 RecipeDetailView({
                    model: this.model,
                    collection: this.collection
                });
		//$("#container").append("<div id='recipedetail'></div>");
		$(this.el).append(view.render().el);
		console.log( "Get post number " + this.model.id);
		this.router.navigate("recipe/"+ this.model.id, true);

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


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

	window.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 RecipePaneView({
		    model: this.model,
		    collection: collection
		});
		$(this.el).html(view.render().el);
		return this;
	    }

	});


	window.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 RecipePaneView({
		    model: this.model,
		    collection: collection
		});

            },

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

	HHShop.view.ShoppingList = Backbone.View.extend({
	    el: '#details-pane',
	    template: _.template($("#shoplist-template").html()),
	    
	    initialize: function () {
		console.log('load ShoppingList');



		_.bindAll(this, 'render');
		this.collection.bind('reset', this.render);
		
		var view = new HHShop.view.ShopListItem({
		    model: this.model,
		    collection: this.collection
		})
	    },

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

	HHShop.view.ShopListItem = Backbone.View.extend({
	    template: _.template($("#shoplistitem-template").html()),
	    tag: 'li',

	    initialize: function()  {
		_.bindAll(this, 'render');
	    }, 
	    
	    render: function() {
		$(this.el).html("<p>All your base</p>");
		console.log("ShoppingList");
	    }
	});
	


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

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

	    initialize: function () {
		/* Should instaiate the root level view.
		   
		*/
		this.recipeLibraryView = new RecipeLibraryView({
		    router: this,
		    collection: window.library
		});
		this.shoppingListView = new HHShop.view.ShoppingList({
		    router: this,
		    collection: HHShop.shoppingList
		});
	    },

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

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

        // Kick off the application
        window.App = new HHShop.recipesRouter();
        Backbone.history.start();
    });

})(jQuery);