$(function () {


  /////////////////
  // Initial setup.
  /////////////////

  //======================
  // Create app namespace:
  //======================
  var app = {};

  // Default objects:
  app.purchases = [];
  app.perfumesCollection;
  app.genres = ['women', 'men', 'kids'];
  app.perfumeGenres = soma.template.create(document.getElementById('perfumeGenres'));


  //==============================
  // Get the data to be displayed:
  //==============================

  $.getJSON('data/perfumes.json', function(data) {
    // Make acquired data available to templates:
    app.perfumesCollection = app.perfumeGenres.scope.perfumesCollection = data;
    // Render first template:
    app.perfumeGenres.render();
  });



  /////////////////////////////////
  // Initalize the app's templates:
  /////////////////////////////////


  //==============================================
  // Define the templates.
  // This creates templates from all DOM ids which 
  // correspond to Somajs Templates in the DOM,
  // thus enabling calling them later by name
  // without having to define them individually.
  //============================================== 
  ['perfumesGenreTitle', 'available_perfumes', 'perfumeGenres', 'detailNavbar', 'perfumeDetail', 'backToPerfume', 'cart','confirmation'].forEach(function(template) {
      return app[template] = soma.template.create(document.getElementById(template));
  });

  //=================================
  // Define a template helper.
  // Capitalize first letter of word:
  //=================================
  soma.template.helpers({
    capitalize : function ( str ) {
      if (!str) return;
      return str.charAt(0).toUpperCase() + str.slice(1);
    }
  });


  //================================================================
  // Set up genres for inital page load. This will be used to
  // filter perfumes based on which genre the user selects.
  // Define a method to get the genre of perfume (ladies, men, kids).
  // This filters the genre from the total perfumes object.
  // Then renders the template on the next screen with that genre.
  //================================================================
  app.perfumeGenres.scope.genres = ['ladies', 'men', 'kids'];
  app.perfumeGenres.scope.getGenre = function(item) {
    var title = app.perfumesGenreTitle.scope.title = item.target.getAttribute('data-title');
    var perfumeGenre = item.target.getAttribute('data-genre');
    app.perfumesGenreTitle.render();
    var whichPerfumes = app.perfumesCollection.filter(function(item) {
      return item.genre === perfumeGenre;
    })
    app.available_perfumes.scope.selectedGenre = whichPerfumes;
    //==========================================
    // Update the template for the chosen genre:
    //==========================================
    app.available_perfumes.render();
    app.available_perfumes.scope.children = $('#available_perfumes').children();
  };


  //================================================
  // Get the chosen perfume and render its template:
  //================================================
  app.available_perfumes.scope.getChosenPerfume = function(e) {
    var item = e.target.nodeName === 'LI' ? e.target : $(e.target).closest('li')[0];
    var sku = item.getAttribute('data-sku');
    var chosenPerfume = app.available_perfumes.scope.selectedGenre.filter(function(perfume) {
       return perfume.sku === sku;
    });

    //=========================
    // Update the navbar title:
    //=========================
    app.detailNavbar.scope.chosenPerfume = chosenPerfume[0];
    app.detailNavbar.scope.chosenPerfume.genreTitle = app.perfumesGenreTitle.scope.title;
    app.detailNavbar.render();

    //========================
    // Update the detail view:
    //========================
    app.perfumeDetail.scope.chosenPerfume = chosenPerfume[0];
    app.perfumeDetail.render();
  };


  //===========================================
  // Calculate how many items have been chosen.
  // This is used in the shopping cart:
  //===========================================
  app.cart.scope.purchases = app.purchases;
  app.cart.scope.disabled = true;
  app.cart.scope.getTotalItems = function() {
    if (!app.cart.scope.purchases.length) return 0;
    else return app.cart.scope.purchases.length;
  };


  //==========================
  // Render Confirmation view:
  //==========================
  app.confirmation.scope.getTotalCost = app.cart.scope.getTotalCost = function() {
    var total = 0;
    app.cart.scope.purchases.forEach(function(item) {
      total += Number(item.wholesale_price);
    });
    return total.toFixed(2);
  };    




  ///////////////////////////
  // Setup User Interactions:
  ///////////////////////////

  //======================
  // Add to Shopping Cart:
  //======================
  $('#addToCart').on('singletap', function() {
    $.UIGoToArticle('#cart');
    // Update cart with added perfume data:
    app.perfumeDetail.scope.chosenPerfume.genreTitle = app.perfumesGenreTitle.scope.title;
    // Render cart template:
    app.cart.scope.purchases.push(app.perfumeDetail.scope.chosenPerfume);
    app.cart.scope.disabled = false;
    app.cart.render();
    // Update 'Back Button' text template:
    app.backToPerfume.scope.perfumeName = app.perfumeDetail.scope.chosenPerfume.product_title;
    app.backToPerfume.render();
  });

  //====================
  // View Shopping Cart:
  //====================
  $('#shoppingCart').on('singletap', function() {
    // If shopping cart is empty, do nothing:
    if (!app.cart.scope.purchases.length) return;
    // Otherwise, go to cart view:
    $.UIGoToArticle('#cart');
  });

  //=============
  // Place Order:
  //=============
  $('#placeOrder').on('singletap', function() {
    // Go to order confirmation view:
    $.UIGoToArticle('#confirmation');
    // Create a uuid for the order:
    $('#confirmationNum').text($.Uuid());
    // Update the confirmation view template:
    app.confirmation.scope.purchases = app.cart.scope.purchases;
    app.confirmation.render();
  });

  //==============
  // Cancel Order:
  //==============
  $('#cancelOrder').on('singletap', function() {
    // Return to the main view:
    $.UIGoBackToArticle('#main');
    // Reset the shopping cart:
    app.cart.scope.purchases = [];
    app.cart.render();
  });  
});
@@ -244,135 +244,8 @@
 on;%0A
-  app.genres = %5B'women', 'men', 'kids'%5D;%0A  app.perfumeGenres = soma.template.create(document.getElementById('perfumeGenres'));%0A
 %0A%0A  
@@ -2115,16 +2115,19 @@
 kids'%5D;%0A
+  %0A
   app.pe
@@ -2336,40 +2336,322 @@
     
-app.perfumesGenreTitle.render();
+//===================================%0A    // Update the title of the next view:%0A    //===================================%0A    app.perfumesGenreTitle.render();%0A    //=============================================%0A    // Filter the data based on the user selection:%0A    //=============================================
 %0A   
@@ -2871,32 +2871,37 @@
 ================
+=====
 %0A    // Update t
@@ -2899,24 +2899,29 @@
  Update the 
+next 
 template for
@@ -2979,32 +2979,37 @@
 ================
+=====
 %0A    app.availab

Comment update.